/*
 * NetEngineerLab Tool Page UI Compliance Layer
 * Web UI Design System & Page Standard V1.0
 *
 * Loaded LAST on every tool detail page by build-multilingual.js.
 * This file only enforces cross-tool geometry, shell alignment and responsive
 * safety. Calculator-specific colors, fields and engineering visuals stay in
 * each tool's local stylesheet.
 */
:root {
  --nel-tool-max-width: var(--nel-content-max, 1400px);
  --nel-tool-gutter: 24px;
  --nel-tool-column-gap: 24px;
  --nel-tool-nav-ink: #173f65;
  --nel-tool-focus: #176ff2;
}

/* One horizontal reference system: breadcrumb, hero, workspace and content. */
body > .breadcrumbs,
body > nav.breadcrumbs,
body > .hero,
body > .tool-hero,
body > main.workspace,
body > main.calculator-shell,
body > main.tool-shell,
body > main.shell,
body > main,
body > .content,
body > .content-section {
  width: min(calc(100% - (var(--nel-tool-gutter) * 2)), var(--nel-tool-max-width)) !important;
  max-width: var(--nel-tool-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Sections nested inside the canonical main must NOT subtract the gutter a
 * second time. This fixes the recurring "Hero is 48px narrower" defect. */
main > .hero,
main > .tool-hero,
main > .breadcrumbs,
main > .tool-layout,
main > .panel-layout,
main > .workspace,
main > .content,
main > .content-section {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Breadcrumb / return path is a mandatory visible platform component. */
.tool-return-nav {
  min-height: 52px;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px;
  color: #5d7691;
  font-size: 14px;
}
.tool-return-link {
  min-height: 40px;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  color: #2f6599 !important;
  font-weight: 750;
  text-decoration: none !important;
}
.tool-return-link:hover,
.tool-return-link:focus-visible { background: #edf5ff; color: var(--nel-tool-focus) !important; }
.tool-return-link:focus-visible { outline: 3px solid rgba(23,111,242,.28); outline-offset: 2px; }

/* Standard calculator pages opt into nel-tool-grid; keep both columns aligned. */
@media (min-width: 1101px) {
  main.nel-tool-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr) !important;
    gap: var(--nel-tool-column-gap) !important;
    align-items: stretch !important;
  }
  main.nel-tool-grid > .card,
  main.nel-tool-grid > .input-panel,
  main.nel-tool-grid > .result-panel,
  main.nel-tool-grid > .config-panel,
  main.nel-tool-grid > .analysis-panel {
    min-width: 0;
    height: 100%;
    margin-bottom: 0 !important;
  }
}

/* Shared safety for tool cards/tables; no horizontal page overflow. */
main img, .content img, .content-section img { max-width: 100%; height: auto; }
main table, .content table, .content-section table { max-width: 100%; }
.result-table-wrap, .table-wrap, .responsive-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1100px) {
  :root { --nel-tool-gutter: 20px; }
  main.nel-tool-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; }
  .result-card, .result-panel, .analysis-panel { position: static !important; top: auto !important; }
}

@media (max-width: 768px) {
  :root { --nel-tool-gutter: 16px; }
  body > .breadcrumbs,
  body > nav.breadcrumbs,
  body > .hero,
  body > .tool-hero,
  body > main,
  body > main.workspace,
  body > main.calculator-shell,
  body > main.tool-shell,
  body > main.shell,
  body > .content,
  body > .content-section {
    width: calc(100% - (var(--nel-tool-gutter) * 2)) !important;
    max-width: none !important;
  }
  .tool-return-nav { min-height: 48px; padding-top: 8px !important; padding-bottom: 8px !important; }
  .tool-return-link { min-height: 44px; }
  main > .hero, main > .tool-hero { border-radius: 20px !important; }
}

@media (max-width: 420px) {
  :root { --nel-tool-gutter: 14px; }
}

@media print {
  .tool-return-nav { display: none !important; }
}

