/* ═══════════════════════════════════════════════════════════════════════════
   Mocca — Backend lab (Fields / Forms tabs) — B50-07
   Loaded after sections.css so the .sec-tab-view whitelist below wins.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tab-view visibility. The generic .sec-tab-view rule lives in components-lab.css
   but its whitelist is hard-coded to data-view="services-frontend", so the backend
   page needs its own. Entities is the default (it is "the current screen we have"),
   which is why the :not([data-sec-tab]) case resolves to it. */
/* Audit A19 · B63-146/147 — Backend: Clients · Entities · Actions · Automations;
   Middleware: Fields · Forms · Variants. Unknown tabs fall back to the default. */
.page-view[data-view="services-backend"]:not([data-sec-tab]) .sec-tab-view[data-sec-tab="entities"],
.page-view[data-view="services-backend"][data-sec-tab="clients"] .sec-tab-view[data-sec-tab="clients"],
.page-view[data-view="services-backend"][data-sec-tab="entities"] .sec-tab-view[data-sec-tab="entities"],
.page-view[data-view="services-backend"][data-sec-tab="actions"] .sec-tab-view[data-sec-tab="actions"],
.page-view[data-view="services-backend"][data-sec-tab="automations"] .sec-tab-view[data-sec-tab="automations"],
.page-view[data-view="services-backend"][data-sec-tab]:not([data-sec-tab="clients"]):not([data-sec-tab="entities"]):not([data-sec-tab="actions"]):not([data-sec-tab="automations"]) .sec-tab-view[data-sec-tab="entities"],
.page-view[data-view="services-middleware"]:not([data-sec-tab]) .sec-tab-view[data-sec-tab="forms"],
.page-view[data-view="services-middleware"][data-sec-tab="fields"] .sec-tab-view[data-sec-tab="fields"],
.page-view[data-view="services-middleware"][data-sec-tab="forms"] .sec-tab-view[data-sec-tab="forms"],
.page-view[data-view="services-middleware"][data-sec-tab="variants"] .sec-tab-view[data-sec-tab="variants"],
.page-view[data-view="services-middleware"][data-sec-tab]:not([data-sec-tab="fields"]):not([data-sec-tab="forms"]):not([data-sec-tab="variants"]) .sec-tab-view[data-sec-tab="forms"]{
  display:block;animation:secIn .28s var(--mk-ease) both;
}
/* backend-flows.js (Clients · Actions · Automations) — class-only selectors */
.bf-list{ display:flex;flex-direction:column;gap:8px; }
.bf-list .wl-sumbox + .wl-sumbox{ margin-top:0; }
.bf-row{ cursor:pointer;padding:11px 12px;gap:11px; }
.bf-row:hover,.bf-jump:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.bf-row:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
.bf-row .wl-sumbox-t{ white-space:normal;overflow-wrap:anywhere;line-height:1.3; }
.bf-row .wl-sumbox-s{ display:flex;align-items:center;flex-wrap:wrap;gap:3px 5px; }
.bf-lead{ flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-text,var(--accent)); }
.bf-lead .mi{ font-size:19px; }
.bf-when-ic{ font-size:14px;color:var(--fg-3); }
.bf-kic{ font-size:17px;color:var(--fg-3);flex:0 0 auto; }
.bf-filter{ margin-bottom:6px;flex-wrap:wrap; }
.bf-seg{ align-self:flex-start;flex-wrap:wrap; }
.bf-chips{ display:flex;flex-wrap:wrap;gap:6px; }
.bf-jump{ cursor:pointer;text-align:start;width:100%; }
.bf-steps{ display:flex;flex-direction:column;gap:6px; }
.bf-step-b{ flex:1;min-width:0;margin:0; }
.bf-step-b .wl-sumbox-t{ white-space:normal;overflow-wrap:anywhere; }
.bf-stepn{ flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center;font:800 11px/1 var(--mk-font-ui);color:var(--fg-2); }
.bf-runs{ font:600 12px/1.3 var(--mk-font-ui);color:var(--fg-3); }
.bf-danger{ align-self:flex-start;color:var(--mk-danger,#C81E1E); }
.bf-danger[disabled]{ opacity:.45;cursor:not-allowed; }
.bf-cond{ min-width:0; }

.bl-wrap{ display:flex;flex-direction:column;gap:16px;padding-bottom:26px; }

/* ── The consistency ledger + production gate ───────────────────────────────
   Pablo: "an environment with inconsistencies cannot be deployed into
   production." The gate has to LOOK like a gate, so a blocked state is a red
   header, not a quiet note. */
.bl-ledger{ border:1px solid var(--border);border-radius:var(--mk-radius-lg);background:var(--bg-1);overflow:hidden; }
/* B57 (Pablo: "This warning banner should only show up when a person is in staging.
   On production these errors shouldn't happen") — the ledger IS a staging artefact:
   both the blocked header and its consistent twin exist to say whether staging may
   be PROMOTED, and production is read-only, so there is nothing there to report.
   Gated on body[data-env] like every other builder affordance, which means the env
   segmented control flips it live with no re-render. */
body:not([data-env="staging"]) .bl-ledger{ display:none !important; }
.bl-ledger.is-blocked{ border-color:color-mix(in srgb,var(--mk-danger,#c0392b) 45%,var(--border)); }
.bl-lg-hd{ display:flex;align-items:center;gap:10px;padding:12px 14px;font:600 12.5px var(--mk-font-ui);color:var(--fg-1);flex-wrap:wrap; }
.bl-ledger.is-blocked .bl-lg-hd{ background:color-mix(in srgb,var(--mk-danger,#c0392b) 8%,transparent);color:var(--mk-danger,#c0392b); }
.bl-ledger.is-ok .bl-lg-hd{ background:color-mix(in srgb,var(--mk-success,#2A8C8A) 8%,transparent); }
.bl-lg-hd > .mi{ font-size:19px;flex:0 0 auto; }
.bl-lg-hd b{ font-weight:700;flex:1 1 auto;min-width:0; }
.bl-lg-counts{ display:flex;gap:6px;flex:0 0 auto; }
/* B58 wave 3 — the two gates this ledger does not own, named so the header cannot
   claim a deploy the button will refuse. */
.bl-lg-elsewhere{ flex:0 0 auto;padding:2px 8px;border-radius:999px;font:600 10.5px/1.6 var(--mk-font-ui);
  color:var(--mk-danger,#c0392b);border:1px solid color-mix(in srgb,var(--mk-danger,#c0392b) 40%,transparent); }
.bl-lg-c{ padding:2px 8px;border-radius:999px;font:700 10.5px var(--mk-font-ui);white-space:nowrap; }
.bl-lg-c.bl-sev-error{ background:color-mix(in srgb,var(--mk-danger,#c0392b) 16%,transparent);color:var(--mk-danger,#c0392b); }
.bl-lg-c.bl-sev-warn{ background:color-mix(in srgb,var(--mk-warning,#E0A335) 20%,transparent);color:color-mix(in srgb,var(--mk-warning,#E0A335) 75%,var(--fg-1)); }
.bl-lg-c.bl-sev-info{ background:var(--bg-3);color:var(--fg-3); }
.bl-lg-toggle{ display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);cursor:pointer;
  font:600 11.5px var(--mk-font-ui);flex:0 0 auto; }
.bl-lg-toggle:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)); }
.bl-lg-toggle .mi{ font-size:16px;transition:transform var(--mk-t-fast); }
.bl-lg-toggle[aria-expanded="true"] .mi{ transform:rotate(180deg); }
.bl-lg-body{ display:flex;flex-direction:column;border-top:1px solid var(--border); }
.bl-lg-body[hidden]{ display:none; }
.bl-lg-row{ display:grid;grid-template-columns:20px minmax(90px,auto) 1fr auto;gap:10px;align-items:baseline;
  padding:9px 14px;border-bottom:1px solid var(--divider);font:500 12px/1.5 var(--mk-font-ui);color:var(--fg-2); }
.bl-lg-row:last-child{ border-bottom:0; }
.bl-lg-row > .mi{ font-size:16px; }
.bl-lg-row.bl-sev-error > .mi{ color:var(--mk-danger,#c0392b); }
.bl-lg-row.bl-sev-warn > .mi{ color:var(--mk-warning,#E0A335); }
.bl-lg-row.bl-sev-info > .mi{ color:var(--fg-3); }
.bl-lg-at{ font-weight:700;color:var(--fg-1); }
.bl-lg-msg{ text-wrap:pretty; }
.bl-lg-scope{ font:700 10px var(--mk-font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3); }

/* B59 — the "Reusable validations" bank is deleted (Pablo: "stop inventing
   things"); `.bl-vbank*` had no markup left to style. */
/* ── B50-08 · registry REACH ─────────────────────────────────────────
   How many of the tree's entity leaves render from a form rather than from their
   own duplicated field list. Sits with the gate because it answers the same
   question — is this environment coherent — one layer up. */
.bl-reach{ display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid var(--divider);
  font:500 11.5px var(--mk-font-ui);color:var(--fg-2);flex-wrap:wrap; }
.bl-reach .mi{ font-size:16px;color:var(--accent-text,var(--accent));flex:0 0 auto; }
.bl-reach b{ font-weight:800;color:var(--fg-1);font-variant-numeric:tabular-nums; }
.bl-reach-bar{ flex:1 1 90px;min-width:70px;height:5px;border-radius:999px;background:var(--bg-3);overflow:hidden; }
.bl-reach-bar i{ display:block;height:100%;border-radius:999px;background:var(--accent);
  transition:width var(--mk-t-slow,.4s) var(--mk-ease); }


/* ── Cards ──────────────────────────────────────────────────────────────── */
.bl-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px; }
.bl-grid-forms{ grid-template-columns:repeat(auto-fill,minmax(390px,1fr)); }
.bl-card{ display:flex;flex-direction:column;gap:9px;padding:13px 14px;
  border:1px solid var(--border);border-radius:var(--mk-radius-lg);background:var(--bg-1);
  transition:border-color var(--mk-t-fast),box-shadow var(--mk-t-fast); }
.bl-card:hover{ border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:var(--shadow-sm); }
.bl-card.is-open{ border-color:var(--accent);box-shadow:var(--shadow-md); }
.bl-card-top{ display:flex;align-items:center;gap:10px; }
.bl-card-ic{ width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-text,var(--accent)); }
.bl-card-ic .mi{ font-size:18px; }
.bl-card-id{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px; }
.bl-card-nm{ font:700 13.5px var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.bl-card-sub{ display:inline-flex;align-items:center;gap:4px;font:600 10.5px var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3); }
.bl-card-sub .mi{ font-size:13px;text-transform:none;letter-spacing:0; }
.bl-card-desc{ font:500 12px/1.55 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty; }
/* B51-05 (Pablo: "This row looks weird… maybe as chips or something but the
   current style is weird. And there's a weird space gap on the bottom") — the meta
   row is CHIPS: the same pill vocabulary as the behaviour badges above it, with
   the count in the card's own weight and the label quiet beside it. `padding-top`
   is gone (the card's grid gap already spaces the row) and so is the trailing gap
   — that was the collapsed `.bl-layers` block, which carried `padding-top:10px` +
   `margin-top:2px` and still occupied a row of the card's `gap` while `hidden`.
   Removing the expandable (B51-20) removed the gap. */
.bl-card-foot{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:600 11px var(--mk-font-ui);color:var(--fg-3); }
.bl-card-foot > span{ display:inline-flex;align-items:center;gap:4px; }
.bl-card-foot .mi{ font-size:14px; }
.bl-foot-chips{ gap:6px; }
.bl-mchip{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-2);color:var(--fg-3);
  font:600 10.5px var(--mk-font-ui);white-space:nowrap; }
.bl-mchip .mi{ font-size:13px;color:var(--fg-3); }
.bl-mchip b{ font-weight:800;color:var(--fg-1);font-variant-numeric:tabular-nums; }
.bl-mchip-cmp{ margin-inline-start:auto; }
/* B51-05 — Fork moved OUT of the meta row onto its own line: a button wedged among
   the counts is a large part of what made that row read "weird". */
.bl-card-acts{ display:flex;align-items:center;gap:8px; }
/* B51-20 — the card's chevron opens the side panel (it no longer rotates, because
   nothing unfolds in place any more). */
.bl-open{ width:26px;height:26px;flex:0 0 auto;border-radius:8px;border:1px solid transparent;
  background:none;cursor:pointer;display:grid;place-items:center;color:var(--fg-3); }
.bl-open:hover{ border-color:var(--border);color:var(--accent-text,var(--accent));background:var(--bg-2); }
.bl-open .mi{ font-size:18px; }
[dir="rtl"] .bl-open .mi{ transform:scaleX(-1); }
.bl-expand{ width:26px;height:26px;flex:0 0 auto;border-radius:8px;border:1px solid transparent;
  background:none;cursor:pointer;display:grid;place-items:center;color:var(--fg-3); }
.bl-expand:hover{ border-color:var(--border);color:var(--fg-1);background:var(--bg-2); }
.bl-expand .mi{ font-size:18px;transition:transform var(--mk-t-fast); }
.bl-expand[aria-expanded="true"] .mi{ transform:rotate(180deg); }
.bl-cmp{ display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;flex:0 0 auto;
  border:1px solid var(--border);background:var(--bg-2);color:var(--fg-2);font:600 10.5px var(--mk-font-ui); }
.bl-cmp .mi{ font-size:13px; }
.bl-fork{ display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;flex:0 0 auto;
  border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-text,var(--accent));
  background:var(--accent-soft);font:700 10.5px var(--mk-font-ui);max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.bl-fork .mi{ font-size:13px;flex:0 0 auto; }
.bl-forkbtn{ display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);cursor:pointer;font:600 11px var(--mk-font-ui); }
.bl-forkbtn:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent));background:var(--accent-soft); }
.bl-forkbtn .mi{ font-size:14px; }
@media (pointer:coarse){ .bl-expand,.bl-open{ width:44px;height:44px; } .bl-forkbtn,.bl-lg-toggle{ min-height:44px; } }

/* ── Behaviour badges, coloured BY LAYER ─────────────────────────────────
   The colour is the whole point: a value's origin (field default / form
   exception / entity exception) is visible without opening anything. */
.bl-chips{ display:flex;flex-wrap:wrap;gap:5px; }
.bl-badge{ display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;
  font:700 10px var(--mk-font-ui);letter-spacing:.02em;white-space:nowrap; }
.bl-badge .mi{ font-size:12px; }
.bl-o-field{ background:var(--bg-3);color:var(--fg-2); }
.bl-o-form{ background:color-mix(in srgb,#3A6EA5 16%,transparent);color:color-mix(in srgb,#3A6EA5 80%,var(--fg-1)); }
.bl-o-entity{ background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-text,var(--accent)); }
.bl-vpill{ display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  background:transparent;color:var(--fg-2);font:600 10.5px var(--mk-font-ui);white-space:nowrap; }
.bl-vpill .mi{ font-size:12px;color:var(--accent-text,var(--accent)); }
.bl-vmore{ border-style:dashed;color:var(--fg-3); }

/* ── The layered view (expanded card) ───────────────────────────────────── */
.bl-layers{ border-top:1px solid var(--divider);padding-top:10px;margin-top:2px; }
.bl-layers[hidden]{ display:none; }
/* B51-20 — inside the SIDE PANEL the layered view IS the body: no card border
   above it, no inherited card padding. */
#blPanel .bl-layers{ border-top:0;padding-top:0;margin-top:0; }
#blPanel .bl-frows{ margin-top:2px; }
#blPanel .bl-addf{ margin-top:10px; }
.bl-ly{ display:flex;flex-direction:column;gap:4px; }
.bl-ly-group{ display:flex;flex-direction:column;gap:4px;padding-inline-start:0;margin-top:6px; }
.bl-ly-row{ display:grid;grid-template-columns:18px minmax(80px,auto) 1fr;gap:8px;align-items:baseline;
  padding:6px 8px;border-radius:8px;font:500 11.5px/1.5 var(--mk-font-ui);color:var(--fg-2); }
.bl-ly-row > .mi{ font-size:15px;color:var(--fg-3); }
.bl-ly-row.bl-o-field{ background:var(--bg-3); }
.bl-ly-row.bl-o-form{ background:color-mix(in srgb,#3A6EA5 9%,transparent); }
/* An entity row is nested one step in — it layers ON the form above it. */
.bl-ly-row.bl-o-entity{ background:color-mix(in srgb,var(--accent) 8%,transparent);margin-inline-start:16px; }
.bl-ly-nm{ font-weight:700;color:var(--fg-1); }
.bl-ly-ex{ display:flex;flex-wrap:wrap;gap:4px;align-items:center; }
.bl-ly-ex i{ color:var(--fg-3);font-style:normal;font-size:11px; }
.bl-ly-empty{ padding:8px;font:500 11.5px var(--mk-font-ui);color:var(--fg-3); }
.bl-exchip{ padding:1px 6px;border-radius:5px;font:700 10px var(--mk-font-ui);white-space:nowrap; }

/* Form field rows (expanded form card) */
.bl-frows{ display:flex;flex-direction:column;gap:3px; }
.bl-frow{ display:grid;grid-template-columns:18px minmax(72px,auto) minmax(52px,auto) 1fr auto auto;gap:8px;align-items:center;
  padding:6px 8px;border-radius:8px;font:500 11.5px var(--mk-font-ui);color:var(--fg-2); }
.bl-frow:nth-of-type(odd){ background:var(--bg-2); }
.bl-frow-ic{ font-size:15px;color:var(--fg-3); }
.bl-frow-nm{ font-weight:700;color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.bl-frow-ty{ font:600 10px var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3); }
.bl-frow-badges{ display:flex;flex-wrap:wrap;gap:4px;min-width:0; }
.bl-frow-cmp{ display:inline-flex;align-items:center;gap:3px;font:600 10.5px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap; }
.bl-frow-cmp .mi{ font-size:13px; }
.bl-usedby{ display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:9px;padding:8px 10px;border-radius:9px;
  background:var(--accent-soft);color:var(--fg-2);font:500 11.5px/1.5 var(--mk-font-ui);text-wrap:pretty; }
.bl-usedby .mi{ font-size:15px;color:var(--accent-text,var(--accent)); }
.bl-usedby b{ color:var(--fg-1);font-weight:700; }

/* ═══ B51-09 · the entity → FORM relationship, stated in type ════════════
   Pablo: "the entity doesn't necessarily relate to a field, it relates to a form
   (a single form) so it should be pretty clear, I'm not a fan of the box." So the
   accent-tinted `.bl-bound` box is replaced by a typographic lead-in: the form
   name at heading weight, its collection as a code chip, the one-form rule as a
   note. No border, no fill — the section header above it is the only chrome. */
.ent-formln{ display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin:0 0 14px; }
.ent-formln-nm{ font:800 15px var(--mk-font-ui);color:var(--fg-1);letter-spacing:-.01em; }
.ent-formln-c{ font:600 10.5px var(--mk-font-mono,ui-monospace,monospace);color:var(--fg-2);
  background:var(--bg-2);padding:2px 7px;border-radius:6px; }
.ent-formln-note{ flex:1 1 100%;font:500 11px/1.5 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty; }
.ent-sech-flds .ent-sech-n{ font:700 10.5px var(--mk-font-ui);color:var(--fg-3);
  background:var(--bg-2);padding:1px 7px;border-radius:999px;font-variant-numeric:tabular-nums; }
/* B51-08 — the field's resolved validations, shown ON the field row: "conditions
   should be a part of the fields and the forms". Read-only here — edited on the
   Fields tab, where the layer that owns them lives. */
.bl-frow-vals{ display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0; }
.bl-frow-vals .bl-vpill{ padding:1px 7px;font-size:10px; }
.bl-vpill-n{ border-style:dashed;color:var(--fg-3); }

/* ── The entity layer inside the entity panel (B50-07 wave 2c) ─────────────── */
.bl-bound{ display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 8px;padding:9px 11px;
  border-radius:9px;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); }
.bl-bound > .mi{ font-size:15px;color:var(--accent-text,var(--accent)); }
.bl-bound-t{ font:600 11.5px var(--mk-font-ui);color:var(--fg-1);flex:1 1 auto; }
.bl-bound-t b{ font-weight:800; }
.bl-bound-t code{ font:600 10.5px var(--mk-font-mono,ui-monospace,monospace);color:var(--fg-2);
  background:var(--bg-1);padding:1px 5px;border-radius:5px; }
.bl-bound-sub{ flex:1 1 100%;font:500 11px/1.5 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty; }
.bl-bound-bad{ background:color-mix(in srgb,var(--mk-danger,#c0392b) 9%,transparent);
  border-color:color-mix(in srgb,var(--mk-danger,#c0392b) 35%,transparent);color:var(--mk-danger,#c0392b); }
.bl-bound-bad > .mi{ color:var(--mk-danger,#c0392b); }
/* B52-02 — the entity panel's field rows are the app's standard collection row
   now (`.cmp-ctx-row` from components-lab.css). Two things it needs here: the
   drill chevron, and the OLD six-column grid rules must not reach them — hence
   they no longer carry `.bl-frow-ent`, and `.bl-frows-ent` is retired as a
   container. Only the FORM card on the Forms tab still uses `.bl-frow`. */
.cmp-ctx-go{ margin-inline-start:auto;flex:0 0 auto;font-size:16px;color:var(--fg-3); }
.cmp-ctx-main:hover .cmp-ctx-go{ color:var(--accent-text,var(--accent)); }
.ent-coll-fields .ent-cond-rule{ font-variant-numeric:tabular-nums; }
/* `.cmp-ctx-row` is only `position:relative` in components-lab.css, so its
   `<button>` shrink-wraps. These rows carry no absolute `.cmp-el-acts` (the
   chevron lives inside the button), so they flex to full width and drop the
   42px gutter that was reserved for those actions. Scoped to this collection:
   the shared row is used by Permissions/Conditions/Context too. */
.ent-coll-fields .cmp-ctx-row{ display:flex; }
.ent-coll-fields .cmp-ctx-row > .cmp-el-main{ padding-inline-end:10px; }

/* In the panel the rows sit on the panel's own surface, so they need their own
   zebra + a hairline instead of the card's. */
.bl-frows-ent .bl-frow-ent{ border:1px solid var(--divider);background:var(--bg-1); }
.bl-frows-ent .bl-frow-ent:nth-of-type(odd){ background:var(--bg-2); }
.bl-none{ font-style:normal;font-size:11px;color:var(--fg-3); }
.ent-coll-fields .bl-exed{ padding:0; }
/* The workflow diagram sits inside the panel's collection body. */
.ent-wf-host{ margin-top:8px; }
/* ── Editing a form (B50-07 wave 2) ──────────────────────────────────────── */
.bl-frow-acts{ display:flex;align-items:center;gap:3px; }
.bl-mini{ width:24px;height:24px;border-radius:7px;border:1px solid transparent;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:2px;color:var(--fg-3);padding:0 3px;min-width:24px; }
.bl-mini:hover{ border-color:var(--border);background:var(--bg-1);color:var(--fg-1); }
.bl-mini .mi{ font-size:15px; }
.bl-mini i{ font:700 9.5px var(--mk-font-ui);font-style:normal; }
.bl-mini.has-ex{ color:var(--accent-text,var(--accent));background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent); }
.bl-mini[aria-expanded="true"]{ border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text,var(--accent)); }
.bl-mini-x:hover{ border-color:color-mix(in srgb,var(--mk-danger,#c0392b) 40%,transparent);
  color:var(--mk-danger,#c0392b);background:color-mix(in srgb,var(--mk-danger,#c0392b) 9%,transparent); }
@media (pointer:coarse){ .bl-mini{ width:40px;height:40px; } }

.bl-exed{ margin:2px 0 6px;padding:0 8px; }
.bl-exed[hidden]{ display:none; }
/* ═══ B53-05 — the exception editor IS the app's standard form ═══════════════
   Pablo: "This component is a copout … I want the same form component that we
   have across the whole prototype. I need consistency…"

   `.bl-exed-in` (an accent-tinted box), `.bl-exrows` / `.bl-exrow` (a bespoke
   six-column grid), `.bl-tri` (a bespoke pill group), `.bl-exinp*` (a bespoke
   input) and `.bl-exed-v*` (a bespoke sub-header) are all GONE. What renders now
   is `.ent-sech` + `.ent-form-lbl` + `.ent-input` + `.seg` + `.ent-form-note` —
   the same parts as every other form in the panel — and this file only supplies
   the arrangement. */
.ent-exf{ display:flex;flex-direction:column;gap:2px; }
.ent-exf .ent-sech:first-child{ margin-top:0; }
.ent-exf-fields{ display:flex;flex-direction:column;gap:11px;margin:4px 0 6px; }
.ent-exf-lbl{ display:flex;align-items:center;gap:6px;margin:0 0 5px; }
.ent-exf-lbl .mi{ font-size:14px;color:var(--fg-3); }
.ent-exf-nm{ flex:1 1 auto;min-width:0;font:700 11px var(--mk-font-ui);letter-spacing:.02em;
  color:var(--fg-1);text-transform:none; }
/* A row that carries an exception says so with the accent rail the app uses for
   "this level changed something", not with a filled background. */
.ent-exf-f.has-ex{ border-inline-start:2px solid var(--accent);padding-inline-start:9px;
  margin-inline-start:-11px; }
.ent-exf-seg{ width:100%; }
.ent-exf-inp{ display:flex;align-items:center;gap:6px; }
.ent-exf-inp .ent-input{ flex:1 1 auto;min-width:0; }
.ent-exf-undo{ width:32px;height:32px;flex:0 0 auto;border:1px solid var(--border);border-radius:9px;
  background:var(--bg-1);cursor:pointer;display:grid;place-items:center;color:var(--fg-3); }
.ent-exf-undo:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)); }
.ent-exf-undo .mi{ font-size:16px; }
/* The RESOLVED value, coloured by the layer it came from — kept from the field
   rows, which use the same chip, so edit and outcome still read together. */
.bl-exrow-res{ display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:6px;
  font:700 10px var(--mk-font-ui);white-space:nowrap;justify-self:start;flex:0 0 auto; }
.bl-exrow-res .mi{ font-size:12px; }
/* A field-layer validation is LOCKED here on purpose: detaching it in one form
   would break every other form that relies on the same rule. */
.bl-vpill.bl-vlock{ border-style:dashed;color:var(--fg-3); }
.bl-vpill.bl-vlock .mi{ color:var(--fg-3); }
.bl-vpill.bl-vadded{ border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text,var(--accent));padding-inline-end:2px; }
.bl-vx{ width:16px;height:16px;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center;
  color:inherit;opacity:.7;padding:0; }
.bl-vx:hover{ opacity:1;background:color-mix(in srgb,var(--accent) 22%,transparent); }
.bl-vx .mi{ font-size:12px; }
.bl-vadd,.bl-addf-sel{ border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--border));border-radius:999px;
  background:transparent;color:var(--accent-text,var(--accent));cursor:pointer;
  font:600 10.5px var(--mk-font-ui);padding:3px 8px;max-width:100%; }
.bl-addf{ margin-top:7px; }
.bl-addf-sel{ font-size:11px;padding:6px 11px;width:100%; }
.bl-addf-sel:disabled{ color:var(--fg-3);border-style:solid;border-color:var(--border);cursor:default; }
.bl-vadd:focus-visible,.bl-addf-sel:focus-visible{ outline:2px solid var(--accent);outline-offset:1px; }
@media (pointer:coarse){ .bl-addf-sel,.bl-vadd{ min-height:40px; } .ent-exf-seg button{ min-height:38px; } .ent-exf-undo{ width:40px;height:40px; } }

@media (max-width:600px){
  .bl-grid,.bl-grid-forms{ grid-template-columns:1fr; }
  .bl-lg-row{ grid-template-columns:18px 1fr;row-gap:2px; }
  .bl-lg-scope{ display:none; }
  .bl-frow{ grid-template-columns:18px 1fr;row-gap:3px; }
  .bl-frow-ty,.bl-frow-cmp{ grid-column:2; }
}

/* ── WAVE 3 · the persistence strip on the ledger ─────────────────────────────
   The registry is saved now, so the gate carries across sessions. A silent
   autosave is indistinguishable from the old in-memory model, hence the line —
   and the reset is two-step (data-armed) because it discards real work. */
.bl-persist{ display:flex;align-items:center;gap:9px;padding:9px 12px;margin:0 0 10px;
  border-radius:10px;background:var(--bg-2);border:1px solid var(--border);
  font:500 11.5px var(--mk-font-ui);color:var(--fg-2);flex-wrap:wrap; }
.bl-persist > .mi{ font-size:17px;color:var(--accent-text);flex:0 0 auto; }
.bl-persist-t{ flex:1 1 auto;min-width:0;text-wrap:pretty; }
.bl-persist-t b{ font-weight:700;color:var(--fg-1);white-space:nowrap; }
.bl-persist-reset{ appearance:none;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  height:28px;padding:0 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);
  font:600 11.5px var(--mk-font-ui);transition:background var(--mk-t-fast),color var(--mk-t-fast),border-color var(--mk-t-fast); }
.bl-persist-reset .mi{ font-size:15px; }
.bl-persist-reset:hover{ background:var(--bg-3);color:var(--fg-1);border-color:var(--fg-3); }
/* The armed arm must beat BOTH the base rule and :hover — the second click is
   irreversible, so it has to look dangerous even under the cursor that armed it
   (the hover rule was winning, so the confirm step rendered as an ordinary
   secondary button with different text). */
.bl-persist .bl-persist-reset.is-armed,
.bl-persist .bl-persist-reset.is-armed:hover,
.bl-persist .bl-persist-reset.is-armed:focus-visible{
  background:color-mix(in srgb,var(--mk-danger) 12%,transparent);
  border-color:color-mix(in srgb,var(--mk-danger) 45%,transparent);
  color:var(--mk-danger); }
.bl-persist .bl-persist-reset.is-armed .mi{ color:var(--mk-danger); }

/* ══ B61 — the card's facts are MARKS, not chips ══════════════════════════
   Pablo, on the same card twice: "I also don't like how these chips look on the
   card" (the behaviour badges) and "I don't like how these things look" (the
   foot's count chips). A record wearing two rows of pills reads as a chip dump.
   Every fact on a card is now a glyph plus a word on one flowing row — no fill,
   no border — and the coloured .bl-badge survives only in the PANEL, where its
   colour states which layer a value comes from (which is real information). */
.bl-cmeta{ display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;
  font:600 10.5px/1.5 var(--mk-font-ui);color:var(--fg-3); }
.bl-mark{ display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.bl-mark > .mi{ font-size:13px;color:var(--fg-3);flex:0 0 auto; }
.bl-mark b{ font-weight:800;color:var(--fg-1); }
/* B61 (Pablo: "I should be able to open a panel by clicking anywhere on the card"
   / "The panel only opens if I click here but it should open if I click anywhere in
   the form's card") — the card IS the control now. The chevron is an affordance. */
.bl-card-click{ cursor:pointer; }
.bl-card-click:hover{ border-color:var(--accent); }
.bl-card-click:hover .bl-card-go{ color:var(--accent-text,var(--accent)); }
.bl-card-click:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
.bl-card-go{ font-size:18px;color:var(--fg-3);flex:0 0 auto;margin-inline-start:auto; }
[dir="rtl"] .bl-card-go{ transform:scaleX(-1); }