/* ═══════════════════════════════════════════════════════════════════════
   shell.css — the site chrome shared by every page (2026-09 refresh)

   Header + Tools menu, mobile drawer, footer + newsletter, donate button,
   and a few site-wide type fixes. Loaded LAST by both base templates (after
   style.css / site.css) so the chrome is identical on tool and site pages.
   Tokens come from base.css. Markup: templates/_shell/*.html; behaviour:
   js/shell.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Utilities ──────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 10001;
  background: var(--white); color: var(--dark); padding: 8px 14px;
  border-radius: 6px; font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--red); outline-offset: 2px; }
main:focus { outline: none; }

/* ── Site-wide type polish ──────────────────────────────────────────── */
.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-bottom: 6px;
}
/* #999 on the #f0f0f0 page is ~2.5:1; #6b6b6b is 4.7:1 (WCAG AA). */
.page-subtitle { color: #6b6b6b; }
.breadcrumb { color: #6b6b6b; padding-top: 14px; }

/* ── Tool header band (base.html) ───────────────────────────────────
   The dark header continues into a compact panel on every tool page:
   breadcrumb + in-tool links, then the tool's icon, title and subtitle.
   Same blueprint grid as the home hero, quieter. Inner width matches
   main.page (960px) so the title lines up with the content below. */
.tool-head {
  flex-shrink: 0;
  background-color: var(--dark);
  background-image:
    radial-gradient(ellipse 55% 140% at 88% 30%, transparent 0%, var(--dark) 72%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  color: var(--white);
}
.tool-head-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 28px 28px;
}
.tool-head--slim .tool-head-inner { padding-bottom: 14px; }
/* Narrow site pages (contact): same edges as .page--narrow's content. */
.tool-head--narrow .tool-head-inner { max-width: 700px; padding-left: 16px; padding-right: 16px; }
/* Desktop-only data pages (MTDZ graphs, topology) get more room. */
.page-wide .tool-head-inner,
.page-wide main.page { max-width: 1240px; }
.crumbbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 30px;
}
.tool-head .breadcrumb {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: #9a9a9a;
}
.tool-head .breadcrumb a { color: var(--on-dark); text-decoration: none; }
.tool-head .breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; }
.subnav:empty { display: none; }
.subnav a {
  padding: 5px 13px;
  border: 1px solid #3d3d3d;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--on-dark);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.subnav a:hover { border-color: var(--white); color: var(--white); }
.subnav a:focus-visible,
.tool-head .breadcrumb a:focus-visible { outline: 2px solid var(--red-on-dark); outline-offset: 2px; }

.tool-head-main {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}
.tool-head-icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--ink-2);
  border: 1px solid #3a3a3a;
  color: var(--red-on-dark);
}
.tool-head-text { min-width: 0; }
.tool-head .page-title {
  color: var(--white);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}
.tool-head .page-subtitle {
  color: var(--on-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 6px 0 0;
  max-width: 72ch;
}
/* Inline code in a band subtitle (e.g. the static-IP tutorial's address). */
.tool-head code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--ink-2);
  border: 1px solid #3a3a3a;
  color: var(--white);
  font: 500 0.9em var(--font-mono);
}
/* Plain links in page content (docs, how-to notes) use the brand red, not
   the browser's default blue. Component links keep their own styles. */
main.page a:not([class]) { color: var(--red); text-underline-offset: 2px; }
main.page a:not([class]):hover { color: #a83224; }
/* The Beta pill sits on the dark band here, not on white. */
.tool-head .beta-badge { vertical-align: 0.35em; margin-left: 6px; }

@media (max-width: 768px) {
  .tool-head-inner { padding: 12px 16px 22px; }
  .tool-head-main { gap: 14px; margin-top: 12px; }
  .tool-head-icon { width: 44px; height: 44px; border-radius: 11px; }
}
/* Phones: long tool titles need the full width more than the icon. */
@media (max-width: 640px) {
  .tool-head-icon { display: none; }
}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: var(--dark);
  color: var(--white);
  border-bottom: 1px solid #000;
}
.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--red); }
.logo--sm { font-size: 17px; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.nav-item { height: 100%; display: flex; align-items: center; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--on-dark);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { color: var(--white); }
/* Active section: a red bar sitting on the header's bottom edge. */
.nav-link.is-active { color: var(--white); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--red);
}
.nav-menu-btn .ico-chevron { transition: transform 0.2s; opacity: 0.7; }
.nav-menu-btn[aria-expanded="true"] .ico-chevron { transform: rotate(180deg); }

