/* ======================================================================
   WINTERNET DARK PAPER MODE
   Attribute selectors deliberately outrank the page-local light styles.
   Artwork, uploaded images and the drawing canvas keep their own colours.
   ====================================================================== */
html[data-wn-theme="dark"] {
  color-scheme: dark;
  --wn-paper: #171614;
  --wn-surface: rgba(39, 38, 35, .88);
  --wn-surface-solid: #292825;
  --wn-surface-light: rgba(47, 46, 42, .82);
  --wn-ink: #f2eee7;
  --wn-muted: #b9b2a8;
  --wn-light: #302f2c;
  --wn-hairline: rgba(255, 255, 255, .15);
  --wn-accent: #f2eee7;
  --wn-accent-hover: #ffffff;
  --wn-accent-soft: rgba(255, 255, 255, .09);
  --wn-accent-ring: rgba(255, 255, 255, .24);
  --wn-blue: #f2eee7;
  --wn-blue-hover: #ffffff;
  --wn-shadow-paper: 0 2px 0 rgba(255,255,255,.045), 0 18px 48px rgba(0,0,0,.34);

  --ink: #f2eee7;
  --muted: #b9b2a8;
  --footer-link: #cbc5bc;
  --light: #302f2c;
  --hairline: rgba(255, 255, 255, .15);
  --line: rgba(255, 255, 255, .16);
  --paper: rgba(38, 37, 34, .94);
  --paper-card: rgba(43, 42, 39, .94);
  --paper-solid: #2b2a27;
  --paper-blue: rgba(255, 255, 255, .08);
  --paper-shadow: 0 2px 0 rgba(255, 255, 255, .04), 0 18px 46px rgba(0, 0, 0, .34);
  --text-color: #f2eee7;
  --secondary-text: #bbb4aa;
  --card-bg: rgba(43, 42, 39, .88);
  --border-color: rgba(255, 255, 255, .16);
  --soft-blue: rgba(255, 255, 255, .08);

  --studio-bg: rgba(37, 36, 33, .92);
  --studio-panel: rgba(43, 42, 39, .94);
  --studio-panel-2: #2b2a27;
  --studio-stage: #201f1d;
  --studio-stage-deep: #191816;
  --studio-line: rgba(255, 255, 255, .14);
  --studio-line-strong: rgba(255, 255, 255, .22);
  --studio-text: #f2eee7;
  --studio-muted: #b9b2a8;
  --studio-hover: #353431;
}

html[data-wn-theme="dark"] ::selection {
  color: #171614;
  background: #f2eee7;
}

html[data-wn-theme="dark"] :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a.button,
  a.btn,
  a.pill,
  input,
  textarea,
  select
):focus-visible {
  outline-color: #f2eee7;
}

html[data-wn-theme="dark"] body {
  color: var(--wn-ink) !important;
  background: transparent !important;
}

html[data-wn-theme="dark"] body::before {
  background-color: #171614;
  /* Keep the shared ridge, crease and paper-tooth layers from site.css.
     Only the sheet colour changes, so dark mode feels like the same folded
     paper under lower light instead of a separate flat dotted surface. */
  opacity: .32;
  filter: contrast(1.03);
}

html[data-wn-theme="dark"] :where(.global-texture-bg, .page-bg) {
  background: transparent !important;
}

/* The public nav is already near-black in both modes. Several pages use the
   light-surface token for its lettering, so pin its contrast independently. */
html[data-wn-theme="dark"] body .globalnav :where(.nav-brand, .nav-links a.current, .nav-links a[aria-current="page"], .nav-links a:hover) {
  color: #f5f5f7 !important;
}

