/* Reader version of a reputation plan.
 *
 * Used twice, with the same markup: inside the logged-in 90-day plan page (#ndp-reader) and in the
 * standalone reader page that is built from the same stored files. Only what the markdown needs and
 * the app shell does not offer lives here: label/value rows for an action, the collapsible reference
 * parts, the introduction and the recommendation rings. Cards, notes, chapter navigation and gauges come from styles.css.
 */
.ndp-reader .ndp-edit-block { margin: 0 0 48px; }
.ndp-reader .ndp-edit-block h2 { font-size: 1.5rem; }
.ndp-reader .ndp-prose p { margin: 0 0 14px; }
.ndp-reader .ndp-prose ul, .ndp-reader .ndp-prose ol { max-width: 72ch; }
.ndp-reader .ndp-edit-choice { max-width: 760px; }
.ndp-reader .ndp-edit-choice p { margin: 0; }
.ndp-reader-bars { margin: 28px 0 20px; }
.ndp-reader-bars h3 { margin: 0 0 12px; }
.ndp-reader .ndp-edit-bar { display: block; max-width: 720px; margin: 0 0 10px; border-left: 4px solid var(--teal-green); text-decoration: none; }
.ndp-reader .ndp-edit-bar:hover { border-color: var(--teal-green); background: var(--teal-green-bg); }
.ndp-reader .ndp-edit-task,
.ndp-reader .ndp-edit-block { scroll-margin-top: var(--ndp-reader-offset, 120px); }
.ndp-reader .ndp-edit-task h3 { margin-top: 0; font-family: var(--font-display); }
.ndp-reader-fields { margin: 12px 0 0; }
.ndp-reader-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--border); }
.ndp-reader-row dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.ndp-reader-row dd { margin: 0; max-width: 72ch; }
.ndp-reader-row dd p { margin: 0 0 8px; }
.ndp-reader-row dd p:last-child { margin-bottom: 0; }
.ndp-reader-row:nth-child(3) dd, .ndp-reader-row:nth-child(3) dt { color: var(--teal-green); }

/* Baseline block: four gauges and the two recommendation rings (same look as the stored plan page). */
.ndp-reader .ndp-reader-numbers { scroll-margin-top: var(--ndp-reader-offset, 120px); }
.ndp-reader .ndp-reader-numbers .fw-scorecard-gauges { margin: 8px 0 28px; }
.ndp-rec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 16px; }
.ndp-rec-panel { border: 1px solid var(--border); background: var(--bg-card); border-radius: 12px; padding: 16px 18px 20px; text-align: center; }
.ndp-rec-panel h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.ndp-rec-panel .ov-hero-rating { display: inline-block; width: auto; margin: 12px auto 0; font-size: 15px; font-weight: 600; line-height: 1.2; padding: 6px 16px; border-radius: 999px; }
.ndp-ring { position: relative; width: 140px; height: 140px; margin: 0 auto; }
.ndp-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ndp-ring-val .ov-score-num { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ndp-ring-val .ov-score-denom { font-size: 14px; margin-top: 2px; }

/* Introduction before the report. */
.ndp-intro-checks { list-style: none; margin: 16px 0 18px; padding: 0; max-width: 760px; display: grid; gap: 12px; }
.ndp-intro-checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ndp-intro-tick { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--teal-green-bg); color: var(--teal-green); border: 1px solid var(--teal-green); font-size: 14px; font-weight: 700; line-height: 1; }
.ndp-intro-tick--pending { background: var(--bg-subtle, var(--bg-card)); color: var(--text-muted); border-color: var(--border); }
.ndp-intro-checks strong { display: block; font-family: var(--font-display); }
.ndp-intro-checks strong a { color: inherit; text-decoration: none; }
.ndp-intro-checks strong a:hover { color: var(--teal-green); text-decoration: underline; }
.ndp-intro-text { display: block; color: var(--text-muted); line-height: 1.5; }
.ndp-reader .ndp-intro .ndp-edit-meta a { color: var(--text-muted); }
.ndp-reader .ndp-intro .ndp-edit-meta a:hover { color: var(--text); }

