rcf-lite 0.32.5 → 0.33.0

package/src/view/style.css

@@ -2880,3 +2880,597 @@ html[data-rcf-lookup-open] { overflow: hidden; }
   outline: 2px solid var(--sv-focus);
   outline-offset: 1px;
 }
+
+/* FBS-204 (ADR-4139): command-page tables for the Readiness tab.
+   Two tables (questions, blocking) share the shape and tokens; the
+   wrapper lets the register-ordered first paint control which comes
+   first. All colors come from existing --sv-* tokens so the contrast
+   audit (AC-207-1/2) stays green in both themes. No new tokens. */
+.rcf-cmd-tables {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.rcf-cmd-table {
+  border: 1px solid var(--sv-border);
+  border-radius: 10px;
+  background: var(--sv-surface);
+  color: var(--sv-ink);
+  padding: 0.9rem 1rem;
+}
+.rcf-cmd-table__head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  margin-bottom: 0.35rem;
+}
+.rcf-cmd-table__head h3 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+.rcf-cmd-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  margin-top: 0.35rem;
+}
+.rcf-cmd-table__table th,
+.rcf-cmd-table__table td {
+  text-align: left;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--sv-border);
+  vertical-align: top;
+}
+.rcf-cmd-table__table th {
+  color: var(--sv-muted);
+  font-weight: 700;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.rcf-cmd-table__table tr[hidden] {
+  display: none;
+}
+.rcf-cmd-table__fragment {
+  color: var(--sv-muted);
+  font-family: var(--sv-mono);
+  margin-left: 0.1rem;
+}
+.rcf-cmd-filterbar {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin: 0.4rem 0 0.2rem;
+}
+.rcf-cmd-filterbar__field {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  color: var(--sv-muted);
+  gap: 0.15rem;
+}
+.rcf-cmd-filterbar__field select {
+  color: var(--sv-ink);
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-control);
+  border-radius: 6px;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.85rem;
+}
+.rcf-cmd-copy {
+  background: var(--sv-surface);
+  color: var(--sv-ink);
+  border: 1px solid var(--sv-border);
+  border-radius: 6px;
+  padding: 0.2rem 0.55rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.rcf-cmd-copy:hover,
+.rcf-cmd-copy:focus-visible {
+  background: var(--sv-active);
+  color: var(--sv-ink);
+  border-color: var(--sv-control);
+}
+.rcf-cmd-copy:focus-visible { outline: 3px solid var(--sv-focus); outline-offset: 2px; }
+.rcf-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.rcf-readiness-freeze-state {
+  border: 1px solid var(--sv-border);
+  border-radius: 10px;
+  background: var(--sv-surface);
+  color: var(--sv-ink);
+  padding: 0.9rem 1rem;
+  margin-top: 0.5rem;
+}
+.rcf-readiness-freeze-state h3 {
+  margin: 0 0 0.35rem;
+  font-size: 1.05rem;
+}
+.rcf-readiness-freeze-state p {
+  margin: 0;
+}
+
+/* Stacked rows under 720px: each table row collapses to a labelled
+   stack so the command page stays readable on phone widths (plan
+   rule 2.4). The row still carries every cell; the th label is the
+   data-rcf-col attribute on the td via a generated-content attr(). */
+@media (max-width: 720px) {
+  .rcf-cmd-table__table thead { display: none; }
+  .rcf-cmd-table__table,
+  .rcf-cmd-table__table tbody,
+  .rcf-cmd-table__table tr,
+  .rcf-cmd-table__table td { display: block; width: 100%; }
+  .rcf-cmd-table__table tr {
+    border-bottom: 1px solid var(--sv-border);
+    padding: 0.3rem 0;
+  }
+  .rcf-cmd-table__table td {
+    border-bottom: 0;
+    padding: 0.15rem 0.2rem;
+  }
+  .rcf-cmd-table__table td[data-rcf-col]:before {
+    content: attr(data-rcf-col) ": ";
+    color: var(--sv-muted);
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-right: 0.3rem;
+  }
+}
+
+/* FBS-205 (ADR-4139): coverage sub-view and the thin-requirements table.
+   The sub-view reads totals + unresolvedTestPointers from
+   `coverage.tree` and renders them as a stat line, one stacked bar and
+   family tiles. The bar uses --sv-success, --sv-warning and --sv-danger
+   over --sv-surface so the contrast audit (AC-207-1/2) stays green;
+   no new tokens are introduced. */
+.rcf-cov-summary {
+  margin-top: 1.25rem;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+}
+.rcf-cov-summary__head { margin: 0 0 0.5rem; }
+.rcf-cov-summary__head h3 { margin: 0; font-size: 1.05rem; }
+.rcf-cov-summary__totals {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin: 0 0 0.5rem;
+  color: var(--sv-ink);
+  font-size: 0.95rem;
+}
+.rcf-cov-summary__totals--unavailable { color: var(--sv-muted); }
+.rcf-cov-summary__slot { white-space: nowrap; }
+.rcf-cov-summary__slot[data-rcf-slot="percentCovered"] {
+  margin-left: auto;
+  color: var(--sv-muted);
+}
+.rcf-cov-summary__bar {
+  display: flex;
+  width: 100%;
+  height: 0.9rem;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+  border-radius: 999px;
+  overflow: hidden;
+  margin: 0 0 0.6rem;
+}
+.rcf-cov-summary__bar[data-rcf-bar-empty="yes"] {
+  background: var(--sv-raised);
+}
+.rcf-cov-summary__bar-seg { display: block; height: 100%; }
+.rcf-cov-summary__bar-seg--covered { background: var(--sv-success); }
+.rcf-cov-summary__bar-seg--unresolved { background: var(--sv-warning); }
+.rcf-cov-summary__bar-seg--uncovered { background: var(--sv-danger); }
+.rcf-cov-summary__tiles {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 0.5rem;
+}
+.rcf-cov-summary__tile {
+  background: var(--sv-raised);
+  border: 1px solid var(--sv-border);
+  border-radius: 8px;
+  padding: 0.5rem 0.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+.rcf-cov-summary__tile[data-rcf-unavailable="yes"] { color: var(--sv-muted); }
+.rcf-cov-summary__tile-count {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--sv-ink);
+}
+.rcf-cov-summary__tile-label {
+  font-size: 0.75rem;
+  color: var(--sv-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.rcf-cov-summary__unresolved { margin-top: 0.8rem; }
+.rcf-cov-summary__unresolved h4 {
+  margin: 0 0 0.3rem;
+  font-size: 0.95rem;
+}
+.rcf-cov-summary__unresolved-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+.rcf-cov-summary__unresolved-table th,
+.rcf-cov-summary__unresolved-table td {
+  text-align: left;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--sv-border);
+  vertical-align: top;
+}
+.rcf-cov-summary__unresolved-table th {
+  color: var(--sv-muted);
+  font-weight: 700;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.rcf-thin-reqs {
+  margin-top: 1.25rem;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+}
+.rcf-thin-reqs__head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 0.3rem;
+}
+.rcf-thin-reqs__head h3 { margin: 0; font-size: 1.05rem; }
+.rcf-thin-reqs__hint { margin: 0 0 0.4rem; }
+.rcf-thin-reqs__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  margin-top: 0.3rem;
+}
+.rcf-thin-reqs__table th,
+.rcf-thin-reqs__table td {
+  text-align: left;
+  padding: 0.45rem 0.5rem;
+  border-bottom: 1px solid var(--sv-border);
+  vertical-align: top;
+}
+.rcf-thin-reqs__table th {
+  color: var(--sv-muted);
+  font-weight: 700;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.rcf-thin-reqs__id {
+  color: var(--sv-link);
+  font-family: var(--sv-mono);
+}
+.rcf-thin-reqs__trace { margin-left: 0.4rem; }
+.rcf-thin-reqs__empty {
+  padding: 1rem;
+  border: 1px dashed var(--sv-control);
+  border-radius: 0.5rem;
+  color: var(--sv-muted);
+  text-align: center;
+  margin: 0.3rem 0 0;
+}
+
+.rcf-po-verdict__count-link {
+  color: var(--sv-link);
+  text-decoration: underline;
+}
+.rcf-po-verdict__count-link:hover,
+.rcf-po-verdict__count-link:focus { color: var(--sv-hover); }
+.rcf-po-verdict__next { margin: 0.3rem 0 0; color: var(--sv-ink); }
+
+@media (max-width: 720px) {
+  .rcf-cov-summary__totals { gap: 0.5rem; }
+  .rcf-cov-summary__slot[data-rcf-slot="percentCovered"] { margin-left: 0; }
+  .rcf-cov-summary__tiles { grid-template-columns: repeat(2, 1fr); }
+  .rcf-cov-summary__unresolved-table thead { display: none; }
+  .rcf-cov-summary__unresolved-table tr {
+    display: block;
+    border-bottom: 1px solid var(--sv-border);
+    padding: 0.3rem 0;
+  }
+  .rcf-cov-summary__unresolved-table td { display: block; padding: 0.15rem 0; }
+  .rcf-thin-reqs__table thead { display: none; }
+  .rcf-thin-reqs__table tr {
+    display: block;
+    border-bottom: 1px solid var(--sv-border);
+    padding: 0.3rem 0;
+  }
+  .rcf-thin-reqs__table td { display: block; padding: 0.15rem 0; }
+}
+[data-embed="1"] .rcf-cov-summary__tiles { grid-template-columns: repeat(2, 1fr); }
+
+/* --------------------------------------------------------------------
+ * Readiness SubTabStrip, stage grid, delta counts (FBS-206, TAC-4135)
+ * -------------------------------------------------------------------- */
+
+.rcf-readiness-panel { display: block; }
+.rcf-readiness-subpanel { display: block; margin-top: 0.6rem; }
+.rcf-readiness-subpanel[hidden] { display: none; }
+
+.rcf-readiness-grid {
+  margin: 1rem 0;
+}
+.rcf-readiness-grid__table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+  border-radius: 0.4rem;
+  overflow: hidden;
+}
+.rcf-readiness-grid__table th,
+.rcf-readiness-grid__table td {
+  padding: 0.4rem 0.7rem;
+  text-align: left;
+  border-bottom: 1px solid var(--sv-border);
+}
+.rcf-readiness-grid__table th { font-weight: 600; }
+.rcf-readiness-grid__table tr:last-child th,
+.rcf-readiness-grid__table tr:last-child td { border-bottom: none; }
+.rcf-readiness-grid__stage-id { font-weight: 600; }
+.rcf-readiness-grid__cell--passed { color: var(--sv-success); }
+.rcf-readiness-grid__cell--failing { color: var(--sv-danger); }
+.rcf-readiness-grid__cell--acknowledged { color: var(--sv-warning); }
+.rcf-readiness-grid__cell--notApplicable { color: var(--sv-muted); }
+.rcf-readiness-grid__counts { font-variant-numeric: tabular-nums; }
+.rcf-readiness-grid__failing {
+  margin-left: 0.4rem;
+  color: var(--sv-danger);
+  text-decoration: underline;
+}
+.rcf-readiness-grid__failing:hover,
+.rcf-readiness-grid__failing:focus { color: var(--sv-hover); }
+
+.rcf-readiness-delta-counts {
+  margin: 1rem 0;
+}
+.rcf-readiness-delta-counts__tiles {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.5rem;
+  margin: 0.4rem 0 0.6rem;
+}
+.rcf-readiness-delta-counts__tile {
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+  border-radius: 0.4rem;
+  padding: 0.5rem 0.7rem;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  min-width: 0;
+}
+.rcf-readiness-delta-counts__tile--empty { opacity: 0.6; }
+.rcf-readiness-delta-counts__n {
+  font-size: 1.4rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+}
+.rcf-readiness-delta-counts__label {
+  font-size: 0.82rem;
+  color: var(--sv-muted);
+  margin-top: 0.15rem;
+}
+.rcf-readiness-delta-counts__details {
+  margin-top: 0.3rem;
+  border: 1px solid var(--sv-border);
+  border-radius: 0.4rem;
+  padding: 0.4rem 0.7rem;
+  background: var(--sv-surface);
+}
+.rcf-readiness-delta-counts__details > summary {
+  cursor: pointer;
+  color: var(--sv-link);
+}
+
+.rcf-readiness-freeze-state__gates {
+  margin: 0.3rem 0 0;
+  padding-left: 1.1rem;
+}
+.rcf-readiness-freeze-state__gates li { margin: 0.15rem 0; }
+
+@media (max-width: 720px) {
+  .rcf-readiness-delta-counts__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .rcf-readiness-grid__table thead { display: none; }
+  .rcf-readiness-grid__table tr {
+    display: block;
+    border-bottom: 1px solid var(--sv-border);
+    padding: 0.3rem 0;
+  }
+  .rcf-readiness-grid__table th[scope="row"],
+  .rcf-readiness-grid__table td {
+    display: block;
+    padding: 0.15rem 0.7rem;
+  }
+  .rcf-readiness-grid__table td::before {
+    content: attr(data-rcf-cell-scope) ": ";
+    color: var(--sv-muted);
+    margin-right: 0.3rem;
+    text-transform: capitalize;
+  }
+  /* Keep the SubTabStrip inside the readiness panel at narrow widths
+   * (AC-18005-7): a horizontal scroll on the strip only, not on the
+   * page. The .rcf-subtabs block already wraps buttons; we add
+   * overflow-x: auto so a long strip scrolls on its own. */
+  #tab-readiness .rcf-subtabs {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+}
+
+[data-embed="1"] .rcf-readiness-delta-counts__tiles {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+[data-embed="1"] #tab-readiness .rcf-subtabs {
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+[data-embed="1"] .rcf-readiness-grid__table thead { display: none; }
+[data-embed="1"] .rcf-readiness-grid__table tr {
+  display: block;
+  border-bottom: 1px solid var(--sv-border);
+  padding: 0.3rem 0;
+}
+[data-embed="1"] .rcf-readiness-grid__table th[scope="row"],
+[data-embed="1"] .rcf-readiness-grid__table td {
+  display: block;
+  padding: 0.15rem 0.7rem;
+}
+[data-embed="1"] .rcf-readiness-grid__table td::before {
+  content: attr(data-rcf-cell-scope) ": ";
+  color: var(--sv-muted);
+  margin-right: 0.3rem;
+  text-transform: capitalize;
+}
+
+/* FBS-208 (AC-209-1..7): the Readiness Trace matrix. Cells use
+ * existing --sv-* tokens only; no new palette entry is introduced. */
+.rcf-trace-matrix {
+  margin: 0.8rem 0;
+}
+.rcf-trace-matrix__head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.rcf-trace-matrix__head h3 {
+  margin: 0;
+}
+.rcf-trace-matrix__filter {
+  margin-bottom: 0.5rem;
+}
+.rcf-trace-matrix__filter input {
+  width: 100%;
+  max-width: 24rem;
+  padding: 0.25rem 0.4rem;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-control);
+  border-radius: 4px;
+}
+.rcf-trace-matrix__table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--sv-surface);
+}
+.rcf-trace-matrix__table th,
+.rcf-trace-matrix__table td {
+  border: 1px solid var(--sv-border);
+  padding: 0.3rem 0.5rem;
+  vertical-align: top;
+  text-align: left;
+}
+.rcf-trace-matrix__table tr[data-rcf-row-kind="us"] th[scope="row"] {
+  font-weight: 600;
+}
+.rcf-trace-matrix__table tr[data-rcf-row-kind="ac"] th[scope="row"] {
+  padding-left: 1.4rem;
+}
+.rcf-trace-matrix__table td[data-rcf-cell-resolution="resolving"] {
+  background: var(--sv-successbg);
+  color: var(--sv-success);
+}
+.rcf-trace-matrix__table td[data-rcf-cell-resolution="unresolved"] {
+  background: var(--sv-warningbg);
+  color: var(--sv-warning);
+}
+.rcf-trace-matrix__table td[data-rcf-cell-resolution="none"] {
+  color: var(--sv-muted);
+}
+.rcf-trace-matrix__cell-ids {
+  font-variant-numeric: tabular-nums;
+}
+.rcf-trace-matrix__row-title {
+  color: var(--sv-muted);
+  font-weight: normal;
+}
+.rcf-trace-matrix__stale {
+  color: var(--sv-warning);
+}
+.rcf-trace-matrix--empty {
+  padding: 0.4rem 0;
+}
+.rcf-trace-matrix__lookup {
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+  border-radius: 4px;
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+}
+.rcf-trace-action {
+  color: var(--sv-link);
+}
+.rcf-trace-action--na {
+  color: var(--sv-muted);
+  cursor: default;
+}
+
+@media (max-width: 720px) {
+  .rcf-trace-matrix__table thead { display: none; }
+  .rcf-trace-matrix__table tr {
+    display: block;
+    border-bottom: 1px solid var(--sv-border);
+    padding: 0.3rem 0;
+  }
+  .rcf-trace-matrix__table th[scope="row"],
+  .rcf-trace-matrix__table td {
+    display: block;
+    padding: 0.15rem 0.7rem;
+    border: 0;
+  }
+  .rcf-trace-matrix__table td::before {
+    content: attr(data-rcf-trace-col) ": ";
+    color: var(--sv-muted);
+    margin-right: 0.3rem;
+    text-transform: capitalize;
+  }
+}
+
+[data-embed="1"] .rcf-trace-matrix__table thead { display: none; }
+[data-embed="1"] .rcf-trace-matrix__table tr {
+  display: block;
+  border-bottom: 1px solid var(--sv-border);
+  padding: 0.3rem 0;
+}
+[data-embed="1"] .rcf-trace-matrix__table th[scope="row"],
+[data-embed="1"] .rcf-trace-matrix__table td {
+  display: block;
+  padding: 0.15rem 0.7rem;
+  border: 0;
+}
+[data-embed="1"] .rcf-trace-matrix__table td::before {
+  content: attr(data-rcf-trace-col) ": ";
+  color: var(--sv-muted);
+  margin-right: 0.3rem;
+  text-transform: capitalize;
+}