/* Shared moon / sun control */
.globalnav .nav-icons .wn-theme-toggle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin-left: 3px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  color: rgba(245, 245, 247, .88);
  background: rgba(245, 245, 247, .08);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.globalnav .nav-icons .wn-theme-toggle:hover {
  color: #fff;
  background: rgba(245, 245, 247, .17);
  border-color: rgba(255, 255, 255, .42);
  transform: translateY(-1px);
}
.globalnav .nav-icons .wn-theme-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.globalnav .nav-icons .wn-theme-toggle svg {
  width: 19px;
  height: 19px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Purpose-built chrome uses the same theme control without inheriting the
   public navigation layout. */
.adm-theme-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: rgba(245, 245, 247, .88);
  background: rgba(245, 245, 247, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
}
.adm-theme-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-wn-theme="dark"] body :where(.slot, .adm-detail, .lock-card) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface) !important;
  border-color: var(--wn-hairline) !important;
  box-shadow: var(--wn-shadow-paper) !important;
}
html[data-wn-theme="dark"] body .lock {
  background: rgba(12, 12, 12, .58) !important;
}
html[data-wn-theme="dark"] body :where(.adm-head p, .slot-label, .adm-detail .hint, .adm-empty, .adm-tbl th, .bar-num, .lock-card p) {
  color: var(--wn-muted) !important;
}
html[data-wn-theme="dark"] body :where(.adm-tbl th, .adm-tbl td) {
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(.bar-track, .adm-av) {
  background: var(--wn-light) !important;
}
html[data-wn-theme="dark"] body .lock-card input {
  color: var(--wn-ink);
  background: rgba(255,255,255,.06);
  border-color: var(--wn-hairline);
}

/* Shared injected UI */
html[data-wn-theme="dark"] body .wn-drawer,
html[data-wn-theme="dark"] body .wn-pay-card {
  color: var(--wn-ink);
  background: rgba(38, 37, 34, .94) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(.wn-drawer__close, .wn-qty, .wn-pay-close, .wn-pay-cancel) {
  color: var(--wn-ink);
  background: rgba(255, 255, 255, .07) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(.wn-cart-item__img, .wn-sketch-van) {
  background-color: #f7f3ea;
}

/* Main, intro and general paper panels */
html[data-wn-theme="dark"] body :where(
  .hero,
  .hero-inner,
  .bento-section,
  .game-section,
  .gallery-section,
  .tile-light,
  .tile-blue,
  .game-card,
  .game-stage,
  .game-hud,
  .game-overlay,
  .leaderboard,
  .intro-card,
  .intro-panel,
  .globalfooter
) {
  color: var(--wn-ink);
  background-color: var(--wn-surface) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body .gl-sort-button.is-active {
  color: #1d1d1f !important;
  background: #f2eee7 !important;
}
html[data-wn-theme="dark"] body :where(.pill-secondary, .game-button, .leaderboard li) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface-solid) !important;
  border-color: var(--wn-hairline) !important;
}

/* The mini-game HUD pills intentionally stay pale over the canvas. Keep their
   labels and live numbers dark in dark mode so Score / Best remain legible. */
html[data-wn-theme="dark"] body .game-hud > span,
html[data-wn-theme="dark"] body .game-hud > span :where(span, #gameScore, #gameBest) {
  color: #1d1d1f !important;
}

/* Forms and reusable cards */
html[data-wn-theme="dark"] body :where(
  .card,
  .side-card,
  .page-head,
  .connect-hero,
  .connect-panel,
  .finder-panel,
  .finder-groups,
  .feed-toggle,
  .post-menu-pop,
  .chat-panel,
  .chat-head,
  .chat-form,
  .chat-drawer,
  .auth-card,
  .shell,
  .profile-shell,
  .profile-hero,
  .profile-panel,
  .auth-side,
  .auth-panel,
  .nbti-dialog-card,
  .delete-card
) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select,
  .input,
  .field input,
  .field textarea,
  .textarea,
  .wtx-input
) {
  color: var(--wn-ink) !important;
  background-color: #2b2a27 !important;
  border-color: rgba(255, 255, 255, .2) !important;
  caret-color: var(--wn-ink);
}
html[data-wn-theme="dark"] body :where(input, textarea)::placeholder {
  color: #928c84 !important;
  opacity: 1;
}
html[data-wn-theme="dark"] body :where(.btn-ghost, .btn-soft, .button.soft, .auth-tab, .feed-toggle button, .finder-groups button) {
  color: var(--wn-ink) !important;
  background: rgba(255, 255, 255, .07) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(.feed-toggle button.is-active, .finder-groups button.is-active, .auth-tab.is-active) {
  color: #1d1d1f !important;
  background: #f2eee7 !important;
}

/* Connect deliberately keeps its warm paper panels light in both themes.
   Give that island its paper-ink tokens back instead of letting the global
   dark palette turn headings, labels and contact names pale. */
html[data-wn-theme="dark"] body .connect-hub {
  --ink: #1d1d1f;
  --muted: #6e6e73;
}
/* Dark controls inside the light Connect workspace keep light foregrounds. */
html[data-wn-theme="dark"] body .connect-hub .finder-search-wrap svg {
  color: var(--wn-muted) !important;
}

/* Profile keeps its result cards as light paper in dark mode. Give text that
   lives on the dark profile sheet a light foreground, and give the light
   result cards their own dark-paper ink tokens so labels never wash out. */
html[data-wn-theme="dark"] body .profile-shell .instagram-link {
  color: #d8d1c8 !important;
}
html[data-wn-theme="dark"] body .profile-shell .profile-bio {
  color: var(--wn-muted) !important;
}
html[data-wn-theme="dark"] body .profile-shell .nbti-unlocked-count {
  color: #1d1d1f !important;
  background: #fffef9 !important;
  border-color: rgba(29, 29, 31, .32) !important;
}
html[data-wn-theme="dark"] body .profile-shell .nbti-unlock-card {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  color: #1d1d1f !important;
}

/* Community/chat: preserve a deliberately selected chat wallpaper. */
html[data-wn-theme="dark"] body .chat-panel:not([data-bg="dark"]) .chat-list,
html[data-wn-theme="dark"] body .chat-panel[data-bg="none"] .chat-list::before {
  background: #211f1d !important;
}
html[data-wn-theme="dark"] body .msg-row.theirs .msg-bubble {
  color: var(--wn-ink) !important;
  background: #34322f !important;
}

/* NBTI quiz, setup, dashboard and unlocked cards. Special full-screen result
   effects keep their authored backgrounds because they do not use this list. */
html[data-wn-theme="dark"] body :where(
  #setup-view,
  #quiz-view,
  #loading-view,
  #result-view,
  .quiz-header,
  .question-card,
  .option-sphere-btn,
  .modal-card,
  .nbti-identity-card,
  .nbti-unlock-dialog,
  .nbti-dashboard-shell,
  .nbti-dashboard-head,
  .nbti-dashboard-card,
  .nbti-dashboard-panel,
  .nbti-dashboard-modal
) {
  color: var(--wn-ink) !important;
  background-color: var(--wn-surface) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body .option-sphere-btn.selected {
  color: #171614 !important;
  background: #f2eee7 !important;
  border-color: #f2eee7 !important;
}
html[data-wn-theme="dark"] body :where(.input-group label, .nbti-dashboard-subtitle, .nbti-dashboard-section-head p, .nbti-dashboard-metric-label, .nbti-dashboard-metric-note, .nbti-dashboard-ring-copy span, .nbti-dashboard-type-percent, .nbti-dashboard-category-total, .nbti-dashboard-question-meta, .nbti-dashboard-option-count, .nbti-dashboard-footnote, .nbti-dashboard-users-eyebrow, .nbti-dashboard-users-meta, .nbti-dashboard-users-status) {
  color: var(--wn-muted) !important;
}
html[data-wn-theme="dark"] body :where(
  .gender-btn,
  .speed-pill,
  .nbti-dashboard-launch,
  .nbti-dashboard-back,
  .nbti-dashboard-refresh,
  .nbti-dashboard-status,
  .nbti-dashboard-metric,
  .nbti-dashboard-ring-card,
  .nbti-dashboard-type,
  .nbti-dashboard-empty,
  .nbti-dashboard-category,
  .nbti-dashboard-question,
  .nbti-dashboard-users-panel,
  .nbti-dashboard-user-chip,
  .nbti-dashboard-users-close
) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface-solid) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(.gender-btn:hover, .nbti-dashboard-launch:hover, .nbti-dashboard-back:hover, .nbti-dashboard-refresh:hover, .nbti-dashboard-type:hover) {
  color: var(--wn-ink) !important;
  background: #353431 !important;
}
html[data-wn-theme="dark"] body .gender-btn.selected {
  color: #171614 !important;
  background: #f2eee7 !important;
  border-color: #f2eee7 !important;
}
html[data-wn-theme="dark"] body :where(.section-hint, .question-card.unanswered) {
  color: #ffb6af !important;
  background: #382423 !important;
  border-color: rgba(255, 154, 145, .48) !important;
}
html[data-wn-theme="dark"] body :where(.nbti-dashboard-option-label, .nbti-dashboard-question h3, .nbti-dashboard-section-head h2, .nbti-dashboard-eyebrow, .nbti-dashboard-title, .nbti-dashboard-type-name, .nbti-dashboard-type-count, .nbti-dashboard-ring-copy strong, .nbti-dashboard-ring-number, .nbti-dashboard-metric-value) {
  color: var(--wn-ink) !important;
}
html[data-wn-theme="dark"] body :where(.nbti-dashboard-type-bar, .nbti-dashboard-option-bar, .nbti-dashboard-ring-track) {
  background-color: rgba(255, 255, 255, .10) !important;
  stroke: rgba(255, 255, 255, .10) !important;
}
html[data-wn-theme="dark"] body :where(.nbti-dashboard-type-bar span, .nbti-dashboard-option-bar span) {
  background: #d8d1c8 !important;
}
html[data-wn-theme="dark"] body :where(.nbti-desc, .nbti-identity-action) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface-solid) !important;
  border-color: var(--wn-hairline) !important;
}

