/* ==========================================================================
   Blueprint report — on screen, in the HTML download and in the PDF.
   NEWPAGES report style. Own tokens so exports ([data-export]) and print stay light.
   ========================================================================== */

.report {
  --r-bg: #FFFFFF;
  --r-bg-2: #F4F4F5;
  --r-card: #FFFFFF;
  --r-ink: #0B0B0B;
  --r-ink-2: #2A2A2A;
  --r-muted: #5F6368;
  --r-line: #E4E4E7;
  --r-line-2: #EFEFF1;
  --r-primary: #F43F5E;        /* rose-500 brand colour */
  --r-primary-ink: #BE123C;    /* rose-700 */
  --r-primary-soft: #FFE4E6;   /* rose-100 */
  --r-primary-tint: #FFF1F2;   /* rose-50 */
  --r-status-amber: #B45309; --r-status-amber-soft: #FEF3C7;  /* "guided" / medium status */
  --r-green: #1F9D55; --r-green-soft: #E7F6ED;
  --r-slate: #52525B; --r-slate-soft: #EEF0F3;
  --r-red: #CF1515; --r-red-soft: #FDECEB;
  --r-blue: #1D5FD6; --r-blue-soft: #E8EFFC;
  --r-panel: #0B0B0B;
  --r-head: "Outfit", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-body: "Manrope", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  color: var(--r-ink);
  font-family: var(--r-body);
  font-size: 15.5px;
  line-height: 1.6;
}

/* On-screen dark theme only when chosen (never exports or print) */
:root[data-theme="dark"] .report:not([data-export]) {
  --r-bg: #0B0B0C; --r-bg-2: #141416; --r-card: #121214; --r-ink: #F5F5F5; --r-ink-2: #D4D4D8; --r-muted: #A1A1AA;
  --r-line: #26262A; --r-line-2: #1D1D21; --r-primary-ink: #FB7185; --r-primary-soft: rgba(244, 63, 94, .16); --r-primary-tint: rgba(244, 63, 94, .08); --r-status-amber: #FBBF24; --r-status-amber-soft: rgba(245, 158, 11, .14);
  --r-green: #34D399; --r-green-soft: rgba(52, 211, 153, .12); --r-slate: #D4D4D8; --r-slate-soft: rgba(212, 212, 216, .1);
  --r-red: #F87171; --r-red-soft: rgba(248, 113, 113, .12); --r-blue: #93C5FD; --r-blue-soft: rgba(147, 197, 253, .12); --r-panel: #18181B;
}
@media print {
  .report, .report:not([data-export]) {
    --r-bg: #FFFFFF; --r-bg-2: #F4F4F5; --r-card: #FFFFFF; --r-ink: #0B0B0B; --r-ink-2: #2A2A2A; --r-muted: #5F6368;
    --r-line: #E4E4E7; --r-line-2: #EFEFF1; --r-primary-ink: #BE123C; --r-primary-soft: #FFE4E6; --r-primary-tint: #FFF1F2; --r-status-amber: #B45309; --r-status-amber-soft: #FEF3C7;
    --r-green: #1F9D55; --r-green-soft: #E7F6ED; --r-slate: #52525B; --r-slate-soft: #EEF0F3;
    --r-red: #CF1515; --r-red-soft: #FDECEB; --r-blue: #1D5FD6; --r-blue-soft: #E8EFFC; --r-panel: #0B0B0B;
  }
  .report .pdf-block { break-inside: avoid; }
  .report .pdf-keep { break-after: avoid; }
}

/* Resets: specificity (0,1,0) beats the site's global h1–h4 rules (which use the page theme),
   while later component classes in this file still win by source order. */
.report :where(h1, h2, h3, h4) { font-family: var(--r-head); font-weight: 600; color: var(--r-ink); margin: 0; line-height: 1.15; letter-spacing: -.02em; }
:where(.report) p { margin: 0; }
:where(.report) a { color: var(--r-primary-ink); }
:where(.report) :where(ul, ol) { margin: 0; padding-left: 1.25em; }
:where(.report) li + li { margin-top: 4px; }

