/* Ageing Readiness Scan — page styles.
   Uses only the design tokens defined in site.css (no new colours). Solid colours only.
   Widths and fills come from classes (.lvl-0 … .lvl-3, .lvl-none); there are no inline styles (CSP). */

.scan { padding-block: clamp(2rem, 5vw, 4rem); }
.wrap.scan-wrap { max-width: 52rem; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }

/* Headings and legends only receive script focus (tabindex -1) when the step changes; they are not controls. */
#scan-title:focus, #res-h1:focus, .scan-legend:focus { outline: none; }

.scan-noscript {
  margin: 0 0 1.5rem; padding: 14px 18px; border: 2px solid var(--navy);
  border-radius: var(--radius-md); font-weight: 600; background: var(--off-white);
}

/* ---------- Intro ---------- */
#scan-intro h1 { max-width: 16em; }
.scan-fact {
  margin: 1.5rem 0 0; padding: 18px 20px; max-width: 42rem;
  border-left: 3px solid var(--silver); background: var(--off-white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.scan-fact p { margin: 0; font-weight: 500; }
.scan-fact .scan-src { margin-top: 0.5rem; }
.scan-src { font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); font-weight: 400; margin: 0.5rem 0 0; }
.scan-src a { color: var(--text-muted); text-decoration-thickness: 1px; }
.scan-h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); margin: 2rem 0 0.75rem; }
.scan-list { margin: 0 0 1.25rem; padding-left: 1.25em; max-width: 42rem; }
.scan-list li { list-style: disc; margin-bottom: 0.5em; }
.scan-privacy { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); max-width: 42rem; }
.scan-start-row { margin: 1.5rem 0 0.5rem; }
.scan-lang { margin: 1rem 0 0; font-size: 1rem; }

/* ---------- Question flow ---------- */
.scan-progress { margin: 0 0 0.5rem; font: 600 0.9375rem/1.3 var(--font-body); color: var(--text-muted); }
.scan-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 0 0 1.75rem; }
.scan-bar span { display: block; height: 6px; border-radius: 3px; background: var(--silver-wash); }
.scan-bar span.on { background: var(--navy); }

.scan-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.scan-legend {
  float: left; width: 100%; padding: 0; margin: 0 0 1.25rem;
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.2; letter-spacing: -0.2px;
}
.scan-opts { clear: both; display: grid; gap: 10px; margin: 0 0 1.25rem; }
.scan-opt {
  display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 16px;
  border: 2px solid var(--silver-wash); border-radius: var(--radius-md); background: var(--white); cursor: pointer;
}
.scan-opt:hover { border-color: var(--silver); }
.scan-opt input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.scan-opt:has(input:checked) { border-color: var(--navy); background: var(--off-white); }
.scan-opt-u { border-style: dashed; }

.scan-why { max-width: 42rem; margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.scan-why p { margin: 0 0 0.35em; }
.scan-why .scan-src { margin-top: 0.25rem; }

.scan-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.scan-nav .btn:disabled {
  background: var(--silver-wash); border-color: var(--silver-wash); color: var(--text-muted);
  box-shadow: none; cursor: not-allowed;
}
@media (max-width: 520px) { .scan-nav .btn { flex: 1 1 100%; } }

/* ---------- Result ---------- */
#scan-result h1 { max-width: 16em; }
.scan-meta { margin: 0 0 0.25rem; color: var(--text-muted); }
.scan-scope { margin: 0 0 1rem; color: var(--text-muted); }
.scan-headline {
  margin: 0 0 1rem; max-width: 40rem;
  font-family: var(--font-display); font-weight: 600; color: var(--navy);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.25;
}
.scan-mirror {
  margin: 0 0 1rem; padding: 16px 18px; max-width: 42rem;
  border-left: 3px solid var(--silver); background: var(--off-white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.scan-areas { display: grid; gap: 12px; margin: 0 0 1rem; }
.scan-areas li {
  display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--silver-wash); border-radius: var(--radius-md); background: var(--white);
}
@media (min-width: 700px) {
  .scan-areas li { grid-template-columns: 14rem 9rem 1fr; align-items: center; gap: 16px; }
}
.scan-dim-name { font-weight: 600; }
.scan-dim-status { color: var(--text); }
.scan-gauge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 9rem; width: 100%; }
.scan-gauge i { display: block; height: 10px; border-radius: 2px; border: 1px solid var(--silver); background: var(--white); }
.lvl-none i { border-style: dashed; }
.lvl-0 i:nth-child(-n+1),
.lvl-1 i:nth-child(-n+2),
.lvl-2 i:nth-child(-n+3),
.lvl-3 i { background: var(--navy); border-color: var(--navy); border-style: solid; }

.scan-cards { display: grid; gap: 16px; margin: 0 0 1rem; counter-reset: card; }
.scan-card {
  counter-increment: card; padding: 20px; border: 1px solid var(--silver-wash);
  border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-1);
}
.scan-card h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 0.6em; font-size: 1.5rem; }
.scan-card h3::before {
  content: counter(card); content: counter(card) / "";
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-top: 2px; border-radius: 50%;
  background: var(--navy); color: var(--white); font: 700 1rem/1 var(--font-body);
}
.scan-said { margin: 0 0 0.6em; color: var(--text-muted); font-style: italic; }
.scan-line { margin: 0 0 0.4em; }
.scan-none { max-width: 42rem; }

.scan-invite {
  margin: 2rem 0; padding: clamp(22px, 4.5vw, 40px);
  background: var(--navy); color: var(--on-navy); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.scan-invite h2 { color: var(--white); font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); max-width: 34rem; margin-bottom: 0.6em; }
