/* NetEngineerLab tool-page design system
   Loaded last on every calculator page so all generations share one shell. */

:root {
  --nel-page: #f2f7fc;
  --nel-surface: #ffffff;
  --nel-ink: #082f59;
  --nel-muted: #5d7691;
  --nel-line: #d7e3ef;
  --nel-blue: #0b6ff2;
  --nel-blue-dark: #083d73;
  --nel-hero-a: #063766;
  --nel-hero-b: #0877dd;
  --nel-radius: 22px;
  --nel-shadow: 0 18px 48px rgba(8, 47, 89, 0.10);
  --nel-max: 1400px;
  --nel-gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--nel-ink);
  background: linear-gradient(#fff 0 124px, var(--nel-page) 124px 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: var(--nel-blue-dark);
}

.skip-link:focus { transform: none; }

body > .site-header {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  min-height: 84px !important;
  margin: 0 auto !important;
  padding: 14px 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .brand {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--nel-ink) !important;
  text-decoration: none !important;
}

.site-header .brand img {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px;
  border-radius: 13px;
}

.site-header .brand strong {
  display: block;
  font-size: clamp(20px, 1.7vw, 27px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
}

.site-header .brand small {
  display: block;
  margin-top: 4px;
  color: var(--nel-muted) !important;
  font-size: 13px !important;
  line-height: 1.2;
}

.site-header .nel-global-nav,
.site-header .top-nav,
.site-header .nav {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.site-header .nel-global-nav a,
.site-header .top-nav a,
.site-header .nav a {
  min-height: 44px;
  padding: 10px 14px !important;
  border-radius: 11px;
  display: inline-flex !important;
  align-items: center;
  color: var(--nel-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.site-header .nel-global-nav a:hover,
.site-header .nel-global-nav a:focus-visible {
  color: var(--nel-blue) !important;
  background: #edf5ff;
}

.site-header .header-actions {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.site-header .language,
.site-header .language-trigger {
  min-height: 46px;
  padding: 10px 16px !important;
  border: 1px solid var(--nel-line) !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--nel-ink) !important;
  background: #fff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

body > .breadcrumbs,
body > nav.breadcrumbs {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  min-height: 52px;
  margin: 0 auto !important;
  padding: 14px 0 !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--nel-muted) !important;
  background: transparent !important;
  font-size: 14px;
}

.breadcrumbs a {
  color: #396b9c !important;
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { text-decoration:none; }

body > .hero,
body > .tool-hero {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  min-height: 260px !important;
  margin: 0 auto !important;
  padding: clamp(34px, 4vw, 56px) !important;
  border-radius: 26px !important;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(118deg, var(--nel-hero-a), var(--nel-hero-b)) !important;
  box-shadow: 0 22px 50px rgba(5, 51, 96, 0.16);
}

/* A Hero nested inside the canonical main already inherits the page gutter.
   Never subtract that gutter again. */
main > .hero,
main > .tool-hero {
  width: 100% !important;
  max-width: none !important;
  min-height: 260px !important;
  margin: 0 !important;
  padding: clamp(34px, 4vw, 56px) !important;
  border-radius: 26px !important;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(118deg, var(--nel-hero-a), var(--nel-hero-b)) !important;
  box-shadow: 0 22px 50px rgba(5, 51, 96, 0.16);
}

/* Nested tool pages use a light hero surface; keep all text readable. */
main > .tool-hero {
  color: var(--nel-blue-dark) !important;
  background: linear-gradient(118deg, #eef6ff, #f8fbff) !important;
}

.hero .hero-inner,
.tool-hero > div:first-child { max-width: 900px; }

.hero .eyebrow,
.tool-hero .eyebrow {
  margin: 0 0 14px !important;
  color: #8fd9ff !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1,
.tool-hero h1 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(36px, 4.2vw, 62px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em;
}

main > .tool-hero h1 {
  color: var(--nel-blue-dark) !important;
}

.hero h1 + p,
.tool-hero .hero-copy {
  max-width: 900px;
  margin: 18px 0 0 !important;
  color: #e6f3ff !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  line-height: 1.8 !important;
}

main > .tool-hero > p:last-child {
  color: #153f66 !important;
}

.hero .tags,
.tool-hero .hero-badges {
  margin-top: 22px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

.hero .tags span,
.tool-hero .hero-badges span {
  padding: 8px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  font-size: 14px !important;
  line-height: 1.2;
}

body > main,
body > main.tool-shell,
body > main.workspace,
body > main.shell,
body > main.calculator-shell {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  margin: 26px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Standalone mode controls share the calculator's outer edges. */
body > .mode-tabs {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
}

body > main.nel-tool-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
  align-items: stretch !important;
  gap: 24px !important;
}

body > main.nel-tool-grid > section,
body > main.nel-tool-grid > .card,
body > main.nel-tool-grid > .input-panel,
body > main.nel-tool-grid > .result-panel,
body > main.nel-tool-grid > .config-panel,
body > main.nel-tool-grid > .analysis-panel {
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(22px, 2.4vw, 32px) !important;
  border: 1px solid var(--nel-line) !important;
  border-radius: var(--nel-radius) !important;
  background: var(--nel-surface) !important;
  box-shadow: var(--nel-shadow) !important;
}

/* Keep two-column tools readable at tablet/zoomed desktop widths. The
 * higher-specificity base rule above otherwise overrides tool-layout's
 * 1100px stack breakpoint and lets the result card run into the viewport. */
@media (max-width: 1100px) {
  body > main.nel-tool-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body > main h2,
body > main .section-title h2 {
  margin-top: 0;
  color: var(--nel-ink) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}

body > main .field label,
body > main .form-group label,
body > main .control-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--nel-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body > main input:not([type="checkbox"]):not([type="radio"]),
body > main select,
body > main textarea {
  min-height: 44px;
  border-color: #c7d8e8 !important;
  border-radius: 10px;
  color: var(--nel-ink) !important;
  background: #fff !important;
}

body > main .input-wrap {
  min-height: 44px;
  border-color: #c7d8e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
}

body > main input:focus-visible,
body > main select:focus-visible,
body > main textarea:focus-visible,
body > main button:focus-visible {
  outline: 3px solid rgba(11, 111, 242, 0.28) !important;
  outline-offset: 2px !important;
}

body > main .summary,
body > main .summary-card {
  border: 1px solid #cfe1f2 !important;
  border-radius: 16px !important;
  background: #eff7ff !important;
}

body > main .metric,
body > main .metric-card,
body > main .result-box,
body > main .result-item {
  border: 1px solid var(--nel-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

body > .content,
body > .content-section,
body > section.content,
body > section.content-section,
body > section.methodology,
body > section.faq-section,
body > section#related {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  margin: 26px auto 0 !important;
  /* The shared width already provides the page gutter. Legacy section
     padding otherwise indents headings and cards relative to the calculator. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.content > .grid,
.content-section .method-grid,
.content-section .faq-grid {
  align-items: stretch;
  gap: 24px !important;
}

.content > .grid > article,
.content-section .method-grid > article,
.content-section .faq-grid > details {
  border: 1px solid var(--nel-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
}

/* ACL explanatory cards need their own layout and internal spacing. */
main.acl-shell + .content > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
main.acl-shell + .content > .grid > article {
  min-width: 0;
  padding: 24px;
  overflow-wrap: anywhere;
}
main.acl-shell + .content > .grid > article > h3 { margin: 0 0 12px; }
main.acl-shell + .content > .grid > article > p { margin: 0; line-height: 1.65; }
@media (max-width: 760px) {
  main.acl-shell + .content > .grid { grid-template-columns: minmax(0, 1fr); }
  main.acl-shell + .content > .grid > article { padding: 20px; }
}

.content h2,
.content-section h2,
.methodology h2,
.faq-section h2 {
  color: var(--nel-ink) !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}

.actions,
.action-row,
.export-actions,
.result-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 10px !important;
}

.actions button,
.action-row button,
.export-actions button,
.result-actions button {
  min-height: 44px;
  padding: 10px 16px !important;
  border: 1px solid var(--nel-line) !important;
  border-radius: 12px !important;
  color: var(--nel-ink) !important;
  background: #edf4fb !important;
  font-weight: 800 !important;
  cursor: pointer;
}

.actions button.primary,
.action-row button.primary,
.export-actions button.primary,
.result-actions button.primary {
  border-color: var(--nel-blue) !important;
  color: #fff !important;
  background: var(--nel-blue) !important;
}

.nel-history {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--nel-line);
}

.nel-history summary {
  color: var(--nel-ink);
  font-weight: 800;
  cursor: pointer;
}

.nel-history-list {
  margin: 14px 0;
  display: grid;
  gap: 10px;
}

.nel-history-list article {
  padding: 12px 14px;
  border: 1px solid var(--nel-line);
  border-radius: 12px;
  background: #f7fbff;
}

.nel-history-list time {
  color: var(--nel-muted);
  font-size: 12px;
}

.nel-history-list p { margin: 5px 0 0; line-height: 1.6; }

.nel-announcer {
  position: fixed;
  z-index: 9998;
  right: 18px;
  bottom: 18px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  color: #fff;
  background: var(--nel-blue-dark);
  box-shadow: var(--nel-shadow);
}

body > footer {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  margin: 38px auto 0 !important;
  padding: 28px 0 34px !important;
  border-top: 1px solid var(--nel-line) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  color: var(--nel-muted) !important;
  background: transparent !important;
}

footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

footer .footer-links a { color: #396b9c; text-decoration: none; }
footer .footer-links a:hover { text-decoration:none; }

@media (max-width: 980px) {
  :root { --nel-gutter: 16px; }

  body > .site-header {
    min-height: auto !important;
    padding: 12px 0 !important;
    flex-wrap: wrap;
    gap: 10px 14px !important;
  }

  .site-header .brand { margin-right: auto; }
  .site-header .brand img { width: 46px !important; height: 46px !important; flex-basis: 46px; }
  .site-header .brand strong { font-size: 20px !important; }
  .site-header .brand small { display: none !important; }

  .site-header .nel-global-nav,
  .site-header .top-nav,
  .site-header .nav {
    order: 3;
    width: 100%;
    margin: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-header .nel-global-nav::-webkit-scrollbar,
  .site-header .top-nav::-webkit-scrollbar,
  .site-header .nav::-webkit-scrollbar { display: none; }

  .site-header .nel-global-nav a,
  .site-header .top-nav a,
  .site-header .nav a { padding: 8px 10px !important; font-size: 14px; }

  body > .hero,
  body > .tool-hero {
    min-height: 0 !important;
    padding: 30px 24px !important;
    border-radius: 20px !important;
  }

  body > main.nel-tool-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body > main.nel-tool-grid > section,
  body > main.nel-tool-grid > .card,
  body > main.nel-tool-grid > .input-panel,
  body > main.nel-tool-grid > .result-panel,
  body > main.nel-tool-grid > .config-panel,
  body > main.nel-tool-grid > .analysis-panel { min-height: 0 !important; }
}

@media (max-width: 560px) {
  :root { --nel-gutter: 12px; }
  body > .breadcrumbs, body > nav.breadcrumbs { font-size: 13px; }
  .hero h1, .tool-hero h1 { font-size: clamp(30px, 10vw, 42px) !important; }
  .hero h1 + p, .tool-hero .hero-copy { font-size: 15px !important; line-height: 1.65 !important; }
  body > main.nel-tool-grid > section,
  body > main.nel-tool-grid > .card,
  body > main.nel-tool-grid > .input-panel,
  body > main.nel-tool-grid > .result-panel,
  body > main.nel-tool-grid > .config-panel,
  body > main.nel-tool-grid > .analysis-panel { padding: 20px !important; }
  body > footer { align-items: flex-start; flex-direction: column; }
}

@media print {
  body { background: #fff !important; }
  .site-header, .breadcrumbs, .tool-hero, .hero, .actions, .action-row,
  .export-actions, .cookie-banner, footer { display: none !important; }
  body > main, body > .content, body > .content-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* NetEngineerLab V2.1 Phase1 — Registry-driven workflow / previous / next / related navigation. */
.nel-tool-graph{margin-top:28px!important}
.nel-workflow-context{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px);gap:24px;align-items:center;padding:22px;border:1px solid #dce8f5;border-radius:16px;background:linear-gradient(135deg,#f7fbff 0%,#fff 75%)}
.nel-workflow-context>div>span,.nel-workflow-memberships>span{display:block;margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#607d9a}
.nel-workflow-context strong{display:block;color:#153f66;font-size:18px}.nel-workflow-context p{margin:7px 0 0;color:#526b82;line-height:1.65}
.nel-workflow-step{min-width:0}.nel-workflow-step>strong{font-size:14px;text-align:right}.nel-workflow-progress{height:8px;margin-top:10px;border-radius:999px;background:#e6eef7;overflow:hidden}.nel-workflow-progress span{display:block;height:100%;border-radius:inherit;background:#176ff2}
.nel-tool-graph-nav,.nel-tool-graph-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.nel-tool-graph-related{grid-template-columns:repeat(4,minmax(0,1fr))}
.nel-tool-graph-card{display:flex;min-width:0;min-height:118px;flex-direction:column;gap:7px;padding:17px 18px;border:1px solid #dbe7f3;border-radius:14px;background:#fff;color:inherit;text-decoration:none!important;box-shadow:0 8px 24px rgba(31,72,112,.06);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
a.nel-tool-graph-card:hover,a.nel-tool-graph-card:focus-visible{transform:translateY(-2px);border-color:#8dbcf8;box-shadow:0 12px 28px rgba(31,72,112,.11);outline:none}.nel-tool-graph-card.is-muted{background:#f7f9fc;box-shadow:none;opacity:.8}
.nel-tool-graph-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#176ff2}.nel-tool-graph-card strong{color:#153f66;font-size:16px;line-height:1.35}.nel-tool-graph-card>span:last-child{color:#60758a;font-size:13px;line-height:1.5}
.nel-tool-graph-subtitle{margin:25px 0 0;color:#153f66;font-size:18px}.nel-workflow-memberships{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid #e5edf5}.nel-workflow-memberships>span{width:100%;margin-bottom:1px}.nel-workflow-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf5ff;color:#245d92;font-size:12px;font-weight:700}
@media(max-width:900px){.nel-workflow-context{grid-template-columns:1fr}.nel-workflow-step>strong{text-align:left}.nel-tool-graph-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.nel-tool-graph-nav,.nel-tool-graph-related{grid-template-columns:1fr}.nel-tool-graph-card{min-height:0}.nel-workflow-context{padding:18px}}
@media print{.nel-tool-graph{display:none!important}}

/* ================================================================
   NetEngineerLab Tool Detail Template V1.2
   Unified semantic hooks for all generations of tool pages.
   ================================================================ */
.nel-tool-detail-page > .nel-tool-hero {
  width: min(calc(100% - (var(--nel-gutter) * 2)), var(--nel-max)) !important;
  max-width: var(--nel-max) !important;
  min-height: 260px !important;
  margin: 0 auto !important;
  padding: clamp(34px, 4vw, 56px) !important;
  border-radius: 26px !important;
  color: #fff !important;
  background: linear-gradient(118deg, var(--nel-hero-a), var(--nel-hero-b)) !important;
  box-shadow: 0 22px 50px rgba(5, 51, 96, 0.16) !important;
}

.nel-tool-detail-page > .nel-tool-hero .hero-inner {
  width: 100% !important;
  max-width: none !important;
}

.nel-tool-detail-page > .nel-tool-hero h1 {
  max-width: 1180px;
  font-size: clamp(34px, 3.8vw, 56px) !important;
  line-height: 1.14 !important;
  overflow-wrap: normal;
  word-break: keep-all;
}

.nel-tool-detail-page > .nel-tool-hero p:not(.eyebrow) {
  max-width: 1060px;
}

/* Legacy calculators keep their engine-specific .grid/.layout class, but the
 * source HTML now also exposes this single V1.2 semantic workspace hook. */
.nel-tool-main > .nel-tool-primary-grid:not(.acl-grid):not(.planner-grid),
.nel-tool-main.nel-tool-primary-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.nel-tool-main > .nel-tool-primary-grid:not(.acl-grid):not(.planner-grid) > .nel-tool-input,
.nel-tool-main > .nel-tool-primary-grid:not(.acl-grid):not(.planner-grid) > .nel-tool-result {
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: clamp(22px, 2.4vw, 32px) !important;
  border: 1px solid var(--nel-line) !important;
  border-radius: var(--nel-radius) !important;
  background: var(--nel-surface) !important;
  box-shadow: var(--nel-shadow) !important;
}

/* Standard direct-grid generations use the same two semantic cards. */
.nel-tool-main.nel-tool-primary-grid > .nel-tool-input,
.nel-tool-main.nel-tool-primary-grid > .nel-tool-result {
  min-width: 0;
}

.nel-tool-supporting-section {
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .nel-tool-main > .nel-tool-primary-grid:not(.acl-grid):not(.planner-grid),
  .nel-tool-main.nel-tool-primary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .nel-tool-detail-page > .nel-tool-hero {
    padding: 28px 22px !important;
    border-radius: 20px !important;
    min-height: 0 !important;
  }
  .nel-tool-detail-page > .nel-tool-hero h1 {
    font-size: clamp(30px, 8vw, 42px) !important;
  }
}