/* Governance training module. Uses only the portal's Green Ledger tokens (--accent, --surface, --ink, --line ...),
   so light and dark come from the shell. All class names start with tr- to avoid touching portal styles. */

.tr-root { max-width: 1180px; font-family: var(--font); color: var(--ink); font-size: var(--t-md); line-height: 1.55; }
.tr-root:focus { outline: none; }
.tr-root h1, .tr-root h2, .tr-root h3 { color: var(--ink); line-height: 1.25; }
.tr-root h1 { font-size: var(--t-2xl); letter-spacing: -0.01em; margin: 0; }
.tr-root h1:focus { outline: none; }
.tr-h2 { font-size: var(--t-xl); margin: 0 0 12px; letter-spacing: -0.01em; }
section[aria-labelledby] > .tr-h2 { margin-top: 28px; }
.tr-card > .tr-h2, .tr-card .tr-h2:first-child { margin-top: 0; }
.tr-root a { color: var(--accent-ink); text-underline-offset: 3px; }
.tr-root a:hover { color: var(--accent-hover); }
.tr-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tr-sub, .tr-meta { color: var(--muted); font-size: var(--t-sm); margin: 4px 0 0; }
.tr-big { font-size: var(--t-xl); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.tr-big b { font-size: var(--t-3xl); font-weight: 700; color: var(--accent-ink); }

.tr-pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.tr-head-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.tr-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 10px; font-size: var(--t-sm); color: var(--muted); }
.tr-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }

.tr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px 22px; margin: 0 0 16px; }
.tr-hero { border-left: 4px solid var(--accent); }
.tr-objective { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); box-shadow: none; }
.tr-note { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 16px; font-size: var(--t-sm); }
.tr-review { background: var(--surface-2); box-shadow: none; font-size: var(--t-sm); }
.tr-review summary { cursor: pointer; font-weight: 600; }
.tr-review code, .tr-root code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--line-soft); padding: 0 4px; border-radius: 4px; }

/* buttons */
.tr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: var(--t-md); cursor: pointer; text-decoration: none; background: var(--surface); color: var(--ink); }
.tr-btn-primary, .tr-root a.tr-btn-primary { background: var(--accent); color: var(--on-accent); }
.tr-btn-primary:hover, .tr-root a.tr-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.tr-btn-ghost, .tr-root a.tr-btn-ghost { background: transparent; border-color: var(--line); color: var(--accent-ink); }
.tr-btn-ghost:hover, .tr-root a.tr-btn-ghost:hover { background: var(--accent-soft); border-color: transparent; }
.tr-btn:disabled, .tr-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* pills */
.tr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; background: var(--neu-bg); color: var(--neu); }
.tr-pill-good { background: var(--good-bg); color: var(--good); }
.tr-pill-warn { background: var(--warn-bg); color: var(--warn); }
.tr-pill-bad { background: var(--bad-bg); color: var(--bad); }
.tr-pill-info { background: var(--info-bg); color: var(--info); }
.tr-pill-accent { background: var(--accent-soft); color: var(--accent-ink); }