/* ---------- shared bits ---------- */
.rp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--r-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--r-primary-ink);
}
.rp-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--r-primary); border-radius: 1px; }
.report:lang(zh) .rp-eyebrow { letter-spacing: .24em; }
.rp-caps { font-family: var(--r-head); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted); }
.report:lang(zh) .rp-caps { letter-spacing: .16em; }
.rp-rule { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.rp-rule::after { content: ""; flex: 1; height: 1px; background: var(--r-line); }
.rp-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent;
}
.rp-pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rp-pill.green { color: var(--r-green); background: var(--r-green-soft); }
.rp-pill.amber { color: var(--r-status-amber); background: var(--r-status-amber-soft); }
.rp-pill.primary { color: var(--r-primary-ink); background: var(--r-primary-soft); }
.rp-pill.slate { color: var(--r-slate); background: var(--r-slate-soft); }
.rp-pill.red { color: var(--r-red); background: var(--r-red-soft); }
.rp-pill.blue { color: var(--r-blue); background: var(--r-blue-soft); }
.rp-pill.outline { color: var(--r-ink-2); border-color: var(--r-line); background: var(--r-card); }

/* ---------- header ---------- */
.rp-head { padding-bottom: 28px; border-bottom: 1px solid var(--r-line); }
.rp-topline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin-bottom: 20px; }
.rp-ref { font-size: 12px; color: var(--r-muted); letter-spacing: .08em; text-transform: uppercase; font-family: var(--r-head); font-weight: 600; }
.rp-ref b { color: var(--r-ink); letter-spacing: 0; }
.rp-title { font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.rp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rp-desc { margin-top: 16px; font-size: 16.5px; color: var(--r-muted); max-width: 64ch; }
.rp-meta { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--r-line); display: grid; gap: 14px; }
.rp-meta > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.rp-meta dt { display: flex; align-items: center; gap: 8px; }
.rp-meta dt svg { width: 15px; height: 15px; fill: none; stroke: var(--r-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rp-meta dd { margin: 0; font-weight: 500; }

/* ---------- sections ---------- */
.rp-section { margin-top: 56px; }
.rp-section-head { margin-bottom: 22px; }
.rp-section-head .rp-eyebrow { margin-bottom: 12px; }
.rp-h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; }
.rp-lead { margin-top: 10px; font-size: 17px; color: var(--r-muted); max-width: 62ch; }
.rp-card { border: 1px solid var(--r-line); border-radius: 16px; background: var(--r-card); padding: 28px 30px; }
.rp-card > .pdf-block + .pdf-block { margin-top: 18px; }
.rp-summary { font-size: 17px; line-height: 1.65; color: var(--r-ink-2); max-width: 70ch; }
.rp-quote { border-left: 3px solid var(--r-ink); padding: 2px 0 2px 18px; }
.rp-quote p { margin-top: 6px; color: var(--r-ink-2); }
.rp-assume { background: var(--r-primary-tint); border: 1px solid var(--r-primary-soft); border-radius: 12px; padding: 16px 18px; }
.rp-assume ul { margin-top: 8px; }

/* ---------- overview ---------- */
.rp-overview { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.rp-score {
  background: var(--r-panel); color: #fff; border-radius: 16px; padding: 26px 24px;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 14px 14px;
}
.rp-score .rp-eyebrow { color: #FB7185; }
.rp-score-num { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 16px; }
.rp-score-num b { font-family: var(--r-head); font-size: 64px; font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.rp-score-num span { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 14px; }
.rp-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); margin-bottom: 14px; }
.rp-bar i { display: block; height: 100%; }
.rp-bar .self { background: #22C55E; } .rp-bar .guided { background: #F59E0B; } .rp-bar .built { background: #A1A1AA; }
.rp-score-rows { display: grid; gap: 8px; }
.rp-score-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-weight: 600; font-size: 14px; }
.rp-score-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rp-score-row b { margin-left: auto; font-family: var(--r-head); font-size: 18px; }
.rp-score-note { margin-top: 16px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }

.rp-table { border: 1px solid var(--r-line); border-radius: 16px; overflow: hidden; background: var(--r-card); }
.rp-tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 150px) 128px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--r-line-2); }
.rp-tr:last-child { border-bottom: 0; }
.rp-tr.th { background: var(--r-bg-2); padding-top: 10px; padding-bottom: 10px; }
.rp-tr .no { color: var(--r-muted); font-family: var(--r-head); font-weight: 600; }
.rp-tr .name b { display: block; font-weight: 600; margin-bottom: 4px; }
.rp-tr .tools { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-tr .saved { text-align: right; font-family: var(--r-head); font-weight: 700; font-size: 14px; }
.rp-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--r-bg-2); border: 1px solid var(--r-line-2); font-size: 12px; font-weight: 600; }

