/* Security Check-up: the questions, the report and the printed pack.
   The console itself is in console.css. */

/* ---------- The questions ---------- */
.sc-hero { padding: 64px 0 40px; }
.sc-hero h1 { max-width: 15ch; margin-bottom: 18px; }
.sc-hero .lede { font-size: 20px; color: var(--muted); max-width: 58ch; }
.sc-hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.sc-hero-shot { margin: 0; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.sc-hero-shot .sc-console { font-size: 12px; padding: 12px; pointer-events: none; max-height: 600px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.sc-hero-shot { min-width: 0; }
@media (max-width: 900px) { .sc-hero-grid { grid-template-columns: 1fr; } .sc-hero-shot { transform: none; } }

.quiz { max-width: 820px; }
.quiz-progress { position: sticky; top: 68px; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; font: 600 14px var(--body); color: var(--muted); }
.quiz-progress .bar { flex: 1; height: 6px; background: var(--line); border-radius: 1px; overflow: hidden; }
.quiz-progress .bar i { display: block; height: 100%; width: 0; background: var(--tape); transition: width 0.3s var(--ease-out); }
.quiz-area { margin: 0 0 34px; }
.quiz-area h2 { font-size: 28px; margin-bottom: 14px; }
.quiz-q { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 12px; }
.quiz-q legend { font: 650 17px/1.4 var(--body); color: var(--ink); padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.quiz-q .help { clear: both; font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }
.quiz-opts { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; }
.quiz-opts label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; font-size: 15.5px; line-height: 1.4; background: var(--bg); }
.quiz-opts label:hover { border-color: var(--ink-soft); }
.quiz-opts input { accent-color: var(--tape); margin-top: 3px; }
.quiz-opts label:has(input:checked) { border-color: var(--tape); background: var(--tape-soft); }
@media (max-width: 600px) { .quiz-opts { grid-template-columns: 1fr; } .quiz-q { padding: 16px 14px; } }

.sc-result { margin-top: 12px; }
.sc-free { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 24px; }
.sc-free .sc-console { padding: 14px; }
.sc-free-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-lock { position: relative; margin-top: 18px; border-radius: var(--radius); overflow: hidden; }
.sc-lock .sc-console { filter: blur(5px) saturate(0.9); user-select: none; pointer-events: none; max-height: 560px; overflow: hidden; box-shadow: none; }
.sc-lock-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: linear-gradient(180deg, rgba(8, 17, 31, 0.15), rgba(8, 17, 31, 0.75)); }
.sc-lock-card { max-width: 460px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--tape); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-lg); }
.sc-lock-card h3 { font: 400 26px/1.15 var(--display); margin-bottom: 8px; }
.sc-lock-card ul { margin: 0 0 16px; padding-left: 20px; font-size: 15px; }
.sc-lock-card .check { font-size: 14px; }
@media (max-width: 760px) { .sc-free { grid-template-columns: 1fr; } .sc-free-figs { grid-template-columns: 1fr; } }