/* ================================================================
 * UI V1.3.1 — CANONICAL TOOL DETAIL BASELINE
 * Audit9 consolidation: one shared source of truth for tool typography,
 * Hero geometry, workspace cards, supporting sections and responsive rules.
 * Tool-local CSS may style engineering controls only.
 * ================================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] {
  margin: 0 !important;
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden !important;
  color: #102f52 !important;
  background: linear-gradient(180deg,#f8fbff 0,#f2f7fc 100%) !important;
  font-family: var(--nel-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif) !important;
  line-height: 1.58;
}

body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .tool-return-nav {
  width:min(calc(100% - (var(--nel-tool-gutter) * 2)),var(--nel-tool-max-width)) !important;
  max-width:var(--nel-tool-max-width) !important;
  margin-inline:auto !important;
}

body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero {
  width:min(calc(100% - (var(--nel-tool-gutter) * 2)),var(--nel-tool-max-width)) !important;
  max-width:var(--nel-tool-max-width) !important;
  margin:0 auto !important;
  min-height:300px !important;
  padding:46px 52px 44px !important;
  border:0 !important;
  border-radius:28px !important;
  color:#fff !important;
  overflow:hidden !important;
  background:radial-gradient(circle at 88% 18%,rgba(92,210,255,.22),transparent 30%),linear-gradient(118deg,#0b3a6d 0%,#0b5fa8 58%,#0f86ea 100%) !important;
  box-shadow:0 20px 48px rgba(8,54,99,.14) !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero > .hero-inner {
  width:100% !important;
  max-width:1240px !important;
  margin:0 !important;
  padding:0 !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero .eyebrow {
  margin:0 0 14px !important;
  color:#8fe5ff !important;
  font-size:13px !important;
  line-height:1.4 !important;
  letter-spacing:.13em !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero h1 {
  max-width:1220px !important;
  margin:0 !important;
  color:#fff !important;
  font-size:clamp(40px,3.65vw,62px) !important;
  line-height:1.12 !important;
  letter-spacing:-.035em !important;
  font-weight:900 !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  text-wrap:balance;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero h1 + p {
  max-width:1080px !important;
  margin:18px 0 0 !important;
  color:#eaf5ff !important;
  font-size:17px !important;
  line-height:1.75 !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero .hero-tags {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:24px 0 0 !important;
  padding:0 !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero .hero-tags > * {
  min-height:38px !important;
  padding:8px 14px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  color:#fff !important;
  background:rgba(255,255,255,.07) !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-main {
  width:min(calc(100% - (var(--nel-tool-gutter) * 2)),var(--nel-tool-max-width)) !important;
  max-width:var(--nel-tool-max-width) !important;
  margin:0 auto !important;
  padding:28px 0 44px !important;
  box-sizing:border-box !important;
}
@media (min-width:1101px) {
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr) !important;
    gap:24px !important;
    align-items:start !important;
  }
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-grid > .nel-tool-input,
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-grid > .nel-tool-result {
  min-width:0 !important;
  margin:0 !important;
  padding:28px 30px 30px !important;
  border:1px solid #dbe6f1 !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 14px 34px rgba(24,68,112,.08) !important;
  overflow:visible !important;
}

body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-generated-section-title {
  padding:0 0 20px !important;
  margin:0 0 20px !important;
  border-bottom:1px solid #e8eff7 !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-generated-section-title h2 {
  margin:1px 0 4px !important;
  font-size:26px !important;
  color:#0d3159 !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-generated-section-title p {
  margin:0 !important;
  color:#6d8096 !important;
  font-size:14px !important;
}

/* Historical nested panels are content only; platform geometry lives above. */
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-tool-input > .panel,
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-tool-result > .panel {
  margin:0 !important;
  padding:20px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-tool-input > .panel:first-of-type,
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-tool-result > .panel:first-of-type { padding-top:0 !important; }
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-tool-input > .panel + .panel,
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] .nel-tool-result > .panel + .panel { border-top:1px solid #e8eff7 !important; }

body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .content-section,
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-supporting-section {
  width:min(calc(100% - (var(--nel-tool-gutter) * 2)),var(--nel-tool-max-width)) !important;
  max-width:var(--nel-tool-max-width) !important;
  margin:0 auto 28px !important;
  padding:28px 30px !important;
  border:1px solid #dbe6f1 !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 14px 34px rgba(24,68,112,.06) !important;
  box-sizing:border-box !important;
}
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .content-section .section-heading > div > .eyebrow,
body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-supporting-section .eyebrow {
  margin:0 0 8px !important;
  color:#4e89ce !important;
  font-size:12px !important;
  line-height:1.4 !important;
  letter-spacing:.13em !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

@media (max-width:1100px) {
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-grid {grid-template-columns:1fr !important;}
}
@media (max-width:768px) {
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero {
    min-height:0 !important;
    padding:30px 24px 32px !important;
    border-radius:22px !important;
  }
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero h1 {
    font-size:clamp(32px,9vw,44px) !important;
    line-height:1.14 !important;
    word-break:normal !important;
  }
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > .nel-tool-hero h1 + p {font-size:15px !important;}
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-main {padding:18px 0 26px !important;}
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-grid > .nel-tool-input,
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] > main.tool-shell.nel-tool-grid > .nel-tool-result {padding:22px 20px 24px !important;}
}
@media print {
  body.nel-tool-detail-page[data-nel-template="tool-detail-v1.3.1"] {background:#fff !important;}
}