/* Design library: keep the artwork itself white, darken only the furniture. */
html[data-wn-theme="dark"] body :where(
  .design-add,
  .design-thumb-frame,
  .design-manage,
  .design-manage-dialog,
  .design-manage-input,
  .design-manage-btn,
  .design-state
) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface) !important;
  border-color: var(--wn-hairline) !important;
}

/* Drawing studio: the white artboard and image previews stay colour-true. */
html[data-wn-theme="dark"] body :where(
  .studio-toolbar,
  .studio-shell,
  .studio-panel,
  .studio-sidebar,
  .studio-inspector,
  .tool-btn,
  .size-btn,
  .layer-row,
  .fly-btn,
  .obj-mini,
  .zoom-val,
  .upload-card,
  .pub-modal,
  .pub-card,
  .pub-input,
  .market-card,
  .listed-preview-card,
  .listed-preview-info,
  .listing-preview-actions .secondary-preview
) {
  color: var(--wn-ink) !important;
  background: var(--wn-surface) !important;
  border-color: var(--wn-hairline) !important;
}
html[data-wn-theme="dark"] body :where(.studio-stage, .studio-workspace, .canvas-wrap) {
  background-color: #201f1d !important;
}

/* Gallery controls and Instagram-style viewer. Artwork remains untouched. */
html[data-wn-theme="dark"] body :where(
  .gl-tools-inner,
  .gl-search-input,
  .gl-empty,
  .gl-view-panel,
  .gl-view-info,
  .gl-view-head,
  .gl-view-copy,
  .gl-view-footer,
  .gl-view-like,
  .gl-view-action,
  .gl-edit-dialog,
  .edit-input,
  .edit-button
) {
  color: var(--wn-ink) !important;
  background-color: var(--wn-surface-solid) !important;
  border-color: var(--wn-hairline) !important;
}