/* ---------- diagrams ---------- */
.rp-diagram { border: 1px solid var(--r-line); border-radius: 16px; background: var(--r-card); padding: 20px; overflow-x: auto; }
.rp-diagram svg, .rp-diagram img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.rp-diagram pre { margin: 0; white-space: pre-wrap; font-size: 12px; color: var(--r-muted); }
.rp-diagram-error { color: var(--r-red); font-size: 13px; margin-bottom: 8px; }
.rp-desc-block { margin-bottom: 16px; color: var(--r-ink-2); max-width: 70ch; }
.rp-wf + .rp-wf { margin-top: 18px; }
.rp-wf figcaption { font-family: var(--r-head); font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.rp-wf { margin: 0; }

/* ---------- solutions ---------- */
.rp-sol { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--r-line); }
.rp-sol:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.rp-sol-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; }
.rp-num { font-family: var(--r-head); font-weight: 700; font-size: 15px; color: var(--r-primary-ink); background: var(--r-primary-soft); border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; }
.rp-sol-head h3 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; padding-top: 6px; }
.rp-sol-head .rp-pills, .rp-sol-head .rp-pain { grid-column: 2; }
.rp-sol-head .rp-pills { margin-top: 6px; }
.rp-pain { color: var(--r-muted); font-size: 14.5px; margin-top: 6px; }
.rp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.rp-ba > div { border-radius: 12px; padding: 14px 16px; }
.rp-ba .before { background: var(--r-bg-2); }
.rp-ba .after { background: var(--r-primary-tint); border: 1px solid var(--r-primary-soft); }
.rp-ba .rp-caps { display: block; margin-bottom: 6px; }
.rp-ba .after .rp-caps { color: var(--r-primary-ink); }
.rp-sol-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; margin-top: 22px; align-items: start; }
.rp-main > .pdf-block + .pdf-block, .rp-aside > .pdf-block + .pdf-block { margin-top: 20px; }
.rp-steps { list-style: none; padding: 0 !important; counter-reset: st; }
.rp-steps li { counter-increment: st; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.rp-steps li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; background: var(--r-ink); color: var(--r-bg); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.rp-steps li + li { margin-top: 8px; }
.rp-item { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--r-line-2); }
.rp-item:last-child { border-bottom: 0; }
.rp-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--r-primary); display: grid; place-items: center; }
.rp-ico svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rp-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rp-item-top b { font-family: var(--r-head); font-size: 17px; font-weight: 600; }
.rp-role { margin-top: 4px; color: var(--r-muted); font-size: 14.5px; }
.rp-evidence { margin-top: 10px; background: var(--r-bg-2); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; color: var(--r-ink-2); }
.rp-evidence .rp-caps { display: block; margin-bottom: 4px; }
.rp-start { margin-top: 10px; font-size: 14.5px; }
.rp-start .rp-caps { display: block; margin-bottom: 4px; }
.rp-plan { margin-top: 10px; font-size: 13px; color: var(--r-muted); }
.rp-plan b { color: var(--r-ink); font-weight: 700; }
.rp-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rp-links a { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--r-line); font-size: 12.5px; font-weight: 600; color: var(--r-ink-2); text-decoration: none; }
.rp-aside-block p, .rp-aside-block ul { font-size: 14.5px; color: var(--r-ink-2); }
.rp-alt-card { border: 1px solid var(--r-line); border-radius: 14px; padding: 16px 18px; background: var(--r-card); }
.rp-alt-card b { display: block; font-family: var(--r-head); font-size: 16px; margin: 10px 0 4px; }
.rp-alt-card p { font-size: 14px; color: var(--r-muted); }
.rp-cost { font-family: var(--r-head); font-weight: 700; font-size: 18px; }