.site-header :focus-visible {
  outline: 2px solid var(--red-on-dark);
  outline-offset: -2px;
  border-radius: 4px;
}

.nav-donate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--copper-line);
  border-radius: 999px;
  color: var(--copper-line);
  font: 600 13.5px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-donate:hover { background: var(--copper); border-color: var(--copper); color: var(--white); }

/* ── Tools menu (desktop) ───────────────────────────────────────────── */
/* .nav-item--menu is static, so the panel positions against the sticky
   header (right-aligned with the nav) rather than squeezing under the button. */
.mega {
  display: none;
  position: absolute;
  top: calc(var(--header-h) - 1px);
  right: 28px;
  width: min(920px, calc(100vw - 32px));
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 8px;
  padding: 18px;
  background: var(--white);
  color: var(--dark);
  border-radius: 0 0 14px 14px;
  border-top: 3px solid var(--red);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.nav-item--menu.is-open .mega { display: grid; }
.mega-col { padding: 6px; min-width: 0; }
.mega-col + .mega-col { border-left: 1px solid var(--border); padding-left: 14px; }
.mega-head {
  font: 600 13px/1.2 var(--font-sans);
  color: #6b6b6b;
  margin: 2px 8px 10px;
}
.mega ul { list-style: none; }
.mega-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 8px;
  border-radius: 9px;
  color: var(--dark);
  text-decoration: none;
  transition: background 0.12s;
}
.mega-link:hover,
.mega-link:focus-visible { background: var(--red-light); outline: none; }
.mega-link[aria-current="page"] .mega-name { color: var(--red); }
.mega-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  color: var(--red);
}
.mega-link:hover .mega-icon { background: var(--white); }
.mega-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.mega-summary { font-size: 13px; line-height: 1.4; color: var(--gray); }

/* ── Burger + mobile drawer ─────────────────────────────────────────── */
.nav-burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  place-items: center;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: 9px;
  color: var(--white);
  cursor: pointer;
}
.nav-burger-close { display: none; }
.nav-burger[aria-expanded="true"] .nav-burger-open { display: none; }
.nav-burger[aria-expanded="true"] .nav-burger-close { display: inline; }
.nav-burger span { line-height: 0; }

