/* Shared navigation and tool appearance. Card geometry and elevation live in cards.css. */
:root {
  --neo-sun: #ffe07b;
  --neo-sun: oklch(91% .145 92);
  --neo-edge: var(--ink);
  --neo-shadow: #100c07;
  --neo-card-shadow: #181818;
  --neo-card-edge: #242424;
  --neo-feature: var(--neo-sun);
  --neo-feature-ink: #0c0805;
  --neo-dot: rgb(16 12 7 / .1);
  --neo-nav-ink: #100c07;
  --neo-read: color-mix(in srgb, var(--surface) 92%, var(--ink));
}
:root[data-mode="dark"],
:root:not([data-mode])[data-default-mode="dark"] {
  --neo-edge: #a8b8bb;
  --neo-shadow: #070c0f;
  --neo-card-shadow: #080808;
  --neo-card-edge: #b3b3b3;
  --neo-feature: #353324;
  --neo-feature-ink: #f6f5ef;
  --neo-dot: rgb(246 245 239 / .1);
  --neo-read: color-mix(in srgb, var(--surface) 88%, var(--ink));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode])[data-default-mode="auto"] {
    --neo-edge: #a8b8bb;
    --neo-shadow: #070c0f;
    --neo-card-shadow: #080808;
    --neo-card-edge: #b3b3b3;
    --neo-feature: #353324;
    --neo-feature-ink: #f6f5ef;
    --neo-dot: rgb(246 245 239 / .1);
    --neo-read: color-mix(in srgb, var(--surface) 88%, var(--ink));
  }
}
::selection { color: #100c07; background: var(--neo-selection, #ffd43b); }
.site-header, :root[data-brand="leh"] .site-header {
  border-bottom-color: var(--neo-edge);
  box-shadow: 0 1px 0 var(--neo-edge);
}
/* Independent labels, with the selected destination supplied by WordPress.
   The plate stays inside each target so a scrollable menu cannot clip its shadow. */
.site-header .pill-nav a {
  isolation: isolate;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  padding-inline: 12px;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.5;
}
.site-header .pill-nav a::before {
  content: "";
  position: absolute;
  inset: 2px 2px 4px 4px;
  z-index: -1;
  border: 2px solid #100c07;
  background: var(--neo-sun);
  box-shadow: -3px 3px 0 #100c07;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.site-header .pill-nav a:is([aria-current="page"], :focus-visible) {
  color: var(--neo-nav-ink);
}
.site-header .pill-nav a:is([aria-current="page"], :focus-visible)::before {
  opacity: 1;
}
.site-header .pill-nav a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .pill-nav a:hover { color: var(--neo-nav-ink); }
  .site-header .pill-nav a:hover::before { opacity: 1; }
}
/* Tools use the same tactile language, without changing their touch targets. */
.site-frame :is(.mode-control, .search-toggle, .mobile-nav > summary, .collection-more, .article-clips a) {
  border-radius: var(--radius-surface, 2px);
  border-color: transparent;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--neo-edge), -3px 3px 0 var(--neo-shadow);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.site-frame :is(.mode-control, .search-toggle, .mobile-nav > summary, .collection-more, .article-clips a):is(:hover, :focus-visible),
.site-frame .mobile-nav[open] > summary {
  background: var(--neo-sun);
  color: #100c07;
  box-shadow: inset 0 0 0 2px #100c07, -3px 3px 0 var(--neo-shadow);
  text-decoration: none;
}
.site-frame :is(.mode-control, .search-toggle, .mobile-nav > summary, .collection-more, .article-clips a):active {
  box-shadow: inset 0 0 0 2px #100c07, -1px 1px 0 var(--neo-shadow);
}
.mobile-nav nav, .live-search-form, .live-results {
  border-radius: var(--radius-surface, 2px);
  border-color: var(--neo-edge);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--neo-edge), -3px 3px 0 var(--neo-shadow);
}
.live-search-form:focus-within { border-color: var(--neo-edge); outline: 2px solid var(--accent); outline-offset: 3px; }
.live-results a { border-radius: 0; }
.live-results a:is(:hover, :focus-visible) { background: var(--neo-sun); color: #100c07; text-decoration: none; }
.article-read { border-radius: var(--radius-surface, 2px); box-shadow: -2px 2px 0 var(--neo-shadow); }
.article-cover img { outline: 2px solid var(--neo-edge); outline-offset: -2px; }
.article-body blockquote { border-inline-start-color: var(--neo-edge); }
.article-body a:hover, .sources a:hover { background: var(--neo-sun); color: #100c07; }