/* Collapsible reference parts. */
.ndp-naslag { border: 1px solid var(--border); background: var(--bg-card); border-radius: 12px; margin: 0 0 16px; scroll-margin-top: var(--ndp-reader-offset, 120px); }
.ndp-naslag > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; min-height: 44px; }
.ndp-naslag > summary::-webkit-details-marker { display: none; }
.ndp-naslag-head { min-width: 0; }
.ndp-reader .ndp-naslag > summary h2 { margin: 0; font-size: 1.15rem; font-family: var(--font-display); }
.ndp-naslag-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; max-width: 72ch; }
.ndp-naslag > summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--text-muted); font-size: 18px; line-height: 1; }
.ndp-naslag[open] > summary::after { content: "\2212"; }
.ndp-naslag[open] > summary { border-bottom: 1px solid var(--border); }
.ndp-naslag-body { padding: 8px 20px 24px; }
.ndp-naslag-body > p, .ndp-naslag-body li { max-width: 72ch; }
.ndp-naslag-body h3 { font-family: var(--font-display); margin: 28px 0 12px; }
.ndp-naslag-body .ndp-edit-card { box-shadow: none; }
.ndp-naslag-body .ndp-edit-card p { margin: 0 0 8px; max-width: 72ch; }
.ndp-naslag-body .ndp-edit-card p:last-child { margin-bottom: 0; }
.ndp-naslag-body .ndp-edit-card a { overflow-wrap: anywhere; }
.ndp-naslag-body a { color: var(--teal-green); overflow-wrap: anywhere; }
.ndp-naslag-body .ndp-table-wrap { overflow-x: auto; }
.ndp-naslag-lead { color: var(--text-muted); }
.ndp-naslag-toggle { margin-left: auto; flex: 0 0 auto; color: var(--teal-green); font-size: 13px; font-weight: 600; }
.ndp-naslag-toggle::before { content: "Openklappen"; }
.ndp-naslag[open] .ndp-naslag-toggle::before { content: "Inklappen"; }
.ndp-naslag > summary:hover .ndp-naslag-toggle { text-decoration: underline; }

/* Technical analysis: a magnifier for what was checked, a tick for what is fine, a warning sign for what needs attention. */
.ndp-reader .ndp-tech-tally { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; padding: 0; margin: 12px 0 4px; }
.ndp-reader .ndp-tech-tally li { padding: 6px 12px 6px 34px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; background: var(--ndp-mark) no-repeat 10px center / 18px 18px; }
.ndp-reader .ndp-check-list { list-style: none; padding-left: 0; }
.ndp-reader .ndp-check-list > li { padding-left: 30px; margin: 0 0 10px; background: var(--ndp-mark) no-repeat 0 3px / 18px 18px; }
.ndp-reader .ndp-check-item--attention { padding-left: 30px; background: var(--ndp-mark) no-repeat 0 3px / 18px 18px; }
.ndp-reader .ndp-tech-tally li, .ndp-reader .ndp-check-list > li, .ndp-reader .ndp-check-item--attention { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ndp-reader .ndp-check-list--examined > li, .ndp-reader .ndp-tech-tally .ndp-check-mark--examined {
  --ndp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CB9B9' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
}
.ndp-reader .ndp-check-list--good > li, .ndp-reader .ndp-tech-tally .ndp-check-mark--good {
  --ndp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321A154' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E");
}
.ndp-reader .ndp-check-item--attention, .ndp-reader .ndp-tech-tally .ndp-check-mark--attention {
  --ndp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D37F19' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.3'/%3E%3C/svg%3E");
}

/* Source cards: what the source means for the brand. */
.ndp-reader .ndp-source-role { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; font-style: normal; background: var(--teal-green-bg); color: var(--text); }
.ndp-reader .ndp-source-role--support { background: var(--score-strong-bg); color: var(--score-good); }
.ndp-reader .ndp-source-role--attention { background: var(--score-below-avg-bg); color: var(--score-below-avg); }
.ndp-reader .ndp-source-role--peer { background: var(--score-moderate-bg); color: var(--score-moderate); }
.ndp-reader .ndp-source-role--context { background: var(--teal-green-bg); color: var(--text-muted); }
.ndp-reader-foot { color: var(--text-muted); font-size: 13px; margin: 32px 0 0; }


@media (max-width: 700px) {
  .ndp-reader .ndp-edit-task, .ndp-reader .ndp-edit-note, .ndp-reader .ndp-edit-card { padding: 16px; }
  .ndp-reader-row { grid-template-columns: 1fr; padding: 10px 0; }
  .ndp-reader .fw-scorecard-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ndp-rec-row { grid-template-columns: 1fr; }
  .ndp-naslag > summary { padding: 14px 16px; }
  .ndp-naslag-body { padding: 4px 14px 20px; }
}
@media print { .ndp-naslag > .ndp-naslag-body { display: block; } }

/* Placement inside the logged-in 90-day plan page: same column as the other states of that page. */
#view-ninety-day-plan #ndp-reader {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px 48px;
  width: 100%;
  box-sizing: border-box;
}
#ndp-reader[hidden] { display: none !important; }
@media (max-width: 700px) {
  #view-ninety-day-plan #ndp-reader { padding-left: 16px; padding-right: 16px; }
}

