/* Shared theme layer for Norelyn pages. */

:root {
  color-scheme: light dark;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-tools {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--line, #d7dfdf) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 66%, transparent);
  backdrop-filter: blur(12px);
}

.language-control,
.theme-toggle {
  min-height: 31px;
  border: 0;
  border-radius: 8px;
  color: var(--ink, inherit);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.language-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  background: transparent;
}

.control-icon,
.globe-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent, #1b4f4d) 10%, transparent);
  color: var(--accent, #1b4f4d);
  font-size: 10px;
  font-weight: 800;
}

.language-select {
  min-height: 31px;
  max-width: 180px;
  padding: 0 24px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
}

.theme-toggle {
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--ink, #0b1628) 6%, transparent);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.theme-toggle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink, #0b1628) 10%, transparent);
}

.theme-toggle:active:not(:disabled) {
  transform: translateY(1px);
}

.theme-icon {
  width: 14px;
  text-align: center;
  font-size: 12px;
}

.theme-label {
  line-height: 1;
}

.theme-toggle:disabled {
  cursor: default;
  opacity: .66;
}

html[data-theme="dark"] body:not([data-page="naw"]) {
  --bg: #0a1113;
  --surface: #11191c;
  --ink: #edf4f2;
  --muted: #98a8ad;
  --line: #28363a;
  --soft: #172124;
  --accent: #82bbb5;
  --accent-soft: #17302d;
  background:
    radial-gradient(circle at 82% 7%, rgba(53, 114, 107, .20), transparent 30rem),
    linear-gradient(180deg, #0b1214 0%, #0a1113 58%, #091012 100%) !important;
  color: var(--ink);
}

html[data-theme="dark"] body:not([data-page="naw"]) .site-header {
  background: rgba(10, 17, 19, .86) !important;
  border-bottom-color: rgba(255,255,255,.075) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.08);
}


/* Brand artwork is a dark SVG by default; invert it only inside the site's dark theme. */
html[data-theme="dark"] body:not([data-page="naw"]) .brand-mark,
html[data-theme="dark"] body:not([data-page="naw"]) .brand-wordmark,
html[data-theme="dark"] body:not([data-page="naw"]) .footer-brand-wordmark {
  filter: brightness(0) invert(1);
  opacity: .94;
}

html[data-theme="dark"] body:not([data-page="naw"]) .nav a,
html[data-theme="dark"] body:not([data-page="naw"]) .hero-description,
html[data-theme="dark"] body:not([data-page="naw"]) .lead,
html[data-theme="dark"] body:not([data-page="naw"]) .hero-note,
html[data-theme="dark"] body:not([data-page="naw"]) .section-heading p,
html[data-theme="dark"] body:not([data-page="naw"]) .statement-grid p,
html[data-theme="dark"] body:not([data-page="naw"]) .product-card p,
html[data-theme="dark"] body:not([data-page="naw"]) .product-foot,
html[data-theme="dark"] body:not([data-page="naw"]) .principle-grid p,
html[data-theme="dark"] body:not([data-page="naw"]) .about-grid p,
html[data-theme="dark"] body:not([data-page="naw"]) .archive-row p,
html[data-theme="dark"] body:not([data-page="naw"]) .system-note,
html[data-theme="dark"] body:not([data-page="naw"]) .muted-copy,
html[data-theme="dark"] body:not([data-page="naw"]) .site-footer,
html[data-theme="dark"] body:not([data-page="naw"]) .muted {
  color: var(--muted) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .button.ghost,
html[data-theme="dark"] body:not([data-page="naw"]) .button.secondary,
html[data-theme="dark"] body:not([data-page="naw"]) .ecosystem-window,
html[data-theme="dark"] body:not([data-page="naw"]) .product-card,
html[data-theme="dark"] body:not([data-page="naw"]) .principle-grid article,
html[data-theme="dark"] body:not([data-page="naw"]) .workspace-card,
html[data-theme="dark"] body:not([data-page="naw"]) .today-card,
html[data-theme="dark"] body:not([data-page="naw"]) .featured-card,
html[data-theme="dark"] body:not([data-page="naw"]) .tool-card {
  background: linear-gradient(145deg, rgba(18, 28, 31, .94), rgba(15, 23, 26, .92)) !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .window-top,
html[data-theme="dark"] body:not([data-page="naw"]) .workspace-surface,
html[data-theme="dark"] body:not([data-page="naw"]) .signal-grid div,
html[data-theme="dark"] body:not([data-page="naw"]) .row-state.quiet {
  background: #151f22 !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .surface-grid div,
html[data-theme="dark"] body:not([data-page="naw"]) .next-step {
  background: #0d1618 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .closing-card {
  background: linear-gradient(135deg, #132120, #101a1c) !important;
  border-color: #263938 !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .section-line,
html[data-theme="dark"] body:not([data-page="naw"]) .section-kicker,
html[data-theme="dark"] body:not([data-page="naw"]) .site-footer,
html[data-theme="dark"] body:not([data-page="naw"]) .flow-list,
html[data-theme="dark"] body:not([data-page="naw"]) .flow-list article,
html[data-theme="dark"] body:not([data-page="naw"]) .archive-row,
html[data-theme="dark"] body:not([data-page="naw"]) .mini-product,
html[data-theme="dark"] body:not([data-page="naw"]) .today-row,
html[data-theme="dark"] body:not([data-page="naw"]) .workspace-app {
  border-color: var(--line) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .product-card:hover,
html[data-theme="dark"] body:not([data-page="naw"]) .principle-grid article:hover,
html[data-theme="dark"] body:not([data-page="naw"]) .tool-card:hover {
  border-color: #3b4e52 !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .footer-brand,
html[data-theme="dark"] body:not([data-page="naw"]) .site-footer strong,
html[data-theme="dark"] body:not([data-page="naw"]) .product-card h3,
html[data-theme="dark"] body:not([data-page="naw"]) .principle-grid h3,
html[data-theme="dark"] body:not([data-page="naw"]) .statement-grid h2,
html[data-theme="dark"] body:not([data-page="naw"]) .section-heading h2,
html[data-theme="dark"] body:not([data-page="naw"]) .about-grid h2,
html[data-theme="dark"] body:not([data-page="naw"]) .flow-list h3,
html[data-theme="dark"] body:not([data-page="naw"]) .workspace-top strong,
html[data-theme="dark"] body:not([data-page="naw"]) .today-row strong,
html[data-theme="dark"] body:not([data-page="naw"]) .mini-product strong {
  color: var(--ink) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .featured-product {
  background: linear-gradient(145deg, rgba(27, 49, 47, .94), rgba(16,25,28,.92)) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .site-tools {
  background: rgba(17, 25, 28, .72);
  border-color: #2b393d;
}

html[data-theme="dark"] body:not([data-page="naw"]) .language-control,
html[data-theme="dark"] body:not([data-page="naw"]) .language-select,
html[data-theme="dark"] body:not([data-page="naw"]) .theme-toggle {
  color: var(--ink);
}

html[data-theme="dark"] body:not([data-page="naw"]) .theme-toggle {
  background: rgba(255,255,255,.055);
}

/* Keep primary CTAs readable when --ink flips to a light value in dark mode. */
html[data-theme="dark"] body:not([data-page="naw"]) .button.primary {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .button.primary:hover {
  background: #dbe7e4 !important;
  color: #081012 !important;
}

html[data-theme="dark"] body:not([data-page="naw"]) .control-icon,
html[data-theme="dark"] body:not([data-page="naw"]) .globe-icon {
  background: rgba(130, 187, 181, .12);
}

body[data-page="naw"] .site-tools {
  color: #d8e5df;
  background: rgba(13, 25, 21, .78);
  border-color: #294138;
}

body[data-page="naw"] .language-control,
body[data-page="naw"] .language-select,
body[data-page="naw"] .theme-toggle {
  color: #d8e5df;
}

body[data-page="naw"] .control-icon,
body[data-page="naw"] .globe-icon {
  background: rgba(125,224,189,.10);
  color: #7de0bd;
}

body[data-page="naw"] .theme-toggle {
  background: rgba(255,255,255,.035);
}

@media (min-width: 901px) and (max-width: 1120px) {
  .site-tools {
    gap: 3px;
    flex: 0 0 auto;
  }

  .language-control {
    gap: 4px;
    padding-left: 6px;
  }

  .language-select {
    max-width: 122px;
  }

  .globe-icon,
  .control-icon {
    display: none;
  }

  .theme-toggle {
    width: 31px;
    padding: 0;
    justify-content: center;
  }

  .theme-label {
    display: none;
  }
}

@media (max-width: 900px) {
  .site-tools {
    width: 100%;
    margin: 10px 0 0;
    padding: 8px;
    justify-content: space-between;
    border-radius: 12px;
  }

  .language-control,
  .theme-toggle {
    min-height: 38px;
  }

  .language-control {
    flex: 1 1 auto;
    min-width: 0;
  }

  .language-select {
    width: 100%;
    max-width: none;
    min-height: 38px;
  }

  .theme-toggle {
    flex: 0 0 auto;
    padding-inline: 12px;
  }
}

@media (max-width: 430px) {
  .site-tools {
    gap: 4px;
  }

  .control-icon,
  .globe-icon {
    display: none;
  }

  .language-control {
    padding-left: 6px;
  }

  .theme-toggle {
    padding-inline: 10px;
  }
}