/* Liquid mobile bar uses darker frosted glass and high-contrast ink. */
@media (max-width: 900px) {
  html[data-wn-theme="dark"] body .wn-mobile-tabbar {
    color: var(--wn-ink);
    background:
      radial-gradient(circle at 16% -35%, rgba(255,255,255,.15), transparent 52%),
      linear-gradient(135deg, rgba(50,49,46,.86), rgba(25,24,22,.72));
    border-color: rgba(255,255,255,.20);
    box-shadow:
      0 14px 38px rgba(0,0,0,.46),
      0 2px 10px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.32);
  }
  html[data-wn-theme="dark"] body .wn-mobile-tab-indicator {
    background:
      radial-gradient(circle at 38% -8%, rgba(255,255,255,.28), transparent 58%),
      linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.07));
    border-color: rgba(255,255,255,.34);
    box-shadow: 0 5px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.24);
  }
  html[data-wn-theme="dark"] body .wn-mobile-tab-icon,
  html[data-wn-theme="dark"] body .wn-mobile-tab-icon svg {
    color: #f2eee7;
    stroke: #f2eee7;
  }
}

@media (max-width: 640px) {
  .globalnav .nav-icons .wn-theme-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex-basis: 34px;
    margin-left: 1px;
  }
}
@media (max-width: 360px) {
  .globalnav .nav-icons .wn-theme-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-basis: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .globalnav .nav-icons .wn-theme-toggle { transition: none; }
}