/* ==========================================================================
   云梦泽 · NewAPI theme layer  (v1)
   --------------------------------------------------------------------------
   Injected by the theme-proxy sidecar as the last stylesheet in <head>, so it
   loads after NewAPI's own bundle. Two rules keep it upgrade-safe:

     1. 95% of the work is done by overriding NewAPI's own design tokens
        (--background, --primary, --radius, ...). Those are a stable public
        surface of the shadcn/Tailwind frontend, not hashed asset internals.
     2. Structural selectors use stable hooks: data-slot="card" / "button" /
        "sidebar" / "navbar" / "logo", plus `html.ymz-auth` set by theme.js.
        If a future NewAPI release renames them, pages degrade gracefully
        (default styling) instead of breaking.

   Light = 绢本 (silk paper): warm paper ground, ink text, 石绿 mineral green,
   hairline 赭石 borders.  Dark = 夜泽 (night marsh): deep teal-black ground,
   moon-white ink, luminous 石绿/石青 accents. No hue shift alone: texture,
   serif headings, seal marks and landscape silhouettes carry the identity.

   Edit alongside theme.js / logo.svg / mountains.svg; deploy.sh hashes the
   whole directory and cache-busts the injected URL automatically.
   ========================================================================== */

/* ── 1. design tokens: light (绢本) ──────────────────────────────────────── */
:root,
html body,
html body[data-theme-preset] {
  --font-ui-sans: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'Microsoft YaHei', system-ui,
    -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-body: var(--font-ui-sans);

  --radius: 0.5rem;

  --background: oklch(0.964 0.012 92);
  --foreground: oklch(0.285 0.018 175);
  --card: oklch(0.982 0.008 95);
  --card-foreground: oklch(0.285 0.018 175);
  --popover: oklch(0.985 0.007 95);
  --popover-foreground: oklch(0.285 0.018 175);

  --primary: oklch(0.475 0.058 168);
  --primary-foreground: oklch(0.972 0.012 92);
  --secondary: oklch(0.905 0.014 180);
  --secondary-foreground: oklch(0.36 0.045 235);
  --muted: oklch(0.93 0.014 88);
  --muted-foreground: oklch(0.5 0.02 150);
  --accent: color-mix(in oklch, var(--primary) 10%, var(--background));
  --accent-foreground: oklch(0.32 0.05 168);

  --destructive: oklch(0.545 0.152 32);
  --destructive-foreground: oklch(0.982 0.008 95);
  --success: oklch(0.54 0.09 160);
  --success-foreground: oklch(0.982 0.008 95);
  --warning: oklch(0.66 0.11 78);
  --warning-foreground: oklch(0.24 0.02 70);
  --info: oklch(0.53 0.075 240);
  --info-foreground: oklch(0.982 0.008 95);
  --neutral: oklch(0.68 0.015 150);
  --neutral-foreground: oklch(0.24 0.015 165);

  --border: oklch(0.865 0.02 88);
  --input: oklch(0.875 0.018 88);
  --ring: oklch(0.475 0.058 168);

  --chart-1: oklch(0.52 0.075 168);
  --chart-2: oklch(0.52 0.07 235);
  --chart-3: oklch(0.62 0.105 78);
  --chart-4: oklch(0.58 0.12 35);
  --chart-5: oklch(0.45 0.03 200);
  --overview-accent-1: oklch(0.52 0.075 168);
  --overview-accent-2: oklch(0.52 0.07 235);
  --overview-accent-3: oklch(0.62 0.105 78);

  --sidebar: oklch(0.945 0.014 90);
  --sidebar-foreground: oklch(0.285 0.018 175);
  --sidebar-primary: oklch(0.475 0.058 168);
  --sidebar-primary-foreground: oklch(0.972 0.012 92);
  --sidebar-accent: color-mix(in oklch, var(--primary) 12%, var(--background));
  --sidebar-accent-foreground: oklch(0.34 0.05 170);
  --sidebar-border: oklch(0.88 0.018 88);
  --sidebar-ring: oklch(0.475 0.058 168);

  --skeleton-base: oklch(0.93 0.014 88);
  --skeleton-highlight: oklch(0.965 0.012 92);

  /* 云梦泽-only helpers */
  --ymz-serif: 'Songti SC', 'STSong', 'Noto Serif SC', 'Noto Serif CJK SC',
    'Source Han Serif SC', 'Source Han Serif CN', 'SimSun', 'FangSong',
    'KaiTi', Georgia, 'Times New Roman', serif;
  --ymz-ink: oklch(0.285 0.018 175);
  --ymz-jade: oklch(0.475 0.058 168);
  --ymz-azurite: oklch(0.4 0.05 235);
  --ymz-ochre: oklch(0.58 0.075 70);
  --ymz-paper: oklch(0.964 0.012 92);
  --ymz-hairline: color-mix(in oklch, var(--ymz-ink) 18%, transparent);
}