@media (max-width: 900px) {
  .site-header { padding: 0 16px; gap: 12px; }
  .nav-burger { display: grid; }
  .site-nav { display: none; }

  .site-header.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    height: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 32px;
    background: var(--dark);
    border-top: 1px solid var(--ink-line);
  }
  .site-header.nav-open .nav-item { height: auto; display: block; }
  /* In the drawer the Tools menu is always expanded, so its toggle goes. */
  .site-header.nav-open .nav-menu-btn { display: none; }
  .site-header.nav-open .mega {
    display: block;
    position: static;
    width: auto;
    padding: 0;
    background: none;
    color: var(--white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-header.nav-open .mega-col,
  .site-header.nav-open .mega-col + .mega-col {
    border-left: 0;
    padding: 14px 0 6px;
    border-bottom: 1px solid var(--ink-line);
  }
  .site-header.nav-open .mega-head { color: #9a9a9a; margin: 0 0 6px; }
  .site-header.nav-open .mega-link { color: var(--white); padding: 9px 0; }
  .site-header.nav-open .mega-link:hover,
  .site-header.nav-open .mega-link:focus-visible { background: var(--ink-2); }
  .site-header.nav-open .mega-icon { background: var(--ink-2); border-color: var(--ink-line); color: var(--red-on-dark); }
  .site-header.nav-open .mega-summary { color: var(--on-dark); }
  .site-header.nav-open .nav-link {
    height: auto;
    padding: 16px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--ink-line);
  }
  .site-header.nav-open .nav-link.is-active::after { left: -16px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .site-header.nav-open .nav-donate {
    justify-content: center;
    margin: 22px 0 0;
    padding: 13px 16px;
    font-size: 15px;
    background: var(--copper);
    border-color: var(--copper);
    color: var(--white);
  }
  body.nav-locked { overflow: hidden; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  flex-shrink: 0;
  margin-top: 40px;
  background: var(--dark);
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.55;
}
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 48px 28px 28px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer :focus-visible { outline: 2px solid var(--red-on-dark); outline-offset: 2px; border-radius: 3px; }

.footer-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 48px;
  align-items: center;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ink-line);
}
.footer-news-title {
  grid-column: 1;
  font: 600 1.5rem/1.2 var(--font-display);
  color: var(--white);
}
.footer-news-copy { grid-column: 1; max-width: 46ch; }
.footer-news .news-form { grid-column: 2; grid-row: 1 / span 2; }

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 32px;
  padding: 36px 0;
}
.footer-col-head { color: var(--white); font-weight: 600; margin-bottom: 10px; }
.footer-col ul { list-style: none; display: grid; gap: 6px; }
.footer-support-copy { max-width: 36ch; margin-bottom: 14px; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
  font-size: 13px;
  color: #9a9a9a;
}
.footer-base .logo { margin-right: 4px; }
.footer-base .logo:hover { text-decoration: none; }
.footer-base p:last-child { margin-left: auto; }

@media (max-width: 800px) {
  .footer-inner { padding: 40px 16px 24px; }
  .footer-news { grid-template-columns: 1fr; }
  .footer-news .news-form { grid-column: 1; grid-row: auto; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-col--support { grid-column: 1 / -1; }
  .footer-base p:last-child { margin-left: 0; }
}

/* ── Donate button (footer, MT+ page, download panel) ───────────────── */
a.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border-radius: 9px;
  background: var(--copper);
  color: var(--white);
  font: 600 14.5px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 6px rgba(143, 77, 26, 0.3);
  transition: background 0.15s, transform 0.15s;
}
a.btn-donate:hover { background: var(--copper-dark); color: var(--white); text-decoration: none; }
a.btn-donate:active { transform: translateY(1px); }
a.btn-donate:focus-visible { outline: 2px solid var(--copper-line); outline-offset: 3px; }

/* ── Newsletter form (light by default; dark inside the footer) ───────
   Two-class selectors so they outrank site.css's global input[type=email]. */
.news-form { position: relative; width: 100%; max-width: 480px; }
.news-row { display: flex; gap: 8px; }
.news-form .news-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #cfcfcf;
  border-radius: 9px;
  background: var(--white);
  color: var(--dark);
  font: 400 15px var(--font-sans);
}
.news-form .news-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }
.news-btn {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--red);
  color: var(--white);
  font: 600 14.5px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.news-btn:hover { background: #a83224; }
.news-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.news-btn[disabled] { opacity: 0.6; cursor: progress; }
.news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.news-msg { min-height: 1.4em; margin-top: 8px; font-size: 13.5px; color: var(--gray); }
.news-msg.is-ok { color: #1e7a45; }
.news-msg.is-err { color: var(--red); }
.news-form.is-done .news-row { display: none; }
.news-form.is-done .news-msg { margin-top: 0; font-size: 15px; }

.site-footer .news-form .news-input { background: var(--ink-2); color: var(--white); border-color: #3d3d3d; }
.site-footer .news-form .news-input::placeholder { color: #8a8a8a; }
.site-footer .news-form .news-input:focus { border-color: var(--red-on-dark); box-shadow: 0 0 0 3px rgba(232, 104, 90, 0.25); }
.site-footer .news-msg { color: var(--on-dark); }
.site-footer .news-msg.is-ok { color: #7fd19b; }
.site-footer .news-msg.is-err { color: var(--red-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-footer *, .btn-donate { transition: none; }
}