/**
 * Dong shell kit — shared look for every app on dong-xuyong.github.io.
 * Opt in with <body class="dx">. Every selector is wrapped in :where() so an
 * app's own rules always win.
 */

/* Theme: html.dark (dong-ui theme.js) or [data-theme="dark"]. With neither
   theme.js (which always sets an inline color-scheme) nor data-theme, the
   system preference decides. */
:root {
  --dx-font: "Encode Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --dx-radius: 16px;
  --dx-radius-sm: 10px;
  --dx-blur: 16px;
  --dx-gap: 12px;
  --dx-on-bg: #ffffff;

  /* Names from kit v1; some apps already use them. */
  --dx-fg: var(--dx-text);
  --dx-primary: var(--dx-accent);
  --dx-primary-fg: var(--dx-accent-fg);
  --dx-primary-soft: var(--dx-accent-soft);
  --dx-ring: var(--dx-accent);
  --dx-bg: #f6f4ef;
  --dx-text: #0d0b08;
  --dx-muted: #5c574f;
  --dx-card: hsl(0 0% 100% / 0.94);
  --dx-card-solid: #ffffff;
  --dx-border: hsl(44 14% 80%);
  --dx-accent: #1d4ed8;
  --dx-accent-fg: #ffffff;
  --dx-accent-soft: hsl(224 76% 48% / 0.12);
  --dx-header: hsl(44 22% 96% / 0.94);
  --dx-shadow: 0 8px 24px hsl(0 0% 0% / 0.08);
  --dx-overlay: linear-gradient(
    180deg,
    hsl(230 42% 6% / 0.5) 0%,
    hsl(230 36% 8% / 0.28) 20%,
    hsl(18 45% 8% / 0.22) 50%,
    hsl(230 36% 6% / 0.4) 100%
  );
}

html.dark,
:root[data-theme="dark"] {
  --dx-bg: #141414;
  --dx-text: #efeeec;
  --dx-muted: #b8b8b8;
  --dx-card: hsl(0 0% 12% / 0.94);
  --dx-card-solid: #1f1f1f;
  --dx-border: hsl(0 0% 26%);
  --dx-accent: #60a5fa;
  --dx-accent-fg: #0d0d0d;
  --dx-accent-soft: hsl(213 94% 68% / 0.16);
  --dx-header: hsl(0 0% 10% / 0.88);
  --dx-shadow: 0 8px 24px hsl(0 0% 0% / 0.35);
  --dx-overlay: linear-gradient(
    180deg,
    hsl(230 42% 3% / 0.62) 0%,
    hsl(230 36% 3% / 0.4) 22%,
    hsl(18 32% 3% / 0.32) 54%,
    hsl(230 36% 2% / 0.52) 100%
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not([style*="color-scheme"]) {
    --dx-bg: #141414;
    --dx-text: #efeeec;
    --dx-muted: #b8b8b8;
    --dx-card: hsl(0 0% 12% / 0.94);
    --dx-card-solid: #1f1f1f;
    --dx-border: hsl(0 0% 26%);
    --dx-accent: #60a5fa;
    --dx-accent-fg: #0d0d0d;
    --dx-accent-soft: hsl(213 94% 68% / 0.16);
    --dx-header: hsl(0 0% 10% / 0.88);
    --dx-shadow: 0 8px 24px hsl(0 0% 0% / 0.35);
    --dx-overlay: linear-gradient(
      180deg,
      hsl(230 42% 3% / 0.62) 0%,
      hsl(230 36% 3% / 0.4) 22%,
      hsl(18 32% 3% / 0.32) 54%,
      hsl(230 36% 2% / 0.52) 100%
    );
  }
}

/* Full-page art. Fixed pseudo-elements, not background-attachment:fixed,
   which iOS Safari ignores. Apps must not use body::before / body::after. */
:where(html:has(> body.dx)) {
  background-color: var(--dx-bg);
}

:where(body.dx) {
  font-family: var(--dx-font);
  color: var(--dx-text);
  isolation: isolate;
}

/* One class of specificity: dong-ui's body { background } would hide the art. */
body.dx {
  background: transparent;
}

:where(body.dx)::before,
:where(body.dx)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

:where(body.dx)::before {
  z-index: -2;
  background: url("../assets/art/bg.webp") center / cover no-repeat;
}

:where(body.dx)::after {
  z-index: -1;
  background: var(--dx-overlay);
}

/* Header: home button, title, optional actions (theme toggle etc.). */
:where(.dx-header) {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  padding-top: max(6px, env(safe-area-inset-top));
  background: var(--dx-header);
  border-bottom: 1px solid var(--dx-border);
  color: var(--dx-text);
  font-family: var(--dx-font);
  -webkit-backdrop-filter: blur(var(--dx-blur)) saturate(1.4);
  backdrop-filter: blur(var(--dx-blur)) saturate(1.4);
}

:where(.dx-home) {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--dx-text);
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  text-decoration: none;
}

