/* ==========================================================================
   Indikator — the report

   A personality profile has always been delivered as a profilark: factors down
   the page, a normed 1–10 track across it, and one line connecting the plotted
   points. That line is the artefact of this field and the thing a consultant
   recognises across candidates, so it is the report's signature. Everything
   around it stays quiet.

   The same stylesheet serves the screen and the PDF, so what is reviewed on
   screen is what gets printed.
   ========================================================================== */

.report { max-width: 900px; margin: 0 auto; }

/* --- Masthead ------------------------------------------------------------- */

.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-5);
}
.report-head h1 { font-size: var(--t-2xl); }
.report-head__meta {
  font-size: var(--t-sm);
  color: var(--ink-muted);
  margin-top: var(--space-2);
}
.report-head__aside { text-align: right; }

.report-section { margin-bottom: var(--space-7); }
.report-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mist);
}
.report-section__head h2 { font-size: var(--t-lg); }

/* --- The profile chart ---------------------------------------------------
   Rendered as one inline SVG so the geometry is identical on screen and in the
   PDF, and so two candidates' lines can be overlaid without re-laying-out.
   -------------------------------------------------------------------------- */

.profile { margin: var(--space-5) 0; }
.profile svg { width: 100%; height: auto; display: block; }

/* Domain colour chip (matches print.css). */
.domain-chip {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Ink used inside the generated SVG. Kept here so the palette has one home. */
.pf-grid       { stroke: var(--mist); stroke-width: 1; }
.pf-band       { fill: var(--sand); }
.pf-axis-label { fill: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.pf-domain     { fill: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.pf-factor     { fill: var(--ink); font-family: var(--body); font-size: 12px; }
.pf-code       { fill: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.pf-spine      { fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-linejoin: round; }
.pf-marker     { fill: var(--petrol); }
.pf-marker--out { fill: var(--clay); }
.pf-target     { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 2; }
.pf-target-fill { fill: var(--petrol-wash); }
/* Digit sits on the solid petrol/clay disc. Must stay white — class fill
   beats the SVG presentation attribute, and ink-on-petrol is unreadable. */
.pf-value      { fill: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.pf-value-aside { fill: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.pf-bar        { /* presentation attrs carry colour for PDF */ }
.pf-rail       { /* presentation attrs carry colour for PDF */ }

/* Second and third candidates in a comparison. Distinguished by dash pattern as
   well as tone, so the chart survives greyscale printing. */
.pf-spine--b { stroke: var(--clay); stroke-dasharray: 5 3; }
.pf-marker--b { fill: var(--clay); }
.pf-spine--c { stroke: var(--ink-muted); stroke-dasharray: 1 3; }
.pf-marker--c { fill: var(--ink-muted); }

/* The line draws itself once on load — a single deliberate moment. */
@media (prefers-reduced-motion: no-preference) {
  .profile--animate .pf-spine {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: pf-draw 900ms var(--ease) forwards;
  }
  .profile--animate .pf-marker { opacity: 0; animation: pf-fade 300ms ease forwards; }
}
@keyframes pf-draw { to { stroke-dashoffset: 0; } }
@keyframes pf-fade { to { opacity: 1; } }

/* --- Factor commentary ---------------------------------------------------- */

.factor {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--mist);
}
.factor:last-child { border-bottom: 0; }

.factor__id { }
.factor__name { font-weight: 600; font-size: var(--t-sm); }
.factor__code {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  display: block;
  margin-bottom: var(--space-1);
}
.factor__sten {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--petrol);
  margin-top: var(--space-2);
}
.factor__sten span { font-size: var(--t-xs); color: var(--ink-faint); font-weight: 400; }
.factor__body { font-size: var(--t-sm); line-height: 1.65; }
.factor__body p { margin-bottom: var(--space-2); }

/* --- Validity ------------------------------------------------------------- */

.validity {
  border: 1px solid var(--mist-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.validity[data-verdict='caution'] { border-color: var(--clay); background: var(--clay-wash); }
.validity[data-verdict='invalid'] { border-color: var(--clay); background: var(--clay-wash); }

.validity__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--mist);
}
.validity__metric { font-size: var(--t-sm); }
.validity__metric dt { color: var(--ink-faint); font-size: var(--t-xs); }
.validity__metric dd {
  margin: var(--space-1) 0 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- Match ---------------------------------------------------------------- */

.match-score {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.match-score__value {
  font-family: var(--mono);
  font-size: var(--t-3xl);
  font-weight: 500;
  line-height: 1;
  color: var(--petrol);
}
.match-score__unit { font-size: var(--t-sm); color: var(--ink-faint); }

.deviations { font-size: var(--t-sm); }
.deviations li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--mist);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.deviations li:last-child { border-bottom: 0; }
.deviations__delta { font-family: var(--mono); color: var(--clay); white-space: nowrap; }

/* --- AI-written sections --------------------------------------------------
   Marked so a reader always knows which paragraphs were composed rather than
   selected from the text library.
   -------------------------------------------------------------------------- */

.generated {
  border-left: 2px solid var(--mist-strong);
  padding-left: var(--space-5);
}
.generated__tag {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}
.generated p { line-height: 1.7; }

.interview-guide { counter-reset: q; }
.interview-guide li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--mist);
  line-height: 1.6;
}
.interview-guide li::before {
  counter-increment: q;
  content: counter(q);
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}
.interview-guide li:last-child { border-bottom: 0; }
.interview-guide__why {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}

/* --- Open answers --------------------------------------------------------- */

.answers { }
.answers > div { padding: var(--space-4) 0; border-bottom: 1px solid var(--mist); }
.answers > div:last-child { border-bottom: 0; }
.answers dt { font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--space-2); }
.answers dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-muted);
  white-space: pre-wrap;
}

/* --- Print / PDF ---------------------------------------------------------- */

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .report { max-width: none; }
  .report-section { page-break-inside: avoid; }
  .factor { page-break-inside: avoid; }
  .profile { page-break-inside: avoid; }
}

@media (max-width: 700px) {
  .factor { grid-template-columns: 1fr; gap: var(--space-2); }
  .report-head__aside { text-align: left; }
}