@azure-id/orc 1.4.1 → 1.5.0

package/bin/webui/app.html

@@ -42,6 +42,7 @@
 <link rel="stylesheet" href="css/panels/challenge.css">
 <link rel="stylesheet" href="css/panels/docs.css">
 <link rel="stylesheet" href="css/panels/extra.css">
+<link rel="stylesheet" href="css/panels/test.css">
 <link rel="stylesheet" href="css/06-responsive.css">
 <link rel="stylesheet" href="css/04-motion.css">
 </head>
@@ -97,6 +98,13 @@
       -->
       <li><a href="#/docs"        data-panel="docs"        data-idx="d" data-i18n="nav.docs">Docs</a></li>
       <li><a href="#/challenge"   data-panel="challenge"   data-idx="c" data-i18n="nav.challenge">Challenge</a></li>
+      <!--
+        v1.5.0. Test sits directly under Challenge because it is the same kind
+        of thing one step further on: Challenge grades what you WROTE, this
+        reports what a running system actually DID. Both stop and hand back
+        rather than fixing what they measured.
+      -->
+      <li><a href="#/test"        data-panel="test"        data-idx="t" data-i18n="nav.test">Test</a></li>
       <li><a href="#/pact"        data-panel="pact"        data-idx="p" data-i18n="nav.pact">Promises</a></li>
       <li><a href="#/boundary"    data-panel="boundary"    data-idx="b" data-i18n="nav.boundary">Boundary</a></li>
       <li><a href="#/wait"        data-panel="wait"        data-idx="w" data-i18n="nav.wait">Wait</a></li>
@@ -206,6 +214,7 @@
 <script src="js/panels/extra.js"></script>
 <script src="js/panels/wait.js"></script>
 <script src="js/panels/hookui.js"></script>
+<script src="js/panels/test.js"></script>
 <script src="js/90-tour.js"></script>
 <script src="js/91-shortcuts.js"></script>
 <script src="js/99-boot.js"></script>

package/bin/webui/css/04-motion.css

@@ -74,6 +74,24 @@
 }
 button.hk-pick-row:hover { transform: translateX(3px); }
 
+/* NOTHING ARRIVES ON A REPAINT (v1.4.2). The CLI Hook Interface rebuilds its
+   whole panel when a change is STAGED — no request, no navigation, the same
+   cards with one value different — and the entrance animations above replayed
+   every time, on a 30ms stagger. With the network tab empty it read exactly
+   like the page reloading, on every keystroke.
+
+   `hk-quiet` is added by `hkPaint` from the SECOND paint onward and by the part
+   editor before every rebuild. It removes the ENTRANCES only: the transitions
+   further up are about the pointer rather than about arriving, so hover, the
+   drop marker and the staged edge are untouched. It must load after the rules
+   it switches off, which is why it is here and not in the panel's own file. */
+.hk-quiet > *,
+.hk-quiet .hk-chip,
+.hk-quiet .hk-chip-new,
+.hk-quiet .hk-pick-row {
+  animation: none;
+}
+
 /* ---------------------------------------------------------- REDUCED MOTION */
 /* Non-negotiable: every animation and transition above is off. */
 

package/bin/webui/css/06-responsive.css

@@ -76,6 +76,20 @@
      band template here would put the target under the caret. */
   .ex-slot-head { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 16px; }
   .ex-slot-when { grid-column: 1 / -1; }
+  /* v1.5.0 — /orc-test. Every grid here DECLARES its columns, so every one of
+     them collapses explicitly rather than inheriting a template it no longer
+     has the width for. The route, the case row and the OWASP row all keep the
+     SAME child count in every state (that is the `.ex-tool` lesson), so the
+     collapse is a template change and never a hidden child. */
+  .ts-route { grid-template-columns: 56px minmax(0, 1fr); }
+  .ts-route > .chip { grid-column: 2; justify-self: start; }
+  .ts-where { grid-column: 1 / -1; }
+  .ts-case { grid-template-columns: 56px minmax(0, 1fr); }
+  .ts-case > .chip { grid-column: 2; justify-self: start; }
+  .ts-case-mid { grid-column: 1 / -1; }
+  .ts-case-tail { grid-column: 1 / -1; justify-content: flex-start; }
+  .ts-owasp { grid-template-columns: 56px minmax(0, 1fr); }
+  .ts-owasp-mid { grid-column: 1 / -1; }
   .ex-band-chips { grid-column: 1 / -1; justify-content: flex-start; }
   .ex-route-controls { align-items: stretch; }
   .ex-route-controls .btn { width: 100%; }
