:root{
  --ink:#1f2937;
  --muted:#5f6b7a;
  --line:#dce3ec;
  --paper:#ffffff;
  --wash:#f6f8fb;
  --brand:#16324f;
  --brand-deep:#0d2338;
  --accent:#d98724;
  --radius:18px;
  --border:#dce3ec;
  --shadow:0 12px 35px rgba(15,35,56,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--wash);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.65;
}
img{max-width:100%;height:auto}
a{color:#174f86}
a:hover{text-decoration-thickness:2px}
.site-header{
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:white;
  padding:24px 20px 72px;
}
.header-inner,.hero-inner,.page-shell,.footer-inner{
  width:min(1120px,100%);
  margin:0 auto;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.site-logo{
  display:block;
  width:230px;
  max-width:60vw;
  background:#fff;
  border-radius:14px;
  padding:7px 12px;
}
.site-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.site-nav a{
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:8px 13px;
  background:rgba(255,255,255,.08);
}
.site-nav a:hover,.site-nav a:focus{
  background:rgba(255,255,255,.18);
}
.hero-inner{padding-top:52px}
.eyebrow{
  display:inline-block;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffe6b7;
}
.hero-inner h1{
  max-width:900px;
  margin:8px 0 16px;
  font-size:clamp(2.5rem,7vw,5.4rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.hero-inner p{
  max-width:820px;
  margin:0;
  font-size:clamp(1.08rem,2.2vw,1.32rem);
  color:#eef5fb;
}
.hero-promise{
  margin-top:22px;
  font-weight:800;
  color:#fff;
}
.page-shell{
  margin-top:-36px;
  padding:0 20px 70px;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 12px 35px rgba(15,35,56,.08);
  padding:clamp(22px,4vw,38px);
  margin-bottom:20px;
}
.card h2,.card h3{line-height:1.2;color:#17324f}
.card h2{font-size:clamp(1.65rem,3.6vw,2.35rem);margin-top:0}
.card h3{font-size:1.25rem}
.lede{font-size:1.16rem;color:#34495e}
.search-panel{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.search-panel input{
  flex:1;
  min-width:0;
  border:1px solid #bdc9d7;
  border-radius:12px;
  padding:15px 16px;
  font:inherit;
  font-size:1.08rem;
}
.search-panel button{
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#251507;
  font-weight:900;
  padding:0 22px;
  cursor:pointer;
}
.search-results{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.search-result{
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  text-decoration:none;
  background:#fbfcfe;
}
.search-result strong,.search-result span{display:block}
.search-result span{color:var(--muted);font-size:.92rem}
.subject-grid,.feature-grid,.reason-grid,.link-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.subject-card,.feature-card,.reason-card,.link-card{
  display:block;
  border:1px solid var(--line);
  border-radius:15px;
  padding:18px;
  background:#fff;
  text-decoration:none;
}
.subject-card strong,.feature-card strong,.link-card strong{
  display:block;
  color:#17324f;
  font-size:1.08rem;
}
.subject-card span,.feature-card span,.link-card span,.reason-card p{
  color:var(--muted);
  font-size:.94rem;
}
.subject-card:hover,.feature-card:hover,.link-card:hover{
  border-color:#9fb2c7;
  box-shadow:0 8px 22px rgba(31,65,99,.08);
}
.fact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.fact{
  border-radius:14px;
  padding:16px;
  background:#edf4fa;
}
.fact strong,.fact span{display:block}
.fact span{color:var(--muted);font-size:.92rem}
.notice{
  padding:16px 18px;
  border-radius:14px;
  border-left:5px solid var(--accent);
  background:#fff8ed;
}
.quote{
  font-size:1.18rem;
  border-left:5px solid #98aec4;
  padding-left:18px;
  color:#34495e;
}
.faq details{
  border-top:1px solid var(--line);
  padding:14px 0;
}
.faq details:first-child{border-top:0}
.faq summary{
  font-weight:800;
  cursor:pointer;
  color:#17324f;
}
.breadcrumbs{
  font-size:.94rem;
  margin-bottom:18px;
  color:#dce8f3;
}
.breadcrumbs a{color:#fff}
.meta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0;
}
.meta-pill{
  border:1px solid var(--line);
  border-radius:999px;
  background:#f8fafc;
  padding:7px 11px;
  font-size:.9rem;
  color:#536273;
}
.prose{max-width:820px}
.prose h2{margin-top:38px}
.prose p,.prose li{font-size:1.04rem}
.cta{
  background:#17324f;
  color:white;
}
.cta h2,.cta a{color:white}
.cta p{color:#e7eef5}
.site-footer{
  background:#0e2235;
  color:#dce8f3;
  padding:38px 20px;
}
.footer-inner{display:grid;gap:20px}
.footer-brand strong,.footer-brand span{display:block}
.footer-brand strong{color:white;font-size:1.25rem}
.footer-disclosure{font-size:.9rem;margin-top:8px;color:#aec0d0}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.footer-links a{color:#eaf2f8}
.footer-copy{font-size:.9rem;color:#aec0d0}
.sitemap-section{margin-top:28px}
.sitemap-list{
  columns:3 250px;
  column-gap:30px;
  padding-left:20px;
}
.sitemap-list li{break-inside:avoid;margin:0 0 8px}
@media(max-width:800px){
  .subject-grid,.feature-grid,.reason-grid,.link-grid{grid-template-columns:1fr 1fr}
  .fact-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .subject-grid,.feature-grid,.reason-grid,.link-grid,.fact-grid{grid-template-columns:1fr}
  .search-panel{flex-direction:column}
  .search-panel button{padding:13px}
  .site-header{padding-bottom:58px}
}

/* Version 4 Sprint 2 */
.page-information{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 20px;
}
.page-information .info-item{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f8fafc;
}
.page-information strong,
.page-information span{display:block}
.page-information strong{
  font-size:.76rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:3px;
}
.page-information span{color:#253b50;font-weight:700}
.policy-callout{
  background:#eef5fb;
  border:1px solid #c9d8e7;
  border-radius:14px;
  padding:17px 18px;
  margin:20px 0;
}
.policy-warning{
  background:#fff8ed;
  border:1px solid #efd3a7;
  border-left:5px solid var(--accent);
  border-radius:12px;
  padding:17px 18px;
  margin:20px 0;
}
.reference-group{
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:24px;
}
.reference-list{padding-left:20px}
.reference-list li{margin-bottom:12px}
.review-table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0;
}
.review-table th,.review-table td{
  border:1px solid var(--line);
  padding:11px 12px;
  text-align:left;
  vertical-align:top;
}
.review-table th{background:#eef4f9;color:#17324f}
.check-list{list-style:none;padding:0}
.check-list li{
  padding:10px 0 10px 30px;
  border-bottom:1px solid #edf1f5;
  position:relative;
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:4px;
  font-weight:900;
  color:#276749;
}
@media(max-width:760px){
  .page-information{grid-template-columns:1fr 1fr}
}
@media(max-width:440px){
  .page-information{grid-template-columns:1fr}
}

/* Sprint 3 Chapter 1: Windows authority pages */
.chapter-lede{font-size:1.16rem;color:#34495e}
.editorial-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);margin-bottom:30px}
.editorial-section h2{margin-top:0;font-size:1.7rem;letter-spacing:-.03em}
.editorial-section h3{color:#243b53;margin-top:24px}
.editorial-section li{margin-bottom:8px}
.learn-box,.formula-box{border-radius:14px;padding:16px 18px;margin:18px 0}
.learn-box{background:#eef6ff;border:1px solid #c9dcf2;border-left:5px solid #475569}
.learn-box strong{display:block;color:#17324f;margin-bottom:4px}
.learn-box p{margin:0}
.formula-box{background:#f8fafc;border:1px solid var(--border)}
.formula-box code{font-size:1rem;white-space:normal}
.faq-list details{border-top:1px solid var(--border);padding:13px 0}
.faq-list details:first-child{border-top:0}
.faq-list summary{font-weight:800;cursor:pointer;color:#17324f}
.related-explained{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.related-explained a{display:block;border:1px solid var(--border);border-radius:14px;padding:16px;background:#f8fafc}
.related-explained strong,.related-explained span{display:block}
.related-explained span{font-size:.92rem;color:var(--muted);margin-top:4px}
.reference-links li{margin-bottom:9px}
@media(max-width:760px){.related-explained{grid-template-columns:1fr}}

/* Version 4 unified site header and footer */
.site-header{
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff;
  padding:24px 20px 72px;
}
.site-header .header-inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.site-header .site-logo{
  display:block;
  width:230px;
  max-width:60vw;
  height:auto;
  background:#fff;
  border-radius:14px;
  padding:7px 12px;
}
.site-header .site-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.site-header .site-nav a{
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:8px 13px;
  background:rgba(255,255,255,.08);
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus{
  background:rgba(255,255,255,.18);
}
.site-header .hero-inner{
  width:min(1120px,100%);
  margin:0 auto;
  padding-top:52px;
}
.site-header .breadcrumbs{
  font-size:.94rem;
  margin-bottom:18px;
  color:#dce8f3;
}
.site-header .breadcrumbs a{color:#fff}
.site-header .eyebrow{
  display:inline-block;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffe6b7;
}
.site-header .hero-inner h1{
  max-width:900px;
  margin:8px 0 16px;
  font-size:clamp(2.5rem,7vw,5.4rem);
  line-height:.98;
  letter-spacing:-.055em;
  color:#fff;
}
.site-header .hero-inner > p:not(.hero-promise){
  max-width:820px;
  margin:0;
  font-size:clamp(1.08rem,2.2vw,1.32rem);
  color:#eef5fb;
}
.site-header .hero-promise{
  margin-top:22px;
  font-weight:800;
  color:#fff;
}
.site-footer{
  background:#0e2235;
  color:#dce8f3;
  padding:38px 20px;
}
.site-footer .footer-inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  gap:20px;
}
.site-footer .footer-brand strong,
.site-footer .footer-brand span{display:block}
.site-footer .footer-brand strong{color:#fff;font-size:1.25rem}
.site-footer .footer-disclosure{font-size:.9rem;margin-top:8px;color:#aec0d0}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:10px 18px}
.site-footer .footer-links a{color:#eaf2f8}
.site-footer .footer-copy{font-size:.9rem;color:#aec0d0}
@media(max-width:640px){
  .site-header .header-inner{display:block}
  .site-header .site-nav{margin-top:18px}
}


/* Version 4.1 definitive shared footer
   High-specificity rules deliberately override legacy page-level button styles. */
html body .site-footer {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:48px 20px 28px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#0e2235 !important;
  color:#dce8f3 !important;
  text-align:left !important;
}

html body .site-footer .footer-inner {
  width:min(1120px,100%) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:32px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-intro {
  max-width:760px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-site-name {
  display:block !important;
  margin:0 0 8px !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size:1.45rem !important;
  line-height:1.2 !important;
}

html body .site-footer .footer-intro p {
  margin:5px 0 !important;
  padding:0 !important;
  color:#dce8f3 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-promise {
  font-weight:800 !important;
  color:#ffffff !important;
}

html body .site-footer .footer-disclosure {
  color:#aec0d0 !important;
  font-size:.9rem !important;
}

html body .site-footer .footer-columns {
  display:grid !important;
  grid-template-columns:1.2fr .8fr 1.2fr !important;
  gap:36px !important;
  margin:0 !important;
  padding:28px 0 !important;
  border-top:1px solid rgba(255,255,255,.15) !important;
  border-bottom:1px solid rgba(255,255,255,.15) !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-column {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-column h2 {
  margin:0 0 12px !important;
  padding:0 !important;
  color:#ffffff !important;
  font-size:1rem !important;
  line-height:1.3 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-column nav {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .site-footer .footer-column nav a,
html body .site-footer a {
  display:inline !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:#eaf2f8 !important;
  font:inherit !important;
  font-size:.96rem !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  text-align:left !important;
  text-decoration:none !important;
  text-transform:none !important;
}

html body .site-footer .footer-column nav a:hover,
html body .site-footer .footer-column nav a:focus,
html body .site-footer a:hover,
html body .site-footer a:focus {
  color:#ffffff !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

html body .site-footer .footer-copy {
  margin:0 !important;
  padding:0 !important;
  color:#aec0d0 !important;
  font-size:.9rem !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

@media (max-width:760px) {
  html body .site-footer {
    padding:38px 20px 24px !important;
  }

  html body .site-footer .footer-columns {
    grid-template-columns:1fr !important;
    gap:26px !important;
  }
}

/* Sprint 3 Chapter 2: Networking authority pages */
.networking-lede{font-size:1.16rem;color:#34495e}
.editorial-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 12px 35px rgba(15,35,56,.06);margin-bottom:24px}
.editorial-section h2{margin-top:0;color:#17324f}
.network-note,.network-formula{border-radius:14px;padding:16px 18px;margin:18px 0}
.network-note{background:#eef6ff;border:1px solid #c9dcf2;border-left:5px solid #475569}
.network-formula{background:#f8fafc;border:1px solid var(--line)}
.network-faq details{border-top:1px solid var(--line);padding:13px 0}
.network-faq details:first-of-type{border-top:0}
.network-faq summary{font-weight:800;cursor:pointer;color:#17324f}
.network-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.network-related a{display:block;border:1px solid var(--line);border-radius:14px;padding:16px;background:#f8fafc;text-decoration:none}
.network-related strong,.network-related span{display:block}
.network-related span{font-size:.92rem;color:var(--muted);margin-top:4px}
@media(max-width:760px){.network-related{grid-template-columns:1fr}}

/* Sprint 3 Chapter 3: Storage and Backup */
.storage-lede{font-size:1.16rem;color:#34495e}.storage-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 12px 35px rgba(15,35,56,.06);margin-bottom:24px}.storage-section h2{margin-top:0;color:#17324f}.storage-callout{background:#eef6ff;border:1px solid #c9dcf2;border-left:5px solid #475569;border-radius:14px;padding:16px 18px;margin:18px 0}.storage-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.storage-related a{display:block;border:1px solid var(--line);border-radius:14px;padding:16px;background:#f8fafc;text-decoration:none}.storage-related strong,.storage-related span{display:block}.storage-related span{font-size:.92rem;color:var(--muted);margin-top:4px}.storage-faq details{border-top:1px solid var(--line);padding:13px 0}.storage-faq details:first-of-type{border-top:0}.storage-faq summary{font-weight:800;cursor:pointer;color:#17324f}@media(max-width:760px){.storage-related{grid-template-columns:1fr}}



/* Sticky footer: keeps the footer at the bottom on short pages.
   Migrated from the retired site-v3.css so the site loads one stylesheet. */
html{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
.site-footer{flex-shrink:0}

/* Version 4.3 shared subject page components
   Used by every subject page so grouped tool listings stay identical site-wide. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 18px;
  background:#fff;
  color:#17324f;
  font-weight:800;
  border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}
.subject-jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}
.subject-jump-links a{
  display:inline-block;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f8fafc;
  text-decoration:none;
  font-weight:700;
}
.subject-jump-links a:hover,
.subject-jump-links a:focus{
  border-color:#9fb2c7;
  background:#eef4f9;
}
.subject-section{scroll-margin-top:20px}
.subject-section h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.subject-count{
  padding:3px 11px;
  border-radius:999px;
  background:#eef4f9;
  color:#3b5670;
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap;
}
.subject-tool-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.subject-tool-card{
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  padding:17px;
  background:#f8fafc;
  text-decoration:none;
}
.subject-tool-card strong,
.subject-tool-card span{display:block}
.subject-tool-card strong{color:#17324f}
.subject-tool-card span{
  margin-top:5px;
  color:var(--muted);
  font-size:.93rem;
}
.subject-tool-card:hover,
.subject-tool-card:focus{
  border-color:#9fb2c7;
  box-shadow:0 8px 22px rgba(31,65,99,.08);
}
.subject-featured{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.subject-featured a{
  display:block;
  padding:18px;
  border:1px solid #e4cfa8;
  border-left:5px solid var(--accent);
  border-radius:14px;
  background:#fff8ed;
  text-decoration:none;
}
.subject-featured strong,
.subject-featured span{display:block}
.subject-featured strong{color:#17324f;font-size:1.05rem}
.subject-featured span{
  margin-top:6px;
  color:#4d5c6d;
  font-size:.94rem;
}
.subject-featured a:hover,
.subject-featured a:focus{
  border-color:#c9a05a;
  border-left-color:var(--accent);
  box-shadow:0 8px 22px rgba(31,65,99,.08);
}
.subject-faq details{
  border-top:1px solid var(--line);
  padding:14px 0;
}
.subject-faq details:first-of-type{border-top:0}
.subject-faq summary{
  font-weight:800;
  cursor:pointer;
  color:#17324f;
}
.subject-faq summary:focus-visible{outline:3px solid #97b3d1;outline-offset:3px}
.subject-faq p{margin:10px 0 0}
.related-subjects{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.related-subjects a{
  display:block;
  padding:17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
}
.related-subjects strong,
.related-subjects span{display:block}
.related-subjects strong{color:#17324f}
.related-subjects span{
  margin-top:5px;
  color:var(--muted);
  font-size:.93rem;
}
.related-subjects a:hover,
.related-subjects a:focus{
  border-color:#9fb2c7;
  box-shadow:0 8px 22px rgba(31,65,99,.08);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible{outline:3px solid #97b3d1;outline-offset:3px}
@media(max-width:800px){
  .subject-tool-grid,
  .subject-featured,
  .related-subjects{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .subject-tool-grid,
  .subject-featured,
  .related-subjects{grid-template-columns:1fr}
  .subject-section h2{display:block}
  .subject-count{display:inline-block;margin-top:8px}
}

/* Version 5.47 — sitewide header search
   The search box now appears in the header of every page. The form works
   without JavaScript by submitting to /search.html; where scripts are
   available, /search.html and the homepage filter the list as you type. */

/* Hidden from sight, still read out by screen readers and still associated
   with its input. Replaces the inline off-screen styles used previously. */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.site-header .header-search{
  display:flex;
  gap:8px;
  align-items:stretch;
  flex:0 1 320px;
  margin-left:auto;
}
.site-header .header-search input{
  flex:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  padding:9px 16px;
  font:inherit;
  font-size:1rem;
  background:#fff;
  color:#17324f;
}
.site-header .header-search input::placeholder{color:#5b7086}
.site-header .header-search button{
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:#251507;
  font:inherit;
  font-weight:900;
  padding:0 18px;
  cursor:pointer;
  white-space:nowrap;
}
.site-header .header-search button:hover{filter:brightness(1.06)}

.search-status{
  margin:14px 0 0;
  font-weight:700;
  color:#34495e;
}
.search-status:empty{margin:0}
.search-result-subject{
  display:inline-block;
  margin-top:6px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#5b7086;
}
.search-result-more{
  text-align:center;
  background:#f2f6fb;
}
[data-tool-search-idle] h3{margin-top:28px}
[data-tool-search-idle] > h3:first-child{margin-top:8px}

@media(max-width:960px){
  .site-header .header-search{flex-basis:230px}
}
@media(max-width:640px){
  .site-header .header-search{
    margin:14px 0 0;
    flex-basis:auto;
    max-width:none;
  }
}


/* ---------------------------------------------------------------
   Back to top control — added v5.56
   Hidden until scrolled; revealed by assets/back-to-top.js.
   --------------------------------------------------------------- */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:48px;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:#1e40af;
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(15,23,42,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover,.back-to-top:focus{background:#17337a;color:#fff}
.back-to-top:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}
.back-to-top .b2t-arrow{font-size:1.05rem;line-height:1}
@media(max-width:640px){
  .back-to-top{right:12px;bottom:12px;padding:0 15px;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){
  .back-to-top{transition:none}
}
@media print{
  .back-to-top{display:none}
}


/* ---------------------------------------------------------------
   Narrow-screen fixes — added v5.61 after the navigation audit
   --------------------------------------------------------------- */

/* Wide tables scroll within their own box rather than forcing the whole
   page sideways. -webkit-overflow-scrolling keeps momentum on iOS. */
/* Any table may be wider than a phone, including the ones JavaScript writes
   into .result-box, so all of them scroll within their own box. */
.editorial-section table,
.intro table,
.result-box table,
.calculator-card table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* display:block alone is not enough. The anonymous table box inside still
   lays out at its min-content width and drags the block out with it, which is
   why the page would not narrow below 491px. Giving the tbody an explicit
   fixed table layout at 100% forces the columns to share the available width
   and the cell text to wrap, so the table fits the phone instead of setting
   the page width. Reverts to normal table layout at 700px. */
.editorial-section table > tbody,
.intro table > tbody,
.result-box table > tbody,
.calculator-card table > tbody{
  display:table;
  width:100%;
  table-layout:fixed;
}
.editorial-section table td, .editorial-section table th,
.intro table td, .intro table th,
.result-box table td, .result-box table th,
.calculator-card table td, .calculator-card table th{
  overflow-wrap:break-word;
}
@media(min-width:700px){
  .editorial-section table,
  .intro table,
  .result-box table,
  .calculator-card table{display:table}
  .editorial-section table > tbody,
  .intro table > tbody,
  .result-box table > tbody,
  .calculator-card table > tbody{
    display:table-row-group;
    table-layout:auto;
  }
}

/* ---------------------------------------------------------------
   Form controls must never set the page width — added v5.67

   A select sizes itself to its longest option. With no width rule it
   will happily push a phone layout sideways, and some of these pages
   carry options over eighty characters long.

   min-width:0 on the grid children matters as much as the width: a
   grid item defaults to min-width:auto and refuses to shrink below
   its content, so without it the column cannot narrow at all.
   --------------------------------------------------------------- */
select,
textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:44px;   /* matched to the button rule; selects measured 43px */
  box-sizing:border-box;
}
.form-grid > *,
.calculator-card > *{
  min-width:0;
}
.form-grid input,
.calculator-card input{
  max-width:100%;
  box-sizing:border-box;
}
/* Long unbroken strings in results should wrap rather than push the page out. */
.result-box{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.result-box table{
  overflow-wrap:normal;
  word-break:normal;
}


/* Every button meets the 44px minimum tap target regardless of its label. */
button{
  min-height:44px;
}



/* ---------------------------------------------------------------
   Author portrait on the About page — added v5.65
   --------------------------------------------------------------- */
.author-card{
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin:0 0 22px;
}
.author-card img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(15,23,42,.18);
}
.author-card .author-text{min-width:0}
.author-card .author-name{font-weight:800;font-size:1.1rem;margin:0 0 4px}
.author-card .author-role{color:var(--muted);margin:0}
@media(max-width:520px){
  .author-card{gap:16px}
  .author-card img{width:88px;height:88px}
}


/* ---------------------------------------------------------------
   Narrow-screen override for the header subject dropdown — v5.67

   The inline style sets .subject-select{min-width:230px}, and its
   max-width:640px rule sets width:100% without ever resetting the
   min-width. width and min-width are independent: min-width wins,
   so on a narrow phone the control refuses to shrink below 230px
   and takes the header sideways with it.

   Reset here rather than in the inline block because the external
   sheet loads afterwards and this is shared by every page.
   --------------------------------------------------------------- */
@media(max-width:640px){
  .subject-select{
    min-width:0;
    max-width:100%;
  }
}


/* ---------------------------------------------------------------
   Remaining fixed min-widths in inline styles — v5.67

   Three inline rules set a min-width large enough to set the page
   width on a phone, and none of them reset it in their own narrow
   screen media query. width and min-width are independent, so a
   width:100% rule elsewhere does not help: min-width wins.

   .tbl-wrap table is the exception and is deliberately left wide.
   A 520px table genuinely needs the room, so the wrapper is given
   a scroll of its own rather than being squeezed.
   --------------------------------------------------------------- */
@media(max-width:640px){
  .checker-controls input,
  .checker-controls select{
    min-width:0;
    max-width:100%;
  }
}
.tbl-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}


/* ---------------------------------------------------------------
   Result bands — v5.72

   A proportional scale with a marker showing where a calculated
   result falls. Built from HTML rather than an image or an SVG:
   the labels are real text, so they reflow on a phone and follow
   the visitor's own font size instead of scaling with a drawing.

   Segment widths are proportional to their real numeric ranges.
   Equal-width segments would misrepresent every scale whose
   categories are not the same size, BMI among them.

   Nothing is communicated by colour alone. The readout names the
   band in a sentence, and the current entry in the key is marked
   with aria-current and set in bold.
   --------------------------------------------------------------- */

.result-band{
  margin:22px 0 0;
  padding:0;
}
.result-band__scale{
  position:relative;
  /* 44px of headroom: 20px for the value label, then the 9px pointer, then
     the stem. The label is positioned above the marker, so without this the
     figure would draw outside its own box and collide with the result box. */
  padding-top:44px;
}
.result-band__track{
  display:flex;
  height:24px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.28);
}
.result-band__seg{
  flex:0 0 var(--w);
  background:var(--c);
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}
.result-band__seg + .result-band__seg{
  border-left:1px solid rgba(255,255,255,.7);
}

.result-band__marker{
  position:absolute;
  top:20px;                      /* leaves the label its 20px above */
  left:var(--pos,50%);
  width:0;
  transform:translateX(-50%);
  transition:left .25s ease-out;
}
.result-band__marker[hidden]{display:none}
.result-band__marker::before{           /* pointer */
  content:"";
  display:block;
  width:0;height:0;
  /* margin:auto cannot centre inside a zero-width parent — the triangle would
     sit 7px to the right of the stem it is supposed to point along */
  margin-left:-7px;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:9px solid var(--accent-dark,#0f172a);
}
.result-band__marker::after{            /* stem, down through the track */
  content:"";
  position:absolute;
  top:9px;left:-1px;
  width:2px;height:39px;      /* down through the full height of the track */
  background:var(--accent-dark,#0f172a);
}
.result-band__value{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:3px;
  white-space:nowrap;
  font-size:.85rem;
  font-weight:700;
  line-height:1;
}
/* keep the figure on the page at either end of the scale */
.result-band__marker[data-edge="start"] .result-band__value{left:0;transform:none}
.result-band__marker[data-edge="end"] .result-band__value{left:auto;right:0;transform:none}
/* a value beyond the drawn range: shown at the end, but visibly not exact */
.result-band__marker[data-offscale]{opacity:.5}

.result-band__bounds{
  display:flex;
  margin:5px 0 0;
  padding:0;
  list-style:none;
  font-size:.78rem;
  color:var(--muted,#5f6b7a);
}
.result-band__bounds li{
  flex:0 0 var(--w);
  min-width:0;
  padding-left:3px;
  border-left:1px solid var(--border,#d9e1ec);
}
.result-band__bounds li:first-child{border-left:0;padding-left:0}

.result-band__readout{
  margin:14px 0 0;
  font-size:1.02rem;
}

.result-band__key{
  display:flex;
  flex-wrap:wrap;
  gap:5px 18px;
  margin:10px 0 0;
  padding:0;
  list-style:none;
  font-size:.85rem;
}
.result-band__key li{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.result-band__key i{
  flex:0 0 auto;
  width:11px;height:11px;
  border:1px solid rgba(15,23,42,.28);
  background:var(--c);
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}
.result-band__key li[aria-current="true"]{font-weight:700}
.result-band__range{color:var(--muted,#5f6b7a)}

.result-band figcaption{
  margin-top:12px;
  font-size:.88rem;
  color:var(--muted,#5f6b7a);
}

@media(prefers-reduced-motion:reduce){
  .result-band__marker{transition:none}
}
@media(max-width:520px){
  /* boundary figures crowd badly under four narrow segments */
  .result-band__bounds{font-size:.72rem}
  .result-band__key{gap:4px 12px}
}


/* ---------------------------------------------------------------
   Measurement diagrams — v5.73

   Inline SVG, drawn on a 360-unit canvas by svgkit.py. The cap on
   width is the point of this rule: SVG text scales with the
   drawing, so an uncapped diagram would render its labels at 12px
   on a phone and 24px on a wide screen. Capping at 420px keeps
   every label between roughly 12px and 14px everywhere.
   --------------------------------------------------------------- */

.diagram{
  margin:20px 0;
  padding:0;
  max-width:420px;
}
.diagram__svg{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
  border:1px solid var(--border,#d9e1ec);
  border-radius:10px;
}
.diagram figcaption{
  margin-top:10px;
  font-size:.88rem;
  color:var(--muted,#5f6b7a);
}
@media print{
  .diagram__svg{border-color:#999}
}