/* Print and PDF: no navigation, reference parts start on a new page, blocks are not cut in the middle. */
@media print {
  .ndp-reader #ndp-edit-nav { display: none !important; }
  .ndp-reader .air-ctx-bar { position: static; }
  .ndp-reader-main { max-width: none; padding: 20px 0 0; }
  .ndp-reader .fw-scorecard-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ndp-rec-row { grid-template-columns: 1fr 1fr; }
  .ndp-reader h2, .ndp-reader h3 { break-after: avoid; }
  /* Small blocks stay whole. Large cards (actions, sources) may break between their paragraphs, so pages do not stay half empty. */
  .ndp-reader .ndp-edit-choice, .ndp-reader .ndp-rec-panel, .ndp-reader .fw-scorecard-gauge,
  .ndp-intro-checks li { break-inside: avoid; }
  .ndp-reader .ndp-naslag { break-before: page; border: 0; border-radius: 0; margin: 0; }
  .ndp-reader #naslag > h2, .ndp-reader #naslag > .ndp-kicker, .ndp-reader #naslag > .ndp-edit-meta { display: none; }
  .ndp-reader .ndp-reader-numbers, .ndp-reader .ndp-intro { break-inside: avoid; }
  .ndp-reader .ndp-naslag > summary { padding: 0 0 8px; border-bottom: 1px solid var(--border); }
  .ndp-reader .ndp-naslag > summary::after, .ndp-reader .ndp-naslag-toggle { display: none; }
  .ndp-reader .ndp-naslag-body { padding: 8px 0 0; }
  .ndp-reader a { overflow-wrap: anywhere; }
  /* Paragraphs, list items and table rows stay whole. A block taller than the page may still break, with at least three lines on each side. */
  .ndp-reader p, .ndp-reader li, .ndp-reader dd, .ndp-reader td { orphans: 3; widows: 3; }
  .ndp-reader p, .ndp-reader li, .ndp-reader tr, .ndp-reader blockquote { break-inside: avoid; }
  .ndp-reader p:has(+ ul), .ndp-reader p:has(+ ol), .ndp-reader p:has(+ table) { break-after: avoid; }
  .ndp-reader li:first-child, .ndp-reader li:nth-last-child(2) { break-after: avoid; }
  .ndp-reader dt { break-after: avoid; }
  /* Chromium may break a grid row between its top border and its first item, leaving the card heading alone.
     As blocks, the heading keeps its label and the label its first paragraph, and a long row may still break. */
  .ndp-reader .ndp-reader-row { display: block; }
  .ndp-reader .ndp-reader-row dt { margin-bottom: 4px; }
  .ndp-reader .ndp-reader-bars { break-inside: avoid; }
  .ndp-reader thead { display: table-header-group; }
  /* The page is narrower than the mobile breakpoint, which stacks table rows as cards. Paper keeps the table. */
  .ndp-reader p:has(+ .ndp-table-wrap) { break-after: avoid; }
  .ndp-reader .ndp-table-wrap table { display: table; width: 100%; border-collapse: collapse; }
  .ndp-reader .ndp-table-wrap thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ndp-reader .ndp-table-wrap tbody { display: table-row-group; }
  .ndp-reader .ndp-table-wrap tr { display: table-row; margin: 0; border: 0; padding: 0; background: none; }
  .ndp-reader .ndp-table-wrap th, .ndp-reader .ndp-table-wrap td { display: table-cell; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
  .ndp-reader .ndp-table-wrap td::before { content: none; }
  /* An empty block between a heading and its content would break the keep-together chain. */
  .ndp-reader div:empty { display: none; }
}