/* Readability layer for curated onboarding/report HTML pages.
   Loaded after each report's legacy inline CSS and after wiki.css. */
:root{
  --report-bg:#f3f5fb;
  --report-ink:#172033;
  --report-muted:#526174;
  --report-line:#dbe3ef;
  --report-card:#ffffff;
  --report-soft:#f8fafc;
  --report-blue:#4f46e5;
  --report-violet:#7c3aed;
  --report-shadow:0 18px 48px rgba(15,23,42,.10);
}
body{
  background:var(--report-bg) !important;
  color:var(--report-ink) !important;
  font-size:17px !important;
  line-height:1.78 !important;
  letter-spacing:-.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body > .wrap{
  max-width:980px !important;
  padding:34px 22px 88px !important;
}
/* The legacy reports use plain header for the document hero; keep the portal .top intact. */
body > .wrap > header{
  margin:0 0 22px !important;
  padding:30px 30px 28px !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,var(--report-blue),var(--report-violet)) !important;
  color:#fff !important;
  text-align:left !important;
  box-shadow:0 18px 50px rgba(79,70,229,.22) !important;
}
body > .wrap > header h1{
  max-width:820px;
  margin:0 0 10px !important;
  color:#fff !important;
  font-size:clamp(30px,4vw,44px) !important;
  line-height:1.16 !important;
  letter-spacing:-.04em !important;
  font-weight:900 !important;
}
body > .wrap > header p{
  max-width:780px;
  margin:0 !important;
  color:#e0e7ff !important;
  font-size:16.5px !important;
  line-height:1.68 !important;
}
.ribbon{
  display:inline-flex !important;
  align-items:center;
  width:auto !important;
  max-width:100%;
  margin:0 0 16px !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:#fee2e2 !important;
  color:#991b1b !important;
  border:1px solid #fecaca !important;
  text-align:left !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
}
section{
  background:var(--report-card) !important;
  border:1px solid var(--report-line) !important;
  border-radius:22px !important;
  padding:28px 30px !important;
  margin:20px 0 !important;
  box-shadow:var(--report-shadow) !important;
}
section h2,
.wrap h2{
  margin:0 0 16px !important;
  color:#0f172a !important;
  font-size:clamp(23px,2.7vw,30px) !important;
  line-height:1.28 !important;
  letter-spacing:-.035em !important;
  font-weight:900 !important;
}
h2 .n{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,var(--report-blue),var(--report-violet)) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:900 !important;
}
p, li{
  color:#263244 !important;
  font-size:17px !important;
  line-height:1.82 !important;
}
p{margin:12px 0 !important}
ul,ol{margin:12px 0 !important;padding-left:1.45em !important}
li{margin:8px 0 !important}
b,strong{color:#111827 !important;font-weight:850 !important}
code{
  background:#eef2ff !important;
  color:#3730a3 !important;
  border:1px solid #c7d2fe !important;
  padding:2px 7px !important;
  border-radius:7px !important;
  font-size:.92em !important;
}
.callout{
  margin:18px 0 !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  border:1px solid #fde68a !important;
  border-left:6px solid #d97706 !important;
  background:#fffbeb !important;
  color:#3b2f11 !important;
  font-size:16px !important;
  line-height:1.72 !important;
}
.callout.ok{
  border-color:#bbf7d0 !important;
  border-left-color:#16a34a !important;
  background:#f0fdf4 !important;
}
.muted{
  color:var(--report-muted) !important;
  font-size:16px !important;
  line-height:1.78 !important;
}
.steps{
  display:grid;
  gap:12px;
  counter-reset:s;
  list-style:none !important;
  padding:0 !important;
  margin:14px 0 !important;
}
.steps li{
  min-height:58px;
  padding:16px 18px 16px 58px !important;
  background:#f8fafc !important;
  border:1px solid var(--report-line) !important;
  border-radius:16px !important;
  color:#263244 !important;
  font-size:16.5px !important;
  line-height:1.72 !important;
}
.steps li::before{
  left:17px !important;
  top:18px !important;
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  background:linear-gradient(135deg,var(--report-blue),var(--report-violet)) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
}
.flow{
  gap:10px !important;
  margin:18px 0 !important;
}
.flow .b{
  min-width:180px !important;
  padding:18px 16px !important;
  background:#f8fafc !important;
  border:1px solid var(--report-line) !important;
  border-radius:16px !important;
  color:#263244 !important;
  font-size:15.5px !important;
  line-height:1.58 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.flow .b b{
  color:#3730a3 !important;
  font-size:16px !important;
  margin-bottom:6px !important;
}
.flow .ar{
  color:#7c3aed !important;
  font-size:22px !important;
  font-weight:900 !important;
}
table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 !important;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}
th,td{
  border:1px solid var(--report-line) !important;
  padding:11px 13px !important;
  font-size:15.5px !important;
  line-height:1.55 !important;
  text-align:left;
}
th{background:#eef2ff !important;color:#312e81 !important;font-weight:850 !important}
pre{
  background:#0f172a !important;
  color:#e2e8f0 !important;
  border-radius:16px !important;
  padding:18px 20px !important;
  overflow:auto;
  font-size:14.5px !important;
  line-height:1.65 !important;
}
a{font-weight:750}
.top strong{color:#fff !important}
.top span{color:#a5b4fc !important}
.top a{color:#dbeafe !important}
.top a.active,.top a:hover{color:#fff !important}
@media(max-width:760px){
  body{font-size:16px !important}
  body > .wrap{padding:24px 16px 70px !important}
  body > .wrap > header{padding:24px 20px !important;border-radius:20px !important}
  section{padding:22px 18px !important;border-radius:18px !important}
  p,li{font-size:16px !important}
  .flow{flex-direction:column !important}
  .flow .ar{transform:rotate(90deg)}
}