/* ── 1b. design tokens: dark (夜泽) ──────────────────────────────────────── */
html.dark,
html.dark body,
html.dark body[data-theme-preset] {
  color-scheme: dark;

  --background: oklch(0.205 0.012 195);
  --foreground: oklch(0.905 0.014 90);
  --card: oklch(0.245 0.013 195);
  --card-foreground: oklch(0.905 0.014 90);
  --popover: oklch(0.265 0.014 195);
  --popover-foreground: oklch(0.905 0.014 90);

  --primary: oklch(0.76 0.062 168);
  --primary-foreground: oklch(0.19 0.012 195);
  --secondary: oklch(0.3 0.016 195);
  --secondary-foreground: oklch(0.78 0.04 230);
  --muted: oklch(0.27 0.013 195);
  --muted-foreground: oklch(0.68 0.016 160);
  --accent: color-mix(in oklch, var(--primary) 16%, var(--background));
  --accent-foreground: oklch(0.9 0.014 90);

  --destructive: oklch(0.66 0.15 32);
  --destructive-foreground: oklch(0.19 0.012 195);
  --success: oklch(0.72 0.08 160);
  --success-foreground: oklch(0.19 0.012 195);
  --warning: oklch(0.76 0.1 80);
  --warning-foreground: oklch(0.19 0.012 195);
  --info: oklch(0.72 0.06 240);
  --info-foreground: oklch(0.19 0.012 195);
  --neutral: oklch(0.55 0.012 195);
  --neutral-foreground: oklch(0.19 0.012 195);

  --border: oklch(0.325 0.014 195);
  --input: oklch(0.335 0.014 195);
  --ring: oklch(0.76 0.062 168);

  --chart-1: oklch(0.76 0.062 168);
  --chart-2: oklch(0.72 0.06 235);
  --chart-3: oklch(0.78 0.095 82);
  --chart-4: oklch(0.7 0.13 35);
  --chart-5: oklch(0.62 0.04 200);
  --overview-accent-1: oklch(0.76 0.062 168);
  --overview-accent-2: oklch(0.72 0.06 235);
  --overview-accent-3: oklch(0.78 0.095 82);

  --sidebar: oklch(0.185 0.012 195);
  --sidebar-foreground: oklch(0.905 0.014 90);
  --sidebar-primary: oklch(0.76 0.062 168);
  --sidebar-primary-foreground: oklch(0.19 0.012 195);
  --sidebar-accent: color-mix(in oklch, var(--primary) 18%, var(--background));
  --sidebar-accent-foreground: oklch(0.9 0.014 90);
  --sidebar-border: oklch(0.315 0.014 195);
  --sidebar-ring: oklch(0.76 0.062 168);

  --skeleton-base: oklch(0.27 0.013 195);
  --skeleton-highlight: oklch(0.3 0.014 195);

  --ymz-ink: oklch(0.905 0.014 90);
  --ymz-jade: oklch(0.76 0.062 168);
  --ymz-azurite: oklch(0.72 0.06 235);
  --ymz-ochre: oklch(0.78 0.095 82);
  --ymz-paper: oklch(0.205 0.012 195);
  --ymz-hairline: color-mix(in oklch, var(--ymz-ink) 16%, transparent);
}

/* ── 2. page ground: silk / marsh texture ────────────────────────────────── */
html,
html body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

html body {
  background-image:
    radial-gradient(
      1100px 720px at 100% -8%,
      color-mix(in oklch, var(--primary) 7%, transparent),
      transparent 62%
    ),
    radial-gradient(
      900px 640px at -10% 110%,
      color-mix(in oklch, var(--ymz-azurite) 6%, transparent),
      transparent 60%
    ),
    repeating-linear-gradient(
      45deg,
      color-mix(in oklch, var(--foreground) 1.1%, transparent) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in oklch, var(--foreground) 0.8%, transparent) 0 1px,
      transparent 1px 6px
    );
  background-attachment: fixed;
}

::selection {
  background: color-mix(in oklch, var(--primary) 26%, transparent);
  color: var(--foreground);
}

/* Quiet, ink-toned scrollbars. */
* {
  scrollbar-color: color-mix(in oklch, var(--foreground) 22%, transparent)
    transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--foreground) 20%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--foreground) 32%, transparent);
  background-clip: padding-box;
}

/* ── 3. typography: serif headings, calm body ────────────────────────────── */
h1,
h2,
h3,
[data-slot='card-title'],
[data-slot='dialog-title'] {
  font-family: var(--ymz-serif);
  font-weight: 600;
  letter-spacing: 0.015em;
}

