/* Site-wide appearance preference. Loaded after each surface's page CSS so the
   user-selected contrast always wins over the default paper skin. */

.site-theme-toggle {
  display: inline-grid;
  width: 36px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid #111318;
  border-radius: 999px;
  background: #ffffff;
  color: #111318;
  box-shadow: 2px 2px 0 #111318;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.site-theme-toggle:hover,
.site-theme-toggle:focus-visible {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111318;
  outline: none;
}

.mint-top-actions .site-theme-toggle {
  width: 42px;
  height: 42px;
  border-color: #111318;
  background: #ffffff;
  color: #111318;
  box-shadow: 3px 3px 0 #111318;
}

.tutorial-topbar-actions,
.platform-admin-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.platform-admin-topbar-actions {
  grid-column: 2 / -1;
  justify-self: end;
}

:root[data-site-theme="dark"] {
  color-scheme: dark;
  --bg: #090c12;
  --paper: #0d1119;
  --paper-2: #141a25;
  --panel: #161d29;
  --panel-2: #202a39;
  --field: #101720;
  --ink: #f4f7ff;
  --text: #f4f7ff;
  --muted: #b7c2d3;
  --line: #e7eefb;
  --line-strong: #ffffff;
  --green: #34e5c1;
  --green-dark: #72f7db;
  --teal: #42dcca;
  --yellow: #ffe36e;
  --pink: #ff58bc;
  --heart-red: #ff5e7f;
  --coral: #ff8a5f;
  --blue: #79b7ff;
  --light-blue: #8ac5ff;
  --white: #f4f7ff;
  --neon: #bcff43;
  --neon-shadow: #ff52bd;
  --shadow: 8px 8px 0 var(--neon);
  --on-bright: #101722;
}

:root[data-site-theme="dark"] body {
  background:
    linear-gradient(90deg, rgba(244, 247, 255, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 247, 255, 0.07) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto;
}

:root[data-site-theme="dark"] .studio-topbar {
  background: rgba(9, 12, 18, 0.9);
}

:root[data-site-theme="dark"] input,
:root[data-site-theme="dark"] textarea,
:root[data-site-theme="dark"] select {
  background-color: var(--field);
  color: var(--text);
  border-color: var(--line-strong);
}

:root[data-site-theme="dark"] input::placeholder,
:root[data-site-theme="dark"] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

:root[data-site-theme="dark"] .site-theme-toggle {
  border-color: #111318;
  background: #ffffff;
  color: #111318;
  box-shadow: 3px 3px 0 #ffffff;
}

:root[data-site-theme="dark"] .site-theme-toggle:hover,
:root[data-site-theme="dark"] .site-theme-toggle:focus-visible {
  box-shadow: 1px 1px 0 #ffffff;
}

:root[data-site-theme="dark"] .mint-top-actions .site-theme-toggle {
  border-color: #111318;
  background: #ffffff;
  color: #111318;
  box-shadow: 3px 3px 0 #ffffff;
}

/* Most utility controls retain a dark fill in the dark skin. Their normal
   source styles can use the light-skin ink token, so explicitly keep their
   labels and glyphs light against that dark surface. Bright variants below
   deliberately override this with --on-bright. */
:root[data-site-theme="dark"] :is(
  .secondary-action,
  .mini-button,
  .ghost-link,
  .nav-tab,
  .admin-view-tab,
  .segment,
  .step-pill,
  .platform-admin-tab,
  .platform-subtab,
  .profile-editor-tab,
  .profile-referral-tab,
  .feed-tab,
  .feed-scope,
  .profile-dashboard-filter,
  .activity-filter
) {
  color: var(--ink);
}

/* Timeline rows are assembled dynamically and may inherit a local action
   color. Keep their default dark action buttons explicitly light; the yellow
   Follow variant below still changes to the dark on-bright foreground. */
:root[data-site-theme="dark"] .profile-activity-row .mini-button {
  color: var(--ink) !important;
}

/* The feed uses a black OpenSea asset by design in the paper skin. Invert
   only that source asset for a clear mark on the dark utility button. */
:root[data-site-theme="dark"] .feed-action-logo {
  filter: brightness(0) invert(1);
}

/* 6529's supplied mark is black-on-transparent. Make the mark visible while
   preserving the icon button's existing ring, hit area, and destination. */
:root[data-site-theme="dark"] .profile-6529-link img {
  filter: brightness(0) invert(1);
}

/* Bright surfaces deliberately keep a dark foreground. The base interface
   switches --ink to light for dark panels, so these semantic accent cards and
   pills need an explicit on-bright color instead of inheriting --ink. */
:root[data-site-theme="dark"] :is(
  .eyebrow.factory-title-badge[data-factory-type="one-one-x"],
  .eyebrow.factory-title-badge[data-factory-type="editions"],
  .eyebrow.factory-title-badge[data-factory-type="draw"],
  .factory-kind-badge[data-factory-type="one-one-x"],
  .factory-kind-badge[data-factory-type="editions"],
  .factory-kind-badge[data-factory-type="draw"],
  .primary-mini,
  .warning-mini,
  .profile-dashboard-count,
  .profile-public-view-action,
  .maintenance-mode-badge,
  .mission-control-card-heading span,
  .owner-pill[data-state="owner"],
  .owner-pill[data-state="warning"],
  .admin-wrapper-status-line[data-state="yes"] .admin-wrapper-status-icon,
  .faq-item summary::after
) {
  color: var(--on-bright) !important;
}

:root[data-site-theme="dark"] .choice-card.active,
:root[data-site-theme="dark"] .segment.active {
  color: var(--on-bright);
  border-color: var(--line-strong);
}

:root[data-site-theme="dark"] :is(.choice-card.active, .segment.active) :is(strong, span, b) {
  color: var(--on-bright) !important;
}

:root[data-site-theme="dark"] .step-pill span,
:root[data-site-theme="dark"] .step-pill.active span {
  color: var(--on-bright);
}

:root[data-site-theme="dark"] .notice-panel {
  border-color: var(--green-dark);
  background: #132b2a;
  box-shadow: 5px 5px 0 var(--neon);
}

:root[data-site-theme="dark"] .notice-panel :is(strong, p, label, .field-note) {
  color: var(--text);
}

:root[data-site-theme="dark"] .notice-panel strong {
  color: var(--green-dark);
}

:root[data-site-theme="dark"] .wizard-footer .status-line {
  border-color: var(--line-strong);
  background: #101720;
  box-shadow: 4px 4px 0 var(--neon);
  color: var(--pink);
}

:root[data-site-theme="dark"] .feed-status-badge {
  border-color: var(--line-strong);
  background: #111925;
  color: var(--yellow);
}

:root[data-site-theme="dark"] .feed-status-badge[data-state="completed"] {
  color: #cbd6e5;
}

:root[data-site-theme="dark"] .feed-card-phases {
  border-color: var(--line-strong);
  background: #172230;
}

:root[data-site-theme="dark"] .feed-phase-eligibility.is-closed,
:root[data-site-theme="dark"] .feed-phase-eligibility.is-unknown {
  border-color: #7f8d9f;
  background: #2a313b;
  color: #d8e1ed;
}

/* Profile roles are celebratory status badges, not muted panels. Use opaque
   fills so the patterned dark page cannot dull them, with one dark foreground
   shared by the name, totals, and loading copy. */
:root[data-site-theme="dark"] .profile-role-badge.role-creator,
:root[data-site-theme="dark"] .user-discovery-badge.role-creator {
  background: #ffe36e;
}

:root[data-site-theme="dark"] .profile-role-badge.role-collector,
:root[data-site-theme="dark"] .user-discovery-badge.role-collector {
  background: #55e6cf;
}

:root[data-site-theme="dark"] .profile-role-badge.role-curator,
:root[data-site-theme="dark"] .user-discovery-badge.role-curator {
  background: #ff8bce;
}

:root[data-site-theme="dark"] :is(.profile-role-badge, .user-discovery-badge) {
  border-color: var(--line-strong);
  color: var(--on-bright);
}

:root[data-site-theme="dark"] .profile-role-badge :is(.profile-role-name, strong, small, small a, .profile-role-detail, .profile-role-stats-loading) {
  color: var(--on-bright) !important;
}

/* --ink is intentionally light on dark surfaces, but yellow tokens use it as
   their foreground in the light skin. Keep every shared yellow symbol, pill,
   and compact status readable by assigning the dark on-bright foreground. */
:root[data-site-theme="dark"] :is(
  .edition-element-palette button span,
  .edition-layout-icon,
  .factory-info-button,
  .wallet-picker-close:hover,
  .wallet-picker-close:focus-visible,
  .profile-link-collapse-icon,
  .profile-activity-follow-button,
  .notification-bell[aria-expanded="true"],
  .profile-media-mode label:has(input:checked),
  .profile-link-media-tabs button.active,
  .leaderboard-crown,
  .public-wallet-connect,
  .public-wallet-signin.mini-button,
  .public-link-icon,
  .home-app-tile,
  .home-app-tile small,
  .platform-stat-grid button:hover,
  .platform-stat-grid button.active,
  .platform-stat-grid button:hover :is(dd, dt, .stat-label, .stat-value),
  .platform-stat-grid button.active :is(dd, dt, .stat-label, .stat-value),
  .tutorial-card .filename-rule-callout,
  .faq-item .filename-rule-callout,
  .referral-redemption-status,
  .owner-pill[data-state="readonly"],
  .split-row strong,
  .stats-data-table th,
  .d1-data-table th,
  .report-line-row code,
  .platform-audit-card-heading span,
  .metadata-count-action,
  .metadata-direct-stage-status[data-state="progress"],
  .launch-step-number,
  .inline-copy-action,
  .wallet-action-icon,
  .creator-report-summary span,
  .factory-kind-badge,
  .faq-item summary::after,
  .info-button,
  .template-action
) {
  color: var(--on-bright) !important;
}

:root[data-site-theme="dark"] :is(
  .secondary-action,
  .mini-button,
  .ghost-link,
  .nav-tab,
  .admin-view-tab,
  .segment,
  .step-pill,
  .platform-admin-tab,
  .platform-subtab,
  .profile-editor-tab,
  .profile-referral-tab,
  .feed-tab,
  .feed-scope,
  .profile-dashboard-filter,
  .activity-filter
) {
  border-color: var(--line-strong);
  box-shadow: 3px 3px 0 var(--neon);
}

:root[data-site-theme="dark"] :is(
  .secondary-action,
  .mini-button,
  .ghost-link,
  .nav-tab,
  .admin-view-tab,
  .segment,
  .step-pill,
  .platform-admin-tab,
  .platform-subtab,
  .profile-editor-tab,
  .profile-referral-tab,
  .feed-tab,
  .feed-scope,
  .profile-dashboard-filter,
  .activity-filter
):hover,
:root[data-site-theme="dark"] :is(
  .secondary-action,
  .mini-button,
  .ghost-link,
  .nav-tab,
  .admin-view-tab,
  .segment,
  .step-pill,
  .platform-admin-tab,
  .platform-subtab,
  .profile-editor-tab,
  .profile-referral-tab,
  .feed-tab,
  .feed-scope,
  .profile-dashboard-filter,
  .activity-filter
):focus-visible {
  box-shadow: 1px 1px 0 var(--neon-shadow);
}

/* These controls are normally ink-black. In dark mode they become the main
   orientation points: bright neon fill, pink hard shadow, and dark text. */
:root[data-site-theme="dark"] :is(
  .nav-tab.active,
  .step-pill.active,
  .admin-view-tab.active,
  .platform-admin-tab.active,
  .platform-subtab.active,
  .profile-editor-tab.active,
  .profile-referral-tab.active,
  .feed-tab.active,
  .feed-scope.active,
  .profile-dashboard-filter.active,
  .activity-filter.active,
  .rich-description-align-controls .mini-button[aria-pressed="true"],
  .edition-side-rail button[aria-expanded="true"]
) {
  border-color: var(--neon);
  background: var(--neon);
  color: #071009;
  box-shadow: 3px 3px 0 var(--neon-shadow);
}

:root[data-site-theme="dark"] .primary-action {
  border-color: var(--pink);
  background: var(--pink);
  color: #190613;
  box-shadow: 4px 4px 0 var(--neon);
}

:root[data-site-theme="dark"] .primary-action:hover,
:root[data-site-theme="dark"] .primary-action:focus-visible {
  box-shadow: 1px 1px 0 var(--neon);
}

/* Public-profile art sections are bright navigation points in the dark skin.
   Their count chips sit on yellow, so keep the foreground deliberately dark
   instead of inheriting the page's light --ink value. */
:root[data-site-theme="dark"] .public-profile-art-section,
:root[data-site-theme="dark"] .public-profile-art-focus-content > .profile-dashboard-section {
  border-color: var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow);
}

:root[data-site-theme="dark"] .public-profile-section-tabs .feed-tab b {
  color: var(--on-bright);
}

:root[data-site-theme="dark"] .public-profile-art-grid > .feed-card:first-child .feed-card-media {
  border-color: var(--line-strong);
}

:root[data-site-theme="dark"] :is(
  .hero-panel,
  .panel,
  .action-bar,
  .platform-card,
  .tutorial-card,
  .notification-panel,
  .profile-unsaved-panel,
  .mint-confirmation-panel,
  .mint-recent-panel
) {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

/* The wizard shell is intentionally transparent. Giving that layout wrapper a
   hard shadow created a second, slightly offset frame behind the final step
   and footer. Keep the footer clear of the step card's shadow instead. */
:root[data-site-theme="dark"] .wizard-footer {
  width: 100%;
  margin-top: 30px;
}

:root[data-site-theme="dark"] :is(
  .notification-row,
  .edition-item-editor,
  .edition-phase-editor,
  .edition-saved-row,
  .mint-status-box,
  .mint-checker-card,
  .mint-contact-card,
  .mint-recent-card,
  .edition-description-card,
  .edition-countdown-panel,
  .edition-mint-card
) {
  border-color: var(--line-strong);
}

/* Standalone and mint pages have their own surface defaults. Apply the same
   high-contrast system after those defaults, while retaining drop accents. */
:root[data-site-theme="dark"] body.mint-body,
:root[data-site-theme="dark"] body.edition-mint-body {
  color-scheme: dark;
  --bg: #090c12;
  --paper: #0d1119;
  --paper-2: #141a25;
  --panel: #161d29;
  --panel-2: #202a39;
  --field: #101720;
  --ink: #f4f7ff;
  --text: #f4f7ff;
  --muted: #b7c2d3;
  --line: #e7eefb;
  --line-strong: #ffffff;
  --white: #f4f7ff;
  background:
    linear-gradient(90deg, rgba(244, 247, 255, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 247, 255, 0.07) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px, 32px 32px, auto;
}

:root[data-site-theme="dark"] body.mint-body .mint-media {
  background-color: #080c12;
}

@media (max-width: 780px) {
  .tutorial-topbar-actions,
  .platform-admin-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .platform-admin-topbar-actions {
    grid-column: auto;
    justify-self: start;
  }
}