/* Shared report styling — used by the live web view AND the WeasyPrint PDF.
   Themed to the Tokyo Web Development Brand Guidelines (v1.1):
   Sakura Coral #FF687C (action) · Ink/Charcoal type · white + pastel surfaces ·
   Night Navy bands · Poppins (headings) + Montserrat (body). Small radii, no pills. */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --coral: #FF687C;
  --coral-deep: #D54E61;
  --ink: #1E1E1E;
  --charcoal: #282727;
  --white: #FFFFFF;
  --mint: #BDF9EE;
  --aqua: #E7FFFE;
  --soft-pink: #FBEDEF;
  --lemon: #FFFABF;
  --link-blue: #1E73BE;
  --navy: #0E2C47;
  --stone: #605D5D;
  --mist: #D9D9D9;
}

.report {
  color: var(--charcoal);
  font-family: "Montserrat", system-ui, -apple-system, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.report h1, .report h2, .report h3, .report h4 {
  font-family: "Poppins", system-ui, -apple-system, Arial, sans-serif;
}
.report .muted { color: var(--stone); }
.report a { color: var(--link-blue); text-decoration: none; word-break: break-all; }

/* Branded Night Navy header band — overrides below must come AFTER to win. */
.report-head {
  background: var(--navy);
  border-radius: 8px;
  padding: 24px 26px;
  margin-bottom: 20px;
  color: #fff;
}
.report-logo { height: 30px; width: auto; display: block; margin-bottom: 14px; }
.report-head h1 {
  font-size: 25px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff;
}
.report-head .muted { color: #b9c6d4; }
.report-head a { color: #fff; }

/* ---- Scorecards ---- */
.scorecards { display: flex; gap: 14px; margin: 20px 0 8px; }
.card {
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #efe4e6;
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--soft-pink);
}
.grade-badge {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 26px; font-weight: 800; color: #fff;
}
.card-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.card-sub { font-size: 11px; color: var(--stone); margin-bottom: 4px; }
.card-score { font-size: 13px; font-weight: 700; color: var(--ink); }
.card-verdict { font-size: 12px; color: var(--charcoal); margin-top: 4px; }

.bar { height: 7px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; margin: 5px 0 2px; }
.bar-fill { display: block; height: 100%; border-radius: 6px; }

/* Grade colors (semantic data-viz scale — kept legible, not brand chrome) */
.g-a { background: #1f9d57; }
.g-b { background: #6AC9BF; }
.g-c { background: #E0A100; }
.g-d { background: #ED7A2F; }
.g-f { background: var(--coral-deep); }

/* ---- Blocks ---- */
.block { margin-top: 24px; }
.block h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--coral);
  color: var(--ink);
}

/* ---- Tables ---- */
.report table { width: 100%; border-collapse: collapse; }
.snapshot td { padding: 8px 10px; border-bottom: 1px solid #efe9ea; vertical-align: top; }
.snapshot td:first-child { font-family: "Poppins", sans-serif; font-weight: 600; width: 230px; color: var(--ink); }

.checks th, .checks td { padding: 8px 10px; border-bottom: 1px solid #efe9ea; text-align: left; vertical-align: top; }
.checks thead th {
  font-family: "Poppins", sans-serif;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--stone); background: var(--aqua);
}
.checks .num { text-align: center; color: var(--stone); }
.checks .detail { color: var(--charcoal); }

.status {
  display: inline-flex; width: 20px; height: 20px;
  border-radius: 50%; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
}
.status.pass { background: #1f9d57; }
.status.fail { background: var(--coral-deep); }

/* ---- Action plan ---- */
.actions { padding-left: 18px; }
.actions li { margin-bottom: 10px; }
.sev {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 4px; color: #fff; margin-right: 6px;
}
.sev-high { background: var(--coral-deep); }
.sev-med { background: #ED7A2F; }
.sev-low { background: #C99700; }
.sev-dim {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 10px; font-weight: 600; color: var(--charcoal);
  background: var(--aqua); padding: 2px 7px; border-radius: 4px; margin-right: 6px;
}
.actions strong { color: var(--ink); }

.primer p { color: var(--charcoal); }
.report code {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  background: var(--aqua);
  color: var(--link-blue);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.footnote { font-size: 12px; margin-top: 18px; font-style: italic; color: var(--stone); }

/* ---- Print / PDF specifics ---- */
@media print {
  .scorecards { page-break-inside: avoid; }
  .block { page-break-inside: avoid; }
}