@thebattlearena/corner 0.9.1-beta.70 → 0.10.1-beta.78

package/ring/skills/play-by-play/SKILL.md

@@ -56,6 +56,42 @@ The milestones exist only if the sparring's referee marked them when they happen
 or bring its time through `--extra` when someone provided it.
 `/ring:play-by-play <pr>` on a bout opened from a sparring prints the same whole fight.
 
+**Once a bout opened from the sparring, the sparring folds.** The JSON's `fold` (`folded`, the
+call, its time, the evidence links, and in `media` the files the note names without a link,
+such as the video) says so: the first and second falls go into the closed stage «El rudo» of «La
+crónica», with a one-line summary (KO, date, link to the evidence), and the stages that follow
+tell the third fall, «la pelea de los técnicos» (§3). Before any bout nothing folds: «El rudo» is
+the live stage.
+
+### The preparation: «el pesaje del contrato» and «la entrevista»
+
+Every bout (from a sparring or not) carries its preparation, told before its first round
+(`weighIn` and `interview` at the top level of a bout's JSON, in each of `bouts[]` in a fight's):
+
+- **`weighIn`, «el pesaje del contrato»**: `promotion` (the deliverable PR, its branch and the
+  stack base; from a sparring also the `mainevent` → `release` PR and the sparring's draft and
+  worktree), `size` (files and lines against the base when the bout opened, `atOpen`, and `now`),
+  `diagram` (the bout's `db-diagram.html`, §2b of the referee), `contractFindings` (the
+  cornerman's findings on the contract: those outside a commit range, by severity and by state)
+  and `scale`: does the contract make weight? `madeWeight` is false until
+  `judges-card.mjs approve-contract` records the judge's yes (its time, D id and quote). Say «el
+  pesaje del contrato», never just «el pesaje»: `/ring:weigh-in` is the command that configures
+  the host's gates.
+- **`interview`, «la entrevista»**: each escalation to the judge (`escalations[]`, with its
+  `questions`: number, question, options, the referee's `recommended` and `why`, and `context`, the
+  Markdown that explains it), and under each
+  question the judge's `answers` with their time; `unanswered` lists the questions still waiting.
+  `referee` holds the decisions the referee took itself under `delegation: referee` in the same
+  window, told apart, «del réferi». The window ends at the judge's contract approval, else at the
+  wrestler's first commit (`until`; null while it lasts).
+  Every time in both carries its `local` next to it, as the events do: use that one on the page.
+
+The escalations and answers exist only if the referee logged them (`judges-card.mjs log <pr>
+escalation <file>` right after sending, `log <pr> answer [E<n>] <the judge's words>` when the judge
+answers). Without `interview.jsonl` the JSON says so in `notes`: tell the interview from what the
+judges card says, without times, as a gap. The events the preparation tells carry `stage`
+(`pesaje` or `entrevista`); do not tell them again in the rounds.
+
 Times the records do not hold (a battery run the host logs elsewhere, a screenshot the human
 sent) enter only through `--extra` (an array of `{ at, type, title, detail, ref }`, inline or as
 the path of a JSON file), and they stay marked `provided`.
@@ -69,40 +105,203 @@ the page comes from an event's `local` field.
 
 ## 3 · Render
 
-Fill `$RING/skills/play-by-play/templates/chronicle.html`. It is derived from the hand-written
-chronicle of a real bout and already follows the Artifact page contract (title, theme tokens with
-dark mode, no external scripts, only the Google Fonts stylesheet). Keep its structure:
-
-- masthead with the live status, headline with the PR number, a two-sentence dek, the byline;
-- the fight card (champion vs challenger) and the crew line;
-- the tally (duration, Copilot findings, commits, fouls) and the legend of the eight tags;
-- one section per round, each beat with its time in the margin and its source in `.ref`; in a
-  fight from a sparring, the rounds go under a header per fall (`h3.fall`), the card is the rudo
-  against the judge, and the first beat of each day says the day;
-- exactly two pull quotes in the whole chronicle;
-- the judges' card table and the sources footer.
-
-## 4 · Publish
-
-Write the page to `<bout dir>/play-by-play.html`, always that path. Publish it with the Artifact
-tool. If `state.json` already has `playByPlayUrl`, publish with `url` set to it, so the link
-never changes. After **every** publish, the first and each republish, run
-`node "$RING/scripts/judges-card.mjs" play-by-play-url <pr> <url>`: the first time it records the
-link (a second, different link is refused), and every time it stamps `playByPlay.publishedAt`.
-`mask-guard` reads that stamp: once a bout record (`decisions.md`, `rebounds.md`,
-`title-defense.md`, `judges-card.md`, `round-*.md`) changes after it, the Copilot re-request and
-`judges-card.mjs close` are blocked until the chronicle is republished and stamped again.
+Fill `$RING/skills/play-by-play/templates/chronicle.html`. It follows the Artifact page contract
+(title, theme tokens with dark mode, only the Google Fonts stylesheet; js-yaml from jsdelivr for
+the contract) and its reading column is 80% wide, full width at 620 px or less. You write markup and
+prose only: every script and the styles of what `embed` puts in the page come from `embed` (§4).
+The page is organized as «Tablero del ahora + historial»: it opens with what the judge has to do,
+not with the story, and the story is below, folded by stage. Top to bottom:
 
-Then offer, once, to put the link in the PR body; do it only with the human's yes.
+1. **The bill:** the masthead with the live status (what the fight waits on now), the headline
+   with the PR number in `em`, and next to it one line of facts (`span.meta`: duration, commits,
+   Copilot, fouls).
+2. **«Qué necesita de ti ahora»** (`section.now` with `data-ring-now`, dark in both themes). You
+   write only its frame: in `div.now-bouts` one `div.now-bout` per bout with `data-pr`,
+   `data-label` («El back», «El front») and `data-frozen` (empty, or why the fight is frozen, from
+   the JSON: «espera el SDK de #1212»), and inside it that bout's `p.now-ball`, who has the ball and
+   what comes next («El wrestler trabaja en el concepto 2; el próximo round-bell, ~18:00»), and its
+   `p.now-news`, its latest event with its `local` time: the script keeps them in the bout's card.
+   A ball or news of the whole fight goes after `div.now-bouts`. `now-panel.js` draws the rest
+   live (§4).
+3. **«La crónica»** (`section.chronicle`): its header with «Abrir todo» (`data-ring-open-all`),
+   then one `details.stage` per stage, in this order, skipping a stage the fight does not have:
+   - **El rudo** (`data-stage="rudo"`, a fight from a sparring): the first and second falls, each
+     opening with `h3.fall`, their rounds and their round table. The summary line: the call (KO),
+     its date and time from `fold.at`, the rounds, the commits, «sin equipo» when there was no
+     second fall, the links of `fold.evidence` and, as text, the files of `fold.media`.
+   - **El relevo** (`relevo`): the hand-off, the bouts opened from the KO with their branches.
+   - **El pesaje del contrato** (`pesaje`; never just «El pesaje»: `/ring:weigh-in` is another
+     thing): per bout the facts of `weighIn.promotion` and `weighIn.size`, the contract findings by
+     severity, the scale (`div.scale` with `data-ring-scale="<pr>"` and
+     `data-approved="<weighIn.scale.approvedByJudge>"`, red «No da el peso» with «N de M» from
+     `weighIn.verdicts`, green «Da el peso» only when `weighIn.scale.madeWeight`), then
+     - a backend bout: `h4.sub` «Endpoints del contrato» and the comment `ring:api-contract #<pr>`;
+     - a frontend bout: `h4.sub` «Rutas del frontend» and the comment `ring:front-routes #<pr>`
+       (and `ring:api-contract #<pr>` too when its repo carries a spec);
+     - `h4.sub` «Base de datos» and the comment `ring:db-diagram #<pr>` when the bout has a
+       diagram.
+   - **La entrevista** (`entrevista`): per escalation an `ol.qa` with
+     `data-escalation="pr<pr>-E<k>"`; per question an `li` with its `p.q` starting with the
+     question's number, its `ul` of options (`li.rec` for the recommended one, its key in `i`, its
+     text after it) and its `.answer` box: «<judge>, HH:MM: <option> — <text>» for a logged
+     answer (with its images as `img src="/_blob/<asset id>"`), «Sin respuesta del juez todavía»
+     (`.answer.pending`) otherwise. Then `div.byref` «Del réferi» with `interview.referee`.
+   - **El plan del técnico** (`plan`), with the comment `ring:tech-plan #<pr>`, when the bout has
+     a `plan-tecnico.md`.
+   - **La pelea del técnico** (`pelea`): the fight card and the crew line, the tally, the legend of
+     the eight tags, the rounds (one section each, each beat with its time in the margin and its
+     source in `.ref`; the first beat of each day says the day; the events with `stage` are not
+     told again) and the judges' card table.
+
+   Each `summary` holds `span.ico`, the stage's name in `b`, its chip and **one** line of facts
+   (`span.line`). `data-state` is `done` (green chip: KO, HECHO, DA EL PESO), `live` (red chip, EN
+   CURSO: what the fight is doing now) or `todo` (gray, POR EMPEZAR); a count chip (the plan,
+   «0 / 41») takes `class="chip count"`. Every live stage carries `open`; done and todo stages
+   stay closed. With several bouts, each stage holds every bout, each part opening with
+   `h3.bout data-pr="<pr>"` and no `id`: it repeats per stage, and an `id` must be unique (if one
+   is needed, `bout-<pr>-<stage>`). The panel's link to a bout goes to its `h3.bout` in an open
+   stage. Before any bout opened, «El rudo» is the live stage.
+4. At most two pull quotes in the whole chronicle; the sources footer.
+5. The last line of the page: the comment `ring:page-scripts`.
+
+Skip a part the JSON leaves empty. Placeholders are HTML comments exactly as written here.
+
+### The final edition: "El cierre en números"
+
+When the status is "Final" (at `close`), add the numbers of the bout before the judges' card:
+
+```bash
+node "$RING/scripts/bout-stats.mjs" <pr> --tz <the human's time zone> --html [--lang es|en] \
+  --moments <bout dir>/tools/moments.json
+```
+
+It reads git in the wrestler's worktree (`origin/<base>...HEAD`) and the bout dir, and prints the
+block: the tally (duration, commits, round-bells, lines), the weigh-in (code against tests, with
+lockfiles and config as dead weight), round by round (commits per day between the ropes), the
+fight clock (commits per hour, the small hours shaded), the CompuBox (commits by conventional
+type) and the referee's card (decisions, rebounds, findings, contracts, fouls). Without `--html`
+it prints the same numbers as JSON. Paste the block as printed: its numbers come from the records,
+never from an estimate, and the template's `cn-*` styles draw it in both themes.
+
+- **Moments** (`--moments`): five to seven `{ at, title, tag }` you pick from the play-by-play
+  JSON, each `at` copied from its event (the script refuses a moment without a valid time). They
+  become the highlight reel, on a line from the first to the last.
+- **Changelog**: write it yourself in the block's CHANGELOG slot, one `<li>` per area of what the
+  PR ships, from the PR body and the rounds' titles. Nothing that did not ship.
+- If the worktree is gone, the block keeps the referee's card and says nothing about lines or
+  commits (`notes` in the JSON says why).
+
+## 4 · Embed
 
-**A fight from a sparring has one page and one link.** Write it to
-`<sparring dir>/play-by-play.html` (the JSON's `page`), always that path, whether it is refreshed
-from the sparring or from one of its bouts. If `sparring.json` already has `playByPlayUrl`,
-publish with `url` set to it. After every publish from the sparring, run
-`node "$RING/scripts/sparring.mjs" play-by-play-url <slug> <url>`; from a bout,
-`judges-card.mjs play-by-play-url <pr> <url>` as always, which refuses any link but the fight's and
-also stamps the sparring. The sparring keeps its first link for the whole fight, through every
-bout of every repo.
+Write the page to its path (§5), then, after every rewrite and before every publish:
+
+```bash
+node "$RING/scripts/play-by-play.mjs" embed <page> <weighIn.diagram.path of each bout with one>… \
+  --contract <boutDir of each bout> … --interview <boutDir of each bout> … \
+  --routes <boutDir of each frontend bout> … --plan <boutDir of each bout with a plan> …
+```
+
+Read its output: `warnings` (a context logged without its sections, say) is something to fix, not
+to ignore. It is idempotent: each block sits between begin and end markers and is replaced. It puts:
+
+- each diagram as an iframe whose `srcdoc` is the diagram page, escaped whole (its own `</body>`
+  never reaches the page);
+- «Endpoints del contrato»: every spec file a changed spec root reaches, at the stack base and as
+  the worktree proposes it (what `contract-preview.mjs` serves), drawn in the page;
+- «Rutas del frontend»: every Next.js route the deliverable adds, changes or removes
+  (`pages/**`, `app/**/page|layout|route`), read from git;
+- each question's context (`## Contexto <n> · …`, logged with the escalation) before its `ol.qa`;
+- «El plan del técnico» from `plan-tecnico.md` and the stamps of `plan.jsonl`;
+- at the very end, never inside a `srcdoc`, the styles of all of it (`templates/blocks.css`, so a
+  page written from an older template regenerates the same) and the scripts
+  (`templates/interview-form.js`, `templates/endpoints-view.js` and, when the page has
+  `data-ring-now`, `templates/now-panel.js`). The scripts share a page bus, `window.ringPage`:
+  the interview and the boards register each question and each verdict with the function that
+  saves it, and the panel reads and calls them, so an answer given in the panel or in the stage
+  is the same doc and both repaint.
+
+### What the page does for the judge
+
+- **«Qué necesita de ti ahora» counts and resolves on top.** Four counters, live from
+  `respuestas`, `veredictos` and the frame you wrote: questions without an answer (per bout),
+  pending verdicts (endpoints and routes without a current one: none or outdated), red scales and
+  frozen fights. Per bout, a card with «pregunta N de M», the scale chip («No da el peso · 0/34»),
+  the frozen line, the next question with its options, «Ver más información», «Guardar respuesta»
+  (disabled until the judge picks, nothing preselected) and «Comentario o imagen», then the next
+  two endpoints or routes with «Se aprueba» and «Se mejora» (a required comment, images), and «Ver
+  la cola» with the rest. «Aceptar las N recomendaciones del réferi» saves nothing on the click:
+  it opens a dialog that lists every question with the recommended option it would save, each
+  one can be unchecked, and only «Guardar N respuestas» writes them. Under it «Revisar una por
+  una» and the line «cada respuesta vuelve al réferi como rebote». With nothing pending, the
+  panel reads «Nada que pedirte ahora» and shows who has the ball and the latest news in large
+  type; a bout with everything approved but no `approve-contract` says that is what is missing.
+  On a phone the counters go two by two, the cards stack and «Guardar respuesta» stays fixed at
+  the bottom of the question. A link to a folded stage (an origin of the plan, «En la crónica»)
+  opens it first.
+- **The interview is answered from the page.** Nothing comes picked, not even the recommended
+  option (it keeps its badge), and «Guardar respuesta» stays disabled until the judge picks one.
+  Each option is itself selectable and its text editable (what is saved is the text as left);
+  an «Otro» row has an open field; a comment is optional; images are dropped or attached.
+  «Ver más información» opens a modal with the question's context in Markdown (Esc or a click
+  outside closes it, the focus stays in it, it reads in dark mode and on a phone). The answer is
+  saved to `respuestas` and painted live with the time.
+- **Endpoints and routes take a verdict each.** Cards with a chip per method (or PÁGINA, API
+  ROUTE, GLOBAL for a route), the path, the summary, the badge «nueva», «cambia» or «se quita»
+  apart, the spec file when there are several; filters (todas, nuevas, cambian, se quitan, sin
+  veredicto, se aprueba, se mejora, desactualizadas); «N de M aprobados» with its bar; the schemas
+  as compact tables (field, type, null, required, values and description); a route shows its
+  params, the components, hooks and services that change, the navigation that changes, the
+  back-end calls that can be read, and «sólo sparring» when it must leave the delivery. Every
+  added or changed one has «Se aprueba» and «Se mejora» (a required comment, images), saved in
+  `veredictos` with the fingerprint of its contract (the operation with every schema it expands;
+  a route's files): when the contract changes, the verdict reads «desactualizado» and asks again.
+  «Pendientes del contrato», above the cards, lists the current «se mejora». The judge's view
+  also saves the contract's state (`pr<n>-contrato`, `pr<n>-rutas`) so the referee can tell which
+  verdicts are current.
+- **The scale** counts the endpoints and routes of the bout: green only with all of them approved
+  with their current fingerprint and the judge's `approve-contract`; before that, «N de M». In a
+  frontend bout the SDK it consumes is not counted by the scale: it is a point of the technical
+  plan («consumir el SDK publicado»), and the bout does not close with it open.
+- **The plan** shows each group with «N de M hechos» and its bar, each point with its state chip
+  (pendiente gray, espera al juez amber, en curso blue, hecho green), its inline Markdown, its
+  origin linked to the question (`E<k>-<n>`) or card (a verdict's key) it cites when it is on the
+  page, its last change, filters by state, and the tickets left out at the end.
+
+## 5 · Publish
+
+Write the page to `<bout dir>/play-by-play.html`; a fight from a sparring, to
+`<sparring dir>/play-by-play.html` (the JSON's `page`), always that path. Publish it with the
+Artifact tool. **Every publish that is the page's first, or the first after the page lacked one of
+these rules, declares the capabilities in full** (a non-empty `capabilities` replaces the stored
+set); later republishes omit `capabilities`, which carries them forward:
+
+```json
+{"db": {"rules": [{"path": "respuestas", "read": "view", "write": "admin"}, {"path": "veredictos", "read": "view", "write": "admin"}]}, "user": {}, "assets": {}}
+```
+
+Only who can edit the page (the judge) answers, gives verdicts and uploads images; everyone else
+reads. Right after that publish, check it once: `ArtifactData` `list` of `respuestas` and of
+`veredictos` (empty is fine), then one `set` with `as_level: "interact"` on a throwaway doc of
+each (`ring-level-check`): the rules must refuse it (at a lowered level a refused write reads as
+not found). If it is written, the capabilities are wrong: fix them before the judge uses the page,
+and delete the throwaway doc.
+
+If `state.json` (or, for a fight, `sparring.json`) already has `playByPlayUrl`, publish with `url`
+set to it, so the link never changes. After **every** publish run
+`node "$RING/scripts/judges-card.mjs" play-by-play-url <pr> <url>` (from the sparring,
+`node "$RING/scripts/sparring.mjs" play-by-play-url <slug> <url>`): the first time it records the
+link (a second, different link is refused), every time it stamps `playByPlay.publishedAt`, and a
+bout from a sparring shares the fight's one link through every bout of every repo. `mask-guard`
+reads that stamp: once a bout record (`decisions.md`, `rebounds.md`, `title-defense.md`,
+`judges-card.md`, `round-*.md`, `interview.jsonl`, `verdicts.jsonl`, `plan.jsonl`,
+`plan-tecnico.md`) changes after it, the Copilot re-request and `judges-card.mjs close` are blocked
+until the chronicle is republished and stamped again.
+
+**Several repos, one page.** Each repo's referee keeps its own bout dir (its interview, verdicts,
+plan, diagram); the fight's JSON lists every bout with its `boutDir`, and whichever session
+regenerates the page passes every bout dir to `embed`, so the one page joins them all.
+
+Then offer, once, to put the link in the PR body; do it only with the human's yes.
 
 ## Rules
 
@@ -122,7 +321,10 @@ bout of every repo.
 ## When it runs
 
 The referee and title-defense refresh it after each round-bell and at each bell (the Copilot
-re-request); `close` publishes the final edition, with the status "Final".
+re-request); `close` publishes the final edition, with the status "Final". During the preparation
+the referee also regenerates it (with `embed`) and republishes it after every change to the
+contract, after logging the judge's answers (`page-answers`) and after logging the verdicts
+(`page-verdicts`), so the page the judge reviews is always the current contract.
 
 In a sparring, the referee of the sparring publishes it first at `open` and refreshes it after
 each verdict, after the vestidor, when the defense opens and at the bell. Those refreshes report;

package/ring/skills/play-by-play/templates/blocks.css

@@ -0,0 +1,196 @@
+/* What play-by-play.mjs embed puts into a chronicle page (diagram, interview form, endpoints,
+   routes, verdicts, technical plan, context modal). embed injects this file with the scripts, so a
+   page written from an older template gets the rules too. It uses the template's tokens. */
+iframe.diagram{display:block;width:100%;height:min(760px,80vh);border:1px solid var(--rule);background:#fff;margin:6px 0 16px;filter:var(--diagram-filter)}
+/* La entrevista contestada desde la página (interview-form.js) */
+.ans-form{margin:10px 0 4px;padding:14px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--paper,transparent);display:grid;gap:10px}
+.ans-form .opts{display:flex;flex-wrap:wrap;gap:8px}
+.ans-form label.opt{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--rule);border-radius:99px;cursor:pointer;font-size:15px}
+.ans-form label.opt:has(input:checked){border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:600}
+.ans-form textarea{width:100%;box-sizing:border-box;min-height:64px;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:transparent;color:inherit;resize:vertical}
+.ans-form .drop{border:2px dashed var(--rule);border-radius:6px;padding:12px;text-align:center;font-size:14px;color:var(--muted);cursor:pointer}
+.ans-form .drop.over{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
+.ans-form .thumbs{display:flex;flex-wrap:wrap;gap:8px}
+.ans-form .thumbs img{height:72px;border-radius:4px;border:1px solid var(--rule)}
+.ans-form .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.ans-form button.save{font:inherit;font-weight:700;padding:7px 16px;border-radius:6px;border:0;background:var(--blue);color:#fff;cursor:pointer}
+.ans-form button.save:disabled{opacity:.5;cursor:default}
+.ans-form .status{font-size:13px;color:var(--muted)}
+.answer.done{background:var(--blue-soft);color:var(--ink,inherit);border-left-color:var(--blue)}
+.answer.done img{height:64px;border-radius:4px;margin:6px 6px 0 0;vertical-align:top}
+ol.qa ul li.selectable{cursor:pointer;padding-left:58px;border-radius:4px}
+ol.qa ul li.selectable:hover{background:var(--blue-soft)}
+ol.qa ul li.selectable input.pick{position:absolute;left:0;top:9px;margin:0;accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
+ol.qa ul li.selectable > i{left:26px}
+ol.qa ul li.selectable:has(input.pick:checked){background:var(--blue-soft);outline:1px solid var(--blue)}
+ol.qa .otext{outline:none;border-bottom:1px dashed transparent}
+ol.qa .otext:focus,ol.qa li.selectable:hover .otext{border-bottom-color:var(--muted)}
+ol.qa li.other input.otro-text{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:4px 8px;border:1px solid var(--rule);border-radius:4px;background:transparent;color:inherit}
+/* Endpoints del contrato (endpoints-view.js) */
+.endpoints{margin:6px 0 16px}
+.endpoints-wait,.endpoints .muted{font-family:var(--f-label);font-size:15px;color:var(--muted)}
+.spec-root h4{font-family:var(--f-label);font-size:15px;letter-spacing:.02em;margin:14px 0 8px;font-weight:600}
+details.op{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--rule);margin:0 0 6px}
+details.op.added{border-left-color:var(--green)} details.op.changed{border-left-color:var(--gold)} details.op.removed{border-left-color:var(--red)}
+details.op>summary{cursor:pointer;padding:8px 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--f-label);font-size:15.5px}
+details.op>summary code{overflow-wrap:anywhere}
+details.op>summary .sum{color:var(--muted);flex:1 1 20ch}
+details.op>summary{list-style:none} details.op>summary::-webkit-details-marker{display:none}
+details.op>summary .path{font-family:var(--f-mono);font-size:13.5px;background:none;padding:0}
+details.op .badge{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border-radius:99px;white-space:nowrap}
+details.op .badge.added{background:var(--green-soft);color:var(--green)} details.op .badge.changed{background:var(--gold-soft);color:var(--gold)} details.op .badge.removed{background:var(--red-soft);color:var(--red)}
+.m.route-page{background:var(--navy-soft);color:var(--navy)} .m.route-api{background:var(--blue-soft);color:var(--blue)} .m.route-global{background:var(--ink);color:var(--canvas)}
+.op-body p.desc.warn{color:var(--red);font-weight:600}
+.nav-changes{margin:0 0 12px;padding:10px 14px;background:var(--paper);border:1px solid var(--rule);font-size:15px}
+.nav-changes h4{font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
+.nav-changes ul{margin:0;padding-left:18px}
+/* El plan del técnico */
+.tech-plan .plan-group{margin:0 0 14px}
+.tech-plan .ep-progress b{font-family:var(--f-label);font-weight:700;font-size:16px;color:var(--ink)}
+ul.plan-items{list-style:none;margin:0;padding:0}
+li.plan-item{background:var(--paper);border:1px solid var(--rule);padding:8px 12px;margin:0 0 5px;font-size:15.5px;line-height:1.5}
+li.plan-item .st{font-family:var(--f-label);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border-radius:99px;margin-right:8px;white-space:nowrap}
+.st-pendiente{background:var(--grey-soft);color:var(--muted)} .st-espera-al-juez{background:var(--gold-soft);color:var(--gold)} .st-en-curso{background:var(--blue-soft);color:var(--blue)} .st-hecho{background:var(--green-soft);color:var(--green)}
+li.plan-item .origins,li.plan-item .since{font-family:var(--f-label);font-size:14px;color:var(--muted)}
+.plan-tickets{margin:10px 0 0;font-size:15px;color:var(--muted)}
+.plan-tickets h4{font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px}
+details.op .spec-tag{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:0 5px}
+details.op .vdot{width:10px;height:10px;border-radius:50%;background:var(--rule);flex:none}
+details.op[data-verdict="approved"] .vdot{background:var(--green)} details.op[data-verdict="improve"] .vdot{background:var(--red)} details.op[data-verdict="stale"] .vdot{background:var(--gold)}
+details.op[open]{box-shadow:0 2px 10px rgb(0 0 0 / .06)}
+.ep-progress{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:4px 0 10px;font-family:var(--f-label);font-size:15px;color:var(--muted)}
+.ep-progress b{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--ink)}
+.ep-progress .bar{flex:1 0 100%;height:8px;background:var(--grey-soft);border-radius:99px;overflow:hidden}
+.ep-progress .bar i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}
+.ep-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
+.ep-filters button{font-family:var(--f-label);font-size:14px;font-weight:600;padding:4px 12px;border-radius:99px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
+.ep-filters button[aria-pressed="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
+.ep-pending{margin:0 0 12px}
+.ep-pending:empty{display:none}
+.ep-pending h4{font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 6px}
+.ep-pending ul{margin:0;padding:10px 14px 10px 30px;background:var(--red-soft);border-left:4px solid var(--red);font-size:15px}
+.ep-pending li{margin:4px 0}
+.ep-pending img,.verdict img{height:56px;border-radius:4px;margin:4px 6px 0 0;vertical-align:top}
+.verdict{border-top:1px solid var(--rule);padding:10px 14px 12px;display:grid;gap:8px}
+.verdict-state{margin:0;font-family:var(--f-label);font-size:15px;color:var(--muted)}
+.verdict .v{font-weight:700;padding:1px 8px;border-radius:3px;margin-right:4px}
+.v.approved{background:var(--green-soft);color:var(--green)} .v.improve{background:var(--red-soft);color:var(--red)} .v.stale{background:var(--gold-soft);color:var(--gold)} .v.none{background:var(--grey-soft);color:var(--muted)}
+.verdict-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.verdict-buttons button{font:inherit;font-family:var(--f-label);font-weight:700;font-size:15px;padding:6px 14px;border-radius:6px;cursor:pointer;border:2px solid currentColor;background:var(--paper)}
+.verdict-buttons .approve{color:var(--green)} .verdict-buttons .improve-btn{color:var(--red)}
+.verdict-buttons .status{font-size:13px;color:var(--muted)}
+.schema-tbl table{min-width:520px;font-size:14px}
+.schema-tbl td,.schema-tbl th{padding:5px 10px}
+.schema-tbl td.req{color:var(--red);font-weight:700}
+.op-body .tbl{margin:4px 0 8px}
+/* «Ver más información»: the question's context in a modal */
+ol.qa .q button.more{font-family:var(--f-label);font-size:14px;font-weight:700;color:var(--blue);background:none;border:0;border-bottom:1px dashed currentColor;padding:0;cursor:pointer;margin-left:4px}
+dialog.ctx-dialog{width:min(760px,calc(100vw - 32px));max-height:min(80vh,900px);padding:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);overflow:auto}
+dialog.ctx-dialog::backdrop{background:rgb(0 0 0 / .55)}
+.ctx-head{position:sticky;top:0;display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--paper);border-bottom:1px solid var(--rule)}
+.ctx-head h3{flex:1;margin:0;font-family:var(--f-display);font-weight:400;font-size:22px;text-transform:uppercase;line-height:1.1}
+.ctx-close{font:inherit;font-size:24px;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;padding:0 4px}
+.ctx-body{padding:6px 18px 18px;font-size:16px;line-height:1.6}
+.ctx-body pre{background:var(--grey-soft);padding:10px 12px;overflow-x:auto;font-size:13px}
+.ctx-body table{min-width:0}
+.ctx-body h3,.ctx-body h4,.ctx-body h5,.ctx-body h6{font-family:var(--f-label);letter-spacing:.04em;margin:16px 0 4px}
+.m{font-family:var(--f-mono);font-size:12px;padding:1px 6px;border-radius:3px;background:var(--grey-soft)}
+.m.get{background:var(--blue-soft);color:var(--blue)} .m.post{background:var(--green-soft);color:var(--green)} .m.patch,.m.put{background:var(--gold-soft);color:var(--gold)} .m.delete{background:var(--red-soft);color:var(--red)}
+.op-body{padding:4px 14px 12px;border-top:1px solid var(--rule);font-size:15px;line-height:1.5}
+.op-body h5{font-family:var(--f-label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
+.op-body h5.err{color:var(--red)}
+ul.fields{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--rule)}
+ul.fields li{margin:3px 0}
+ul.fields .name{font-weight:700} ul.fields .type,ul.fields .enum{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
+ul.fields .req{font-family:var(--f-label);font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase}
+.op-body p.desc,ul.fields p.desc{margin:2px 0;color:var(--muted);font-size:14px}
+/* «Qué necesita de ti ahora» (now-panel.js): the judge's queue on top, dark in both themes */
+section.now{--now-bg:#16151c;--now-ink:#f3f2ec;--now-muted:#a4a3b1;--now-tile:#22212b;margin:26px 0 8px;padding:28px 32px 26px;background:var(--now-bg);color:var(--now-ink);display:grid;gap:18px}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) section.now{--now-bg:#0a0a0f;--now-tile:#1c1b25;border:1px solid var(--rule)}}
+:root[data-theme="dark"] section.now{--now-bg:#0a0a0f;--now-tile:#1c1b25;border:1px solid var(--rule)}
+.now-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px}
+.now-kicker{font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#e8b62f}
+.now-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1;text-transform:uppercase;margin:6px 0 0}
+.now-wait{display:grid;text-align:right;font-family:var(--f-label);font-size:15px;color:var(--now-muted)}
+.now-wait em{font-style:normal;color:#e8b62f}
+.now-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
+.now-count{background:var(--now-tile);border-left:4px solid var(--now-muted);padding:14px 16px;display:grid;gap:2px;min-width:0}
+.now-count b{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1}
+.now-count span{font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
+.now-count small{font-family:var(--f-label);font-size:14px;color:var(--now-muted);overflow-wrap:anywhere}
+.now-count.red{border-left-color:#ff5a6e} .now-count.gold{border-left-color:#e8b62f} .now-count.grey{border-left-color:#a4a3b1} .now-count.zero{border-left-color:#5fd08e}
+.now-count.zero b{color:var(--now-muted)}
+.now-bouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
+.now-bout{background:var(--paper);color:var(--ink);padding:16px 18px;display:grid;gap:10px;align-content:start;min-width:0}
+.now-bout-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
+.now-bout-head h3{font-family:var(--f-display);font-weight:400;font-size:24px;text-transform:uppercase;margin:0}
+.now-bout-head h3 a{color:inherit;text-decoration:none}
+.now-of{font-family:var(--f-label);font-size:14px;color:var(--muted)}
+.now-scale{margin-left:auto;font-family:var(--f-label);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:3px;white-space:nowrap}
+.now-scale.red{background:var(--red-soft);color:var(--red)} .now-scale.green{background:var(--green-soft);color:var(--green)}
+.now-frozen{margin:0;font-family:var(--f-label);font-size:14.5px;padding:4px 10px;background:var(--grey-soft);border-left:3px solid var(--muted)}
+.now-none{margin:0;font-family:var(--f-label);font-size:15.5px;color:var(--muted)}
+.now-q{border:2px solid var(--red);padding:12px 14px;display:grid;gap:8px}
+.now-q-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
+.now-q-head b{flex:1 1 24ch;font-weight:600;font-size:16.5px;line-height:1.4}
+.now-q-head time{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
+.now-q-head button.more{font-family:var(--f-label);font-size:14px;font-weight:700;color:var(--blue);background:none;border:0;border-bottom:1px dashed currentColor;padding:0;cursor:pointer}
+.now-opts{display:grid;gap:4px}
+.now-opt{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:start;gap:8px;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:15.5px;line-height:1.45}
+.now-opt:hover,.now-opt:has(input:checked){background:var(--blue-soft)}
+.now-opt input{margin:3px 0 0;accent-color:var(--blue);width:16px;height:16px}
+.now-opt i{font-family:var(--f-mono);font-style:normal;font-weight:700;color:var(--blue)}
+.now-opt em{font-family:var(--f-label);font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);padding:1px 6px;border-radius:3px;white-space:nowrap}
+.now-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
+.now-bout button.save,.now-confirm button.save{font:inherit;font-family:var(--f-label);font-weight:700;font-size:15px;padding:6px 14px;border-radius:4px;border:0;background:var(--blue);color:#fff;cursor:pointer}
+.now-bout button.save:disabled,.now-confirm button.save:disabled{opacity:.45;cursor:default}
+.now-bout button.ghost,.now-confirm button.ghost{font:inherit;font-family:var(--f-label);font-weight:600;font-size:15px;padding:5px 12px;border-radius:4px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
+.now-bout a.jump{font-family:var(--f-label);font-size:14px}
+.now-bout .status,.now-confirm .status{font-family:var(--f-label);font-size:13.5px;color:var(--muted)}
+.now-extra{display:grid;gap:8px}
+.now-extra[hidden]{display:none}
+.now-extra textarea{width:100%;min-height:60px;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--rule);border-radius:4px;background:transparent;color:inherit;resize:vertical}
+.now-extra .drop{border:2px dashed var(--rule);border-radius:4px;padding:10px;text-align:center;font-family:var(--f-label);font-size:14px;color:var(--muted);cursor:pointer}
+.now-extra .drop.over{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
+.now-extra .thumbs{display:flex;flex-wrap:wrap;gap:6px} .now-extra .thumbs img{height:56px;border-radius:3px}
+.now-sub{font-family:var(--f-label);font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
+.now-ep{border:1px solid var(--rule);padding:7px 10px;display:grid;gap:6px}
+.now-ep-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
+.now-ep-line a.path{font-family:var(--f-mono);font-size:13.5px;color:var(--ink);text-decoration:none;flex:1 1 18ch;min-width:0;overflow-wrap:break-word;word-break:break-word}
+.now-ep .was{display:none;font-family:var(--f-label);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);padding:0 6px;border-radius:3px}
+.now-ep.stale .was{display:inline}
+.now-ep-buttons{display:flex;gap:6px;margin-left:auto}
+.now-ep-buttons button{font:inherit;font-family:var(--f-label);font-weight:700;font-size:14px;padding:3px 10px;border-radius:4px;border:1px solid var(--rule);background:var(--paper);cursor:pointer}
+.now-ep-buttons .approve{color:var(--green)} .now-ep-buttons .improve-btn{color:var(--gold)}
+.now-ep .status:empty{display:none}
+button.now-queue{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;text-align:left;font:inherit;font-family:var(--f-label);font-size:15.5px;padding:9px 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
+button.now-queue b{font-family:var(--f-body);font-weight:600}
+button.now-queue .muted{color:var(--muted);font-size:14px}
+button.now-queue .go{margin-left:auto;color:var(--blue);font-weight:700}
+.now-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--f-label);font-size:15px;color:var(--now-muted)}
+.now-actions[hidden]{display:none}
+.now-actions button{font:inherit;font-family:var(--f-label);font-weight:700;font-size:16px;padding:7px 16px;border-radius:3px;cursor:pointer}
+.now-accept{background:#c99a14;color:#16151c;border:0} .now-one{background:transparent;color:var(--now-ink);border:1px solid var(--now-muted)}
+.now-status{display:grid;gap:4px;font-family:var(--f-label);font-size:15.5px;color:var(--now-muted)}
+.now-status p{margin:0}
+.now-status .now-ball b,.now-status .now-news b{color:var(--now-ink)}
+section.now.idle .now-status{font-family:var(--f-body);font-size:19px;line-height:1.5;color:var(--now-ink)}
+section.now.idle .now-status .now-news{font-size:16px;color:var(--now-muted)}
+.now-confirm-list{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:6px}
+.now-confirm-list label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--rule);cursor:pointer;font-size:15px;line-height:1.45}
+.now-confirm-list input{margin-top:4px;width:16px;height:16px;accent-color:var(--blue)}
+@media (max-width:900px){.now-counters{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (max-width:620px){
+  section.now{padding:20px 16px;margin-inline:-16px}
+  .now-wait{text-align:left}
+  .now-count b{font-size:34px}
+  .now-q .q-actions{position:sticky;bottom:0;z-index:2;background:var(--paper);padding:8px 0;margin:0 0 -4px;border-top:1px solid var(--rule)}
+  .now-ep-buttons{margin-left:0;flex-basis:100%}
+  .now-ep-line a.path{flex-basis:calc(100% - 80px)}
+  .now-opt{grid-template-columns:auto auto minmax(0,1fr)}
+  .now-opt em{grid-column:3;justify-self:start}
+}
+.now-bout-status{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--rule);font-family:var(--f-label);font-size:14.5px;color:var(--muted)}
+.now-bout-status p{margin:0} .now-bout-status b{color:var(--ink)}
+section.now.idle .now-bout-status{font-family:var(--f-body);font-size:16.5px;color:var(--ink)}
+.now-status:empty{display:none}