:root {

/* Border radius */
  --border-radius-small: 5px;
  --border-radius-medium: 8px;
  --border-radius-card: 12px;

  /* Shadows */
  --shadow-light-soft: 0 2px 8px rgb(0 0 0 / 8%);
  --shadow-light-strong: 0 4px 12px rgb(0 0 0 / 15%);
  --shadow-dark-soft: 0 4px 12px rgb(0 0 0 / 30%);
  --shadow-dark-strong: 0 6px 16px rgb(0 0 0 / 40%);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Transforms */
  --transform-default: translateY(-2px);

  /* Borders */
  --border-default-light-theme: 2px solid var(--color-light-theme-border);
  --border-thin-light-theme: 1px solid var(--color-light-theme-border);
  --border-default-accent-light-theme: 2px solid var(--color-light-theme-accent);
  --border-thin-accent-light-theme: 1px solid var(--color-light-theme-accent);
  --border-default-dark-theme: 2px solid var(--color-dark-theme-border);
  --border-thin-dark-theme: 1px solid var(--color-dark-theme-border);
  --border-default-accent-dark-theme: 2px solid var(--color-dark-theme-accent);
  --border-thin-accent-dark-theme: 1px solid var(--color-dark-theme-accent);

  /* Light theme - palette */
  --color-light-theme-background-default: #f8f5ed;
  --color-light-theme-background-base: #fcf3df;
  --color-light-theme-surface: #faebc9;
  --color-light-theme-sunken: #ded0b6;
  --color-light-theme-border: #b29a70;
  --color-light-theme-accent: #7b542f;
  --color-light-theme-text-default: #433226;

  /* Light theme - interactive states */
  --color-light-theme-kanji-highlighting: #b62c2c;

  /* Dark theme - palette */
  --color-dark-theme-background-default: #282a36;
  --color-dark-theme-background-base: #404258;
  --color-dark-theme-surface: #474e68;
  --color-dark-theme-sunken: #50577a;
  --color-dark-theme-border: #838cae;
  --color-dark-theme-accent: #86b6f6;
  --color-dark-theme-text-default: #dfd3c3;
  --color-dark-theme-text-muted: #b3c8cf;

  /* Dark theme - interactive states */
  --color-dark-theme-kanji-highlighting: #86b6f6;

  /* Layering / stacking */
  --z-base: 0;
  --z-controls: 100;
  --z-navigation: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-critical: 500;

  /* Component-specific aliases */
  --z-index-progress-bar: var(--z-critical);
  --z-index-floating-controls: var(--z-controls);
  --z-index-floating-controls-expanded: calc(var(--z-controls) + 1);
  --z-index-menu-overlay: var(--z-navigation);
  --z-index-menu-panel: calc(var(--z-navigation) + 1);
  --z-index-hamburger-button: calc(var(--z-navigation) + 2);
  --z-index-modal-overlay: var(--z-modal);
  --z-index-modal-overlay-stacked: calc(var(--z-index-modal-overlay) + 1);

  /*
   * Internal stacking order within the writing-kanji modal.
   * These values are relative to --z-base because they only
   * need to be ordered against each other, not against global
   * layers such as modals, navigation, or toasts.
   */
  --z-index-writing-kanji-svg-layer: calc(var(--z-base) + 1);
  --z-index-writing-kanji-canvas-layer: calc(var(--z-base) + 2);
  --z-index-writing-kanji-dots-layer: calc(var(--z-base) + 3);

  /* Typography */
  --font-family-japanese-font-stack:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", yugothic,
    "Meiryo", "MS Gothic", sans-serif;

  /* Responsive layout */
  --12px: 0.75rem;
  --13px: 0.8125rem;
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
  --22px: 1.375rem;
  --23px: 1.4375rem;
  --24px: 1.5rem;
  --25px: 1.5625rem;
  --26px: 1.625rem;
  --27px: 1.6875rem;
  --28px: 1.75rem;
  --29px: 1.8125rem;
  --30px: 1.875rem;
  --31px: 1.9375rem;
  --32px: 2rem;
  --body-font-size: var(--18px);
  --app-content-max-width: 1200px;
  --app-content-gutter: 16px;
  --landscape-safe-gutter: 0px;
  --app-content-offset-top-base: 3em;
  --app-search-stack-height: calc(
    var(--app-top-control-offset) + var(--app-top-control-size) +
      var(--top-controls-search-gap)
  );
  --app-content-offset-top: var(--app-content-offset-top-base);
  --app-content-padding-bottom: 2em;

  /*
   * One shared vertical system for the fixed top controls and search surface.
   * The search field starts after: top offset + control size + shared gap.
   */
  --app-top-control-offset: 20px;
  --app-top-control-size: 46px;
  --top-controls-search-gap: 25px;

  /*
   * One shared horizontal system.
   * Content, search field, hamburger, and right-side controls all use these.
   */
  --app-shell-inline-left: max(
    var(--app-content-gutter),
    var(--landscape-safe-gutter),
    env(safe-area-inset-left),
    calc((100vw - var(--app-content-max-width)) / 2)
  );
  --app-shell-inline-right: max(
    var(--app-content-gutter),
    var(--landscape-safe-gutter),
    env(safe-area-inset-right),
    calc((100vw - var(--app-content-max-width)) / 2)
  );

  /* Shared modal tokens */
  --modal-overlay-bg: rgb(0 0 0 / 60%);
  --modal-backdrop-blur: 4px;
  --modal-padding: 1.5em;
  --modal-border-radius: var(--border-radius-card);
  --modal-close-size: 34px;
  --modal-close-font-size: 0.9rem;
  --modal-button-color-light: #555;
  --modal-button-color-dark: var(--color-dark-theme-text-default);
}

