/*
 * TechXplored Explorer Theme
 * Release: 2026-08-29-v11-explorer-theme
 *
 * Loaded after page-specific and navigation styles so every current v10 page
 * shares one visual system without changing article copy or tool behavior.
 */

:root {
  --ink: #07182a;
  --paper: #f4f7fb;
  --card: #ffffff;
  --muted: #5e7186;
  --line: #d6e1ec;
  --acid: #2db4e8;
  --teal: #176ed3;
  --orange: #8fd2f1;
  --blue: #5aa6e6;
  --violet: #89b9e8;
  --tx-navy: #07182a;
  --tx-navy-2: #0b1f33;
  --tx-navy-3: #102b47;
  --tx-blue: #176ed3;
  --tx-cyan: #2db4e8;
  --tx-sky: #dff4fd;
  --tx-paper: #f4f7fb;
  --tx-card: #ffffff;
  --tx-line: #d6e1ec;
  --tx-muted: #5e7186;
  --tx-shadow: 0 14px 38px rgba(7, 24, 42, .09);
  --tx-shadow-hover: 0 18px 42px rgba(7, 24, 42, .15);
  --tx-radius: 16px;
  --tx-radius-small: 10px;
  --serif: "Manrope", Arial, sans-serif;
  --tx-nav-ink: #f7fbff;
  --tx-nav-paper: #07182a;
  --tx-nav-acid: #2db4e8;
  --tx-nav-teal: #62c8ee;
}

* {
  scrollbar-color: var(--tx-blue) var(--tx-paper);
}

html {
  background: var(--tx-navy);
}

body {
  --accent: var(--tx-cyan) !important;
  overflow-x: clip;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 180, 232, .10), transparent 25rem),
    var(--tx-paper);
  color: var(--tx-navy);
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--tx-cyan);
  color: var(--tx-navy);
}

:focus-visible {
  outline: 3px solid var(--tx-cyan);
  outline-offset: 3px;
}

.wrap {
  width: min(calc(100% - 40px), 1240px);
}

.utility {
  height: 33px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: #051321;
  color: #bcd0e3;
}

.utility .pulse {
  background: var(--tx-cyan);
  box-shadow: 0 0 0 4px rgba(45, 180, 232, .14);
}

.site-header,
.tx-site-header {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(7, 24, 42, .96);
  color: #f7fbff;
  box-shadow: 0 8px 28px rgba(7, 24, 42, .18);
  backdrop-filter: blur(16px);
}

.tx-site-header .tx-brand,
.tx-site-header .tx-navlinks a,
.tx-site-header .tx-contact {
  color: #f7fbff;
}

.tx-site-header .tx-brand {
  letter-spacing: -.045em;
}

.tx-site-header .tx-brand b,
.brand b {
  border-radius: 5px;
  background: var(--tx-cyan);
  color: var(--tx-navy);
}

.tx-site-header .tx-navlinks a,
.tx-site-header .tx-contact {
  border-color: transparent;
}

.tx-site-header .tx-navlinks a:hover,
.tx-site-header .tx-navlinks a:focus-visible,
.tx-site-header .tx-navlinks a[aria-current="page"],
.tx-site-header .tx-contact:hover,
.tx-site-header .tx-contact:focus-visible,
.tx-site-header .tx-contact[aria-current="page"] {
  border-color: var(--tx-cyan);
  color: var(--tx-cyan);
}

.tx-site-header .tx-search,
.tx-site-header .tx-menu {
  border: 1px solid var(--tx-blue);
  border-radius: 9px;
  background: var(--tx-blue);
  color: #fff;
}

.tx-site-header .tx-search:hover,
.tx-site-header .tx-search:focus-visible,
.tx-site-header .tx-menu:hover,
.tx-site-header .tx-menu:focus-visible {
  border-color: var(--tx-cyan);
  background: var(--tx-cyan);
  color: var(--tx-navy);
}

.tx-search-overlay,
.search-overlay {
  background:
    radial-gradient(circle at 70% 0%, rgba(45, 180, 232, .20), transparent 38rem),
    rgba(7, 24, 42, .985);
}

.tx-search-label,
.tx-search-form input,
.search-overlay input {
  border-color: var(--tx-cyan);
  color: #fff;
}

.tx-search-shortcuts a {
  border-color: rgba(255, 255, 255, .22);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
}

.tx-search-shortcuts a:hover,
.tx-search-shortcuts a:focus-visible {
  border-color: var(--tx-cyan);
  background: rgba(45, 180, 232, .12);
  color: var(--tx-cyan);
}

.eyebrow,
.principle span,
.seek-button {
  color: var(--tx-blue);
}

.page-hero,
.tool-hero,
.svi-hero {
  border-color: var(--tx-line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(223, 244, 253, .56));
}