.report-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 28px 0 18px; }
.report-bar h1 { font-size: clamp(32px, 4vw, 46px); }
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.report-actions label { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.report-actions input { font: inherit; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); width: 170px; }
.report-section { margin-top: 48px; max-width: 860px; }
.report-section h2 { font-size: 32px; }
.fix-plan { list-style: none; margin: 0; padding: 0; counter-reset: fix; }
.fix-plan li { counter-increment: fix; display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fix-plan li::before { content: counter(fix); font: 400 22px/1 var(--display); color: var(--tape); }
.fix-plan .when { font: 650 13px var(--body); color: var(--muted); white-space: nowrap; }
.fix-plan p { margin: 4px 0 0; color: var(--muted); font-size: 15.5px; }
.threat-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.threat-guide article { padding: 16px 0; border-bottom: 1px solid var(--line); }
.threat-guide h3 { display: flex; justify-content: space-between; gap: 12px; }
.threat-guide h3 span { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.threat-guide p { font-size: 15.5px; color: var(--muted); margin-bottom: 6px; }
@media (max-width: 700px) { .threat-guide { grid-template-columns: 1fr; } }

.report-brief p { font-size: 17px; max-width: 70ch; }
.money-bar { display: flex; gap: 3px; margin: 18px 0 6px; min-height: 46px; }
.money-bar span { display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; font-size: 13px; color: var(--ink); min-width: 0; overflow: hidden; border-radius: 2px; }
.money-bar span b { font: 400 20px/1.1 var(--display); }
.money-bar .reach { background: repeating-linear-gradient(135deg, #f6dbe3 0 8px, #f1ccd7 8px 16px); border-left: 3px solid var(--tape); }
.money-bar .safe { background: #e1efe6; border-left: 3px solid #3f8f62; }
.route-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.route { border: 1px solid var(--line); border-top: 3px solid var(--tape); padding: 14px 16px; background: var(--surface); }
.route.is-blocked { border-top-color: #3f8f62; }
.route h3 { font: 650 16px/1.35 var(--body); margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; }
.route-state { flex: none; font: 700 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 6px; border-radius: 2px; color: #fff; background: var(--tape); }
.is-blocked .route-state { background: #3f8f62; }
.route ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.route li { position: relative; padding-left: 24px; font-size: 14.5px; }
.route li::before { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--body); color: #fff; }
.route li.o::before { content: "→"; background: var(--tape); }
.route li.x::before { content: "✓"; background: #3f8f62; }
.route li.x span { text-decoration: line-through; color: var(--muted); }
.route li em { display: block; font-style: normal; color: #2f7550; font-size: 13.5px; }
.route-note { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
.area-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.area-card { border: 1px solid var(--line); padding: 14px 16px; background: var(--surface); }
.area-card h3 { display: flex; justify-content: space-between; align-items: baseline; font: 400 22px var(--display); margin: 0 0 6px; }
.area-card h3 b { font-weight: 400; }
.area-card h3 small { font: 500 13px var(--body); color: var(--muted); }
.area-bar { display: block; height: 6px; background: var(--line); margin-bottom: 10px; }
.area-bar i { display: block; height: 100%; background: #3f8f62; }
.area-card.tone-medium .area-bar i { background: #b49b45; }
.area-card.tone-high .area-bar i, .area-card.tone-critical .area-bar i { background: var(--tape); }
.area-label { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 10px 0 4px; }
.area-good, .area-bad { margin: 0; padding-left: 18px; font-size: 14px; }
.area-good li::marker { content: "✓  "; color: #3f8f62; }
.area-bad li { margin-bottom: 4px; }
.wins-box { border-left: 3px solid #3f8f62; background: #e9f3ed; padding: 12px 16px; margin: 14px 0; font-size: 15px; }
.win-tag { font: 700 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: #3f8f62; padding: 3px 5px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; }
.fix-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px !important; }
.fix-meta span:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--line-strong); }
.year-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; margin-top: 14px; }
.year-plan h3 { font: 650 16px var(--body); margin: 0 0 6px; }
.year-plan ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.year-plan li { margin-bottom: 4px; }
@media (max-width: 700px) { .route-list, .area-list, .year-plan { grid-template-columns: 1fr; } .money-bar { flex-direction: column; } }

.stat-line { border-left: 3px solid var(--tape); padding-left: 10px; font-size: 14px !important; color: var(--ink) !important; }
.stat-line a { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.headline-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 6px; }
.headline-stats div { border-top: 3px solid var(--ink); padding-top: 8px; display: grid; gap: 4px; align-content: start; }
.headline-stats b { font: 400 30px/1 var(--display); }
.headline-stats span { font-size: 14px; }
.headline-stats a { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .headline-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- The printed pack ---------- */
@page { size: A4; margin: 16mm 14mm 16mm; }
@page :first { margin: 0; }
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; background: #fff; }
  .site-header, .site-footer, .utility-bar, .report-actions, .no-print { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .sc-print-cover {
    display: flex !important; flex-direction: column; width: 210mm; height: 296.5mm; box-sizing: border-box; padding: 22mm 22mm 18mm 30mm; position: relative; overflow: hidden;
    background: url("/images/rosette.svg") 80mm 60mm / 200mm 200mm no-repeat, linear-gradient(165deg, #102546, #0b1a33 60%); color: #eef1f7; break-after: page;
  }
  .sc-print-cover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 12mm; width: 5mm; background: linear-gradient(90deg, #b3244d, #d3406a 45%, #b3244d); }
  .sc-print-cover .brand { font: 400 18pt var(--display); color: #fff; margin: 0; }
  .sc-print-cover .brand span { color: #f27a9b; }
  .sc-print-cover .main { margin-top: auto; }
  .sc-print-cover .eyebrow { color: #f27a9b; font-size: 10pt; }
  .sc-print-cover h1 { font: 400 36pt/1.08 var(--display); color: #fff; margin: 0 0 6mm; }
  .sc-print-cover h1 span { color: #f27a9b; display: block; }
  .sc-print-cover .figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-top: 10mm; padding: 6mm 0; border-top: 0.8pt solid rgba(242, 122, 155, 0.5); border-bottom: 0.8pt solid rgba(242, 122, 155, 0.5); }
  .sc-print-cover .figs dt { font: 650 7.5pt var(--body); color: #a9b3c8; }
  .sc-print-cover .figs dd { margin: 1mm 0 0; font: 400 20pt var(--display); color: #fff; }
  .sc-print-cover .note { font-size: 9pt; color: #a9b3c8; margin-top: 6mm; max-width: 150mm; }
  .report-bar { display: none; }
  .report-bar h1 { font-size: 18pt; }
  .report-section { margin-top: 0; max-width: none; break-before: page; }
  .report-section h2 { font-size: 20pt; margin-bottom: 3mm; }
  .print-risks { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .print-risks th { text-align: left; font: 650 7.5pt var(--body); color: #4e5c6d; border-bottom: 1pt solid #0f2340; padding: 1.5mm 2mm 1.5mm 0; }
  .print-risks td { border-bottom: 0.6pt solid #d2d8cf; padding: 2mm 2mm 2mm 0; vertical-align: top; }
  .print-risks tr { break-inside: avoid; }
  .fix-plan li { break-inside: avoid; padding: 2.5mm 0; }
  .fix-plan li .box { width: 4mm; height: 4mm; border: 0.8pt solid #0f2340; display: inline-block; }
  .threat-guide article { break-inside: avoid; padding: 2.5mm 0; }
  .route, .area-card { break-inside: avoid; padding: 3mm; }
  .route li, .area-good, .area-bad, .year-plan ul { font-size: 9pt; }
  .route-list, .area-list { gap: 3mm; margin-top: 3mm; }
  .report-brief p { font-size: 11pt; }
  .report-brief + .report-section { break-before: auto; margin-top: 8mm; }
  .headline-stats b { font-size: 18pt; }
  .headline-stats span, .stat-line { font-size: 8.5pt !important; }
  .headline-stats a, .stat-line a { font-size: 7.5pt; }
  .year-plan li { list-style: none; margin-left: -18px; display: flex; gap: 2mm; }
  .year-plan .box { flex: none; width: 3.5mm; height: 3.5mm; border: 0.8pt solid #0f2340; display: inline-block; margin-top: 0.6mm; }
}
.sc-print-cover { display: none; }
.print-risks .sc-tag { --tone: #a8321f; }
.print-risks .sc-tag.tone-critical { color: #a0213f; border-color: #a0213f; background: #f4dde4; }
.print-risks .sc-tag.tone-high { color: #8a4a12; border-color: #c27a35; background: #f8e9da; }
.print-risks .sc-tag.tone-medium { color: #6b5a1a; border-color: #b49b45; background: #f4efdc; }
.print-risks .sc-tag.tone-low { color: #2c5170; border-color: #6f97b8; background: #e3edf5; }
.print-risks { width: 100%; border-collapse: collapse; font-size: 15px; }
.print-risks th { text-align: left; font: 650 13px var(--body); color: var(--muted); border-bottom: 1px solid var(--ink); padding: 8px 12px 8px 0; }
.print-risks td { border-bottom: 1px solid var(--line); padding: 12px 12px 12px 0; vertical-align: top; }
.print-risks td p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.print-risks .sc-tag { display: inline-block; font: 700 11px/1 var(--body); border: 1px solid; padding: 4px 6px; border-radius: 2px; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .print-risks .sc-tag.tone-critical { color: #f27a9b; border-color: #f27a9b; background: transparent; }
  .print-risks .sc-tag.tone-high { color: #f0a35e; border-color: #f0a35e; background: transparent; }
  .print-risks .sc-tag.tone-medium { color: #d9c27a; border-color: #d9c27a; background: transparent; }
  .print-risks .sc-tag.tone-low { color: #8fb8d8; border-color: #8fb8d8; background: transparent; }
}
@media (max-width: 600px) { .print-risks .hide-sm { display: none; } }
.link-button { background: none; border: 0; padding: 0; font: 600 14px var(--body); color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: var(--tape); text-underline-offset: 3px; }
.preview-note { background: var(--accent-soft); border-radius: var(--radius); padding: 12px 16px; font-size: 15px; margin-top: 28px; }
.preview-note.success { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.preview-note.error { background: var(--bad-soft); color: var(--bad); }
.report-page { padding-bottom: 96px; }
.print-only { display: none; }
@media print { .print-only { display: inline-block; } }
.print-section { display: none; }
@media print { .print-section { display: block; } }