page.cssjevhooks' own styles, after the shared look (jev-ui's ui.css, linked first): only what the shared sheet has no word for. Colours and type are its tokens.
A sheet has no space at its top (the shared sheet's rule), so what follows the band brings its own: the same measure a sheet leaves at its foot.
9.below-band { padding-top: 3.5rem; }
A picture of the terminal: its own dark ground, the page's ink frame, never wider than its column.
The map of hook points. A chip says what is done with an event, in the drawing's own terms: filled is built and decides, outlined is built and listens, pink is an idea, dashed is nothing.
22.chip { display: inline-block; font: 1.05rem/1 var(--pixel); padding: 0.15rem 0.45rem; border: 1px solid var(--ink); white-space: nowrap; } 23.chip.judged { background: var(--ink); color: var(--paper); } 24.chip.heard { background: var(--paper); color: var(--ink); } 25.chip.idea { background: var(--pink); color: var(--ink); } 26.chip.nothing { background: var(--paper); color: var(--ink); border-style: dashed; } 27.legend, .hooks, .ideas { list-style: none; padding: 0; margin: 0; } 28.legend { display: grid; gap: 0.4rem; margin-top: 0.8rem; } 29.legend li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; } 30.legend .chip { justify-self: start; } 31.hooks { display: grid; gap: 0; } 32.hooks > li { padding: 0.55rem 0; border-top: 1px solid var(--grey); } 33.hooks > li:first-child { border-top: 0; padding-top: 0; } 34.hook-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } 35.hook-name code { font-weight: 700; } 36.hooks p { margin-top: 0.3rem; } 37.ideas { margin-top: 0.3rem; padding-left: 1.1rem; list-style: square; display: grid; gap: 0.2rem; max-width: 44rem; }
The rules (rules.rs). A case is a <details>: it opens without script.
40.cases { display: grid; gap: 0; margin-top: 0.8rem; } 41.case { border-top: 1px solid var(--grey); padding: 0.55rem 0; min-width: 0; } 42.case:last-child { padding-bottom: 0; } 43.case > summary { cursor: pointer; } 44.case > summary .what { font-family: var(--mono); font-size: 0.85rem; } 45.case > summary .chip { margin-left: 0.35rem; } 46.case > p { margin-top: 0.4rem; } 47.case .rete { margin-top: 0.6rem; }
A network as rete-draw draws it: classes and no styles, so the look is here. A node or a line is one of four things: holds a rule that fired stands on it filled ink, heavy line spare known to hold, and nothing needed it ink outline, plain line waits on a fact not known yet thin outline fails a test on it failed dashed, faint box, text kept readable A rule that holds is pink, and one that decided a step carries its number. On a narrow screen the drawing keeps its size and scrolls sideways.
57.rete { overflow-x: auto; min-width: 0; } 58.rete svg { display: block; width: 100%; min-width: 660px; height: auto; font: 11px var(--mono); } 59.rete rect, .rete circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; } 60.rete text { fill: var(--ink); } 61.rete line, .rete path { stroke: var(--ink); stroke-width: 1; fill: none; opacity: 0.3; } 62.rete polygon { fill: var(--ink); opacity: 0.3; } 63.rete .frame rect { fill: none; stroke-dasharray: 1 3; } 64.rete .frame text { opacity: 0.7; } 65.rete line.holds, .rete path.holds, .rete .back.holds path { stroke-width: 2; opacity: 1; } 66.rete .back.holds polygon { opacity: 1; } 67.rete g.holds rect, .rete g.holds circle { fill: var(--ink); } 68.rete g.holds text { fill: var(--paper); } 69.rete g.rule.holds rect { fill: var(--pink); } 70.rete g.rule.holds text { fill: var(--ink); font-weight: 500; } 71.rete g.rule rect.nth { fill: var(--ink); } 72.rete g.rule text.nth { fill: var(--paper); } 73.rete line.spare, .rete path.spare { opacity: 0.7; } 74.rete g.spare rect, .rete g.spare circle { stroke-width: 1.5; } 75.rete line.fails, .rete path.fails, .rete .back.fails path { stroke-dasharray: 2 3; opacity: 0.2; } 76.rete .back.fails polygon { opacity: 0.2; } 77.rete g.fails rect, .rete g.fails circle { stroke-dasharray: 2 3; stroke-opacity: 0.35; } 78.rete g.fails text { opacity: 0.55; }