h1 {
  letter-spacing: 0.06em;
}

/* ── 4. surfaces: paper panels, hairline edges, no SaaS-card gloss ───────── */
[data-slot='card'] {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--card) 100%, transparent),
      color-mix(in oklch, var(--card) 92%, var(--background))
    ),
    none;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.25);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 10px 28px -22px color-mix(in oklch, var(--foreground) 45%, transparent);
  --tw-ring-color: transparent;
}

html.dark [data-slot='card'] {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--card) 100%, transparent),
      color-mix(in oklch, var(--card) 88%, var(--background))
    ),
    none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 16px 40px -30px black;
}

[data-slot='dialog-content'],
[data-slot='sheet-content'],
[data-slot='popover-content'],
[data-slot='dropdown-menu-content'] {
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px -28px color-mix(in oklch, black 55%, transparent);
}

/* ── 5. controls ─────────────────────────────────────────────────────────── */
[data-slot='button'] {
  border-radius: calc(var(--radius) * 0.85);
  letter-spacing: 0.02em;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
[data-slot='button']:active {
  transform: translateY(0.5px);
}
[data-slot='button']:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ring) 70%, transparent);
  outline-offset: 2px;
}

[data-slot='input'],
[data-slot='textarea'],
[data-slot='select-trigger'] {
  border-radius: calc(var(--radius) * 0.8);
  background-color: color-mix(in oklch, var(--card) 88%, var(--background));
}
[data-slot='input']:focus-visible,
[data-slot='textarea']:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent);
}

/* ── 6. shell: navbar + sidebar ──────────────────────────────────────────── */
[data-slot='navbar'] {
  background: color-mix(in oklch, var(--background) 82%, transparent);
  backdrop-filter: saturate(115%) blur(10px);
  border-bottom: 1px solid var(--ymz-hairline);
}

[data-slot='sidebar'],
[data-slot='sidebar-inner'],
[data-slot='sidebar-container'] {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--sidebar) 100%, transparent) 0%,
      color-mix(in oklch, var(--sidebar) 92%, var(--background)) 55%,
      color-mix(in oklch, var(--primary) 5%, var(--sidebar)) 100%
    ),
    none;
  border-inline-end: 1px solid var(--ymz-hairline);
}

[data-slot='sidebar-menu-button'][data-active='true'],
[data-slot='sidebar-menu-button'][aria-current='page'] {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--sidebar-accent-foreground);
  box-shadow: inset 2px 0 0 var(--primary);
  border-radius: calc(var(--radius) * 0.6);
}

/* ── 7. data display: quieter tables, warm badges ────────────────────────── */
[data-slot='table'] thead tr {
  background: color-mix(in oklch, var(--foreground) 3%, var(--background));
}
[data-slot='table'] tbody tr:hover {
  background: color-mix(in oklch, var(--primary) 5%, var(--background));
}
[data-slot='badge'] {
  letter-spacing: 0.03em;
  border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
}

/* ── 8. footer attribution (set by the Footer admin option) ─────────────── */
.ymz-footer-sep {
  opacity: 0.45;
  margin: 0 0.15rem;
}

/* ── 9. 云梦泽 scene: landscape, poem, seal (auth pages only) ─────────────── */
.ymz-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.ymz-auth .ymz-scene {
  opacity: 1;
}
.ymz-scene::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: min(60vh, 540px);
  background: url('/ymz/mountains.svg') center bottom / cover no-repeat;
  opacity: 1;
}
html.dark .ymz-scene::before {
  opacity: 0.62;
  filter: saturate(0.8) brightness(0.72);
}
html.dark .ymz-scene {
  background:
    radial-gradient(
      240px 240px at 78% 20%,
      color-mix(in oklch, #f4ecd8 16%, transparent),
      color-mix(in oklch, #f4ecd8 7%, transparent) 45%,
      transparent 70%
    );
}
html.dark .ymz-scene::after {
  background:
    radial-gradient(
      64% 50% at 50% 26%,
      color-mix(in oklch, var(--card) 40%, transparent),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--background) 20%, transparent) 0%,
      transparent 30%,
      transparent 60%,
      color-mix(in oklch, var(--background) 40%, transparent) 100%
    );
}
.ymz-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      64% 50% at 50% 26%,
      color-mix(in oklch, var(--card) 62%, transparent),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--background) 30%, transparent) 0%,
      transparent 26%,
      transparent 62%,
      color-mix(in oklch, var(--background) 48%, transparent) 100%
    );
}

/* Vertical poem line — one glyph per flex cell so it renders identically in
   every browser/font (vertical-rl stacks were unreliable across CJK fonts). */
