/* =============================================================================
   Thronewake Compendium — theme overrides on top of the design's own compiled
   Tailwind (app.css). Two jobs:
     1. drive light/dark from the OS instead of a .dark class (no toggle);
     2. component styles Hugo needs (callouts, search, mobile drawer).
   app.css was built with `@theme inline`, so utilities reference the BASE
   tokens (--gold, --panel, --border, …) — use those here, not --color-*.
   ============================================================================= */

/* 1. System dark mode — flip the design tokens on prefers-color-scheme.
      app.css defines these only under `.dark`, which we deliberately never add. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(16.5% .014 70);
    --foreground: oklch(90.5% .024 85);
    --panel: oklch(20.5% .014 68);
    --card: oklch(20.5% .014 68);
    --card-foreground: oklch(90.5% .024 85);
    --popover: oklch(21.5% .014 68);
    --popover-foreground: oklch(90.5% .024 85);
    --primary: oklch(78% .12 84);
    --primary-foreground: oklch(18.5% .016 70);
    --secondary: oklch(25.5% .016 68);
    --secondary-foreground: oklch(90.5% .024 85);
    --muted: oklch(25.5% .016 68);
    --muted-foreground: oklch(69% .022 82);
    --accent: oklch(29% .022 70);
    --accent-foreground: oklch(92% .03 86);
    --destructive: oklch(63% .19 32);
    --destructive-foreground: oklch(16% .014 70);
    --border: oklch(85% .05 85 / .14);
    --input: oklch(85% .05 85 / .18);
    --ring: oklch(72% .11 84);
    --gold: oklch(79% .123 85);
    --gold-soft: oklch(66% .09 84);
    --ember: oklch(68% .18 38);
    --verdant: oklch(72% .13 148);
    --stormfang: oklch(72% .07 243);
    --ancients: oklch(74% .012 85);
    --shadow-panel: 0 1px 0 oklch(85% .05 85 / .06), 0 24px 60px -32px oklch(0% 0 0 / .8);
  }
}

/* 2a. Callouts (rendered by the blockquote hook) — mirrors callout.tsx.
       Coloured via --callout so every type works despite tree-shaking. */
.callout {
  --callout: var(--gold);
  margin-block: 1.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  line-height: 1.625;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-left: 4px solid var(--callout);
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
  background-color: color-mix(in oklab, var(--callout) 10%, transparent);
}

.callout-note {
  --callout: var(--stormfang);
}

.callout-important {
  --callout: var(--gold);
}

.callout-warning {
  --callout: var(--ember);
}

.callout-tip {
  --callout: var(--verdant);
}

.callout-caution {
  --callout: var(--destructive);
}

.callout-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--callout);
}

.callout-title svg {
  flex: none;
}

.callout-body>*+* {
  margin-top: 0.5rem;
}

.callout-body> :first-child {
  margin-top: 0;
}

.callout-body> :last-child {
  margin-bottom: 0;
}

.callout-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2b. Pagefind search — size ONLY via --pagefind-ui-scale. Pagefind ties both
       the input height (64px*scale) and the search-icon position (top 23px*
       scale) to the same scale, so overriding the height decentres the icon. */
.pf-search {
  position: relative;
  width: 100%;
}

.pf-search .pagefind-ui {
  --pagefind-ui-primary: var(--gold);
  --pagefind-ui-text: var(--foreground);
  --pagefind-ui-background: var(--panel);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--muted);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: calc(var(--radius) - 2px);
  --pagefind-ui-font: var(--font-sans);
  margin: 0;
}

.pf-search .pagefind-ui__form {
  margin: 0;
}

/* text: not bold (Pagefind defaults to 700); readable placeholder (default .2) */
.pf-search .pagefind-ui__search-input {
  font-weight: 400;
  color: var(--foreground);
  background: color-mix(in oklab, var(--background) 60%, transparent);
}

.pf-search .pagefind-ui__search-input::placeholder {
  opacity: 1;
  color: var(--muted-foreground);
}

/* header search ≈ h-9 (compact); home search band stays large ≈ h-12 */
.pf-search--compact .pagefind-ui {
  --pagefind-ui-scale: 0.6;
}

.pf-search--large .pagefind-ui {
  --pagefind-ui-scale: 0.75;
}

.pf-search--large .pagefind-ui__search-input {
  box-shadow: var(--shadow-panel);
}

.pf-search mark {
  background: color-mix(in oklab, var(--gold) 30%, transparent);
  color: inherit;
}

.pf-search .pagefind-ui__result-title a {
  color: var(--foreground);
}

.pf-search .pagefind-ui__result-title a:hover,
.pf-search .pagefind-ui__result-link:hover {
  color: var(--gold);
}

/* header search: results as a dropdown panel anchored under the input */
.pf-search--compact .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(460px, 92vw);
  max-height: 72vh;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  z-index: 60;
  background: var(--panel);
  border: 1px solid color-mix(in oklab, var(--gold) 24%, var(--border));
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-panel);
}

/* 2c-i. AI-content status badge (per-page front matter `aiStatus`) — a pill
       showing how the page was written, plus a hoverable/focusable info icon
       with a tooltip explaining the state in full. Colour comes from an
       inline custom property set by the partial, so this works for any of
       the four states without per-state CSS. */
.ai-status {
  --as: var(--ancients);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
}

.ai-status[data-color="destructive"] {
  --as: var(--destructive);
}

.ai-status[data-color="gold"] {
  --as: var(--gold);
}

.ai-status[data-color="verdant"] {
  --as: var(--verdant);
}

.ai-status[data-color="ancients"] {
  --as: var(--ancients);
}

.ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.062rem 0.625rem;
  border: 1px solid color-mix(in oklab, var(--as) 35%, transparent);
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--as) 12%, transparent);
  color: var(--as);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ai-status-trigger {
  display: inline-flex;
  color: var(--as);
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.ai-status-trigger:hover,
.ai-status-trigger:focus-visible {
  opacity: 1;
}

.ai-status-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  width: 17rem;
  max-width: 80vw;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--panel);
  box-shadow: var(--shadow-panel);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ai-status-tooltip strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--as);
  font-family: var(--font-display);
  font-size: 0.875rem;
}

.ai-status-tooltip p {
  margin: 0;
  color: var(--muted-foreground);
}

.ai-status:hover .ai-status-tooltip,
.ai-status-trigger:focus-visible~.ai-status-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 2c-ii. Homepage AI-slopiness gauge (layouts/partials/slop-meter.html) —
       same data-color -> custom-property trick as .ai-status above, plus
       "ember" for the mid-warning band the badge doesn't need. data-color
       sits on an inner wrapper (not .slop-meter itself), so these target it
       as a descendant; --gauge still inherits down to the svg/text inside. */
.slop-meter [data-color] {
  --gauge: var(--destructive);
}

.slop-meter [data-color="ember"] {
  --gauge: var(--ember);
}

.slop-meter [data-color="gold"] {
  --gauge: var(--gold);
}

.slop-meter [data-color="verdant"] {
  --gauge: var(--verdant);
}

.slop-meter [data-color="destructive"] {
  --gauge: var(--destructive);
}

/* 2c. Hide scrollbars on the scrolling nav areas — Safari renders a styled
       webkit scrollbar as an always-on chunky bar that looks worse than none.
       Content still scrolls by wheel / trackpad / drag. */
.wiki-nav-scroll,
#wiki-sidebar,
.pf-search--compact .pagefind-ui__drawer {
  scrollbar-width: none;
}

.wiki-nav-scroll::-webkit-scrollbar,
#wiki-sidebar::-webkit-scrollbar,
.pf-search--compact .pagefind-ui__drawer::-webkit-scrollbar {
  display: none;
}

/* 2d. Mobile nav drawer. app.css ships a JS dialog we don't include, so the
       <aside id="wiki-sidebar"> becomes a checkbox-driven off-canvas drawer:
       a full-height left panel over a dimmed backdrop, matching the design's
       "Contents" dialog. The .drawer-head (title + × close) is mobile-only. */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-scrim {
  display: none;
}

@media (max-width: 1023px) {
  #wiki-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(330px, 86vw);
    margin: 0;
    overflow: hidden;
    /* head stays put, the nav list scrolls */
    background-color: var(--panel);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-panel);
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    z-index: 50;
    /* above the header, like the design dialog */
  }

  #wiki-sidebar .drawer-head {
    flex: none;
  }

  #wiki-sidebar .wiki-nav-scroll {
    position: static;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
  }

  #nav-toggle:checked~.app #wiki-sidebar {
    transform: none;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    /* dims everything, including the navbar */
    background: oklch(0% 0 0 / .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  #nav-toggle:checked~.app .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  #wiki-sidebar,
  .nav-scrim {
    transition: none;
  }
}