/* Shared theme control and page exchange transition. */
.site-header {
  position: sticky !important;
  z-index: 80;
  top: 0 !important;
  left: auto !important;
  width: 100%;
}

[data-fit-text] {
  min-width: 0;
  max-width: 100%;
  width: var(--fit-frame-width, auto);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.button [data-fit-text],
.small-button [data-fit-text],
.systems-button [data-fit-text],
.community-button [data-fit-text] { flex: 0 0 var(--fit-frame-width, auto); }
span[data-fit-text] { display: inline-block; }
.main-nav a,
.main-nav a[data-fit-text] { width: auto !important; min-width: max-content; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; }
[data-fit-text].is-fit-minimum { text-overflow: ellipsis; }
.mobile-menu-button .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;
}
body.language-is-changing [data-lang-button] { pointer-events: none; }

/* Loader geometry and animation are owned by theme-init.js so Boot and
   internal navigation use one fixed Desktop/Mobile position contract. */

.site-header,
main,
.site-footer {
  animation: page-view-enter .34s cubic-bezier(.2,.78,.2,1) both;
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html { scrollbar-gutter: stable; }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html { scrollbar-gutter: auto; scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}
main { animation-delay: .025s; }
.site-footer { animation-delay: .045s; }

.theme-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--warm-dark,#8d6b43);
  background: rgba(255,255,255,.68);
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="light"] .presentation-controls [data-presentation-theme] {
  color: var(--warm-dark,#8d6b43);
}
.presentation-controls [data-presentation-theme] svg {
  fill: none;
  stroke: currentColor;
}
:where(input,textarea,select,.search-input-wrap,.subscribe-form) {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
:where(input,textarea)::placeholder { transition: color .22s ease; }

.article-card {
  transition: opacity .17s ease, transform .22s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
}
.article-card.is-filtering-out {
  opacity: 0;
  transform: translateY(5px) scale(.992);
  pointer-events: none;
}

@keyframes page-view-enter {
  from { opacity: 0; transform: translateX(7px); }
  to { opacity: 1; transform: none; }
}

/* HRcade Center-inspired blue-black theme. The light theme remains unchanged. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #02060c;
  --bg-2: #06101c;
  --bg-deep: #06101c;
  --surface: rgba(7,18,31,.90);
  --surface-strong: rgba(9,25,43,.94);
  --surface-solid: #09192b;
  --surface-soft: rgba(7,23,40,.82);
  --text: #dce9f6;
  --text-strong: #f7fbff;
  --strong: #f7fbff;
  --muted: #a7bacb;
  --line: rgba(91,155,205,.22);
  --line-strong: rgba(99,190,247,.36);
  --blue: #31b9ff;
  --blue-dark: #73d5ff;
  --blue-soft: rgba(26,159,231,.14);
  --warm: #c7a26d;
  --warm-dark: #e2bf86;
  --warm-light: #8d6b43;
  --warm-soft: rgba(199,162,109,.15);
  --success: #86d6aa;
  --shadow: 0 16px 42px rgba(0,0,0,.38);
  --shadow-hover: 0 22px 54px rgba(0,0,0,.48);
  --hover: 0 22px 54px rgba(0,0,0,.48);
}
html[data-theme="dark"] body {
  color: var(--text);
  background:
    radial-gradient(ellipse 115% 68% at -12% -18%, transparent 57%, rgba(27,175,255,.24) 57.35%, rgba(27,175,255,.06) 57.8%, transparent 58.4%),
    radial-gradient(ellipse 130% 78% at -18% -22%, transparent 66%, rgba(137,207,255,.10) 66.25%, transparent 66.8%),
    radial-gradient(ellipse 115% 65% at 112% 118%, transparent 62%, rgba(19,129,222,.12) 62.25%, transparent 62.9%),
    linear-gradient(145deg, #010308 0%, #030914 52%, #06111e 100%);
  background-attachment: fixed;
}

/* Dedicated light/dark image sources; mapping lives in site-config.js. */
:root {
  --hero-image-light: url("/assets/images/hero-lab-background.png");
  --hero-image-dark: url("/assets/images/hero-lab-background-dark.png");
}
.hero-background { background-image: var(--hero-image-light); }
html[data-theme="dark"] .hero-background {
  background-image: var(--hero-image-dark);
}
html[data-theme="dark"] .hero-stage {
  background-image: var(--hero-image-dark);
}
html[data-theme="dark"] .hero-stage::before {
  background: linear-gradient(90deg,rgba(2,6,12,.98) 0 34%,rgba(2,8,15,.80) 54%,rgba(2,8,15,.42) 100%);
}
html[data-theme="dark"] .hero::before {
  background: linear-gradient(90deg, rgba(2,6,12,.99) 0 37%, rgba(2,8,15,.74) 50%, rgba(2,8,15,.06) 73%);
}
html[data-theme="dark"] .hero-kicker { color: var(--muted); }
:where(
  .article-card img,
  .article-cover img,
  .system-thumb img,
  .system-detail-image img,
  .community-image img,
  .community-visual img,
  .community-band-image img,
  .page-hero-image img
) {
  transition: opacity .24s ease;
}
html[data-theme="dark"] :where(.header-shell,.header-card) {
  border-color: var(--line);
  background: rgba(2,8,15,.88);
  box-shadow: 0 16px 42px rgba(0,0,0,.34);
}
html[data-theme="dark"] :where(.theme-toggle,.icon-button,.menu-button,.mobile-menu-button) {
  color: var(--text-strong);
  border-color: var(--line);
  background: rgba(8,25,43,.86);
}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .presentation-controls [data-presentation-theme] {
  color: var(--blue-dark,#73d5ff);
}
html[data-theme="dark"] img[src$="/hrlab-logo.png"] {
  content: url("/assets/images/hrlab-logo-dark.png");
}
html[data-theme="dark"] :where(.main-nav a,.home-lang-switch button,.lang-switch button) { color: var(--muted); }
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.is-active {
  color: var(--text-strong);
  background: var(--blue-soft);
}
html[data-theme="dark"] :where(.home-lang-switch,.lang-switch) {
  border-color: var(--line);
  background: rgba(6,20,35,.82);
}
html[data-theme="dark"] :where(.home-lang-switch button.is-active,.lang-switch button.is-active) {
  color: #03101d !important;
  background: #62c8f4;
}
html[data-theme="dark"] :where(.filter-row button.is-active,.knowledge-filters button.is-active) {
  color: #03101d;
  border-color: #62c8f4;
  background: #62c8f4;
}
html[data-theme="dark"] .skip-link { color: #03101d; background: #62c8f4; }
html[data-theme="dark"] :where(
  .hero,
  .hero-card,
  .page-hero-card,
  .deck-section,
  .panel,
  .system-card,
  .system-detail-card,
  .article-card,
  .article-slide,
  .article-body,
  .article-main,
  .feature-item,
  .value-card,
  .faq-item,
  .timeline-item,
  .sidebar-card,
  .social-card,
  .legal-card,
  .about-strip,
  .footer-card,
  .footer-grid,
  .community,
  .community-band,
  .deck-grid,
  .hero-feature-strip,
  .hero-metrics,
  .search-card,
  .search-dialog-card,
  .home-search-card,
  .newsletter-card
) {
  color: var(--text);
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] :where(
  h1,h2,h3,h4,strong,
  .hero-copy h1,
  .page-hero h1,
  .section-head h2,
  .system-card h3,
  .article-card h3,
  .footer-card h3
) { color: var(--text-strong); }
html[data-theme="dark"] :where(p,.hero-copy>p,.page-hero p,.article-meta,.footer-card,.footer-card a) { color: var(--muted); }
html[data-theme="dark"] :where(.system-subtitle,.section-mini-header>a,.footer-bottom) { color: var(--muted); }
html[data-theme="dark"] .section-mini-header h2 { color: var(--text-strong); }
html[data-theme="dark"] :where(input,textarea,select,.search-input-wrap) {
  color: var(--text);
  border-color: var(--line);
  background: rgba(3,14,26,.86);
}
html[data-theme="dark"] :where(.hero-image::after,.page-hero-image::after) {
  background: linear-gradient(90deg, rgba(2,6,12,.94), rgba(2,6,12,.18) 58%, transparent);
}
html[data-theme="dark"] :where(.system-thumb,.article-card>a:first-child) { background: #06101c; }
html[data-theme="dark"] :where(.button.secondary,.button-outline,.filter-row button,.home-search-results a,.search-results a) {
  color: var(--text);
  border-color: var(--line);
  background: rgba(7,23,40,.84);
}
html[data-theme="dark"] :where(.button-outline:hover,.button.secondary:hover,.small-button:hover) {
  color: var(--text-strong);
  border-color: var(--line-strong);
  background: var(--surface-strong);
}
html[data-theme="dark"] :where(.login-button,.button-primary,.button.primary,.systems-button,.subscribe-form button) {
  color: #fff;
  background: linear-gradient(135deg, #057ac5, #18b5f4);
  box-shadow: 0 9px 22px rgba(0,111,184,.24);
}
html[data-theme="dark"] :where(.login-button,.button-primary,.button.primary,.systems-button,.subscribe-form button):hover {
  background: linear-gradient(135deg, #0b88d4, #35c1f7);
}
html[data-theme="dark"] .small-button {
  color: var(--blue-dark);
  border-color: rgba(49,185,255,.30);
  background: rgba(5,39,64,.72);
}
html[data-theme="dark"] :where(.icon-blue,.icon-warm) {
  color: var(--blue-dark);
  background: var(--blue-soft);
}
html[data-theme="dark"] .community-points svg { stroke: var(--blue-dark); }
html[data-theme="dark"] .hero-metrics svg,
html[data-theme="dark"] .hero-feature-strip svg {
  color: var(--blue-dark);
  stroke: var(--blue-dark);
}
html[data-theme="dark"] .tag-warm { background: var(--warm-light); }
html[data-theme="dark"] :where(
  .community-points article,
  .feature-icon,
  .system-icon,
  .subscribe-form,
  .sidebar-links a,
  .share-row button,
  .share-row a
) {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-soft, rgba(7,23,40,.82));
}
html[data-theme="dark"] :where(.social-row a,.dialog-close,.search-close) {
  color: var(--text-strong);
  border-color: var(--line);
  background: var(--surface-soft);
}
html[data-theme="dark"] :where(.search-field input,.search-input-wrap input,.subscribe-form) {
  color: var(--text);
  border-color: var(--line);
  background: rgba(3,14,26,.92);
}
html[data-theme="dark"] :where(.search-field input,.search-input-wrap input)::placeholder { color: var(--muted); }

/* About: keep the three mission notes inside the dark visual system. */
html[data-theme="dark"] body.about-page .about-principle-stack .feature-item {
  color: #dce9f6;
  border-color: rgba(91,155,205,.28);
  background: rgba(6,21,37,.88) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
html[data-theme="dark"] body.about-page .about-principle-stack .feature-icon {
  color: #62c8f4 !important;
  background: rgba(98,200,244,.12) !important;
}
html[data-theme="dark"] body.about-page .about-principle-stack .feature-item strong { color: #eef6fc; }
html[data-theme="dark"] body.about-page .about-principle-stack .feature-item span:not(.feature-icon) { color: #a8b8c8; }

/* The light hero veil must never remain over a dark-theme image. */
html[data-theme="dark"] body .page-hero-image::after {
  background: linear-gradient(90deg,rgba(6,21,37,.96),rgba(6,21,37,.20) 58%,transparent 82%) !important;
}
html[data-theme="dark"] body.about-page .page-hero-image img { object-position: 66% 55%; }
html[data-theme="dark"] body.about-page .page-hero-image::after {
  background: linear-gradient(90deg,rgba(6,21,37,1) 0%,rgba(6,21,37,.72) 20%,rgba(6,21,37,.16) 58%,transparent 82%) !important;
}
@media(max-width:700px) {
  html[data-theme="dark"] body.about-page .page-hero-image::after {
    background: linear-gradient(180deg,rgba(6,21,37,.84),rgba(6,21,37,.08) 58%,transparent) !important;
  }
}
html[data-theme="dark"] .search-panel {
  background: rgba(0,4,10,.72);
}
html[data-theme="dark"] :where(.article-lead,.article-content p,.article-content li,.legal-card p,.legal-card li) {
  color: var(--text);
}
html[data-theme="dark"] .article-note {
  color: var(--text);
  border-color: var(--blue);
  background: var(--blue-soft);
}
html[data-theme="dark"] .main-nav.is-open { background: var(--surface-solid); }
html[data-theme="dark"] .community { border-color: rgba(91,155,205,.14); }
html[data-theme="dark"] :where(.site-footer,.home-section.soft,.content-deck) {
  border-color: var(--line);
  background-color: rgba(2,8,15,.38);
}
html[data-theme="dark"] :where(dialog,.search-dialog,.home-search-dialog) { color: var(--text); }
html[data-theme="dark"] :where(dialog::backdrop,.search-dialog::backdrop,.home-search-dialog::backdrop) { background: rgba(0,4,10,.70); }
@media (prefers-reduced-motion: reduce) {
  .site-header, main, .site-footer { animation: none !important; }
  .theme-transition span { animation: none !important; }
  .article-card { transition-duration: .01ms !important; }
  .theme-transition::before { transition-duration: .01ms !important; }
}

@media (max-width: 480px) {
  .theme-toggle { width: 32px; height: 32px; flex-basis: 32px; }
}

/* Readable content must never inherit the single-line fitting used by controls. */
:where(h1,h2,h3,h4,h5,h6,p)[data-fit-text] {
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  vertical-align: baseline;
}

/* One button and form language across light and dark themes. */
:where(.button.primary,.button-primary,.button.blue,.login-button,.systems-button,.subscribe-form button,.search-input-wrap button) {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg,#1467c8,#0a47a8);
  box-shadow: 0 9px 22px rgba(20,103,200,.19);
}
:where(.button.secondary,.button-outline,.system-detail-actions .button.secondary) {
  color: #594a3d;
  border-color: rgba(119,92,67,.32);
  background: rgba(255,255,255,.78);
  box-shadow: none;
}
:where(.subscribe-form,.search-input-wrap) {
  border-color: rgba(20,103,200,.20);
  background: rgba(255,255,255,.82);
}
.subscribe-form button,
.search-input-wrap button {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg,#1467c8,#0a47a8);
  box-shadow: 0 9px 22px rgba(20,103,200,.19);
}
:where(.subscribe-form input,.search-input-wrap input) {
  color: var(--text,#2b2926);
}
html[data-theme="dark"] :where(.button.secondary,.button-outline,.system-detail-actions .button.secondary) {
  color: #d9f3ff;
  border-color: rgba(98,200,244,.28);
  background: rgba(6,28,47,.92);
  box-shadow: none;
}
html[data-theme="dark"] :where(.button.primary,.button-primary,.button.blue,.login-button,.systems-button,.subscribe-form button,.search-input-wrap button) {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg,#057ac5,#18b5f4);
  box-shadow: 0 9px 22px rgba(0,111,184,.24);
}
html[data-theme="dark"] :where(.subscribe-form,.search-input-wrap) {
  border-color: rgba(98,200,244,.22);
  background: rgba(3,14,26,.92);
}
html[data-theme="dark"] .system-detail-actions .button.secondary,
html[data-theme="dark"] a.button.secondary,
html[data-theme="dark"] a.button-outline {
  color: #d9f3ff;
  border-color: rgba(98,200,244,.28);
  background: rgba(6,28,47,.92);
  box-shadow: none;
}
html[data-theme="dark"] .system-detail-actions .button.primary,
html[data-theme="dark"] a.button.primary,
html[data-theme="dark"] a.button.blue,
html[data-theme="dark"] a.button-primary,
html[data-theme="dark"] .subscribe-form button,
html[data-theme="dark"] .search-input-wrap button {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg,#057ac5,#18b5f4);
  box-shadow: 0 9px 22px rgba(0,111,184,.24);
}
html[data-theme="dark"] .story-action.primary {
  color: #03101d;
  background: linear-gradient(135deg,#057ac5,#18b5f4);
  box-shadow: 0 10px 24px rgba(0,111,184,.24);
}
html[data-theme="dark"] :where(.story-action.primary,.story-action.primary span) { color: #03101d !important; }
html[data-theme="dark"] :where(.tag-blue,.article-tag.tag-blue) { color: #03101d; background: #73d5ff; }

/* Switch to the compact navigation before six links begin to compete for space. */
@media (max-width: 1100px) {
  h1[data-fit-text], h2[data-fit-text], h3[data-fit-text],
  p[data-fit-text] {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
  .page-hero-card, .page-hero-copy, .page-hero-image,
  .principles-manifesto, .panel, .value-card { min-width: 0; max-width: 100%; }

  .header-card {
    position: relative;
    grid-template-columns: minmax(140px,1fr) auto auto;
    gap: 7px;
  }
  .header-card > .main-nav { display: none; }
  .header-card > .main-nav.is-open {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 5px;
    padding: 8px;
  }
  .header-card > .main-nav a { width: 100%; text-align: center; }
  .header-card .header-tools { grid-column: 2; display: flex; gap: 4px; }
  .header-card .header-tools .icon-button,
  .header-card .header-tools .systems-button { display: none; }
  .header-card .menu-button { grid-column: 3; display: block; }
}

@media (max-width: 760px) {
  html[data-theme="dark"] .hero::before { background: rgba(2,6,12,.88); }
  [data-fit-text] {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  h1[data-fit-text], h2[data-fit-text], h3[data-fit-text],
  p[data-fit-text] {
    width: auto !important;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
  .button [data-fit-text],
  .small-button [data-fit-text],
  .systems-button [data-fit-text],
  .community-button [data-fit-text] {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-hero-card, .page-hero-copy, .page-hero-image,
  .principles-manifesto, .panel, .value-card {
    min-width: 0;
    max-width: 100%;
  }

  /* Keep language, theme, and menu available without turning the header into two rows. */
  .header-card {
    width: calc(100% - 12px);
    min-height: 52px;
    grid-template-columns: minmax(92px,1fr) auto auto;
    grid-template-rows: 1fr;
    gap: 5px;
    padding: 5px 7px 5px 10px;
    border-radius: 12px;
  }
  .header-card .brand { grid-column: 1; grid-row: 1; width: 112px; max-width: 100%; }
  .header-card .header-tools { grid-column: 2; grid-row: 1; display: flex; gap: 3px; }
  .header-card .header-tools .icon-button,
  .header-card .header-tools .systems-button { display: none; }
  .header-card .lang-switch { display: flex; padding: 2px; }
  .header-card .lang-switch button { min-width: 23px; width: 23px; height: 24px; padding: 0; font-size: 8px; }
  .header-card .theme-toggle { width: 31px; height: 31px; flex-basis: 31px; }
  .header-card .menu-button { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }

  .header-shell > .main-nav,
  .header-card > .main-nav {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    width: 100%;
    justify-self: stretch;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px;
  }
  .header-shell > .main-nav a,
  .header-card > .main-nav a { width: 100%; text-align: center; }

  .mobile-menu-button .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;
  }
}