/* progress */
.tr-progress { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin: 6px 0; min-width: 120px; }
.tr-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* lists of modules / lessons */
.tr-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.tr-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; }
.tr-line-main { min-width: 0; }
.tr-line-title { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-line-title a { text-decoration: none; color: var(--ink); }
.tr-line-title a:hover { color: var(--accent-ink); text-decoration: underline; }
.tr-line-side { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.tr-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-sm); font-weight: 700; }
.tr-alerts { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.tr-alerts li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tr-bullets { margin: 0 0 12px; padding-left: 20px; }
.tr-bullets li { margin: 4px 0; }

/* reading content (built from Markdown) */
.tr-prose { max-width: 70ch; font-size: var(--t-lg); line-height: 1.65; }
.tr-prose h3 { font-size: var(--t-xl); margin: 1.6em 0 0.5em; }
.tr-prose h4 { font-size: var(--t-lg); margin: 1.3em 0 0.4em; }
.tr-prose p { margin: 0 0 1em; }
.tr-prose ul, .tr-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.tr-prose li { margin: 0.3em 0; }
.tr-prose blockquote { margin: 0 0 1em; padding: 12px 16px; background: var(--info-bg); color: var(--ink); border-left: 4px solid var(--info); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tr-prose blockquote p:last-child { margin-bottom: 0; }
.tr-prose table { border-collapse: collapse; width: 100%; font-size: var(--t-md); }
.tr-prose th, .tr-prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.tr-prose th { background: var(--surface-2); }
.tr-table-wrap { overflow-x: auto; margin: 0 0 1em; }
.tr-scenario { font-style: normal; }
.tr-reveal { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.tr-reveal summary, .tr-card details > summary { cursor: pointer; font-weight: 600; padding: 10px 14px; min-height: 40px; display: flex; align-items: center; }
.tr-reveal > .tr-prose { padding: 0 16px 8px; }
.tr-card > details > summary { padding-left: 0; }
.tr-prompts { margin: 0; padding-left: 1.3em; max-width: 70ch; }
.tr-prompts li { margin: 0.5em 0; }

/* quizzes */
.tr-qs { list-style: none; counter-reset: q; padding: 0; margin: 12px 0; display: grid; gap: 20px; }
.tr-q { counter-increment: q; }
.tr-q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tr-q legend { font-weight: 600; font-size: var(--t-lg); padding: 0; margin-bottom: 8px; max-width: 70ch; }
.tr-q legend::before { content: counter(q) ". "; color: var(--accent-ink); }
.tr-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tr-opt label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.tr-opt label:hover { border-color: var(--accent); }
.tr-opt input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.tr-opt:has(input:checked) label { border-color: var(--accent); background: var(--accent-soft); }
.tr-opt.is-correct label, .tr-opt.is-correct:has(input:checked) label { border-color: var(--good); background: var(--good-bg); }
.tr-opt.is-wrong label, .tr-opt.is-wrong:has(input:checked) label { border-color: var(--bad); background: var(--bad-bg); }
.tr-opt.is-correct label::after { content: "Correct answer"; margin-left: auto; font-size: var(--t-xs); font-weight: 700; color: var(--good); white-space: nowrap; }
.tr-opt.is-wrong label::after { content: "Your answer"; margin-left: auto; font-size: var(--t-xs); font-weight: 700; color: var(--bad); white-space: nowrap; }
.tr-opt input:disabled { cursor: default; }
.tr-fb { margin-top: 10px; padding: 12px 16px; border-radius: var(--r-md); border-left: 4px solid var(--line); background: var(--surface-2); max-width: 70ch; }
.tr-fb p { margin: 0 0 8px; }
.tr-fb-good { border-left-color: var(--good); }
.tr-fb-bad { border-left-color: var(--bad); }
.tr-fb ul { padding-left: 1.2em; }
.tr-fb details { margin-top: 6px; font-size: var(--t-sm); }
.tr-fb summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.tr-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tr-result { border-radius: var(--r-md); padding: 16px 18px; margin: 12px 0; background: var(--info-bg); }
.tr-result:focus { outline: 2px solid var(--focus); }
.tr-result-good { background: var(--good-bg); }
.tr-result-bad { background: var(--bad-bg); }
.tr-result p { margin: 0 0 6px; }
.tr-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* declaration */
.tr-checks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; counter-reset: s; }
.tr-checks li { counter-increment: s; }
.tr-checks label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; }
.tr-checks input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.tr-decl fieldset { border: 0; padding: 0; margin: 0; }
.tr-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.tr-field { display: grid; gap: 4px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
.tr-field input, .tr-field select { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 10px; min-height: 40px; }
.tr-field-inline { display: inline-flex; align-items: center; gap: 8px; }
.tr-static { padding: 9px 0; font-weight: 400; color: var(--ink); }

/* dashboard */
.tr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tr-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 2px; }
.tr-stat b { font-size: var(--t-3xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tr-stat span { color: var(--muted); font-size: var(--t-sm); }
.tr-stat-bad b { color: var(--bad); }
.tr-stat-warn b { color: var(--warn); }
.tr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.tr-chip { font: inherit; font-size: var(--t-sm); font-weight: 600; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.tr-chip b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.tr-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.tr-matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 12px; }
.tr-matrix { border-collapse: collapse; min-width: 1100px; width: 100%; font-size: var(--t-sm); }
.tr-matrix th, .tr-matrix td { border-bottom: 1px solid var(--line-soft); padding: 10px; vertical-align: top; text-align: left; }
.tr-matrix thead th { background: var(--surface-2); position: sticky; top: 0; font-weight: 600; }
.tr-matrix tbody th { position: sticky; left: 0; background: var(--surface); min-width: 200px; z-index: 1; border-right: 1px solid var(--line); }
.tr-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; }
.tr-colno { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-xs); margin-right: 6px; }
.tr-colname { display: block; margin-top: 4px; font-weight: 500; color: var(--muted); }
.tr-person { font-weight: 600; font-size: var(--t-md); }
.tr-matrix td.is-required { background: var(--surface-2); }
.tr-req { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--muted); }
.tr-matrix .tr-pill { white-space: normal; }

/* certificate */
.tr-certificate { border: 2px solid var(--accent); border-radius: var(--r-lg); padding: 36px 28px; text-align: center; background: var(--surface); margin: 8px 0 16px; }
.tr-cert-org { font-weight: 700; color: var(--accent-ink); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.tr-cert-lead { color: var(--muted); margin: 4px 0 20px; }
.tr-cert-name { font-size: var(--t-3xl) !important; }
.tr-cert-module { font-size: var(--t-xl); font-weight: 700; margin: 4px 0 20px; }
.tr-cert-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 auto 16px; max-width: 720px; text-align: left; }
.tr-cert-facts dt { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.tr-cert-facts dd { margin: 2px 0 0; font-weight: 600; word-break: break-word; }

.tr-root details > summary:focus-visible { outline-offset: 0; }

@media (max-width: 700px) {
  .tr-root h1 { font-size: var(--t-xl); }
  .tr-line { flex-direction: column; align-items: flex-start; }
  .tr-line-side { justify-content: flex-start; }
  .tr-prose { font-size: var(--t-md); }
  .tr-card { padding: 16px; }
  .tr-pager .tr-btn { flex: 1 1 100%; }
  .tr-matrix-wrap { margin-left: -4px; margin-right: -4px; }
}

@media print {
  .tr-noprint, .sidebar, .topbar, .proto-bar, .proto-log, .tr-crumbs { display: none !important; }
  .tr-root { max-width: none; }
  .tr-certificate { border-color: #000; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { .tr-root * { transition: none !important; scroll-behavior: auto !important; } }

/* Admin-only release control on the Overview page */
.tr-release { border-left: 4px solid var(--warn); }
.tr-release h2 { margin-top: 0; }
.tr-release p { margin: 0 0 10px; max-width: 70ch; }

/* Training home: link tiles (My certificates, Completion dashboard) */
.tr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tr-tile { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; text-decoration: none; color: var(--ink); min-height: 44px; }
.tr-root a.tr-tile { color: var(--ink); }
.tr-tile:hover { border-color: var(--accent); }
.tr-tile-label { font-weight: 600; color: var(--accent-ink); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.tr-tile-big { font-size: var(--t-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tr-tile-sub { color: var(--muted); font-size: var(--t-sm); }

/* Designed certificate (assets/certificate-template.svg), filled by views/certificateSvg.js */
.tr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr-cert-sheet { max-width: 1000px; margin: 8px 0 14px; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); background: #fbfaf6; }
.tr-cert-sheet svg { display: block; width: 100%; height: auto; }
.tr-cert-sheet .tr-certificate { margin: 0; border-radius: 0; border-width: 1px; color: #1b1730; background: #fbfaf6; }
.tr-cert-sheet .tr-certificate * { color: inherit; }
.tr-cert-state { margin: 0 0 12px; }
@media print {
  /* Only the certificate, one A4 landscape page, no margins (the @page rule is added by the Print button) */
  body.tr-print-cert * { visibility: hidden !important; }
  body.tr-print-cert .tr-cert-sheet, body.tr-print-cert .tr-cert-sheet * { visibility: visible !important; }
  body.tr-print-cert .tr-cert-sheet { position: fixed; left: 0; top: 0; width: 297mm; height: 210mm; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
  body.tr-print-cert .tr-cert-sheet svg { width: 297mm; height: 210mm; }
}

/* The completion dashboard has ten module columns: let it use the whole width of the screen */
.tr-root.tr-wide { max-width: none; }

/* Dashboard: ten module columns should fit a normal laptop screen without sideways scrolling */
.tr-matrix { min-width: 0; font-size: 12px; }
.tr-matrix th, .tr-matrix td { padding: 8px 6px; }
.tr-matrix tbody th { min-width: 150px; max-width: 190px; }
.tr-matrix .tr-pill { padding: 3px 8px; font-size: 11px; }
.tr-matrix thead th { font-size: 11px; }
.tr-matrix td { min-width: 0; }