/* Day/night appearance for the NYSAIC community site. Photo and logo pixels
   retain their original colors; only page surfaces and UI colors change. */
:root { color-scheme: light; }

.theme-control {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  width: max-content;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: .8125rem;
  line-height: 1;
  color: var(--muted);
}
.theme-option {
  position: relative;
  display: grid;
  min-width: 62px;
  min-height: 44px;
  padding: 2px;
  cursor: pointer;
}
.theme-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  pointer-events: none;
}
.theme-option:hover span { color: var(--ink); }
.theme-option input:checked + span { color: var(--ink); background: var(--white); border-color: var(--line); box-shadow: 0 1px 3px #10274a12; font-weight: 750; }
.theme-option input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.appearance-row { display: flex; margin-top: 14px; }
html[data-theme="dark"] .theme-option input:checked + span { background: var(--sky); box-shadow: none; }
html[data-theme="dark"] .theme-option input:focus-visible + span { outline-color: #ffd074; }
html[data-theme="dark"] .privacy-brand { color: var(--ink); }
html[data-theme="dark"] .privacy-date { color: var(--muted); }
.privacy-header-inner { flex-wrap: wrap; }
html[data-theme="dark"] :is(.privacy-header, .privacy-contact) { border-bottom-color: var(--line); }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3fb;
  --muted: #b4c3d6;
  --blue: #9cc6ff;
  --blue-dark: #c7deff;
  --sky: #1b3655;
  --paper: #101e32;
  --line: #334960;
  --border: #788da8;
  --cream: #1c2a3c;
  --white: #0b1424;
  --shadow: 0 12px 38px #00000020;
  --night-surface: #13233b;
  --night-input: #0e1b2e;
  --night-control-border: #788da8;
  color: var(--ink);
  background: var(--white);
}
html[data-theme="dark"] body { background: var(--white); }
html[data-theme="dark"] .site-header { background: #0e1b2e; }
html[data-theme="dark"] :is(.path-card, .resource-card, .form-card,
  .meeting-card, .admin-card, .date-block, .newsletter-link-dialog,
  .newsletter-reader, .directory-card,
  .organization-card, .member-detail) {
  background: var(--night-surface);
  border-color: var(--line);
}
html[data-theme="dark"] .path-card:hover { border-color: var(--blue); }
html[data-theme="dark"] .path-card:nth-child(2) { border-top-color: #e6b54b; }
html[data-theme="dark"] :is(.meeting-intro,
  .institution-preview) {
  color: var(--ink);
  background: var(--sky);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.site-footer, .member-stat, .art-caption) {
  background: var(--paper);
  border-color: var(--line);
}
html[data-theme="dark"] .member-stat dt { color: var(--ink); }
html[data-theme="dark"] .member-stat .member-stat-value { color: var(--blue); }
html[data-theme="dark"] :is(.member-stat .member-stat-help,
  .newsletter-reader-meta, .institution-hint, .institution-status) {
  color: var(--muted);
}
html[data-theme="dark"] :is(.newsletter-body,
  .meeting-field-details summary) {
  color: var(--ink);
}
html[data-theme="dark"] :is(.newsletter-links, .meeting-field-details,
  .newsletter-rich-body blockquote, .newsletter-rich-body hr,
  .newsletter-table-scroll td, .newsletter-table-scroll th, .tags span) {
  border-color: var(--line);
}
html[data-theme="dark"] :is(.institution-member-initials,
  .member-initials, .interest-list li) {
  color: var(--ink);
  background: var(--sky);
}
/* Transparent organization logos need their own light tile, not inversion. */
html[data-theme="dark"] .institution-preview img:not([data-logo-background="dark"]) {
  background: #fff;
  border-radius: 5px;
}

html[data-theme="dark"] :is(.field input, .field select, .field textarea,
  .member-role-control select,
  .newsletter-editor-body) {
  color: var(--ink);
  background: var(--night-input);
  border-color: var(--night-control-border);
}
html[data-theme="dark"] :is(.field input, .field textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}
html[data-theme="dark"] :is(.newsletter-editor-toolbar, .menu-toggle) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--night-control-border);
}
html[data-theme="dark"] .newsletter-editor-toolbar button:hover {
  color: var(--ink);
  background: var(--sky);
  border-color: var(--night-control-border);
}
html[data-theme="dark"] .newsletter-editor-toolbar button[aria-pressed="true"] {
  color: var(--blue);
  background: var(--sky);
  border-color: var(--blue);
}
html[data-theme="dark"] :is(.newsletter-editor-status, .newsletter-link-error) {
  color: #ffb6ab;
}
html[data-theme="dark"] :is(.newsletter-editor-body[aria-invalid="true"],
  input[aria-invalid="true"], textarea[aria-invalid="true"],
  select[aria-invalid="true"]) { border-color: #ffb6ab; }
html[data-theme="dark"] :is(.field input:disabled, .field select:disabled,
  .field textarea:disabled, .newsletter-editor-body[aria-disabled="true"]) {
  color: var(--muted);
  background: #18263b;
  border-color: #596b81;
  opacity: 1;
}
html[data-theme="dark"] .field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  border: 1px solid var(--night-control-border);
  border-radius: 5px;
  color: var(--ink);
  background: var(--sky);
  font: inherit;
}

html[data-theme="dark"] .button {
  color: #081b34;
  background: var(--blue);
  border-color: var(--blue);
}
html[data-theme="dark"] .button:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}
html[data-theme="dark"] :is(.button.secondary, .button.light) {
  color: var(--ink);
  background: var(--night-input);
  border-color: var(--night-control-border);
}
html[data-theme="dark"] :is(.button.secondary, .button.light):hover {
  background: var(--sky);
  border-color: var(--blue);
}
html[data-theme="dark"] .button.danger {
  color: #ffcdc5;
  background: #43262c;
  border-color: #bc7c79;
}
html[data-theme="dark"] .button.danger:hover { background: #553039; }
html[data-theme="dark"] .button:disabled {
  color: #b4c3d6;
  background: #263952;
  border-color: #596b81;
  opacity: 1;
  cursor: not-allowed;
}
/* The mission panel retains NYSAIC's gold action and deep blue brand colors. */
html[data-theme="dark"] .hero .button {
  color: #10274a;
  background: #f2bd45;
  border-color: #f2bd45;
}
html[data-theme="dark"] .hero .button:hover {
  background: #ffcf6b;
  border-color: #ffcf6b;
}
html[data-theme="dark"] .hero .button.secondary {
  color: #edf3fb;
  background: #10274a;
  border-color: var(--night-control-border);
}
html[data-theme="dark"] .hero .button.secondary:hover { background: #1b3655; }

html[data-theme="dark"] .status {
  color: #cce3ff;
  background: #18334f;
}
html[data-theme="dark"] :is(.status.error, .no-script) {
  color: #ffcdc5;
  background: #43262c;
  border-color: #bc7c79;
}
html[data-theme="dark"] .status.success {
  color: #b7e7cb;
  background: #143a30;
  border-color: #72a18e;
}
html[data-theme="dark"] .newsletter-history-note {
  color: #e9cd91;
  background: #3a301e;
  border-color: #d8ad4e;
}
html[data-theme="dark"] .badge { border-color: #5b80a5; }
html[data-theme="dark"] .tabs a[aria-current="page"] { border-color: var(--blue); }
html[data-theme="dark"] .skip-link {
  color: #081b34;
  background: var(--blue);
}
html[data-theme="dark"] :is(a, button, input, select, textarea,
  summary, .newsletter-editor-body):focus-visible {
  outline-color: #ffd074;
  box-shadow: 0 0 0 3px #0b1424;
}
html[data-theme="dark"] .newsletter-link-dialog::backdrop { background: #000a; }
html[data-theme="dark"] ::selection { color: #081b34; background: #b6d5ff; }

@media (forced-colors: active) {
  html[data-theme] .theme-option input:checked + span { border-color: Highlight; background: Canvas; color: CanvasText; box-shadow: none; }
  html[data-theme] .theme-option input:focus-visible + span { outline: 2px solid Highlight; }
  html[data-theme="dark"] :is(a, button, input, select, textarea,
    summary, .newsletter-editor-body):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}