/* Designer library styles. Class names are prefixed so nothing collides with a
   host application's stylesheet in either direction.

   The block below is a plain :root definition, not a fallback. Nothing here
   checks whether the host already set these — equal specificity means the
   stylesheet loaded LAST wins. A host that wants its own palette must therefore
   redefine them in a stylesheet linked after designer.css, or with a stronger
   selector. Getting that backwards is silent: the wrong colours simply appear.

   These values are the Bluefin design system, so a host that shares that palette
   needs to do nothing.

   --wo-font-mono deliberately falls through to Consolas. Space Mono is only
   loaded by the standalone development host, which pulls it from Google Fonts.
   WorxOrder_Enterprise bans external font hosts — a locked-down customer network
   once left the glyphs as empty boxes mid-demo — so inside that application the
   field keys and formula builder render in Consolas by design, not by accident. */
:root {
    --wo-blue:   #0E5FD8;
    --wo-ink:    #0A1626;
    --wo-text:   #33465c;
    --wo-border: #e1e8ed;
    --wo-subtle: #f2f5f7;
    --wo-canvas: #FAFBFC;
    --wo-module: #F59E0B;
    --wo-font-mono: 'Space Mono', Consolas, monospace;
}

.wo-page       { padding: 22px 26px; max-width: 1500px; }
.wo-page-head  { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.wo-page h1    { margin: 0 0 4px; font-size: 21px; }
.wo-subtle     { color: var(--wo-text); font-size: 13px; margin: 0; max-width: 62ch; }
.wo-empty      { padding: 40px; text-align: center; color: var(--wo-text); background: #fff; border: 1px solid var(--wo-border); border-radius: 6px; }
.wo-grid       { background: #fff; border: 1px solid var(--wo-border); border-radius: 6px; }
.wo-field      { margin-bottom: 14px; }
.wo-field label{ display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.wo-field small{ display: block; color: var(--wo-text); font-size: 11px; margin-top: 3px; }

.wo-alert       { padding: 10px 13px; border-radius: 5px; font-size: 13px; margin-bottom: 14px; }
.wo-alert-error { background: #FDECEA; color: #A12A1C; border: 1px solid #F5C6C0; white-space: pre-line; }
.wo-alert-ok    { background: #E8F5E9; color: #1B5E20; border: 1px solid #C3E3C5; }
.wo-alert-warn  { background: #FFF8E1; color: #8A6100; border: 1px solid #F2DFA8; }

.wo-badge        { display: inline-block; border-radius: 9px; padding: 1px 9px; font-size: 11px; font-weight: 600; }
.wo-badge-live   { background: #E8F5E9; color: #1B5E20; }
.wo-badge-draft  { background: #EEF1F5; color: #46586E; }
.wo-badge-review { background: #FFF3E0; color: #9A5B00; }
.wo-badge-cert   { background: #EDE7F6; color: #4A2E93; }
.wo-badge-none   { background: #F3F4F6; color: #7A828C; }

/* Designer shell */
/* Locked to the viewport, not to the parent.

   This used to be height:100%, which only resolves when the host gives its content area a
   definite height. The standalone harness does; WorxOrder_Enterprise does not, so there the
   shell grew to fit its content and every child that expected to scroll — the structure tree,
   the item details, the Try It filler — simply got taller instead. Selecting a field near the
   bottom of a long form then put its details off-screen above.

   --wo-chrome is whatever fixed header the host puts above this page. Both hosts use 56px, so
   the default is right for them; it is read at the point of use rather than declared in :root
   above, because that block is loaded last and would override the host rather than defer to it. */
.dz-shell {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--wo-chrome, 56px));
    box-sizing: border-box;
    padding: 16px 22px; gap: 12px;
}
.dz-head  { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dz-head-main { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dz-head h1   { margin: 0; font-size: 19px; }
.dz-back  { color: var(--wo-text); text-decoration: none; font-size: 13px; }
.dz-back:hover { color: var(--wo-blue); }
.dz-key   { color: #808893; font-size: 12px; font-family: var(--wo-font-mono); }
.dz-actions { display: flex; gap: 8px; }

.dz-readonly-note { background: var(--wo-subtle); border-left: 3px solid var(--wo-blue); padding: 9px 13px; font-size: 13px; color: #46586E; border-radius: 3px; }

.dz-body      { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; }
/* min-height:0 is what actually lets the tree scroll. A flex item's default min-height is
   auto — it refuses to shrink below its content — so without this the canvas grows to fit the
   whole tree and .ft-root's overflow:auto never has anything to clip. */
.dz-canvas    { flex: 1 1 auto; background: #fff; border: 1px solid var(--wo-border); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dz-canvas-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--wo-border); font-weight: 600; font-size: 13px; }
.dz-stats     { font-weight: 400; color: #808893; font-size: 12px; }
.dz-inspector { flex: 0 0 340px; background: #fff; border: 1px solid var(--wo-border); border-radius: 6px; overflow: auto; }
.dz-inspector-empty { padding: 28px 18px; text-align: center; color: #808893; font-size: 13px; }

.dz-issues      { background: #fff; border: 1px solid var(--wo-border); border-radius: 6px; padding: 10px 14px; max-height: 168px; overflow: auto; }
.dz-issues-head { font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.dz-issue       { display: flex; gap: 9px; font-size: 12px; padding: 3px 0; align-items: baseline; }
.dz-issue-sev   { font-weight: 600; font-size: 10px; text-transform: uppercase; min-width: 52px; }
.dz-issue.err  .dz-issue-sev { color: #C42B1C; }
.dz-issue.warn .dz-issue-sev { color: #9A5B00; }

/* Structure tree — sections and repeats are real containers, drawn as nested
   boxes. This is the visual difference from the legacy flat field list. */
.ft-root  { padding: 10px 12px; overflow: auto; flex: 1 1 auto; }
.ft-empty { padding: 36px; text-align: center; color: #808893; }

.ft-node     { border-radius: 5px; margin: 2px 0; cursor: pointer; border: 1px solid transparent; }
.ft-row      { display: flex; align-items: baseline; gap: 9px; padding: 5px 9px; }
.ft-children { margin-left: 20px; padding-left: 11px; border-left: 2px solid #E7ECF2; }

.ft-node:hover  { background: #F7F9FC; }
.ft-selected    { border-color: var(--wo-blue) !important; background: #EEF4FE !important; }

.ft-glyph { font-size: 11px; color: #808893; min-width: 24px; font-family: var(--wo-font-mono); }
.ft-label { font-size: 13px; flex: 0 1 auto; }
/* .ft-key is gone: the key moved off the structure row and onto the inspector.
   It claimed the right-hand side with margin-left:auto, so on a long question
   the label shrank to make room for a generated key nobody reads. */

/* The key on the inspector, last and quiet. For whoever reads Form_Answers,
   not for the author - so it is a line of text rather than a field, and it
   says whether the key can still move. */
.ni-key-line  { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--wo-line, #E3E7EC); }
.ni-key-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                color: #808893; margin-right: 7px; }
.ni-key-value { font-family: var(--wo-font-mono); font-size: 12px; color: #46586E;
                background: var(--wo-subtle); border-radius: 3px; padding: 1px 6px;
                word-break: break-all; }
.ni-key-line small { display: block; margin-top: 5px; color: #808893; }

.ft-section  > .ft-row { background: var(--wo-subtle); border-radius: 4px; font-weight: 600; }
.ft-repeat   > .ft-row { background: #EAF1FC; border-radius: 4px; font-weight: 600; color: #14417F; }
.ft-static   > .ft-row { color: #707A86; font-style: italic; }
.ft-break    > .ft-row { color: #A8B0BA; }

.ft-badge        { font-size: 10px; border-radius: 8px; padding: 0 7px; font-weight: 600; }
.ft-badge-rule   { background: #E7EFFC; color: var(--wo-blue); }
.ft-badge-req    { background: #FDECEA; color: #A12A1C; }
.ft-badge-calc   { background: #EDE7F6; color: #4A2E93; }
.ft-badge-opts   { background: #EEF1F5; color: #56636F; }
.ft-badge-repeat { background: #DCE9FB; color: #14417F; }

/* Inspector */
.ni-root  { padding: 15px 16px; }
.ni-head  { border-bottom: 1px solid var(--wo-border); padding-bottom: 11px; margin-bottom: 13px; }
.ni-kind  { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #808893; font-weight: 600; }
.ni-head h2 { margin: 3px 0 5px; font-size: 15px; }
.ni-key   { font-size: 11px; color: #808893; background: #F3F5F8; padding: 1px 6px; border-radius: 3px; }

.ni-block   { margin-bottom: 17px; }
.ni-block h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #808893; margin: 0 0 7px; }
.ni-count   { background: #EEF1F5; color: #56636F; border-radius: 8px; padding: 0 6px; font-size: 10px; }

/* Collapsible sections.

   Native <details> rather than a scripted accordion: it opens without a circuit
   round-trip, it is keyboard operable and screen-reader announced for free, and
   Ctrl-F finds text inside a closed one in current browsers. */
/* Each section is a card in the brand's soft tint - the same --accent-soft the
   rest of the application uses, so a customer's colour carries through here
   without anything to configure. Hairline dividers left every section looking
   like the same flat list, and the panel is read by somebody hunting for one
   setting among eight.

   The tint is the accent mixed 90% toward white, so it stays pale whatever the
   customer's colour is and the muted heading text still reads on it. */
.ni-sec {
    background: var(--accent-soft, #EFF6FF);
    border: 1px solid rgba(15, 30, 55, .06);
    border-radius: 7px;
    padding: 9px 12px;
    margin-bottom: 8px;
}

/* Controls inside a tinted card must be white to stand out from it; several
   were painted a near-white grey that reads as an edge on a white panel and as
   nothing at all on a tinted one. */
.ni-sec .rb-row,
.ni-sec .li-summary { background: #fff; }

.ni-sec .ni-expr,
.ni-sec .rb-preview { background: #fff; }

.ni-sec > summary {
    display: flex; align-items: baseline; gap: 7px;
    cursor: pointer; list-style: none;
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: #808893; font-weight: 600;
}
.ni-sec > summary::-webkit-details-marker { display: none; }

/* The twisty, drawn rather than borrowed, so it sits on the text baseline and
   turns with the section. */
.ni-sec > summary::before {
    content: "›";
    font-size: 13px; line-height: 1; color: #A8B0BA;
    transform: rotate(0deg); transition: transform .12s;
}
.ni-sec[open] > summary::before { transform: rotate(90deg); }
.ni-sec > summary:hover { color: var(--wo-blue); }
.ni-sec > summary:hover::before { color: var(--wo-blue); }
.ni-sec > summary:focus-visible { outline: 2px solid var(--wo-blue); outline-offset: 2px; border-radius: 3px; }

/* What the section holds, said in the summary so a closed section still answers
   the question. Lower case and un-tracked, to read as a value not a heading. */
.ni-sum {
    margin-left: auto; text-transform: none; letter-spacing: 0;
    font-weight: 400; color: #A8B0BA; font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}

.ni-sec[open] > summary { margin-bottom: 9px; }
.ni-rule .ni-expr { background: #fff; border-left: 3px solid var(--wo-blue); padding: 7px 10px; border-radius: 3px; font-size: 12.5px; color: #14417F; margin: 0; }

.ni-props    { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12.5px; }
.ni-props dt { color: #808893; }
.ni-props dd { margin: 0; }

.ni-options   { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow: auto; }
.ni-options li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; border-bottom: 1px solid #F1F3F6; }
.ni-opt-key   { color: #A8B0BA; font-size: 11px; }

.ni-validation { display: flex; gap: 9px; margin-bottom: 9px; font-size: 12px; }
.ni-sev        { font-size: 10px; font-weight: 600; text-transform: uppercase; min-width: 46px; }
.ni-sev.err    { color: #C42B1C; }
.ni-sev.warn   { color: #9A5B00; }
.ni-msg        { color: var(--wo-text); font-style: italic; margin-top: 2px; }
.ni-note       { font-size: 12.5px; color: #56636F; margin: 0; }
.ni-locked     { margin-top: 16px; padding: 8px 11px; background: #F3F5F8; border-radius: 4px; font-size: 12px; color: #707A86; }

/* Structure toolbar */
.dz-toolbar    { display: flex; gap: 20px; align-items: center; padding: 7px 13px; border-bottom: 1px solid #EDF0F4; background: #FBFCFD; flex-wrap: wrap; }
.dz-tool-group { display: flex; gap: 4px; align-items: center; }
.dz-tool-label { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #98A1AC; font-weight: 600; margin-right: 3px; }

.dz-tool { border: 1px solid #DDE3EA; background: #fff; border-radius: 4px; width: 27px; height: 25px; cursor: pointer; font-size: 12px; color: #46586E; line-height: 1; }
.dz-tool:hover:not(:disabled)  { background: #EEF4FE; border-color: var(--wo-blue); color: var(--wo-blue); }
.dz-tool:disabled              { opacity: .35; cursor: default; }
.dz-tool-danger:hover:not(:disabled) { background: #FDECEA; border-color: #C42B1C; color: #C42B1C; }

.dz-dirty { color: #9A5B00; font-size: 12px; font-weight: 600; }

/* Inspector editing */
.ni-err       { color: #C42B1C !important; }
.ni-bounds    { display: flex; gap: 12px; }
.ni-bounds .wo-field { flex: 1 1 0; }

.ni-options-edit li      { align-items: center; gap: 6px; }
.ni-options-edit .ni-opt-input { flex: 1 1 auto; min-width: 0; }
.ni-add-option { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.ni-add-option > :first-child { flex: 1 1 auto; }

.ni-mini { border: 1px solid #DDE3EA; background: #fff; border-radius: 3px; width: 21px; height: 21px; cursor: pointer; font-size: 10px; color: #56636F; line-height: 1; padding: 0; flex: 0 0 auto; }
.ni-mini:hover:not(:disabled) { background: #EEF4FE; border-color: var(--wo-blue); color: var(--wo-blue); }
.ni-mini:disabled { opacity: .3; cursor: default; }
.ni-mini-danger:hover:not(:disabled) { background: #FDECEA; border-color: #C42B1C; color: #C42B1C; }

/* Drag and drop.
   Drop targets are explicit lines between nodes plus the container row itself,
   so "before / after / inside" is never a guess about pointer position. */
.ft-grip  { color: #C3C9D1; cursor: grab; font-size: 11px; user-select: none; }
.ft-node:hover > .ft-row > .ft-grip { color: #808893; }
.ft-node[draggable="true"] > .ft-row { cursor: default; }

.ft-ghost { opacity: .4; }

/* Drop targets cover the whole row. The previous 8px hairline between rows was
   a miss most of the time, and a miss did nothing and said nothing. */
.ft-hit  { position: relative; }
/* Always live. Gating these on an "is dragging" class did not work: the class
   is set on the root tree, and a drag starting inside a nested group re-renders
   only that group, so the class never arrived and nothing accepted a drop. The
   zones carry the row's click instead. */
.ft-edge { position: absolute; left: 0; right: 0; z-index: 2; cursor: pointer; }

.ft-edge-top    { top: 0;    height: 50%; }
.ft-edge-bottom { bottom: 0; height: 50%; }

/* A container keeps a band through the middle meaning "put it inside". */
.ft-hit-box .ft-edge-top,
.ft-hit-box .ft-edge-bottom { height: 34%; }

/* The insertion line, drawn on the edge being hovered. */
.ft-edge.on::after {
  content: ""; position: absolute; left: 6px; right: 0; height: 3px;
  background: var(--wo-blue); border-radius: 2px;
}
.ft-edge-top.on::after    { top: -1px; }
.ft-edge-bottom.on::after { bottom: -1px; }

/* Highlight a container that would receive the node. */
.ft-row-into { outline: 2px dashed var(--wo-blue); outline-offset: -2px; background: #EEF4FE !important; }

/* Legacy import */
.li-summary { display: flex; gap: 26px; flex-wrap: wrap; background: #fff; border: 1px solid var(--wo-border);
              border-radius: 6px; padding: 10px 16px; margin-bottom: 12px; font-size: 13px; color: #56636F; }
.li-summary strong { color: var(--wo-ink); }

.li-body   { display: flex; gap: 14px; align-items: flex-start; }
.li-grid   { flex: 1 1 auto; min-width: 0; }
.li-detail { flex: 0 0 360px; background: #fff; border: 1px solid var(--wo-border); border-radius: 6px;
             padding: 15px 16px; max-height: 640px; overflow: auto; }

.li-detail-head    { border-bottom: 1px solid var(--wo-border); padding-bottom: 10px; margin-bottom: 12px; }
.li-detail-head h2 { margin: 0 0 3px; font-size: 16px; font-family: var(--wo-font-mono); }

.li-issue      { display: flex; gap: 8px; font-size: 12px; padding: 4px 0; align-items: baseline;
                 border-bottom: 1px solid #F4F6F9; }
.li-issue-code { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
                 min-width: 118px; flex: 0 0 auto; }
.li-issue.err  .li-issue-code { color: #C42B1C; }
.li-issue.warn .li-issue-code { color: #9A5B00; }

.li-actions { margin: 16px 0 6px; }
.li-foot    { margin-top: 12px; }
.wo-head-actions { display: flex; gap: 8px; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════════
   Try it — the interactive filler.

   Appended to designer.css rather than shipped as a fourth stylesheet so the
   back-office app needs no extra <link> when it embeds the module.

   The form is drawn at phone width by default. These certificates are filled
   in one-handed in a plant room; a layout that only reads at 1280px is not
   evidence the form works.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Structure / Try it switch in the page header ───────────────────────── */
.dz-mode {
  display: inline-flex;
  flex: 0 0 auto;              /* or the DevExpress buttons squash it to a sliver */
  border: 1px solid #C6D2DC;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.dz-mode-btn {
  border: 0; background: transparent; color: #33465C; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 500;
  padding: .42rem .9rem; white-space: nowrap;
}
.dz-mode-btn + .dz-mode-btn { border-left: 1px solid #E1E8ED; }
.dz-mode-btn:hover { background: #F2F5F7; }
.dz-mode-on, .dz-mode-on:hover { background: #0E5FD8; color: #fff; }

.dz-props { display: flex; flex-direction: column; gap: .85rem; }
.dz-prop { display: flex; flex-direction: column; gap: .3rem; }
.dz-prop-label { font-size: .8rem; font-weight: 600; color: #33465C; }
.dz-prop-note { margin: 0; font-size: .82rem; color: #64768C; line-height: 1.5; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.tf {
  /* The designer shell is locked to the viewport height and its children are
     expected to manage their own overflow. Without this the filler is simply
     clipped: the questions past the fold exist but nothing can reach them. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;

  --tf-line:   #E1E8ED;
  --tf-rule:   #C6D2DC;
  --tf-ink:    #0A1626;
  --tf-soft:   #33465C;
  --tf-faint:  #64768C;
  --tf-blue:   #0E5FD8;
  --tf-blue-bg:#E8EEF7;
  --tf-good:   #0F7B5A;
  --tf-warn:   #B26A00;
  --tf-bad:    #B3261E;

  border: 1px solid var(--tf-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* ── Control bar ────────────────────────────────────────────────────────── */
.tf-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1.2rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--tf-line);
  background: linear-gradient(#FBFCFD, #F2F5F7);
}
.tf-bar-left, .tf-bar-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tf-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tf-blue); background: var(--tf-blue-bg);
  padding: .2rem .5rem; border-radius: 4px;
}
.tf-bar-note { font-size: .82rem; color: var(--tf-faint); }

.tf-widths { display: inline-flex; border: 1px solid var(--tf-rule); border-radius: 6px; overflow: hidden; background: #fff; }
.tf-width {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .76rem; color: var(--tf-soft);
  padding: .3rem .6rem; white-space: nowrap;
}
.tf-width + .tf-width { border-left: 1px solid var(--tf-line); }
.tf-width:hover { background: #F2F5F7; }
.tf-width.on, .tf-width.on:hover { background: var(--tf-blue); color: #fff; }

.tf-btn {
  border: 1px solid var(--tf-rule); background: #fff; color: var(--tf-soft);
  border-radius: 6px; padding: .32rem .75rem; font: inherit; font-size: .82rem; cursor: pointer;
  white-space: nowrap;
}
.tf-btn:hover { background: var(--tf-blue-bg); border-color: var(--tf-blue); color: var(--tf-blue); }

/* ── Progress ───────────────────────────────────────────────────────────── */
.tf-progress { height: 3px; background: #E8EEF7; }
.tf-progress-fill { height: 100%; background: var(--tf-blue); transition: width .18s ease; }

.tf-status {
  display: flex; flex-wrap: wrap; gap: .4rem 1.3rem;
  padding: .5rem 1rem; border-bottom: 1px solid var(--tf-line);
  font-size: .82rem; color: var(--tf-faint);
}
.tf-stat b { color: var(--tf-ink); font-variant-numeric: tabular-nums; }
.tf-stat-hidden b { color: var(--tf-warn); }
.tf-stat-bad, .tf-stat-bad b  { color: var(--tf-bad); }
.tf-stat-warn, .tf-stat-warn b { color: var(--tf-warn); }
.tf-stat-ok { color: var(--tf-good); font-weight: 600; margin-left: auto; }

/* ── Stage: the form sits centred at a chosen device width ──────────────── */
/* Only the form scrolls. The control bar and the running totals stay put, so
   "8 to fix" is still readable at the bottom of a long certificate. */
.tf-bar, .tf-progress, .tf-status { flex: 0 0 auto; }

.tf-stage {
  background: repeating-linear-gradient(45deg, #F7F9FB 0 10px, #F2F5F7 10px 20px);
  padding: 1.4rem 1rem 2rem;
  display: flex; justify-content: center; align-items: flex-start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
}
.tf-page {
  width: 100%;
  background: #fff;
  border: 1px solid var(--tf-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(10,22,38,.05), 0 10px 30px rgba(10,22,38,.06);
  padding: 1.2rem 1.2rem 1.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.tf-phone   { max-width: 26rem; }
.tf-tablet  { max-width: 44rem; }
.tf-desktop { max-width: 70rem; }

.tf-none { margin: 0; color: var(--tf-faint); font-style: italic; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.tf-sec { display: flex; flex-direction: column; gap: .8rem; }
.tf-sec-head {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tf-faint);
  padding-bottom: .35rem; border-bottom: 1px solid var(--tf-line);
}
.tf-sec-body { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ── Repeating groups ───────────────────────────────────────────────────── */
.tf-rep {
  width: 100%;
  border: 1px solid var(--tf-rule); border-radius: 8px;
  background: #FAFCFD;
  display: flex; flex-direction: column; gap: .7rem;
  padding: .7rem;
}
.tf-rep-head { display: flex; align-items: center; gap: .6rem; }
.tf-rep-name { font-weight: 600; font-size: .92rem; color: var(--tf-ink); }
.tf-rep-count {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  background: var(--tf-blue-bg); color: var(--tf-blue);
  border-radius: 999px; padding: .1rem .55rem; font-variant-numeric: tabular-nums;
}
.tf-rep-count.short { background: #FBE7E5; color: var(--tf-bad); }
.tf-rep-none { margin: 0; font-size: .84rem; color: var(--tf-faint); font-style: italic; }

.tf-inst { border: 1px solid var(--tf-line); border-radius: 7px; background: #fff; overflow: hidden; }
.tf-inst-head {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .55rem; background: #F2F5F7; border-bottom: 1px solid var(--tf-line);
}
.tf-inst-no {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--tf-blue); color: #fff;
  font-size: .72rem; font-weight: 700;
}
.tf-inst-sum { flex: 1; font-size: .84rem; color: var(--tf-soft); }
.tf-inst-x {
  border: 0; background: transparent; color: var(--tf-faint);
  font: inherit; font-size: .76rem; cursor: pointer; padding: .15rem .4rem; border-radius: 4px;
}
.tf-inst-x:hover { background: #FBE7E5; color: var(--tf-bad); }
.tf-inst-body { padding: .8rem .7rem; display: flex; flex-wrap: wrap; gap: .9rem; }

.tf-rep-foot { display: flex; align-items: center; gap: .7rem; }
.tf-add {
  border: 1px dashed var(--tf-blue); background: #fff; color: var(--tf-blue);
  border-radius: 6px; padding: .38rem .85rem; font: inherit; font-size: .85rem;
  font-weight: 500; cursor: pointer;
}
.tf-add:hover:not(:disabled) { background: var(--tf-blue-bg); }
.tf-add:disabled { opacity: .4; cursor: not-allowed; border-style: solid; }
.tf-rep-limit { font-size: .76rem; color: var(--tf-warn); }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.tf-f {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1 1 100%; min-width: 0;
}
/* Two to a row once there is room. Phone width keeps everything stacked. */
.tf-tablet  .tf-f.half,
.tf-desktop .tf-f.half { flex: 1 1 calc(50% - .5rem); }
.tf-desktop .tf-f.wide { flex: 1 1 100%; }

.tf-f-label { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.tf-f-name  { font-size: .86rem; font-weight: 600; color: var(--tf-ink); }
.tf-f-req {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tf-bad); background: #FBE7E5; border-radius: 3px; padding: .06rem .3rem;
}
.tf-f-calc {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tf-blue); background: var(--tf-blue-bg); border-radius: 3px; padding: .06rem .3rem;
}
.tf-f-control { display: flex; align-items: center; gap: .45rem; }
.tf-f-unit { font-size: .8rem; color: var(--tf-faint); white-space: nowrap; }
.tf-f-help { margin: 0; font-size: .78rem; color: var(--tf-faint); line-height: 1.45; }
.tf-f-msg  { margin: .1rem 0 0; font-size: .78rem; font-weight: 500; color: var(--tf-bad); }
.tf-f-msg.warn { color: var(--tf-warn); }

.tf-in {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: .9rem; color: var(--tf-ink);
  padding: .45rem .6rem;
  border: 1px solid var(--tf-rule); border-radius: 6px; background: #fff;
}
.tf-in:focus-visible { outline: 2px solid var(--tf-blue); outline-offset: 1px; border-color: var(--tf-blue); }
.tf-in-num, .tf-in-date { flex: 0 1 10rem; }
textarea.tf-in { resize: vertical; line-height: 1.5; }

.tf-f.bad  .tf-in, .tf-f.bad select.tf-in { border-color: var(--tf-bad); background: #FFFBFB; }
.tf-f.done .tf-f-name::after {
  content: "\2713"; color: var(--tf-good); font-weight: 700; margin-left: .3rem; font-size: .8em;
}

.tf-f-out {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .95rem; font-weight: 700; color: var(--tf-soft);
  padding: .45rem .6rem; border: 1px dashed var(--tf-rule); border-radius: 6px;
  background: #F2F5F7; display: inline-flex; align-items: baseline; gap: .4rem;
  align-self: flex-start; min-width: 6rem;
}

/* ── Choices as segmented pills ─────────────────────────────────────────── */
.tf-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.tf-opts-stack { flex-direction: column; align-items: stretch; }
.tf-opt {
  border: 1px solid var(--tf-rule); background: #fff; color: var(--tf-soft);
  border-radius: 6px; padding: .4rem .8rem; font: inherit; font-size: .85rem;
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: .4rem;
}
.tf-opt:hover { border-color: var(--tf-blue); color: var(--tf-blue); }
.tf-opt.on, .tf-opt.on:hover {
  background: var(--tf-blue); border-color: var(--tf-blue); color: #fff; font-weight: 600;
}
.tf-opt.retired { opacity: .75; border-style: dashed; }
.tf-opt-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tf-warn); }
.tf-opt.on .tf-opt-tag { color: #FBF0DE; }

/* ── Yes/no switch ──────────────────────────────────────────────────────── */
.tf-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.tf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-switch-track {
  width: 2.4rem; height: 1.35rem; border-radius: 999px; background: #C6D2DC;
  position: relative; transition: background .15s ease; flex: 0 0 auto;
}
.tf-switch-track::after {
  content: ""; position: absolute; top: .17rem; left: .17rem;
  width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.tf-switch input:checked + .tf-switch-track { background: var(--tf-blue); }
.tf-switch input:checked + .tf-switch-track::after { transform: translateX(1.05rem); }
.tf-switch input:focus-visible + .tf-switch-track { outline: 2px solid var(--tf-blue); outline-offset: 2px; }
.tf-switch-text { font-size: .86rem; color: var(--tf-soft); }

/* ── Hardware stubs ─────────────────────────────────────────────────────── */
.tf-cap {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  border: 1px dashed var(--tf-rule); border-radius: 7px; background: #F7F9FB;
  padding: .55rem .7rem; font: inherit; cursor: pointer; text-align: left;
}
.tf-cap:hover { border-color: var(--tf-blue); background: var(--tf-blue-bg); }
.tf-cap.on { border-style: solid; border-color: var(--tf-good); background: #E4F2EC; }
.tf-cap-icon { font-size: 1.15rem; line-height: 1; }
.tf-cap-text { display: flex; flex-direction: column; }
.tf-cap-text b { font-size: .86rem; color: var(--tf-ink); font-weight: 600; }
.tf-cap.on .tf-cap-text b { color: var(--tf-good); }
.tf-cap-text small { font-size: .72rem; color: var(--tf-faint); }

/* ── Prose and breaks ───────────────────────────────────────────────────── */
.tf-prose { flex: 1 1 100%; margin: 0; font-size: .88rem; color: var(--tf-soft); line-height: 1.55; }
.tf-notice {
  flex: 1 1 100%; margin: 0; font-size: .88rem; line-height: 1.55;
  border-left: 3px solid var(--tf-warn); background: #FBF0DE;
  padding: .6rem .8rem; border-radius: 0 6px 6px 0;
}
.tf-break {
  flex: 1 1 100%; display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tf-faint);
}
.tf-break::before, .tf-break::after {
  content: ""; flex: 1; border-top: 1px dashed var(--tf-rule);
}

/* ── "Starts as": the pre-selected answer, chosen from the options ────────── */
.ni-default { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #E1E8ED; }
.ni-default-opts { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 .35rem; }
.ni-def {
  border: 1px solid #C6D2DC; background: #fff; color: #33465C;
  border-radius: 5px; padding: .26rem .6rem; font: inherit; font-size: .8rem; cursor: pointer;
}
.ni-def:hover:not(:disabled) { border-color: #0E5FD8; color: #0E5FD8; }
.ni-def.on, .ni-def.on:hover { background: #0E5FD8; border-color: #0E5FD8; color: #fff; font-weight: 600; }
.ni-def.retired { border-style: dashed; opacity: .55; }
.ni-def:disabled { cursor: not-allowed; }
.ni-warn { display: block; margin-top: .3rem; color: #B3261E; }

/* ── Version history ──────────────────────────────────────────────────────
   The approval trail, in the app rather than only in the database. It is the
   evidence that a statutory certificate was approved by someone other than its
   author, so it is worth being able to look at.
   ───────────────────────────────────────────────────────────────────────── */
.vh {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  border: 1px solid #E1E8ED; border-radius: 8px; background: #fff;
}
.vh-empty { padding: 1.4rem; margin: 0; color: #64768C; font-style: italic; }

.vh-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid #E1E8ED;
  background: linear-gradient(#FBFCFD, #F2F5F7); position: sticky; top: 0; z-index: 1;
}
.vh-count { font-weight: 600; font-size: .9rem; }
.vh-note  { font-size: .82rem; color: #64768C; }

.vh-list { list-style: none; margin: 0; padding: .8rem 1rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; }

.vh-item {
  border: 1px solid #E1E8ED; border-left: 4px solid #C6D2DC; border-radius: 7px;
  padding: .75rem .9rem; background: #fff;
}
.vh-item.live    { border-left-color: #0F7B5A; }
.vh-item.review  { border-left-color: #B26A00; }
.vh-item.draft   { border-left-color: #0E5FD8; }
.vh-item.retired { border-left-color: #C6D2DC; background: #FAFCFD; }
.vh-item.here    { box-shadow: 0 0 0 2px #E8EEF7; }

.vh-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vh-no {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700; font-size: .95rem; color: #0A1626;
}
.vh-state {
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 3px; padding: .1rem .4rem;
}
.vh-state.live    { background: #E4F2EC; color: #0F7B5A; }
.vh-state.review  { background: #FBF0DE; color: #B26A00; }
.vh-state.draft   { background: #E8EEF7; color: #0E5FD8; }
.vh-state.retired { background: #F2F5F7; color: #64768C; }

.vh-you {
  margin-left: auto; font-size: .76rem; color: #64768C; font-style: italic;
}
.vh-open {
  margin-left: auto; border: 1px solid #C6D2DC; background: #fff; color: #33465C;
  border-radius: 5px; padding: .22rem .7rem; font: inherit; font-size: .8rem; cursor: pointer;
}
.vh-open:hover { background: #E8EEF7; border-color: #0E5FD8; color: #0E5FD8; }

/* Same shape as Open — it sits beside it — but red on hover, because it is the
   one button here that destroys something. */
.vh-x {
  border: 1px solid #C6D2DC; background: #fff; color: #33465C;
  border-radius: 5px; padding: .22rem .7rem; font: inherit; font-size: .8rem; cursor: pointer;
}
.vh-x:hover { background: #FBE7E5; border-color: #B3261E; color: #B3261E; }

.vh-change { margin: .45rem 0 0; font-size: .86rem; color: #33465C; }

.vh-trail { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.vh-trail > div { display: flex; align-items: baseline; gap: .4rem; }
.vh-trail dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #64768C; margin: 0;
}
.vh-trail dd { margin: 0; font-size: .82rem; color: #33465C; }
.vh-second {
  margin-left: .4rem; font-size: .68rem; font-weight: 700;
  color: #0F7B5A; background: #E4F2EC; border-radius: 3px; padding: .04rem .32rem;
}

.vh-msg { margin: .45rem 0 0; font-size: .84rem; color: #33465C; font-style: italic; }
.vh-rejected { color: #B3261E; font-style: normal; }

.vh-hash {
  margin: .5rem 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .7rem; color: #94A3B4; cursor: help;
}

/* ── Formula builder ──────────────────────────────────────────────────────
   The arithmetic counterpart of the rule builder, and styled to match it: a
   chain of chips reading left to right, with the sentence it produces stated
   underneath so nobody has to guess at precedence.
   ───────────────────────────────────────────────────────────────────────── */
.fb { display: flex; flex-direction: column; gap: .5rem; }

.fb-none { margin: 0; font-size: .84rem; color: #B26A00; }
.fb-advanced { display: flex; flex-direction: column; gap: .4rem; }
.fb-advanced small { color: #64768C; font-size: .78rem; line-height: 1.45; }

.fb-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

/* Date maths: one row that reads as a sentence — [inspection date] [plus] [12]
   [month(s)] — rather than the chip chain, which is for + - x / only. */
.fb-date { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

/* Which job values print under the title. Two lists, because what is printed
   has an order and ticking cannot express one. */
/* Where you are in the panel, and the way back to the form's own settings. */
.dz-crumbs { display: flex; align-items: center; gap: 6px; padding: 9px 16px 0; }
.dz-crumb {
  border: 0; background: transparent; font: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
  color: #808893; cursor: pointer; padding: 2px 4px; border-radius: 3px;
}
.dz-crumb:hover { color: var(--wo-blue); background: #EEF4FE; }
.dz-crumb.on { color: #0A1626; cursor: default; }
.dz-crumb.on:hover { background: transparent; }
.dz-crumb-sep { color: #C6D2DC; font-size: 12px; }

.hp-intro { margin: 0 0 9px; font-size: 12.5px; color: #56636F; }
/* The marks across the top of the certificate. */
.hp-logos { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #E3E9EF; }
.hp-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
            color: #0A1626; margin-bottom: 4px; cursor: pointer; }
.hp-accred { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.hp-accred > span { color: #0A1626; }
.hp-accred select { flex: 1; min-width: 0; }
.hp-logos small { display: block; margin-top: 5px; font-size: 11.5px; color: #808893; line-height: 1.45; }
.hp h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
         color: #808893; margin: 0 0 5px; font-weight: 600; }
.hp-none { margin: 0; font-size: 12.5px; color: #808893; }

.hp-row { display: flex; align-items: center; gap: 4px; background: #fff;
          border: 1px solid #E3E9EF; border-radius: 5px; padding: 4px 6px; margin-bottom: 4px; }
.hp-name { flex: 1; font-size: 12.5px; color: #0A1626; }

/* The line as it will print, so the order is visible before saving. */
.hp-preview { margin: 7px 0 0; padding: 6px 9px; background: #fff;
              border-left: 3px solid var(--wo-blue); border-radius: 3px;
              font-size: 12.5px; color: #14417F; }

.hp-available { margin-top: 13px; }
.hp-group { margin-bottom: 7px; }
.hp-group-name { display: block; font-size: 10px; text-transform: uppercase;
                 letter-spacing: .4px; color: #A8B0BA; margin-bottom: 3px; }
.hp-add { border: 1px dashed #C6D2DC; background: #fff; color: #56636F;
          border-radius: 12px; padding: 2px 9px; margin: 0 4px 4px 0;
          font: inherit; font-size: 11.5px; cursor: pointer; }
.hp-add:hover { border-color: var(--wo-blue); color: var(--wo-blue); }

/* Joined text: the same chips as the chain, without operators between them. */
.fb-parts { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fb-text {
  font: inherit; font-size: .82rem; color: #0A1626;
  border: 0; background: transparent; padding: .16rem .2rem; width: 8rem;
}
.fb-text:focus-visible { outline: 2px solid #0E5FD8; border-radius: 3px; }

/* The function applied to the finished chain. Muted, and below the chain, so it
   reads as a step after the sum rather than part of it. */
.fb-func { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .45rem; }
.fb-func-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
               color: #98A1AC; font-weight: 600; }
.fb-funcname { flex: 0 1 12rem; min-width: 0; }
.fb-func-unit { font-size: .8rem; color: #64768C; }
.fb-func .fb-num {
  flex: 0 0 4.5rem; width: 4.5rem;
  border: 1px solid #C6D2DC; border-radius: 6px; background: #fff; padding: .3rem .35rem;
}
.fb-anchor { flex: 1 1 11rem; min-width: 0; max-width: 16rem; }
.fb-shift  { flex: 0 0 5.5rem; }
.fb-unit   { flex: 0 0 7rem; }
.fb-date .fb-num {
  flex: 0 0 5rem; width: 5rem;
  border: 1px solid #C6D2DC; border-radius: 6px; background: #fff; padding: .3rem .35rem;
}

.fb-term {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid #C6D2DC; border-radius: 6px; background: #fff; padding: .2rem .3rem;
}

.fb-field, .fb-num, .fb-op {
  font: inherit; font-size: .82rem; color: #0A1626;
  border: 0; background: transparent; padding: .16rem .2rem;
}
.fb-field { max-width: 12rem; }
.fb-num   { width: 6rem; text-align: right; }
.fb-field:focus-visible, .fb-num:focus-visible { outline: 2px solid #0E5FD8; border-radius: 3px; }

.fb-op {
  border: 1px solid #C6D2DC; border-radius: 6px; background: #F2F5F7;
  font-weight: 700; text-align: center; padding: .3rem .35rem; cursor: pointer;
}

/* What an operand is: a field, a number, a count, a total. Muted, because the
   thing it points at is what an author reads. */
.fb-kind {
  font: inherit; font-size: .72rem; color: #64768C;
  border: 0; border-right: 1px solid #E3E9EF; background: transparent;
  padding: .16rem .3rem .16rem .2rem; max-width: 8rem; cursor: pointer;
}
.fb-kind:focus-visible { outline: 2px solid #0E5FD8; border-radius: 3px; }

.fb-swap, .fb-x {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: .68rem; color: #64768C; padding: .12rem .3rem; border-radius: 3px;
  white-space: nowrap;
}
.fb-swap:hover { background: #E8EEF7; color: #0E5FD8; }
.fb-x:hover:not(:disabled) { background: #FBE7E5; color: #B3261E; }
.fb-x:disabled { opacity: .3; cursor: not-allowed; }

.fb-add {
  border: 1px dashed #0E5FD8; background: #fff; color: #0E5FD8;
  border-radius: 6px; padding: .24rem .55rem; font: inherit; font-weight: 700; cursor: pointer;
}
.fb-add:hover { background: #E8EEF7; }


.fb-warn { margin: 0; font-size: .8rem; color: #B3261E; font-weight: 500; }

.fb-link {
  align-self: flex-start; border: 0; background: transparent; color: #0E5FD8;
  font: inherit; font-size: .82rem; cursor: pointer; padding: 0; text-decoration: underline;
}
.fb-link:hover { color: #0A1626; }

/* ── Formula, drawn as maths ──────────────────────────────────────────────
   Division stacked over a rule, the way it would be written on paper. Plain
   flexbox: a numerator, a denominator, and a border between them. No maths
   library — the module already ships three stylesheets into a host, and a
   fourth dependency to draw a horizontal line is not a fair trade.
   ───────────────────────────────────────────────────────────────────────── */
.mf {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  font-family: "Cambria Math", Cambria, Georgia, "Times New Roman", serif;
  font-size: 1rem; line-height: 1.25; color: #0A1626;
}
.mf-none { color: #64768C; }

.mf-row { display: inline-flex; align-items: center; gap: .3rem; }

.mf-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; margin: 0 .1rem; text-align: center;
}
.mf-num { padding: 0 .45rem .15rem; }
.mf-den { padding: .15rem .45rem 0; border-top: 1.5px solid currentColor; }

/* Names italic, numbers upright — the ordinary typesetting convention, and it
   makes "10,000" read as a quantity rather than a variable called 10000. */
.mf-name    { font-style: italic; }
.mf-num-lit { font-style: normal; font-variant-numeric: tabular-nums; }

.mf-op, .mf-times { font-style: normal; color: #33465C; padding: 0 .12rem; }
.mf-paren { font-style: normal; color: #64768C; }

/* The label sits beside the fraction rather than above it, so a tall formula
   does not push the caption out of line. */
.fb-reads {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  background: #F2F5F7; border: 1px solid #E1E8ED; border-radius: 5px;
  padding: .5rem .7rem;
}
.fb-reads-tag {
  font-family: var(--wo-font-mono, ui-monospace, Consolas, monospace);
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #64768C;
}

/* ── A save refused because someone else changed the draft ────────────────
   Deliberately not the ordinary message strip: this one needs an action, and
   the author's unsaved work is still on screen while they decide.
   ───────────────────────────────────────────────────────────────────────── */
.dz-conflict {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.2rem;
  border: 1px solid #B3261E; border-left-width: 4px;
  background: #FBE7E5; border-radius: 5px; padding: .7rem 1rem;
}
.dz-conflict strong { color: #B3261E; }
.dz-conflict p { margin: .2rem 0 0; font-size: .88rem; color: #33465C; max-width: 62ch; }

/* An author's note on a node. Deliberately quiet — it is a reminder for whoever
   edits next, not information about the form itself. */
.ft-note {
  font-family: var(--wo-font-mono, ui-monospace, Consolas, monospace);
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #64768C; background: #F2F5F7; border: 1px solid #E1E8ED;
  border-radius: 3px; padding: .04rem .3rem; cursor: help;
}

/* Rows that navigate. The host's .mwm-table styles the table itself but has no
   opinion on clickable rows, because most of its tables are not. */
.wo-row-click { cursor: pointer; }
.wo-row-click:hover { background: var(--wo-subtle); }
.wo-row-sel, .wo-row-sel:hover { background: var(--tf-blue-bg); }

/* The delete dialog's list of rules that read the question being deleted.
   Each entry is a question, what it loses, and the rule in plain English -
   because naming the question was not enough to tell a deliberate dependency
   from one inherited by duplicating a field. */
.ni-dep-lead  { margin: 0 0 6px; }
.ni-dep-lead + .ni-deps { margin-top: 0; }
.ni-deps      { margin: 0 0 8px; padding-left: 18px; }
.ni-deps li   { margin-bottom: 7px; }
.ni-dep-effect { color: #8A6100; }
/* Indented and quieter than the question it belongs to: the author reads the
   names first and only drops into the condition for the one that looks wrong. */
.ni-dep-rule  { margin-top: 2px; font-size: 12.5px; color: #6B5327; }
.ni-dep-rule em { font-style: normal; background: #FBEFD0; border-radius: 3px;
                  padding: 1px 5px; }