html {
  overflow-x: hidden;
  overscroll-behavior-y: none;
  max-width: 100%;
  position: relative; /* This helps with positioning contexts */
  text-size-adjust: 100%;
}

body {
  position: relative; /* This helps with positioning contexts */
  font-family: var(--font-family-japanese-font-stack);
  font-size: var(--body-font-size);
  margin: 0;
  padding: 0;
  background-color: var(--color-light-theme-background-base);
  color: var(--color-light-theme-text-default);
  line-height: 2.2;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Use predictable sizing where width/height include padding and borders */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* dvh tracks the actual visible viewport on iOS Safari; vh over-estimates when the address bar is visible */
.main-container {
  display: flex;
  height: 100dvh;
  min-height: 0;
}

/*
 * Only app-shell pages should create their own scroll container.
 * Do not globally force body/html overflow hidden because the landing page
 * scrolls on body.
 */
.main-container > .content-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--app-content-offset-top) var(--app-shell-inline-right)
    var(--app-content-padding-bottom) var(--app-shell-inline-left);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbars but preserve scrolling */
html,
body,
.content-wrapper {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/old Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, iOS */
}

/* Dark Mode - Base */
.dark-mode {
  background-color: var(--color-dark-theme-background-default);
  color: var(--color-dark-theme-text-default);
}

/* Progress Bar */
#progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: transparent;
  z-index: var(--z-index-progress-bar);

  /*
    The backdrop-filter causes an issue which is set by modal overlays,
    So, we isolate from Safari backdrop-filter compositing
  */
  transform: translateZ(0);
}

#progress-bar {
  height: 100%;
  width: 0;
  background-color: var(--color-light-theme-accent);
  transition: width 0.25s ease-out;
}

/* Dark mode for progress bar (reading page specific) */
.dark-mode #progress-bar {
  background-color: var(--color-dark-theme-accent);
}

/* Shared visual styling for fixed/floating UI buttons. */
.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-medium);
  border: var(--border-default-light-theme);
  color: var(--color-light-theme-text-default);
  background-color: var(--color-light-theme-surface);
  box-shadow: var(--shadow-light-soft);
  transition: all var(--transition-normal);
  cursor: pointer;
  -webkit-touch-callout: none;
  appearance: none;
  user-select: none;
  touch-action: manipulation;
}

.inline-svg-host,
.inline-svg-host svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================
   Shared modal primitives
   ========================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(var(--modal-backdrop-blur));
  z-index: var(--z-index-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-panel {
  position: relative;
  background: var(--color-light-theme-surface);
  border: var(--border-default-light-theme);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--shadow-light-strong);
}

.dark-mode .modal-panel {
  background: var(--color-dark-theme-background-base);
  border: var(--border-default-dark-theme);
  box-shadow: var(--shadow-dark-strong);
}

.modal-close {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-width: var(--modal-close-size);
  min-height: var(--modal-close-size);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  font-size: var(--modal-close-font-size);
  background-color: var(--color-light-theme-surface);
  border: var(--border-default-light-theme);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  color: var(--color-light-theme-border);
  box-shadow: var(--shadow-light-soft);
  transition: all var(--transition-normal);
  appearance: none;
  -webkit-touch-callout: none;
  user-select: none;
  z-index: 1;
}