.ymz-scene .ymz-poem {
  position: absolute;
  top: 15vh;
  right: clamp(1.1rem, 5.5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  font-family: var(--ymz-serif);
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  line-height: 1;
  color: color-mix(in oklch, var(--foreground) 38%, transparent);
  user-select: none;
}
.ymz-scene .ymz-poem span {
  display: block;
}
.ymz-scene .ymz-poem::after {
  content: '';
  display: block;
  width: 1px;
  height: 3.6em;
  margin-top: 0.55em;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--ymz-jade) 45%, transparent),
    transparent
  );
}

/* Vermilion seal, bottom right. Decorative only (aria-hidden). */
.ymz-scene .ymz-seal {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vh, 3rem);
  width: 78px;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  place-items: center;
  padding: 6px;
  border: 2px solid color-mix(in oklch, var(--ymz-ochre) 62%, transparent);
  border-radius: 9px;
  color: color-mix(in oklch, var(--ymz-ochre) 82%, var(--foreground));
  font-family: var(--ymz-serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-5deg);
  background: color-mix(in oklch, var(--card) 26%, transparent);
  backdrop-filter: blur(2px);
  user-select: none;
}
.ymz-scene .ymz-seal span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* Position the app above the scene. */
#root {
  position: relative;
  z-index: 1;
}

/* ── 10. auth pages: manuscript panel over the landscape ─────────────────── */
html.ymz-auth .container > div {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--ymz-hairline);
  border-radius: calc(var(--radius) * 2);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--card) 90%, transparent),
      color-mix(in oklch, var(--card) 74%, var(--background))
    ),
    none;
  box-shadow:
    0 34px 90px -54px color-mix(in oklch, var(--foreground) 65%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--card) 80%, transparent);
  backdrop-filter: blur(8px) saturate(104%);
}
html.ymz-auth .container > div::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in oklch, var(--ymz-hairline) 55%, transparent);
  border-radius: calc(var(--radius) * 1.55);
  pointer-events: none;
}
html.dark.ymz-auth .container > div {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--card) 86%, transparent),
      color-mix(in oklch, var(--card) 66%, var(--background))
    ),
    none;
  box-shadow:
    0 34px 90px -46px black,
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
}

/* Brand lock-up on the auth pages (logo link is the first child). */
html.ymz-auth a[href='/'] {
  padding: 0.4rem 0.75rem 0.4rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--ymz-hairline);
  background: color-mix(in oklch, var(--card) 66%, transparent);
  backdrop-filter: blur(6px);
}
html.ymz-auth a[href='/'] h1 {
  font-family: var(--ymz-serif);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-size: 1.05rem;
}
html.ymz-auth a[href='/'] img {
  box-shadow: 0 0 0 1px var(--ymz-hairline);
  width: 2rem;
  height: 2rem;
}

html.ymz-auth h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  letter-spacing: 0.14em;
}
html.ymz-auth h2::after {
  content: '';
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-top: 0.75rem;
  background: linear-gradient(
    90deg,
    var(--primary),
    color-mix(in oklch, var(--primary) 20%, transparent)
  );
}

/* Inputs read as ink on paper; focus rings stay quiet. */
html.ymz-auth [data-slot='input'],
html.ymz-auth [data-slot='textarea'] {
  background: color-mix(in oklch, var(--card) 78%, var(--background));
  border-color: color-mix(in oklch, var(--foreground) 16%, transparent);
}
html.ymz-auth [data-slot='label'],
html.ymz-auth label {
  letter-spacing: 0.04em;
}

/* Divider ("or continue with") uses hairline tone instead of grey. */
html.ymz-auth [data-slot='separator'] {
  background: color-mix(in oklch, var(--foreground) 14%, transparent);
}

/* Social / OIDC buttons and the primary submit share the 石绿 treatment. */
html.ymz-auth [data-slot='button'][type='submit'] {
  background-image: linear-gradient(
    135deg,
    color-mix(in oklch, var(--primary) 100%, transparent),
    color-mix(in oklch, var(--primary) 82%, var(--ymz-azurite))
  );
  color: var(--primary-foreground);
  box-shadow: 0 12px 26px -18px color-mix(in oklch, var(--primary) 90%, black);
}
html.ymz-auth a[href*='forgot'],
html.ymz-auth a[href*='reset'] {
  color: color-mix(in oklch, var(--primary) 82%, var(--foreground));
}

/* ── 11. motion + mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ymz-scene .ymz-poem {
    display: none;
  }
  .ymz-scene .ymz-seal {
    width: 58px;
    height: 58px;
    font-size: 12px;
  }
  .ymz-scene::before {
    height: min(48vh, 360px);
    opacity: 0.42;
  }
  html.ymz-auth .container > div {
    border-radius: calc(var(--radius) * 1.5);
    padding: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ymz-scene,
  [data-slot='button'] {
    transition: none;
  }
}