/* ---------- tool guide ---------- */
.rp-guide { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--r-line-2); }
.rp-guide:last-child { border-bottom: 0; }
.rp-guide b { font-family: var(--r-head); font-size: 16px; display: block; }
.rp-guide .cat { font-size: 12.5px; color: var(--r-muted); }
.rp-guide .feats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rp-guide .used { font-size: 14px; color: var(--r-ink-2); }

/* ---------- roadmap ---------- */
.rp-phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rp-phase { border: 1px solid var(--r-line); border-radius: 16px; padding: 20px; background: var(--r-card); }
.rp-phase-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.rp-phase-top .rp-num { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; }
.rp-phase h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.rp-phase ul { font-size: 14.5px; color: var(--r-ink-2); }

/* ---------- risks + glossary ---------- */
.rp-risks { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.rp-risks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--r-bg-2); font-size: 14.5px; color: var(--r-ink-2); }
.rp-risks li + li { margin-top: 0; }
.rp-risks li::before { content: "!"; width: 20px; height: 20px; border-radius: 50%; background: var(--r-primary); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }
.rp-gloss { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rp-gloss > div { border: 1px solid var(--r-line); border-radius: 12px; padding: 14px 16px; }
.rp-gloss dt { font-family: var(--r-head); font-weight: 600; font-size: 15.5px; }
.rp-gloss dd { margin: 4px 0 0; font-size: 14px; color: var(--r-muted); }
/* ---------- AI notice + disclaimer ---------- */
.rp-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--r-muted); }
.rp-notice svg, .rp-disclaimer-head svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rp-disclaimer { margin-top: 56px; padding: 22px 24px; border: 1px solid var(--r-line); border-radius: 16px; background: var(--r-bg-2); color: var(--r-ink-2); font-size: 13.5px; line-height: 1.6; }
.rp-disclaimer-head { display: flex; align-items: center; gap: 8px; color: var(--r-ink); }
.rp-disclaimer-head svg { margin-top: 0; width: 18px; height: 18px; }
.report .rp-disclaimer h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.rp-disclaimer-intro { margin-top: 8px; color: var(--r-muted); }
.rp-disclaimer ol { margin-top: 10px; padding-left: 1.3em; }
.rp-disclaimer li + li { margin-top: 6px; }
.rp-disclaimer b { color: var(--r-ink); font-weight: 700; }

/* ---------- export / PDF ---------- */
.report[data-export] { background: #fff; }
.report--pdf { width: 688px; font-size: 14px; }
.report--pdf .rp-title { font-size: 34px; }
.report--pdf .rp-overview, .report--pdf .rp-sol-grid { grid-template-columns: 1fr; gap: 0; }
.report--pdf .rp-phases { grid-template-columns: 1fr; }  /* PDF blocks must stack vertically */
.report--pdf .rp-sol-grid > * + * { margin-top: 18px; }
.report--pdf .rp-card { border: 0; padding: 0; background: none; }          /* containers flatten; blocks keep their own frames */
.report--pdf .rp-overview .rp-table { margin-top: 18px; }
.report--pdf .rp-table { border-radius: 0; border-left: 0; border-right: 0; }
.report--pdf .rp-diagram { overflow: visible; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .rp-overview, .rp-sol-grid { grid-template-columns: 1fr; }
  .rp-tr { grid-template-columns: 30px minmax(0, 1fr) 80px; }
  .rp-tr .tools { display: none; }
}
@media (max-width: 640px) {
  .rp-card { padding: 20px; }
  .rp-meta > div { grid-template-columns: 1fr; gap: 2px; }
  .rp-ba, .rp-phases, .rp-gloss { grid-template-columns: 1fr; }
  .rp-guide { grid-template-columns: 1fr; gap: 6px; }
}

/* which tool to use for this job */
.rp-choice { border-left: 3px solid var(--r-primary, #F43F5E); background: var(--r-bg-2); border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 4px 0 14px; }
.rp-choice .rp-caps { display: block; margin-bottom: 4px; }
.rp-choice p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--r-ink); }