/* Custody recoverability self-assessment, scoped under .rca and mapped onto
   the site's rack-room palette (dark only). Loaded per-page via front matter.
   Nothing here stores or transmits anything: the widget is pure DOM. */

.rca {
  --rca-surface: #0d1014;
  --rca-surface-2: #11151b;
  --rca-bad: #e5534b;
  --rca-mid: #ffcc00;
  --rca-good: #5fb87a;
  font-family: var(--mono);
  margin: 1.7rem 0;
}
.rca .hidden { display: none !important; }

.rca .card {
  background: var(--rca-surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.2rem;
}

.rca .label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}
.rca .label::before { content: '/ '; color: var(--orange); }

.rca .caption {
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0.6rem 0 0;
  max-width: 70ch;
}

.rca .progress {
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(var(--bg) 70%, transparent);
  padding: 0.7rem 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.rca .progress .bar {
  flex: 1 1 12rem;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  min-width: 8rem;
}
.rca .progress .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 0.25s ease;
}
.rca .count { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.05em; }

/* --- questions --- */

.rca .q { margin: 0 0 0.9rem; }
.rca .q.answered { border-color: #232b36; }
.rca .q .domain {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.rca .q .domain::before { content: '/ '; color: var(--orange); }
.rca .q h3 {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0.4rem 0 0.9rem;
  color: var(--bright);
}
.rca .opts { display: grid; gap: 0.4rem; }
.rca .opt {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: left;
  background: var(--rca-surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  width: 100%;
}
.rca .opt:hover { border-color: #2f3946; }
.rca .opt .tick {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.28rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
}
.rca .opt.on { border-color: var(--orange); color: var(--bright); }
.rca .q.locked .opt { opacity: 0.5; cursor: default; }
.rca .q .dep-note { margin: 0.6rem 0 0; }
.rca .level p.held { color: var(--orange); }
.rca .printonly { display: none; }
.rca .opt.on .tick { background: var(--orange); border-color: var(--orange); }
.rca .opt:focus-visible, .rca button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.rca .actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }
.rca button.primary {
  font: inherit;
  font-size: 0.82rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  background: var(--orange);
  color: #0a0c0f;
  border: 1px solid var(--orange);
  font-weight: 600;
}
.rca button.primary:hover { filter: brightness(1.1); }
.rca button.primary[disabled] { opacity: 0.35; cursor: not-allowed; filter: none; }
.rca button.ghost {
  font: inherit;
  font-size: 0.75rem;
  background: none;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.rca button.ghost:hover { border-color: var(--orange); color: var(--ink); }

/* --- result --- */

.rca .level { margin-bottom: 1.1rem; }
.rca .level .lv {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bright);
  margin: 0.5rem 0 0.2rem;
  line-height: 1.25;
}
.rca .level .lv .n { color: var(--orange); }
.rca .level .score { font-size: 0.78rem; color: var(--muted); }
.rca .level p { font-size: 0.87rem; line-height: 1.7; margin: 0.8rem 0 0; max-width: 70ch; }

.rca table.domains { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 0.6rem 0 0; }
.rca table.domains th {
  text-align: left;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding: 0 0.6rem 0.45rem 0;
}
.rca table.domains td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.rca table.domains td.n { text-align: right; white-space: nowrap; color: var(--muted); padding-right: 0; width: 3.5rem; }
.rca table.domains td.mcell { width: 8rem; }
/* The track needs more contrast than --rule gives it against the card, or an
   empty domain reads as a rendering fault rather than a score of zero. */
.rca .meter { display: block; width: 100%; height: 4px; background: #262e3a; border-radius: 2px; overflow: hidden; }
.rca .meter i { display: block; height: 100%; background: var(--rca-good); }
.rca .meter.mid i { background: var(--rca-mid); }
.rca .meter.bad i { background: var(--rca-bad); }

.rca ol.asks { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.rca ol.asks li { font-size: 0.87rem; line-height: 1.7; margin-bottom: 0.7rem; color: var(--bright); }
.rca ol.asks li .why { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }

.rca .gaps { margin: 0.6rem 0 0; }
.rca .gap { border-top: 1px solid var(--rule); padding: 0.8rem 0 0; margin-top: 0.8rem; }
.rca .gap:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.rca .gap .head { font-size: 0.85rem; color: var(--bright); line-height: 1.55; }
.rca .gap .said { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }
.rca .gap .rule-ref { font-size: 0.78rem; line-height: 1.65; color: var(--ink); margin-top: 0.45rem; border-left: 2px solid var(--rule); padding-left: 0.7rem; }
.rca .gap .rule-ref b { color: var(--bright); font-weight: 500; }
.rca .gap .rule-ref q { font-style: italic; color: var(--muted); }

.rca .stack { display: grid; gap: 1.1rem; }
/* The widget sits inside .prose, which prefixes every h2 with a section mark
   and gives it an article-sized top margin. Neither belongs on a card heading. */
.rca h2.sec { font-size: 0.95rem; font-weight: 500; margin: 0 0 0.2rem; color: var(--bright); }
.rca h2.sec::before { content: none; }

@media (max-width: 560px) {
  .rca .card { padding: 0.85rem 0.9rem; }
  .rca table.domains td.mcell { width: 4.5rem; }
}

/* Printing is how a result travels: ink on white, no controls, no site
   furniture. These rules reach outside .rca on purpose. This stylesheet is
   loaded by one page, so page-level selectors here only ever apply to it. */
@page { size: A4; margin: 14mm; }

@media print {
  /* The site background is a gradient under a full-viewport SVG grain overlay.
     Printed, it costs megabytes and washes out the text. */
  html, body { background: #fff !important; color: #000; }
  body::after { display: none !important; }

  /* Site furniture does not belong on a document that travels inside a firm.
     The h1 stays, because it is what names the document. */
  header.site, footer.site, nav.trail, nav.crumb, nav.toc, .related,
  article > .meta { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }
  article > h1 { font-size: 1.05rem; color: #000; margin: 0 0 0.5rem; }
  a { color: #000; }

  /* The prose around the widget is reading material for whoever fills the
     assessment in. The result is the only part worth carrying. */
  .prose > *:not(.rca) { display: none !important; }

  /* Rebind the palette rather than overriding each rule: several result
     elements inherit --bright, which is near-white and vanishes on paper. */
  .rca {
    --rca-surface: #fff; --rca-surface-2: #fff;
    --bright: #000; --ink: #222; --muted: #555; --rule: #bbb;
    color: #000; margin: 0; font-size: 0.92em;
  }
  .rca .progress, .rca .actions, .rca #rca-questions, .rca .noprint { display: none !important; }
  .rca .card { border: 1px solid #bbb; padding: 0.5rem 0.7rem; break-inside: avoid; }
  /* The gaps card is the long one. Let it flow across the page break and keep
     each individual gap whole, rather than pushing the whole card to page two
     and leaving a third of page one empty. */
  .rca .card:has(.gaps) { break-inside: auto; }
  .rca .gap { break-inside: avoid; }
  .rca .gap.extra { display: none; }
  .rca .printonly { display: block; }
  .rca .level p.held { color: #000; }
  .rca .stack { gap: 0.6rem; }
  .rca .label, .rca .caption, .rca .gap .said, .rca ol.asks li .why, .rca table.domains th, .rca table.domains td.n { color: #555; }
  .rca .level .lv, .rca .gap .head, .rca ol.asks li, .rca h2.sec, .rca table.domains td { color: #000; }
  .rca .level .lv .n { color: #000; }
  .rca .level .lv { font-size: 1.1rem; }
  .rca .meter { background: #ddd; }
  .rca .meter i { background: #666; }
  .rca .gap .rule-ref { border-left-color: #bbb; color: #222; }
  .rca .gap .rule-ref q { color: #555; }
  .rca .level { margin-bottom: 0; }
  .rca .level p, .rca ol.asks li, .rca .gap .head { line-height: 1.45; }
  .rca .gap .rule-ref { line-height: 1.45; }
  .rca .gap { padding-top: 0.5rem; margin-top: 0.5rem; }
  .rca ol.asks li { margin-bottom: 0.45rem; }
  .rca table.domains td { padding: 0.3rem 0.6rem 0.3rem 0; }
}