.page-hero h1,
.tool-hero h1,
.svi-hero h1,
.section-head h2,
.new-head h2,
.article-content h1,
.article-content h2,
.article-layout h1,
.article-layout h2,
.draft-header h1,
.toolbox h2,
.footer-brand {
  font-family: "Manrope", Arial, sans-serif;
}

.page-hero h1 em,
.svi-hero h1 em {
  color: var(--tx-blue);
}

.page-intro,
.dek,
.tool-hero .dek,
.svi-hero .dek,
.prose p,
.tool-prose p,
.tool-prose li,
.article-content p,
.draft-body p,
.draft-body li {
  color: #40566c;
}

.section + .section,
.section,
.new-articles,
.lead,
.utility-dock,
.tool-hero,
.svi-hero,
.method-section {
  border-color: var(--tx-line);
}

.hero {
  border-color: var(--tx-line);
  background:
    radial-gradient(circle at 88% 10%, rgba(45, 180, 232, .18), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, var(--tx-paper) 100%);
}

.hero-grid.promoted .feature,
.feature {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  background:
    radial-gradient(circle at 95% 0%, rgba(45, 180, 232, .32), transparent 24rem),
    linear-gradient(135deg, var(--tx-navy-2), var(--tx-navy-3));
  box-shadow: var(--tx-shadow);
}

.feature::after {
  border-color: rgba(45, 180, 232, .24);
}

.feature p {
  color: #c8d8e8;
}

.hero-grid.promoted .brief,
.brief {
  padding: 22px;
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 30px rgba(7, 24, 42, .06);
}

.brief li,
.brief-top {
  border-color: var(--tx-line);
}

.brief li::before {
  color: var(--tx-blue);
}

.dock-grid,
.article-search,
.category-lead,
.error-grid,
.stats,
.metric-grid,
.detector-list {
  overflow: hidden;
  border-color: var(--tx-line);
  border-radius: var(--tx-radius);
  background: var(--tx-card);
  box-shadow: 0 10px 28px rgba(7, 24, 42, .06);
}

.dock-intro,
.hero-aside,
.tool-summary,
.privacy-card,
.search-count,
.contact-email,
.topic-band-intro,
.run-strip,
.verification-banner.passed {
  background: var(--tx-sky);
  color: var(--tx-navy);
}

.dock-link,
.topic-link,
.story-index,
.new-index,
.category-art,
.stat + .stat,
.metric + .metric {
  border-color: var(--tx-line);
}

.dock-link:hover {
  background: var(--tx-blue);
  color: #fff;
}

.dock-link:hover span {
  color: #dbeeff;
}

.new-grid > .new-card,
.story-grid > .story-card,
.resource-grid > .resource-card,
.articles > .article,
.article-pair > .side-card,
.panel,
.tool-card,
.contact-card,
.contact-note,
.workspace-panel,
.settings-panel,
.timeline-panel,
.diagnostic-panel,
.events-panel,
.notice,
.bundle {
  overflow: hidden;
  border-color: var(--tx-line);
  border-radius: var(--tx-radius);
  background: var(--tx-card);
  box-shadow: 0 10px 30px rgba(7, 24, 42, .06);
}

.new-grid > .new-card:hover,
.story-grid > .story-card:hover,
.resource-grid > .resource-card:hover,
.articles > .article:hover,
.article-pair > .side-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tx-shadow-hover);
}

.new-index,
.story-index,
.visual.rings,
.dock-intro,
.tool-icon,
.resource-links a,
.button.light,
.video-drop:hover,
.video-drop.drag,
.area-buttons button.active,
.area-buttons button:hover,
.result-actions button:hover {
  background: var(--tx-sky);
  color: var(--tx-navy);
}

.new-card:nth-child(4n + 2) .new-index,
.story-card:nth-child(4n + 2) .story-index,
.new-card.speed .new-index,
.side-card.orange,
.visual.lock,
.bundle,
.no-results,
.cancel-action,
.verification-banner.failed,
.error-code {
  background: #9dd9f3;
  color: var(--tx-navy);
}

.new-card:nth-child(4n + 3) .new-index,
.story-card:nth-child(4n + 3) .story-index,
.new-card.cyber .new-index,
.resource-card.featured,
.tool-card.accent {
  background: var(--tx-blue);
  color: #fff;
}

.new-card:nth-child(4n + 4) .new-index,
.story-card:nth-child(4n + 4) .story-index,
.new-card.engineering .new-index,
.new-card.acoustic .new-index,
.new-card.work .new-index {
  background: #75c5eb;
  color: var(--tx-navy);
}

.new-card.acoustic .new-index::after,
.new-card.work .new-index::after {
  box-shadow: none;
}