@@ -124,12 +138,14 @@
      way. The PREVIEW never collapses: it is a monospaced grid and squeezing it
      would misreport the width the user is deciding. It scrolls instead. */
   .hk-degrade-row,
+  .hk-compare-row,
   .hk-field,
   .hk-check {
     grid-template-columns: 1fr;
     gap: 4px;
   }
-  .hk-degrade-label {
+  .hk-degrade-label,
+  .hk-compare-label {
     text-align: left;
   }
   .hk-gallery {

package/bin/webui/css/panels/hookui.css

@@ -20,7 +20,7 @@
   margin: 0;
   padding: 10px 12px;
   border-radius: 8px;
-  background: var(--bg-sunken);
+  background: var(--surface-2);
   border: 1px solid var(--line);
   /* A wide line SCROLLS inside its own box. The page body must never scroll
      sideways — and squeezing a status line to fit would misreport its width,
@@ -57,22 +57,184 @@
   margin-bottom: 10px;
 }
 
-.hk-degrade {
+/* ── the terminal window (v1.4.2) ──────────────────────────────────────── */
+/* The preview is a claim about what a terminal will print, so it is drawn as a
+   terminal. The chrome is not decoration: the title bar states the width the
+   picture was rendered at, and the ruler under it shows where that width falls.
+   Everything inside stays on the same monospaced grid - anything proportional
+   here would misrepresent every width decision the user makes. */
+.hk-term {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--surface-2);
+}
+.hk-term-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-3);
+}
+.hk-term-dots {
+  display: flex;
+  gap: 5px;
+  flex: 0 0 auto;
+}
+.hk-term-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--line);
+}
+.hk-term-title {
+  font-size: 11px;
+  color: var(--text-dim);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hk-term-tags {
+  display: flex;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+/* The colour set and the symbol set the picture was drawn with. The words are
+   the CLI's own and are printed verbatim. */
+.hk-term-tag {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+  color: var(--text-dim);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+.hk-term-screen {
+  padding: 10px 12px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.hk-term-screen::-webkit-scrollbar {
+  height: 8px;
+}
+.hk-term-screen::-webkit-scrollbar-track {
+  background: transparent;
+}
+.hk-term-screen::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 4px;
+}
+/* The line inside a window has no box of its own: the window IS the box, and a
+   second border around the same string reads as a second thing. */
+.hk-preview-flat {
+  border: none;
+  background: transparent;
+  padding: 0;
+  overflow-x: visible;
+}
+.hk-term-sm .hk-term-screen {
+  padding: 7px 10px;
+}
+.hk-term-sm .hk-preview {
+  font-size: 12px;
+}
+.hk-ruler {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre;
+  color: var(--text-dim);
+  opacity: 0.55;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 6px;
+  padding-bottom: 2px;
+}
+.hk-widths {
+  margin-top: 8px;
+}
+
+/* ── the comparison drawer ─────────────────────────────────────────────── */
+/* Eleven more terminals is a wall of them, and it pushed the board off the
+   screen. One drawer, closed by default, fetched on the first open. */
+.hk-compare {
   margin-top: 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.hk-compare-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 9px 12px;
+  border: none;
+  background: var(--surface-3);
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+}
+.hk-compare-head .tier-caret {
+  color: var(--text-dim);
+}
+.hk-compare-open .hk-compare-head .tier-caret {
+  transform: rotate(90deg);
+}
+.hk-compare-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.hk-compare-body {
+  display: none;
+  padding: 12px;
+  gap: 10px;
+}
+.hk-compare-open .hk-compare-body {
   display: grid;
-  gap: 6px;
 }
-.hk-degrade-row {
+.hk-compare-group {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-top: 4px;
+}
+.hk-compare-row {
   display: grid;
-  grid-template-columns: 90px 1fr;
+  grid-template-columns: 110px 1fr;
   gap: 10px;
   align-items: center;
+  min-width: 0;
 }
-.hk-degrade-label {
+.hk-compare-label {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
   text-align: right;
 }
+.hk-compare-row .hk-term-bar {
+  display: none;
+}
+/* A control this SHAPE cannot use. It keeps its slot and carries the reason —
+   "this shape cannot use it" and "we forgot to offer it" must never look the
+   same, and a value already set has to stay readable. */
+.hk-inert {
+  display: grid;
+  gap: 4px;
+}
+.hk-inert > :first-child {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.hk-editor-live {
+  display: grid;
+  gap: 6px;
+}
 
 /* ── cautions ──────────────────────────────────────────────────────────── */
 .hk-caution {
@@ -110,11 +272,11 @@
 .hk-line-name {
   font-size: 12px;
   font-weight: 600;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 .hk-line-count {
   font-size: 11px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 .hk-full {
   color: var(--warn);
@@ -135,7 +297,7 @@
 .hk-zone-hot {
   border-color: var(--accent);
   border-style: solid;
-  background: var(--bg-sunken);
+  background: var(--surface-2);
 }
 .hk-zone-why {
   flex-basis: 100%;
@@ -149,8 +311,8 @@
     45deg,
     transparent,
     transparent 6px,
-    var(--bg-sunken) 6px,
-    var(--bg-sunken) 12px
+    var(--surface-2) 6px,
+    var(--surface-2) 12px
   );
 }
 .hk-blocked {
@@ -158,7 +320,7 @@
   gap: 8px;
   align-items: center;
   font-size: 12px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
   padding: 8px;
 }
 
@@ -173,7 +335,7 @@
   padding: 9px 10px;
   border: 1px solid var(--line);
   border-radius: 9px;
-  background: var(--bg-raised);
+  background: var(--surface-3);
   min-width: 150px;
   max-width: 280px;
   cursor: grab;
@@ -214,7 +376,7 @@
   min-height: 24px;
 }
 .hk-grip {
-  color: var(--fg-dim);
+  color: var(--text-dim);
   font-size: 14px;
   line-height: 1;
   cursor: grab;
@@ -223,14 +385,14 @@
 .hk-chip-id {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 /* "What is this thing" is the first question anybody asks of a bar full of
    symbols, and until v1.4.1 the answer lived only in a tooltip. */
 .hk-chip-desc {
   font-size: 11px;
   line-height: 1.45;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 .hk-chip-acts {
   display: flex;
@@ -243,13 +405,13 @@
   padding: 3px 8px;
   border: 1px solid var(--line);
   border-radius: 5px;
-  background: var(--bg-sunken);
-  color: var(--fg-dim);
+  background: var(--surface-2);
+  color: var(--text-dim);
   cursor: pointer;
 }
 .hk-act:hover {
   border-color: var(--accent);
-  color: var(--fg);
+  color: var(--text);
 }
 .hk-act-remove:hover {
   border-color: var(--bad);
@@ -259,7 +421,7 @@
 .hk-add {
   border: 1px dashed var(--line);
   background: none;
-  color: var(--fg-dim);
+  color: var(--text-dim);
   border-radius: 9px;
   padding: 10px 18px;
   cursor: pointer;
@@ -268,7 +430,7 @@
 }
 .hk-add:hover:not(:disabled) {
   border-color: var(--accent);
-  color: var(--fg);
+  color: var(--text);
 }
 .hk-add:disabled {
   cursor: not-allowed;
@@ -287,10 +449,27 @@
   padding: 4px 8px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: var(--bg-sunken);
-  color: var(--fg);
+  background: var(--surface-2);
+  color: var(--text);
   max-width: 260px;
 }
+/* THE OPEN LIST IS NOT THE CLOSED BOX (v1.4.2). A native <select> popup is
+   drawn by the platform, and it inherits the control's `color` while taking its
+   background from the system - so a light `--fg` on a dark panel arrived as
+   near-white text on the platform's near-white menu, and the values could not
+   be read at all. `color-scheme` tells the platform which menu to draw, and the
+   option rule states both halves rather than leaving one of them to chance. */
+.hk-select {
+  color-scheme: light dark;
+}
+.hk-select option,
+.hk-select optgroup {
+  background: var(--surface-3);
+  color: var(--text);
+}
+.hk-select option:disabled {
+  color: var(--text-dim);
+}
 
 /* ── the part picker ───────────────────────────────────────────────────── */
 .hk-picker {
@@ -339,14 +518,14 @@
   padding: 9px 11px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: var(--bg-raised);
+  background: var(--surface-3);
   text-align: left;
   cursor: pointer;
   color: inherit;
 }
 button.hk-pick-row:hover {
   border-color: var(--accent);
-  background: var(--bg-sunken);
+  background: var(--surface-2);
 }
 .hk-pick-row-off {
   cursor: default;
@@ -362,7 +541,7 @@ button.hk-pick-row:hover {
 .hk-pick-desc {
   font-size: 12px;
   line-height: 1.5;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 
 /* ── move ──────────────────────────────────────────────────────────────── */
@@ -390,7 +569,7 @@ button.hk-pick-row:hover {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--bg-raised);
+  background: var(--surface-3);
   padding-bottom: 4px;
 }
 /* The editor is a flex COLUMN that stretches its children, which turned a small
@@ -408,7 +587,7 @@ button.hk-pick-row:hover {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--fg-dim);
+  color: var(--text-dim);
   border-bottom: 1px solid var(--line);
   padding-bottom: 3px;
 }
@@ -428,7 +607,7 @@ button.hk-pick-row:hover {
   padding: 6px 8px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: var(--bg-sunken);
+  background: var(--surface-2);
   cursor: pointer;
   text-align: left;
 }
@@ -437,12 +616,12 @@ button.hk-pick-row:hover {
 }
 .hk-sample-on {
   border-color: var(--accent);
-  background: var(--bg-raised);
+  background: var(--surface-3);
 }
 .hk-sample-id {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 10px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 
 /* A control, its name, and the sentence that says what it does. The sentence is
@@ -462,7 +641,7 @@ button.hk-pick-row:hover {
 .hk-field-name {
   font-size: 12px;
   font-weight: 600;
-  color: var(--fg);
+  color: var(--text);
 }
 .hk-picks {
   display: flex;
@@ -475,8 +654,8 @@ button.hk-pick-row:hover {
   padding: 3px 7px;
   border: 1px solid var(--line);
   border-radius: 5px;
-  background: var(--bg-sunken);
-  color: var(--fg-dim);
+  background: var(--surface-2);
+  color: var(--text-dim);
   cursor: pointer;
 }
 .hk-pick:hover {
@@ -484,8 +663,8 @@ button.hk-pick-row:hover {
 }
 .hk-pick-on {
   border-color: var(--accent);
-  color: var(--fg);
-  background: var(--bg-raised);
+  color: var(--text);
+  background: var(--surface-3);
 }
 .hk-checks {
   display: grid;
@@ -525,7 +704,7 @@ button.hk-pick-row:hover {
 .hk-prow-desc {
   font-size: 12px;
   line-height: 1.5;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 .hk-prow-why {
   flex-basis: 100%;
@@ -562,7 +741,7 @@ button.hk-pick-row:hover {
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: var(--bg-sunken);
+  background: var(--surface-2);
   cursor: pointer;
   text-align: left;
   color: inherit;
@@ -572,13 +751,13 @@ button.hk-pick-row:hover {
 }
 .hk-theme-on {
   border-color: var(--accent);
-  background: var(--bg-raised);
+  background: var(--surface-3);
 }
 .hk-theme-name {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 600;
-  color: var(--fg);
+  color: var(--text);
 }
 
 /* A number field is a NUMBER field: wide enough for three digits and its

package/bin/webui/css/panels/test.css

@@ -0,0 +1,132 @@
+/* panels/test.css — the Test panel (v1.5.0).
+
+   /orc-test: five tabs' worth of surface. Loaded by app.html in the order its
+   <link> sits in that manifest, and for CSS the load order IS the cascade
+   order — which is why 06-responsive and 04-motion come after every panel
+   sheet.
+
+   NO COLOUR TOKEN IS DEFINED HERE. Every one of them is declared once, on bare
+   :root, in 00-tokens.css.
+
+   NO MOTION IS DEFINED HERE either. The run rows reuse `.run-row` / `.run-card`
+   from panels/runs.css, so the fold and its reduced-motion behaviour are
+   already one implementation rather than two. */
+
+/* --- the header strip ---------------------------------------------------- */
+/* Above the tabs, on every one of them: what this run measured, in one line.
+   Every value is the CLI's. */
+.ts-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-4);
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  margin-bottom: var(--sp-3);
+}
+.ts-strip-item { display: grid; gap: 2px; }
+.ts-strip-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ts-strip-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
+.ts-strip-item.ts-ok .ts-strip-value { color: var(--ok); }
+.ts-strip-item.ts-warn .ts-strip-value { color: var(--warn); }
+.ts-strip-item.ts-bad .ts-strip-value { color: var(--bad); }
+
+/* --- the caution --------------------------------------------------------- */
+/* OUTSIDE the tabs, because a caution you must hunt for is a caution nobody
+   reads. It fires only on something the run actually MEASURED. */
+.ts-caution {
+  padding: var(--sp-3);
+  border: 1px solid var(--bad);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  margin-bottom: var(--sp-3);
+}
+.ts-caution-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
+
+/* --- the authorization block --------------------------------------------- */
+/* It renders ALWAYS and verbatim. A statement nobody filled in is a STATE, and
+   it is drawn as one — never as an empty row. */
+.ts-auth {
+  display: grid;
+  gap: 2px;
+  padding: var(--sp-3);
+  border-left: 3px solid var(--ok);
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  margin: var(--sp-3) 0;
+}
+.ts-auth-empty { border-left-color: var(--warn); }
+.ts-auth-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
+.ts-auth-value { font-size: 14px; }
+.ts-auth-empty .ts-auth-value { color: var(--warn); }
+
+/* The hand-back. ORC does not repair the system it is testing, and the sentence
+   that says so is not decoration. */
+.ts-handback {
+  padding: var(--sp-2) var(--sp-3);
+  border-left: 3px solid var(--warn);
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  margin: var(--sp-2) 0;
+}
+
+.ts-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
+.ts-where { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
+
+/* --- the surface --------------------------------------------------------- */
+/* A ROUTE ROW DECLARES ITS COLUMNS. Every route carries the same five children
+   in every state — method, path, two chips, and where it came from — so the
+   template is fixed and a chip can never land in a slack row. */
+.ts-route {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr) auto auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2) 0;
+  border-top: 1px solid var(--line-soft);
+}
+.ts-route:first-of-type { border-top: 0; }
+.ts-method { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent); }
+.ts-path { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
+.ts-route-min { font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 2px 0; overflow-wrap: anywhere; }
+.ts-bad { color: var(--bad); }
+
+/* --- the case matrix ----------------------------------------------------- */
+/* Same rule as the route row: FIXED columns, and the tail is a container that
+   is always present even when it holds nothing. A card whose child count
+   changes with its state must not declare its rows (`.ex-tool`'s 250px
+   ellipse), so the count here does not change. */
+.ts-case {
+  display: grid;
+  grid-template-columns: 64px auto auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--sp-2);
+  padding: var(--sp-2) 0;
+  border-top: 1px solid var(--line-soft);
+}
+.ts-case:first-of-type { border-top: 0; }
+.ts-case-id { font-family: var(--mono); font-size: 12px; font-weight: 600; }
+.ts-case-mid { display: grid; gap: 2px; min-width: 0; }
+.ts-case-target { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
+.ts-case-why { font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
+.ts-case-gap { font-size: 12px; color: var(--warn); overflow-wrap: anywhere; }
+.ts-case-ev { font-family: var(--mono); font-size: 11px; color: var(--text-faint); overflow-wrap: anywhere; }
+.ts-case-tail { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; }
+
+/* --- the closed OWASP set ------------------------------------------------ */
+/* TEN ROWS, ALWAYS. An `unchecked` row keeps its slot and carries its reason;
+   it is drawn quieter than a FOUND row and it is never drawn as absent. */
+.ts-owasp {
+  display: grid;
+  grid-template-columns: 64px auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--sp-2);
+  padding: var(--sp-2) 0;
+  border-top: 1px solid var(--line-soft);
+}
+.ts-owasp:first-of-type { border-top: 0; }
+.ts-owasp-id { font-family: var(--mono); font-size: 12px; font-weight: 600; }
+.ts-owasp-mid { display: grid; gap: 3px; min-width: 0; }
+.ts-owasp-name { font-size: 13px; }
+.ts-owasp-unchecked { font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }