/* Compliance page - perimeter, onboarding journey, monitoring, governance, records.
 * Builds on styles.css tokens and the shared pf-* pieces in platform.css. */

:root { --alert: #b3261e; --alert-soft: #f8e1de; }

.cp-k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---- onboarding figure ---- */
.cp-box rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease; }
.cp-box text { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.02em; fill: var(--ink); text-anchor: middle; transition: fill 0.3s ease; }
.cp-box .cp-box__n { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; fill: var(--muted); text-anchor: start; }
.cp-box .cp-box__s { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0; fill: var(--muted); }
.cp-box { opacity: 0.5; transition: opacity 0.3s ease; }
.cp-box.is-on, .cp-box.is-done, .cp-box.is-fail { opacity: 1; }
.cp-box.is-on rect { stroke: var(--ink); stroke-width: 2.5; }
.cp-box.is-done rect { fill: var(--mint); stroke: var(--mint); }
.cp-box.is-done .cp-box__n, .cp-box.is-done .cp-box__s { fill: var(--ink); fill-opacity: 0.7; }
.cp-box--go.is-done rect { fill: var(--ink); stroke: var(--ink); }
.cp-box--go.is-done text { fill: var(--paper); }
.cp-box--go.is-done .cp-box__n, .cp-box--go.is-done .cp-box__s { fill: var(--lilac); fill-opacity: 1; }
.cp-box--edd rect { stroke-dasharray: 4 4; }
.cp-box--edd text { fill: var(--muted); font-size: 14px; }
.cp-box--edd .cp-box__s { font-size: 10.5px; }
.cp-box--edd.is-on rect { stroke: var(--alert); stroke-dasharray: none; fill: var(--alert-soft); }
.cp-box--edd.is-on text { fill: var(--alert); }

.cp-arrow line, .cp-arrow path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-arrow polygon { fill: var(--ink); }
.cp-arrow text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 600; fill: var(--ink); }
.cp-arrow { opacity: 0.28; transition: opacity 0.3s ease; }
.cp-arrow.is-on { opacity: 1; }
.cp-arrow--faint line, .cp-arrow--faint path { stroke-dasharray: 3 4; }
.cp-arrow.is-fail { opacity: 1; }
.cp-arrow.is-fail line, .cp-arrow.is-fail path { stroke: var(--alert); stroke-dasharray: none; }
.cp-arrow.is-fail polygon { fill: var(--alert); }
.cp-arrow.is-fail text { fill: var(--alert); }

.cp-chip { opacity: 0; transition: opacity 0.3s ease; }
.cp-chip.is-on { opacity: 1; }
.cp-chip rect { fill: var(--ink); }
.cp-chip text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; fill: var(--paper); text-anchor: middle; }
.cp-chip.is-fail rect { fill: var(--alert); }
.cp-chip.is-done rect { fill: var(--mint); }
.cp-chip.is-done text { fill: var(--ink); }

.cp-dots circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }

/* ---- monitoring ---- */
.cp-monitor { display: flex; flex-direction: column; gap: 21px; }
.cp-cadence .pf-table__row { grid-template-columns: 1fr 1.1fr 1.6fr; }
.cp-alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; }
.cp-alert { background: var(--wash); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.cp-alert h3 { font-size: 20px; }
.cp-alert__k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cp-alert--dark { background: var(--lilac); }

/* ---- records ---- */
.cp-records { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 21px; align-items: start; }
.cp-records .pf-lc__panel li { font-size: 15px; line-height: 1.5; }
.cp-records .pf-lc__panel strong { font-weight: 600; color: var(--ink); }
.cp-reports .pf-table__row { grid-template-columns: 1.2fr 0.6fr 1.8fr; }

/* ---- standards ---- */
.cp-standards { background: var(--wash); border-radius: var(--radius-lg); padding: 28px 35px; display: flex; flex-direction: column; gap: 18px; }
.cp-standards .pf-flow { justify-content: center; gap: 9px; margin: 0; }
.cp-standards .pf-flow span { font-size: 14px; padding: 9px 16px; white-space: normal; text-align: center; }
.cp-standards__note { font-size: 14px; color: var(--muted); text-align: center; }

@media (max-width: 1100px) {
  .cp-alerts { grid-template-columns: 1fr 1fr; }
  .cp-records { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cp-alerts { grid-template-columns: 1fr; }
  .cp-cadence .pf-table__row, .cp-reports .pf-table__row { grid-template-columns: 1fr; gap: 6px; }
  .cp-cadence .pf-table__row--head span:not(:first-child), .cp-reports .pf-table__row--head span:not(:first-child) { display: none; }
}