.new-copy p,
.story-copy p,
.article p,
.resource-card p,
.tool-card p,
.contact-card p,
.contact-note p {
  color: var(--tx-muted);
}

.button,
.tool-actions a,
.primary-action,
.button-row .primary,
.inputrow button {
  border-color: var(--tx-blue);
  border-radius: var(--tx-radius-small);
  background: var(--tx-blue);
  color: #fff;
}

.button:hover,
.tool-actions a:hover,
.primary-action:not(:disabled):hover,
.button-row .primary:hover,
.inputrow button:hover {
  border-color: var(--tx-cyan);
  background: var(--tx-cyan);
  color: var(--tx-navy);
}

.button.light,
.tool-actions a.secondary,
.button-row .secondary,
.result-actions button,
.area-buttons button,
.tool-card a,
.resource-links a {
  border-color: var(--tx-line);
  border-radius: var(--tx-radius-small);
}

input,
textarea,
select,
.text-box,
.advanced-settings input,
.settings-panel select {
  border-color: #b9cadd;
  border-radius: var(--tx-radius-small);
  background: #fff;
}

input:focus,
textarea:focus,
select:focus,
.text-box:focus {
  border-color: var(--tx-blue);
  box-shadow: 0 0 0 4px rgba(23, 110, 211, .14);
  outline: 0;
}

.topic-band,
.toolbox,
.method-section {
  background:
    radial-gradient(circle at 85% 0%, rgba(45, 180, 232, .17), transparent 28rem),
    var(--tx-navy);
  color: #fff;
}

.topic-band-grid,
.method-grid aside {
  border-color: rgba(255, 255, 255, .16);
  border-radius: var(--tx-radius);
  overflow: hidden;
}

.topic-link {
  border-color: rgba(255, 255, 255, .14);
}

.topic-link:hover,
.toolbox a:hover {
  color: var(--tx-cyan);
}

.command,
.resource-terminal,
.video-stage {
  border-color: var(--tx-navy-3);
  border-radius: var(--tx-radius-small);
  background: var(--tx-navy);
  color: #77d6f5;
}

.article-content,
.article-layout,
.tool-main,
.detector-grid,
.contact-main,
.inspector-section,
.results-section {
  position: relative;
}

.article-content > .article,
.article-layout > .draft-body {
  border-color: var(--tx-line);
  background: var(--tx-card);
}

.article-content blockquote,
.draft-body blockquote,
.callout,
.evidence-box,
.note {
  border-color: var(--tx-blue);
  background: var(--tx-sky);
}

.article-content code,
.draft-body code,
.tool-prose code {
  color: #0b5db8;
}

.article-content pre,
.draft-body pre {
  border-radius: var(--tx-radius-small);
  background: var(--tx-navy);
  color: #dff6ff;
}

.visual.grid {
  background-color: #e6f4fb;
  background-image:
    linear-gradient(rgba(23, 110, 211, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 110, 211, .13) 1px, transparent 1px);
}

.visual .code {
  border-radius: 9px;
  background: var(--tx-navy);
  color: var(--tx-cyan);
  box-shadow: 7px 7px 0 #7ecbed;
}

.score-ring {
  background: conic-gradient(var(--tx-blue) calc(var(--score) * 1%), #dce8f3 0);
}

.drop-zone,
.video-drop {
  border-color: var(--tx-blue);
  background: rgba(45, 180, 232, .07);
}

footer,
.site-footer {
  border-color: rgba(255, 255, 255, .12);
  background: var(--tx-navy);
  color: #eef7ff;
}

footer .footer-label,
footer .footer-note,
footer .copyright,
footer p,
.site-footer .footer-label,
.site-footer .footer-note,
.site-footer .copyright,
.site-footer p {
  color: #9fb4c8 !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--tx-cyan);
}

footer .copyright,
.site-footer .copyright {
  border-color: rgba(255, 255, 255, .12);
}

@media (max-width: 850px) {
  .hero-grid.promoted .brief,
  .brief {
    border-top: 1px solid var(--tx-line);
    padding: 20px;
  }

  .tx-site-header .tx-nav {
    min-width: 0;
  }

  .tx-site-header .tx-brand {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 650px) {
  .wrap {
    width: min(calc(100% - 26px), 1240px);
  }

  .page-hero h1,
  .tool-hero h1,
  .svi-hero h1 {
    font-size: clamp(36px, 12vw, 49px);
  }

  .hero-grid.promoted .feature,
  .feature,
  .hero-grid.promoted .brief,
  .brief,
  .new-grid > .new-card,
  .story-grid > .story-card,
  .resource-grid > .resource-card,
  .articles > .article,
  .article-pair > .side-card {
    border-radius: 13px;
  }

  .footer-grid {
    gap: 28px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}