/* ==========================================================================
   share.css - growth surfaces on the results page (A3)

   Covers four blocks that live below the interpretation card:
     1. "What next"      .next-steps / .next-step-card
     2. Share row        .share-row / .share-btn
     3. Trust block      .trust-block
     4. Trend + banner   .result-trend / .retake-banner
   plus the print-only clinician report (.print-report), which is hidden on
   screen and is the only thing that survives @media print.

   Every colour comes from css/variables.css, so both themes follow the
   existing tokens without a single hard-coded hex value.
   ========================================================================== */


/* ==========================================================================
   1. What next
   ========================================================================== */

.next-steps {
  margin-block: var(--space-10) var(--space-8);
}

.next-steps__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.next-steps__lead {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  max-width: 62ch;
}

.next-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.next-step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-card);
}

/* The first card is the one that matters clinically: give it the accent. */
.next-step-card--doctor {
  border-color: var(--color-border-primary);
}

.next-step-card__title {
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--color-text-primary);
  margin: 0;
}

.next-step-card__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.next-step-card__due {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.next-step-card__note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: 0;
}

.next-step-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

.next-step-card__btn {
  font-size: var(--text-sm);
}


/* ==========================================================================
   2. Share row
   ========================================================================== */

.share-row {
  margin-block: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.share-row__title {
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.share-row__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 44px minimum target: the audience for this site mis-taps small controls */
  min-height: 44px;
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.share-btn:hover,
.share-btn:focus-visible {
  border-color: var(--color-border-focus);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.share-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.share-btn:active {
  transform: translateY(0);
}

.share-btn[disabled] {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

.share-btn svg {
  flex: none;
}

.share-btn--wide {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-3);
  border-style: dashed;
}

.share-row__note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: var(--space-3) 0 0;
}


/* ==========================================================================
   3. Trust block
   ========================================================================== */

.trust-block {
  margin-block: var(--space-8);
}

.trust-block__details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  overflow: hidden;
}

.trust-block__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}

.trust-block__summary::-webkit-details-marker {
  display: none;
}

/* Chevron drawn in CSS: one less inline SVG to translate and theme. */
.trust-block__summary::after {
  content: '';
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--duration-fast) var(--ease-out);
}

.trust-block__details[open] .trust-block__summary::after {
  transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

.trust-block__summary:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.trust-block__body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.trust-block__text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 0;
  max-width: 68ch;
}

.trust-block__text--caution {
  color: var(--color-text-primary);
  font-weight: 550;
}

.trust-block__table-wrap {
  margin-top: var(--space-4);
  overflow-x: auto;
}

.trust-block__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.trust-block__table th,
.trust-block__table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.trust-block__table th {
  font-weight: 650;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.trust-block__table td:last-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text-primary);
}

.trust-block__sources-title {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--color-text-primary);
  margin: var(--space-5) 0 var(--space-2);
}

.trust-block__sources {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

.trust-block__sources li + li {
  margin-top: var(--space-2);
}

.trust-block__sources a {
  color: var(--color-text-link);
}


/* ==========================================================================
   4. Trend comparison and retake banner
   ========================================================================== */

.result-trend {
  margin-block: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.result-trend__title {
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.result-trend__summary {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}

/* Direction is stated in words as well: colour alone is never the signal. */
.result-trend__summary--up    { color: var(--color-warning-dark); }
.result-trend__summary--down  { color: var(--color-success-dark); }
.result-trend__summary--flat  { color: var(--color-text-secondary); }

.result-trend__chart {
  width: 100%;
  min-height: 160px;
}

.result-trend__note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: var(--space-3) 0 0;
}

.retake-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.retake-banner__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.retake-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* History page: the same trend chart, in its own section
   ========================================================================== */

.history-trend {
  margin-block: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.history-trend[hidden] {
  display: none;
}

.history-trend__title {
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.history-trend__caption {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.history-trend__chart {
  width: 100%;
  min-height: 160px;
}


/* ==========================================================================
   5. Print-only clinician report
   ========================================================================== */

/*
 * Hidden on screen without display:none, so assistive tech that ignores
 * aria-hidden still skips it and no layout space is taken.
 */
.results-print-only {
  display: none;
}

@media print {

  /* The report is the document; the interactive page is scaffolding. */
  .results-print-only {
    display: block;
  }

  .next-steps,
  .share-row,
  .result-trend,
  .retake-banner,
  .trust-block,
  .results-donate {
    display: none !important;
  }

  .print-report {
    font-size: 10pt;
    line-height: 1.45;
    color: #000;
  }

  .print-report__title {
    font-size: 15pt;
    margin: 0 0 6pt;
  }

  .print-report__lead {
    font-size: 11pt;
    font-weight: 700;
    margin: 0 0 8pt;
  }

  .print-report__severity,
  .print-report__interpretation {
    margin: 0 0 8pt;
    max-width: none;
  }

  .print-report table {
    width: 100%;
    border-collapse: collapse;
    margin: 8pt 0 12pt;
    page-break-inside: auto;
  }

  .print-report caption,
  .print-report__caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    font-size: 11pt;
    padding-bottom: 4pt;
    page-break-after: avoid;
  }

  .print-report th,
  .print-report td {
    border: 0.5pt solid #999;
    padding: 3pt 5pt;
    text-align: left;
    vertical-align: top;
  }

  .print-report thead {
    display: table-header-group;   /* repeat headers across page breaks */
  }

  .print-report tr {
    page-break-inside: avoid;
  }

  /* Grey, not colour: the report has to survive a monochrome office printer */
  .print-report__row--hit td {
    background: #eeeeee !important;
    font-weight: 700;
  }

  .print-report__part {
    font-size: 8pt;
    color: #555 !important;
  }

  .print-report__meta th {
    width: 34%;
  }

  .print-report__footer {
    margin-top: 12pt;
    page-break-inside: avoid;
  }

  .print-report__footer h3 {
    font-size: 11pt;
    margin: 0 0 4pt;
  }

  .print-report__footer ul {
    margin: 0 0 8pt;
    padding-left: 14pt;
    font-size: 8.5pt;
  }

  .print-report__disclaimer {
    font-size: 9pt;
    border-top: 0.5pt solid #999;
    padding-top: 6pt;
    margin: 0;
  }

  .print-report__origin {
    font-size: 8.5pt;
    margin: 4pt 0 0;
    color: #555 !important;
  }
}


/* ==========================================================================
   6. Motion and narrow screens
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .share-btn,
  .trust-block__summary::after {
    transition: none;
  }

  .share-btn:hover,
  .share-btn:focus-visible {
    transform: none;
  }
}

@media (max-width: 640px) {
  .next-steps__grid {
    grid-template-columns: 1fr;
  }

  .share-row {
    padding: var(--space-4);
  }

  .share-row__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .share-btn {
    justify-content: center;
  }

  .next-step-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .retake-banner {
    flex-direction: column;
    align-items: stretch;
  }
}