.scan-invite p { max-width: 42rem; color: var(--on-navy); }
.scan-invite a { color: var(--white); }
.scan-invite .btn-light { color: var(--navy); }
.scan-invite-lines { display: grid; gap: 8px; margin: 0 0 1.25rem; max-width: 42rem; }
.scan-invite-lines li { list-style: disc; margin-left: 1.25rem; }

.scan-esg {
  margin: 2rem 0; padding: 4px 20px 6px; max-width: 46rem;
  border-left: 3px solid var(--silver); background: var(--off-white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.scan-esg .scan-h2 { margin-top: 1rem; }

.scan-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0 0.75rem; }
@media (max-width: 520px) { .scan-actions .btn { flex: 1 1 100%; } }
.scan-mailnote { margin: 0 0 0.75rem; font-size: 0.9375rem; color: var(--text-muted); max-width: 42rem; }
.scan-status { margin: 0 0 0.75rem; font-weight: 600; min-height: 1.65em; }
.scan-textarea {
  display: block; width: 100%; min-height: 14rem; margin: 0 0 1rem; padding: 12px;
  font: 0.9375rem/1.5 var(--font-body); color: var(--text); background: var(--white);
  border: 2px solid var(--navy); border-radius: var(--radius-md); resize: vertical;
}
.scan-method { margin-top: 1.5rem; }
.scan-printline { display: none; }

/* ---------- Print: the result summary only ---------- */
/* Footer via page margin boxes (Chromium); page numbers come from counter(page) / counter(pages). */
@page {
  size: A4;
  margin: 14mm 14mm 18mm;
  @bottom-left { content: "silvernetwork.org · cooperation@silvernetwork.org"; font: 9pt/1 var(--font-body); color: var(--text-muted); }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9pt/1 var(--font-body); color: var(--text-muted); }
}

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { background: var(--white); }
  body { background: transparent; font-size: 9pt; line-height: 1.3; overflow: visible; }

  .site-header, .site-footer, .skip, noscript, .scan-noscript,
  #scan-intro, #scan-flow, .btn, .scan-actions, .scan-mailnote, .scan-status, .scan-textarea,
  .scan-esg, .scan-method, .scan-invite-lines { display: none !important; }

  .scan { padding: 0; }
  .wrap.scan-wrap { max-width: none; padding-inline: 0; }
  #scan-result[hidden] { display: none !important; }

  /* Print-only brand header and watermark. They carry the hidden attribute on screen and are
     shown here only while a result is on screen. The watermark is fixed, so it repeats on every page. */
  .scan-wrap:has(#scan-result:not([hidden])) .print-brand[hidden] {
    display: flex !important; align-items: center; gap: 12pt;
    margin: 0 0 6pt; padding-bottom: 5pt; border-bottom: 1px solid var(--silver);
  }
  .print-brand-logo { height: 30pt; width: auto; flex: none; }
  .print-brand-text { min-width: 0; }
  .print-brand-name { margin: 0; font: 700 13pt/1.1 var(--font-display); color: var(--navy); }
  .print-brand-title { margin: 0; font: 700 12pt/1.2 var(--font-display); color: var(--navy); }
  .scan-wrap:has(#scan-result:not([hidden])) .print-watermark[hidden] {
    display: block !important; position: fixed; top: 50%; left: 50%; z-index: -1;
    width: 120mm; height: auto; transform: translate(-50%, -50%); opacity: 0.055;
  }

  #scan-result h1 { font-size: 18pt; margin-bottom: 2pt; max-width: none; }
  .scan-h2 { font-size: 11pt; margin: 8pt 0 4pt; break-after: avoid; }
  .scan-meta, .scan-scope { font-size: 9pt; margin-bottom: 1pt; }
  .scan-headline { font-size: 12pt; margin: 5pt 0; max-width: none; }
  .scan-mirror { font-size: 9pt; padding: 4pt 8pt; margin-bottom: 5pt; max-width: none; }

  .scan-areas { gap: 3pt; margin-bottom: 4pt; }
  .scan-areas li { grid-template-columns: 13rem 7rem 1fr; padding: 3pt 8pt; gap: 10pt; align-items: center; break-inside: avoid; font-size: 9pt; }
  .scan-cards { gap: 5pt; margin-bottom: 4pt; }
  .scan-card { padding: 5pt 8pt; box-shadow: none; break-inside: avoid; }
  .scan-card h3 { font-size: 10.5pt; margin-bottom: 2pt; }
  .scan-card h3::before { width: 16pt; height: 16pt; font-size: 9pt; margin-top: 0; }
  .scan-line, .scan-said { font-size: 9pt; margin-bottom: 1pt; }

  /* Invitation panel: light ground and a thin frame instead of the dark panel; the button is not printed,
     the address is printed as text. */
  .scan-invite {
    margin: 6pt 0 4pt; padding: 5pt 8pt; box-shadow: none; break-inside: avoid;
    background: var(--white); color: var(--navy); border: 1px solid var(--silver);
  }
  .scan-invite h2 { color: var(--navy); font-size: 11pt; margin: 0 0 2pt; max-width: none; }
  .scan-invite p { color: var(--text); font-size: 9pt; margin: 0; max-width: none; }
  .scan-invite::after {
    content: "cooperation@silvernetwork.org"; display: block; margin-top: 2pt;
    font: 600 9pt/1.3 var(--font-body); color: var(--navy);
  }

  .scan-printline { display: block; margin: 5pt 0 0; font-size: 9pt; color: var(--text-muted); }
}