.modal-close-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.modal-close-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentcolor;
  opacity: 1;
}

.dark-mode .modal-close {
  background-color: var(--color-dark-theme-background-base);
  border: var(--border-default-dark-theme);
  color: var(--color-dark-theme-border);
  box-shadow: var(--shadow-dark-soft);
}

.modal-close:active {
  transform: var(--transform-default);
  box-shadow: var(--shadow-light-strong);
  background-color: var(--color-light-theme-sunken);
  border-color: var(--color-light-theme-border);
}

.dark-mode .modal-close:active {
  box-shadow: var(--shadow-dark-strong);
  background-color: var(--color-dark-theme-surface);
  border-color: var(--color-dark-theme-border);
}

.modal-action-btn {
  display: block;
  width: fit-content;
  padding: 0.45em 1em;
  font-size: var(--15px);
  font-family: inherit;
  color: var(--color-light-theme-accent);
  background: transparent;
  border: var(--border-thin-accent-light-theme);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dark-mode .modal-action-btn {
  border-radius: var(--border-radius-medium);
  color: var(--modal-button-color-dark);
  border: var(--border-thin-dark-theme);
}

.modal-action-btn:active {
  background: rgb(0 0 0 / 6%);
}

.dark-mode .modal-action-btn:active {
  background: rgb(255 255 255 / 8%);
}

.modal-close .mnemonic-close {
  opacity: 0.82;
}

.modal-action-btn:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--color-light-theme-accent);
  outline-offset: 2px;
}

.dark-mode .modal-action-btn:focus-visible,
.dark-mode .modal-close:focus-visible {
  outline-color: var(--color-dark-theme-accent);
}

@media (hover: hover) {
  .modal-action-btn:hover,
  .modal-close:hover {
    transform: var(--transform-default);
  }

  .modal-action-btn:hover {
    background: rgb(0 0 0 / 5%);
  }

  .dark-mode .modal-action-btn:hover {
    background: rgb(255 255 255 / 6%);
  }

  .modal-close:hover {
    border-color: var(--color-light-theme-border);
    box-shadow: var(--shadow-light-strong);
    background-color: var(--color-light-theme-sunken);
  }

  .dark-mode .modal-close:hover {
    border-color: var(--color-dark-theme-border);
    box-shadow: var(--shadow-dark-strong);
    background-color: var(--color-dark-theme-surface);
  }
}

/* ==========================================
   Responsive - only variable reassignments below
   ========================================== */

/* Mobile portrait (≤ 768px) */
@media (max-width: 768px) {
  :root {
    --app-content-gutter: 24px;
    --app-top-control-offset: 14px;
    --app-top-control-size: 43px;
    --top-controls-search-gap: 25px;
    --app-content-offset-top-base: 4em;
    --app-content-padding-bottom: 1em;
    --go-up-icon-size: 28px;
  }

  .main-container {
    flex-direction: column;
  }
}

/* Mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --app-content-gutter: 24px;
    --app-content-offset-top-base: 4em;
    --app-content-padding-bottom: 1em;
    --go-up-icon-size: 28px;
    --landscape-safe-gutter: 9vw;
  }
}

/* Tablets / Small Desktops */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --body-font-size: var(--20px);
    --app-content-gutter: 24px;
    --app-top-control-offset: 14px;
    --app-top-control-size: 46px;
    --top-controls-search-gap: 25px;
    --app-content-offset-top-base: 4em;
    --app-content-padding-bottom: 1.5em;
  }
}

/* Tablets / Small Desktops landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  :root {
    --body-font-size: var(--18px);
    --app-content-gutter: 24px;
    --app-content-offset-top-base: 3em;
    --app-content-padding-bottom: 1em;
    --landscape-safe-gutter: 9vw;
  }
}

/* iPad Pro / large tablet landscape */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
  :root {
    --app-content-gutter: 24px;
    --app-content-offset-top-base: 3em;
    --app-content-padding-bottom: 1em;
    --landscape-safe-gutter: 9vw;
  }
}

/* Desktop and larger */
@media (min-width: 1025px) {
  :root {
    --app-top-control-offset: 25px;
    --app-top-control-size: 50px;
    --top-controls-search-gap: 25px;
    --app-content-offset-top-base: 4em;
    --app-content-padding-bottom: 2em;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}