:where(.dx-home) svg {
  width: 20px;
  height: 20px;
}

:where(.dx-title) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.dx-actions) {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.dx-header) :where(.dong-theme-toggle) {
  position: static;
}

/* Suite tabs. .suite-nav is the existing Career/Health/Study markup. */
:where(.dx-tabs, .suite-nav) {
  display: flex;
  gap: 4px;
  width: min(560px, calc(100% - 24px));
  margin: 8px auto 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-backdrop-filter: blur(var(--dx-blur));
  backdrop-filter: blur(var(--dx-blur));
}

:where(.dx-tab, .dx-tabs > a, .dx-tabs > button, .suite-nav > a) {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dx-muted);
  font: 600 0.9rem/1.1 var(--dx-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

:where(.dx-tab, .dx-tabs > *, .suite-nav > *):where([aria-current="page"], [aria-selected="true"]) {
  background: var(--dx-accent-soft);
  color: var(--dx-accent);
}

/* Cards and buttons. */
:where(.dx-card) {
  padding: var(--dx-gap);
  border-radius: var(--dx-radius);
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  box-shadow: var(--dx-shadow);
  color: var(--dx-text);
  -webkit-backdrop-filter: blur(var(--dx-blur));
  backdrop-filter: blur(var(--dx-blur));
}

:where(.dx-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--dx-radius-sm);
  background: var(--dx-accent);
  color: var(--dx-accent-fg);
  font: 600 0.9rem/1 var(--dx-font);
  text-decoration: none;
  cursor: pointer;
}

:where(.dx-btn--ghost) {
  background: var(--dx-card);
  color: var(--dx-text);
  border-color: var(--dx-border);
}

:where(.dx-muted) {
  color: var(--dx-muted);
}

/* Text placed straight on the art (outside a card). */
:where(.dx-on-bg) {
  color: var(--dx-on-bg);
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.85), 0 0 12px hsl(0 0% 0% / 0.6);
}

:where(.dx-main) {
  width: min(720px, calc(100% - 24px));
  margin: 0 auto;
  padding: var(--dx-gap) 0 calc(32px + env(safe-area-inset-bottom));
}

:where(.dx-home, .dx-btn, .dx-tab, .dx-tabs > *, .suite-nav > *):focus-visible {
  outline: 2px solid var(--dx-accent);
  outline-offset: 2px;
}

:where(.dx-home, .dx-btn):active {
  transform: scale(0.98);
}

/* One class of specificity so app or dong-ui `a { color }` rules don't
   repaint links styled as kit controls. */
:where(a).dx-btn {
  color: var(--dx-accent-fg);
  text-decoration: none;
}

:where(a).dx-btn--ghost,
:where(a).dx-home {
  color: var(--dx-text);
  text-decoration: none;
}

:where(a).dx-tab {
  color: var(--dx-muted);
  text-decoration: none;
}

.dx-tab:where([aria-current="page"], [aria-selected="true"]) {
  color: var(--dx-accent);
}