/* ============================================================================
   Report Customize - guided editor chrome.

   This file is a PORT of the <style> block of the approved prototype
   docs/prototypes/report_customize_uiux.html, not a re-derivation. Every class
   name carries the kz-rc- prefix; every declaration keeps the prototype's own
   value. Three deliberate departures, all mandated by the execution plan:

     1. The prototype's .infobox copy is dropped. The product uses the shipped
        getInfoMessageHTML( ) component instead (plan 4.2).
     2. The report-render classes (kz-record-card, kz-card-hd, ...) are dropped.
        They belong to the report OUTPUT, not to the editor chrome, and already
        exist in the report templates (plan 4.2).
     3. The prototype's "Highlight annotated regions" toggle does not exist in
        the product - the highlight is always on (plan 4.4) - so the rules the
        prototype guarded behind body.annot are unconditional here, and the
        .region-tag{display:none} off-state is gone.

   Everything is scoped under .kz-rc-root so the prototype's bare element rules
   (*, body, button/input/select/textarea, h1-h4, code) cannot escape into the
   rest of the application.
   ============================================================================ */

/* The custom properties are declared on their own, because the authoring
   dialogs are created into document.body and so sit OUTSIDE .kz-rc-root. Trap 6:
   a var() with no declaration resets the whole property rather than falling
   back, so a dialog outside this list would lose every ported border and colour
   at once. Only the VARIABLES are shared; the page-level layout below is not. */
/* .kz-rc-btn is in this list because the Settings strip's More settings toggle
   is drawn OUTSIDE the customize view - it belongs to ReportEditor, which sits
   above .kz-rc-root - so it would otherwise resolve --line and --ink to nothing
   and lose its border and its colour entirely. Buttons inside the root simply
   redeclare the same values locally, which changes nothing for them. */
.kz-rc-root,
.kz-rc-dlg,
.kz-rc-btn
{
	--green: #25c26f;
	--green-dk: #1a9a56;
	--green-bg: #eafaf1;
	--green-ln: #bfe3d0;
	--ink: #1f2933;
	--muted: #66707c;
	--faint: #98a2ad;
	--line: #e3e7ec;
	--bg: #f5f7f9;
	--panel: #fff;
	--blue: #2b6cb0;
	--blue-bg: #e8f1fb;
	--blue-ln: #cfe0f2;
	--purple: #6b46c1;
	--purple-bg: #f3edfd;
	--purple-ln: #ded0f5;
	--amber: #b45309;
	--amber-bg: #fef6e7;
	/* shipped information scheme - getInfoMessageHTML, html_utils.js */
	--info: #bb2d99;
	--info-bg: #faeef7;
	--info-ln: #e6e6e6;
	--info-tx: #212121;
	--red: #c0392b;
	--red-bg: #fdecea;
	--mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.kz-rc-root
{
	background: var(--bg);
	color: var(--ink);
	/* The application face and size, not the prototype's. The ported stack opened
	   with "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ...", which on
	   Windows resolves to Segoe UI and rendered this whole editor in a different
	   typeface from every other screen in the app - the same defect styles_k.css
	   already records against .kauth-root. Roboto at 13px is what the app body
	   declares, so the editor now matches it. */
	font: 13px/1.5 'Roboto', Verdana, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	height: 100%;
	overflow: hidden;
	/* The prototype's page is an appbar above the three-pane grid. Here the
	   root is that column: the bar takes its own height and the grid takes
	   whatever is left, which is what keeps the grid off the bottom of the
	   host row now that something sits above it. */
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---- the action bar ------------------------------------------------------
   The prototype's .appbar, carrying only what plan 4.4 leaves in the product:
   the two whole-report operations. The title and the report name are the
   host's own Settings strip, the Type dropdown is demo-only, Group by moved
   into the preview toolbar and Save is the host's. */
.kz-rc-appbar{ display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfd; flex-wrap: wrap; flex: none }

.kz-rc-root, .kz-rc-root *{ box-sizing: border-box }
.kz-rc-dlgbody, .kz-rc-dlgbody *{ box-sizing: border-box }
.kz-rc-root h1, .kz-rc-root h2, .kz-rc-root h3, .kz-rc-root h4{ margin: 0; font-weight: 600 }
.kz-rc-root button, .kz-rc-root input, .kz-rc-root select, .kz-rc-root textarea{ font: inherit; color: inherit }
.kz-rc-root button{ cursor: pointer }
.kz-rc-root code{ font-family: var(--mono); font-size: .92em }

.kz-rc-root .kz-rc-spacer{ flex: 1 }

/* ---------------------------------------------------------------------------
   About the !important declarations below.

   Panel.create( ) writes border, padding, margin, box-sizing, width, height and
   line-height as INLINE styles on every framework widget it builds, and an
   inline style always beats a class rule. Wherever a widget IS a piece of the
   ported structure - a button, a pane, the outline tree, the Guided/Code tab
   strip, the code editor - the ported value has to be marked !important to win
   the cascade. This is the same mechanism the shipped tooltip skin uses.
   Rules that style plain markup carry no !important.
   --------------------------------------------------------------------------- */

.kz-rc-btn
{
	border: 1px solid var(--line) !important;
	background: #fff !important;
	border-radius: 7px !important;
	padding: 6px 11px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	color: var(--ink) !important;
	width: auto !important;
	height: auto !important;
	/* the prototype's buttons inherit the root's 1.5, which is what makes a
	   small button 28px tall rather than 26 */
	line-height: 1.5 !important;
	text-align: center;
}
.kz-rc-btn:hover{ border-color: #cbd3dc !important; background: #fafbfc !important }
/* Button.disable() writes an inline opacity of 50%; the prototype's disabled
   button is 42%, so the ported value is marked to win. */
.kz-rc-btn.kz-rc-disabled{ opacity: .42 !important; cursor: not-allowed }
.kz-rc-btn.kz-rc-primary{ background: var(--green) !important; border-color: var(--green) !important; color: #fff !important }
.kz-rc-btn.kz-rc-primary:hover{ background: var(--green-dk) !important; border-color: var(--green-dk) !important }
.kz-rc-btn.kz-rc-sm{ padding: 4px 9px !important; font-size: 12px !important }

/* The application's own reset strips a select's native dropdown chevron
   (styles_k.css "select:not([multiple])" sets appearance:none and paints an svg
   arrow as a background image). The prototype's selects are plain browser
   selects, so the native appearance is asked for back explicitly - a property
   the ported rule has to DECLARE, since an undeclared one simply keeps the
   reset's value. The !important marks win over the skin's inline styles for any
   select that is not built as plain markup. */
.kz-rc-root select,
.kz-rc-root input[type=text]
{
	border: 1px solid var(--line) !important;
	border-radius: 7px;
	padding: 6px 9px;
	font-size: 13px !important;
	font-family: inherit !important;
	background: #fff;
	outline: none;
	height: auto;
	margin: 0;
}
.kz-rc-root select
{
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	background-image: none;
}
.kz-rc-root select:focus,
.kz-rc-root input[type=text]:focus{ border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg) }

/* The prototype's Include control is a <label class=chk> around a checkbox; the
   product's is the framework Checkbox widget, which lays its box and its label
   out as a two-cell table. The ported look is put back over that table: the same
   13px muted caption, the same green box, and the same spacing the prototype's
   7px gap actually renders as - see the input rule below. The !important runs
   are the widget's own inline writes (font-size, line-height, the box's 4px
   margin) and Panel.create's border / padding / margin. */
.kz-rc-root .kz-rc-chk
{
	display: flex;
	align-items: center;
	font-size: 13px;
	color: var(--muted);
	cursor: pointer;
	user-select: none;
	flex: none;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.5 !important;
}
/* The widget writes the application skin's font family and size onto its table,
   which would leave Include reading in a different typeface from every other
   word in the header. */
.kz-rc-root .kz-rc-chk table{ border-collapse: collapse; font-family: inherit !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 }
.kz-rc-root .kz-rc-chk td{ vertical-align: middle; padding: 0 !important }
/* The 4px lead-in and the 10px gap are what the prototype's own control
   MEASURES: its 7px flex gap sits on top of the checkbox's user-agent margins
   (4px left, 3px right) and the literal space its markup puts before the word.
   The widget's table has none of those, so the ported gap is applied as the
   spacing it actually produces - the control then measures 70.78px wide with
   its box in the same place, exactly as the prototype's does. */
.kz-rc-root .kz-rc-chk input{ accent-color: var(--green); width: 15px !important; height: 15px !important; cursor: pointer; margin: 0 10px 0 4px !important; vertical-align: middle }
.kz-rc-root .kz-rc-chk input:disabled{ cursor: not-allowed }
.kz-rc-root .kz-rc-chk label{ cursor: pointer; white-space: nowrap }

/* ---- the three-pane grid -------------------------------------------------
   Two adaptations from the prototype, both forced by the host rather than
   chosen. The prototype's min-height:680px belongs to a page that scrolls; in
   the product the grid fills the height its host row gives it, so the fixed
   minimum becomes height:100%. And the prototype's track minimums (380px and
   400px) add up to more than the app content area is wide once the navigation
   rail is accounted for, which would push the preview pane off screen, so the
   minimums relax to 0. The track RATIO - 290px, 1fr, 1.05fr - is the
   prototype's, unchanged. */
.kz-rc-grid3{ --rc-outline-w: 290px; display: grid; grid-template-columns: var(--rc-outline-w) minmax(0, 1fr) minmax(0, 1.05fr); width: 100%; flex: 1 1 auto; min-height: 0; background: var(--panel) }
.kz-rc-pane{ display: flex; flex-direction: column; min-width: 0; min-height: 0; box-sizing: border-box !important; padding: 0 !important; border-width: 0 }
.kz-rc-pane + .kz-rc-pane{ border-left: 1px solid var(--line) }

/* ---- the editor / preview seam ------------------------------------------
   Owner finding 3: the rule between the second and third column is a handle
   the user can drag, and where they leave it is remembered per report.

   The grid stays a grid. Everything the panes are - a flex column with a fixed
   header, a toolbar strip and a scrolling body that may not push the column
   wider than its track - is expressed in the two rules above, and a
   SplitControl would have to re-express all of it inside its own table of
   pixel-sized cells, re-deriving the metrics this sheet just settled. What the
   drag changes is only the TRACK LIST, and it is rewritten in fr units so the
   two columns go on sharing whatever width the host hands the grid. The first
   track is written back as var(--rc-outline-w), declared just above, so the
   inline rewrite cannot drift from the sheet's own outline width.

   The handle is a grid item placed in the SAME cell as the editor pane and
   pinned to that cell's end edge, so its hit area sits immediately inside the
   1px rule the preview pane draws down its left edge - which is exactly where
   the grid control puts its own column-width grip, inside the column, against
   the border. It costs the layout nothing: both tracks have a 0 minimum, so a
   4px item cannot widen either, and it sits outside the panes' sibling chain, so
   the border rule above still matches exactly the two pane-after-pane pairs it
   did before.

   How WIDE it is, what colour it is (none, at rest and under the pointer alike)
   and what cursor it shows are NOT declared here. They are the grid column
   resizer's own values and they are written on the element by that resizer's own
   function, styleColumnResizeGrip in grid_header.js - owner round-3 finding Y2
   asked for the two to be the same affordance, and one place has to own it. A
   3px bar that turned green under the pointer used to live here; it was a
   custom affordance the product has nowhere else, and it is gone.

   The three panes now name their own column. They used to be auto-placed, which
   was fine while they were the only items; a grid places every item with a
   DEFINITE position before it auto-places anything, so the seam claims row 1 /
   column 2 first and the auto-placement cursor then steps around it - the editor
   pane landing in column 3 and the preview pane on a second row. Naming the
   columns takes the cursor out of it entirely. */
.kz-rc-grid3 > .kz-rc-pane{ grid-row: 1 }
.kz-rc-grid3 > .kz-rc-pane:nth-child(1){ grid-column: 1 }
.kz-rc-grid3 > .kz-rc-pane:nth-child(2){ grid-column: 2 }
.kz-rc-grid3 > .kz-rc-pane:nth-child(3){ grid-column: 3 }
.kz-rc-split{ grid-column: 2; grid-row: 1; justify-self: end; align-self: stretch; z-index: 4; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: none }
/* The pane header: one title bar of the SAME height in all three panes.

   Owner findings 1 and 2. The three headers used to be 58 / 109 / 58 px tall and
   the SECTIONS and PREVIEW titles wrapped, carrying their badge and their live
   dot on a second line for nothing. Two things fix that together.

   1. The header is a single ROW - flex-wrap: nowrap - so the title's badge or
      live dot sits beside it instead of under it, and the header can never grow
      a second row of controls.
   2. Its height is FIXED rather than a minimum, so the three headers are equal
      by construction: the same value in every pane, on every section, in every
      language, whatever each header happens to hold.

   50px is what two lines of the title need: 2 x 16.2px of 12px/1.35 text plus
   the 8px padding above and below plus the 1px border. Two lines, because the
   title still WRAPS rather than ellipsising - the longest French name,
   "Mise en page de l'enregistrement - Champs principaux (F0)", measures 407.6px
   against the editor pane's 350.66px content box, and a title the user cannot
   finish reading is a defect. 407.6 / 350.66 = 1.16, so two lines is the
   ceiling, and the title owns the whole header width to keep it that way.

   That is why the editor pane's three controls - Include, the Guided / Code
   strip, Restore default - moved OUT of the header and into the
   .kz-rc-edittools strip below it. They never fitted on the title's line
   against the same 350.66px box anyway, and every other pane already
   carries its controls in a strip under its header (the outline's
   filter box, the preview's toolbar). The editor pane now follows the same
   shape. The mode strip itself is untouched by the move - it still measures
   121.6 x 32 with its 2px padding, 2px gap and 7px radius. */
.kz-rc-panehd{ display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); background: #fbfcfd; height: 50px; flex-wrap: nowrap; overflow: hidden; flex: none }
.kz-rc-panehd h4{ font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); flex: 0 1 auto; max-width: 100%; min-width: 0; overflow: hidden; white-space: normal; overflow-wrap: break-word; line-height: 1.35 }
.kz-rc-panehd .kz-rc-spacer{ flex: 0 0 0 }
/* ---- the SECOND row of every pane ---------------------------------------
   Owner round-3 finding Z2: "The second row of the editor should have a
   consistent height across all 3 columns, otherwise it does not look
   professional."

   The three strips under the pane headers - the outline's filter box, the
   editor's toolbar, the preview's toolbar - hold completely different things,
   so left to size themselves they measured three different heights even with
   nothing wrapping (padding and control heights alone put them at 51 / 45 / 46
   px). WRAPPING is what made it obvious: the owner's screenshot has the preview
   toolbar on two lines with Undock alone on the second, so that column's strip
   was nearly double its neighbours'.

   The fix is the same one the pane headers got, for the same reason: ONE fixed
   height, declared once for all three, so they are equal by construction rather
   than by coincidence - on every section, in every language, and at every
   position the split seam can be dragged to.

   52px = the tallest thing any of them holds (the 32px Guided/Code mode strip)
   + 6px of padding above and below + the 1px border + the 6px of horizontal
   scrollbar a strip shows when it has more than it can fit. The content box
   never falls below 33px, so nothing is ever clipped.

   OVERFLOW, not wrapping. A fixed height and a wrap would hide the second line
   instead of the row growing, so wrapping is turned off and a strip that cannot
   fit its controls SCROLLS sideways - which is what a narrow preview column
   does, and every control stays reachable at any width. The scrollbar is thinned
   to 6px so it reads as part of the strip rather than as a window inside it -
   through ::-webkit-scrollbar and NOT through scrollbar-width, because Chrome
   drops the pseudo-element rules the moment scrollbar-width is declared and its
   own "thin" is 11px, which would take the row's content box below the 32px the
   mode strip needs. */
.kz-rc-filter,
.kz-rc-edittools,
.kz-rc-prevbar
{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 6px 11px;
	border-bottom: 1px solid var(--line);
	background: #fbfcfd;
	flex: none;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}
.kz-rc-filter::-webkit-scrollbar,
.kz-rc-edittools::-webkit-scrollbar,
.kz-rc-prevbar::-webkit-scrollbar{ height: 6px }
.kz-rc-filter::-webkit-scrollbar-track,
.kz-rc-edittools::-webkit-scrollbar-track,
.kz-rc-prevbar::-webkit-scrollbar-track{ background: transparent }
.kz-rc-filter::-webkit-scrollbar-thumb,
.kz-rc-edittools::-webkit-scrollbar-thumb,
.kz-rc-prevbar::-webkit-scrollbar-thumb{ background: #ccd4dc; border-radius: 3px }
/* Nothing in a toolbar may shrink below its own content. A flex item shrinks
   before its container overflows, so without this the narrow preview column
   would squeeze the selects and the button into unreadable slivers and never
   scroll at all - the row would stay 52px tall and say nothing. The spacer is
   the deliberate exception (.kz-rc-root .kz-rc-spacer, higher specificity): it
   is what holds Undock at the right edge while there is room, and the first
   thing to give way when there is not. */
.kz-rc-edittools > *,
.kz-rc-prevbar > *{ flex: 0 0 auto }
/* The captions that label the selects. A 52px row has one line in it. */
.kz-rc-prevbar > span{ white-space: nowrap }
/* The header actions travel together, as one item in the strip. */
.kz-rc-edittools .kz-rc-hdactions{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto }
.kz-rc-panebody{ flex: 1; overflow: auto; min-height: 0 }

.kz-rc-filter input{ width: 100%; flex: 1 1 auto; min-width: 0 }
.kz-rc-grp{ padding: 11px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--faint) }
.kz-rc-node{ display: flex; align-items: center; gap: 8px; padding: 6px 11px 6px 13px; font-size: 13px; cursor: pointer; border-left: 2px solid transparent }
.kz-rc-node:hover{ background: #f7f9fa }
.kz-rc-node.kz-rc-sel{ background: var(--green-bg); border-left-color: var(--green); font-weight: 600 }
.kz-rc-node .kz-rc-nm{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kz-rc-node .kz-rc-hint{ font-size: 11px; color: var(--faint); font-weight: 400 }
.kz-rc-node.kz-rc-child{ padding-left: 29px }
.kz-rc-parent{ display: flex; align-items: center; gap: 7px; padding: 7px 11px; font-size: 13px; font-weight: 600; cursor: pointer }
.kz-rc-parent:hover{ background: #f7f9fa }
.kz-rc-caret{ width: 9px; height: 9px; flex: none; transition: transform .15s; color: var(--faint) }
.kz-rc-parent.kz-rc-closed .kz-rc-caret{ transform: rotate(-90deg) }
.kz-rc-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block }
.kz-rc-dot.kz-rc-edited{ background: var(--green) }
.kz-rc-dot.kz-rc-deflt{ background: #fff; border: 1.5px solid #c8d0d8 }
.kz-rc-dot.kz-rc-empty{ background: #e8ecf0 }
.kz-rc-badge-n{ font-size: 10px; font-weight: 700; background: #e7ebef; color: var(--muted); border-radius: 9px; padding: 1px 6px; flex: none }

/* The Guided / Code switch is a TabControl (plan 4.1, Appendix A row 15). Its
   tab strip is the prototype's modebar pill group and lives INSIDE the pane
   header; what stays behind in the pane body is the content panel, which fills
   what is left of the pane. */
.kz-rc-viewtabs{ display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-sizing: border-box !important; padding: 0 !important; border: 0 !important }

.kz-rc-modebar
{
	display: flex;
	flex: none !important;
	gap: 2px;
	background: #eef1f4;
	border-radius: 7px;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 2px !important;
	box-sizing: border-box !important;
}
.kz-rc-modebar button{ border: 0; background: transparent; padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--muted) }
.kz-rc-modebar button.kz-rc-on{ background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12) }
.kz-rc-modebar button:disabled{ opacity: .4; cursor: not-allowed }
.kz-rc-modebar .tabButton,
.kz-rc-modebar .tabButtonSelected
{
	float: none !important;
	position: static !important;
	border: 0 !important;
	background: transparent !important;
	padding: 5px 12px !important;
	margin: 0 !important;
	border-radius: 5px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--muted) !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	/* the prototype's pill buttons inherit the root's 1.5 line-height */
	line-height: 1.5 !important;
	box-sizing: border-box !important;
	cursor: pointer;
}
.kz-rc-modebar .tabButtonSelected{ background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .12) }

/* The framework writes padding, border and box-sizing inline on every Panel it
   creates, so the panels that ARE ported structure have to win explicitly. */
/* overflow is one of the properties Panel writes inline (setOverflowMode), so
   the guided body scrolls only if the ported value wins the cascade. Without
   this the cards below the fold are clipped away with no way to reach them. */
.kz-rc-guided{ padding: 15px !important; border: 0 !important; box-sizing: border-box !important; flex: 1; min-height: 0; overflow: auto !important }
.kz-rc-region{ border: 1px solid var(--line); border-radius: 9px; padding: 13px; margin-bottom: 12px; position: relative; background: #fff }
.kz-rc-region.kz-rc-marked{ border-color: var(--green-ln); background: #fcfffd }
.kz-rc-region-tag{ display: inline-block; position: absolute; top: -8px; left: 11px; background: var(--green-bg); color: var(--green-dk); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--green-ln) }
.kz-rc-passthru{ border: 1px dashed #d7dde4; border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; background: #fafbfc; color: var(--faint); font-size: 12px; display: flex; align-items: center; gap: 9px }
.kz-rc-fieldrow{ margin-bottom: 13px }
.kz-rc-fieldrow:last-child{ margin-bottom: 0 }
.kz-rc-fieldrow label{ display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px }
/* TextFieldCtrl.onresize writes a pixel width and a pixel height inline on its
   input, so the prototype's full-width field has to win explicitly. Same reason
   as the .kz-rc-btn block above; no new value, only the priority the ported
   rule needs to survive a framework widget. */
.kz-rc-fieldrow input[type=text]{ width: 100% !important; height: auto !important; box-sizing: border-box }
.kz-rc-toggle{ display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; cursor: pointer; user-select: none }
.kz-rc-toggle input{ accent-color: var(--green); width: 15px; height: 15px; cursor: pointer }
/* Checkbox lays its box and its caption out in a table whose font is written
   inline from the skin, so the prototype's toggle size is asked for here. */
.kz-rc-toggle table{ font-size: 13px !important; font-family: inherit !important; line-height: 1.5 !important }
.kz-rc-toggle table td{ padding: 0 !important }
.kz-rc-toggle label{ cursor: pointer }
.kz-rc-fieldrow.kz-rc-tight{ margin-bottom: 0 }
/* A usage list is as long as the report names in it, so the box wraps and breaks
   rather than letting one unspaced name push the editor pane wider. */
.kz-rc-guided-info{ margin-top: 8px; overflow-wrap: break-word; word-break: break-word }
/* The shipped information card centres itself in 640px; inside a region card it
   is the card's own width, and its outer margin is the row gap. */
.kz-rc-guided-info > div{ margin: 0 !important; max-width: 100% !important }
.kz-rc-guided-foot{ display: flex; gap: 7px; flex-wrap: wrap }
/* A segmented bar must YIELD, never push its pane wider. French captions
   ("Au-dessus de la valeur") are half again as long as the English ones, so the
   bar is capped at the row width and its pills wrap their text instead. */
.kz-rc-segbar{ display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; max-width: 100%; box-sizing: border-box }
.kz-rc-segbar button{ border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--muted) }
.kz-rc-segbar button.kz-rc-on{ border-color: var(--green); background: var(--green-bg); color: var(--green-dk) }
/* The prototype's segmented bar is a row of buttons; the shipped widget for a
   segmented choice is RadioButtonSet (plan 4.1), which renders a TableLayout of
   radio inputs. The behaviour is the widget's and the look is the prototype's:
   the radio input is hidden and the option's own container is dressed as the
   pill above. The !important runs are the same reason the .kz-rc-btn block
   carries them - Panel writes its box inline and TableLayout writes its table
   metrics inline, so the ported rule has to be able to win. */
.kz-rc-segbar > table{ border-collapse: separate !important; border-spacing: 5px 0 !important; margin-left: -5px; width: auto !important; max-width: 100% !important; table-layout: auto !important }
.kz-rc-segbar td{ padding: 0 !important; width: auto !important }
.kz-rc-seg{ border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; height: auto !important; width: auto !important }
.kz-rc-seg.kz-rc-on{ border-color: var(--green); background: var(--green-bg); color: var(--green-dk) }
/* RadioButton writes display:table-cell on its input inline, so hiding the
   native control is the one place the ported look has to outrank it. */
.kz-rc-seg input[type=radio]{ display: none !important }
/* Owner finding 5, the segmented bars. RadioButton lays its option out as two
   table cells - the radio input first, the caption second - and hiding the INPUT
   does not remove its CELL: a td holding an element is not :empty, so the
   td:empty rule that used to sit here never matched anything. The cell stayed,
   22px of it (the 11px side padding below, twice), and every pill caption was
   pushed 22px right of its own centre - measured on the Columns bar as 34px of
   space on the left against 12px on the right.

   So the cell that carries the hidden input is hidden with it. What is left is
   the caption cell alone, centred in the pill: equal space either side, and a
   caption long enough to wrap centres its own lines too. */
.kz-rc-seg td:first-child{ display: none !important }
.kz-rc-seg table{ font-family: inherit !important; font-size: 12px !important; height: auto !important }
/* normal, not nowrap: an English caption still sits on one line because it fits,
   and a longer French one wraps inside its own pill rather than widening the pane. */
.kz-rc-seg td{ padding: 4px 11px !important; line-height: 15px !important; white-space: normal; text-align: center }
.kz-rc-flist{ border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.kz-rc-flist .kz-rc-fi{ display: flex; align-items: center; gap: 9px; padding: 6px 10px; font-size: 13px; border-bottom: 1px solid #f0f3f5; background: #fff }
.kz-rc-flist .kz-rc-fi:last-child{ border-bottom: 0 }
.kz-rc-flist .kz-rc-fi.kz-rc-drag-over{ background: var(--green-bg) }
.kz-rc-flist .kz-rc-fi .kz-rc-nm{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kz-rc-flist .kz-rc-fi .kz-rc-ty{ font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px }
.kz-rc-grip{ color: #c2cad3; cursor: grab; flex: none; display: inline-flex; align-items: center }
.kz-rc-flist .kz-rc-flist-empty{ padding: 9px 11px }
.kz-rc-flist .kz-rc-fi .kz-rc-missing{ color: var(--red) }
/* The add-field row: the prototype's select and button sit on one line, and the
   Select2 the framework builds for a Dropdown has to be told it may shrink. */
.kz-rc-addfield{ display: flex; gap: 7px; align-items: center; margin-top: 8px }
.kz-rc-addfield-pick{ flex: 1; min-width: 0; height: auto !important; width: auto !important }
/* Every Dropdown in the guided body fills the row it was put in. Select2 sizes
   itself from an inline width the framework writes, so this is the one place
   the ported layout has to outrank it - stated once for all three of them. */
.kz-rc-addfield-pick .select2-container,
.kz-rc-stylepick-sel .select2-container,
.kz-rc-stylefont .select2-container,
.kz-rc-addfield-pick select,
.kz-rc-stylepick-sel select,
.kz-rc-stylefont select{ width: 100% !important }
.kz-rc-addfield > .kz-rc-btn{ flex: none }
.kz-rc-x{ border: 0; background: transparent; color: var(--faint); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px }
.kz-rc-x:hover{ background: #f0f3f5; color: var(--red) }
/* The totals row carries three strings the account and the language decide the
   length of - the function badge, the field name and the printed label - beside a
   delete control that must stay reachable. A flex item refuses to shrink below its
   content unless it is told it may, so without min-width the row grows past the
   card and pushes the x outside the pane, where elementFromPoint no longer returns
   it. The three text columns yield and ellipsise; only the x is rigid. */
.kz-rc-totalrow{ display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; background: var(--blue-bg); border: 1px solid var(--blue-ln); border-radius: 8px; margin-bottom: 7px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden }
/* The function badge keeps its natural width up to a hard share of the row, so a
   short caption is never clipped and a long translation still cannot push the row
   past the card. The label is capped the same way. The field name is the elastic
   column and yields first; every one of the three carries its full text in a
   title, so nothing an ellipsis hides is lost. */
.kz-rc-totalrow .kz-rc-total-fn{ flex: 0 0 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kz-rc-totalrow .kz-rc-total-name{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kz-rc-totalrow .kz-rc-total-label{ margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 40%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px }
.kz-rc-totalrow .kz-rc-x{ flex: 0 0 auto }
/* The edit control is the delete control's twin - same box, same rigid column -
   so the two read as one pair of row actions. Only the hover colour parts: a
   destructive action goes red, a change does not.

   The pencil is a GLYPH, not the sprite's CORE_ICON_EDIT, because .kz-rc-x
   dresses its control as text: the size and both colours are font properties,
   and the delete x beside it is already the glyph "&#215;". A sprite image
   would not take the hover colour, so half the pair would stop responding and
   the two actions would no longer read as one pair. */
.kz-rc-x.kz-rc-edit{ font-size: 13px }
.kz-rc-x.kz-rc-edit:hover{ background: #f0f3f5; color: var(--blue) }
.kz-rc-x.kz-rc-disabled, .kz-rc-x[disabled]{ opacity: .45; cursor: default }
.kz-rc-x.kz-rc-disabled:hover, .kz-rc-x[disabled]:hover{ background: transparent; color: var(--faint) }
.kz-rc-empty-note{ color: var(--faint); font-size: 12.5px; padding: 6px 0 }
.kz-rc-prev-thumb{ border: 1px solid var(--line); border-radius: 7px; padding: 8px; background: #fbfcfd; margin-top: 8px }
.kz-rc-prev-thumb .kz-rc-cap{ font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); font-weight: 700; margin-bottom: 5px }
.kz-rc-logo-prev{ display: inline-block; width: 44px; height: 44px; border-radius: 6px; background: #e7ebef; background-size: contain; background-repeat: no-repeat; background-position: center }

/* The Appearance section (plan 7.1). The style picker's row is the prototype's
   flex line of select + Apply + Save as new. The !important runs are the same
   reason every other block in this file carries them: Panel writes its box
   inline, so the ported metric has to be able to win. */
.kz-rc-stylepick{ display: flex; gap: 7px; flex-wrap: wrap; align-items: center }
.kz-rc-stylepick-sel{ flex: 1; min-width: 150px; height: auto !important; width: auto !important }
.kz-rc-stylepick > .kz-rc-btn{ flex: none }
/* Dropdown's own container is written display:table-cell inline, and a
   table-cell in a block parent shrinks to fit whatever width is asked for - so
   the font picker has to be made a block before 100% means the row. */
.kz-rc-stylefont{ display: block !important; height: auto !important; width: 100% !important }
/* The prototype's 13px breather between the logo card and the colour rows. */
.kz-rc-style-gap{ height: 13px }
/* A colour and the hex it wrote, on one line. The shipped ColorControl is a hex
   TEXT field with a picker attached rather than a native swatch, so it is given
   the width its own value needs; the .kz-rc-fieldrow rule above stretches every
   text input to the full row, which is what has to be overridden here. */
.kz-rc-colorrow{ display: flex; gap: 8px; align-items: center }
.kz-rc-colorrow .kz-rc-swatch{ flex: none; height: auto !important; width: auto !important }
.kz-rc-colorrow input[type=text]{ width: 92px !important; height: 30px !important; box-sizing: border-box; text-align: center }
.kz-rc-colorrow code{ color: var(--muted) }

/* ---- the Code view's body ------------------------------------------------
   Owner round-3 follow-up E1: "The actual code element should use all the
   height available on the screen."

   Two elements, because one cannot do it. .kz-rc-codewrap is the tab PANEL, and
   a TabControl shows and hides a tab panel by writing display:block /
   display:none as an INLINE style - which beats any class rule, whatever its
   specificity. So the panel's inner display was block whenever it was on
   screen, its three children were laid out as blocks, the editor's flex:1 meant
   nothing and it sat at its min-height with the rest of the pane below the rail
   left empty. Declaring the column here with !important would have beaten the
   display:none as well and left the Code view showing under the Guided one.

   What this element keeps is its OWN place in the pane's column - flex: 1
   against .kz-rc-viewtabs, which is what gives it the pane's leftover height in
   the first place. The column that divides that height up is the plain div
   inside it, which nothing writes inline styles on.

   The three !important runs beat TabControl.addTab, which writes
   "padding: 4px", a 1px top border and "box-sizing: content-box" INLINE on
   every tab panel it is handed. Left alone they would inset the toolbar and
   draw a second rule under the pane's own, and content-box would put the panel
   8px past the height the pane gave it. */
.kz-rc-codewrap{ position: relative; flex: 1; min-height: 0; padding: 0 !important; border: 0 !important; box-sizing: border-box !important }
/* The toolbar, the editor and the diagnostics rail, stacked. height:100% is the
   panel's own height and is definite - the panel is a stretched flex item of
   .kz-rc-viewtabs, whose own height the pane has already settled - so the
   editor's flex:1 has a real box to grow into. */
.kz-rc-codestack{ display: flex; flex-direction: column; height: 100%; min-height: 0 }
.kz-rc-codetools{ display: flex; gap: 7px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); background: #fbfcfd; flex-wrap: wrap; flex: none }
/* The prototype's status note beside the toolbar buttons. It takes the space the
   buttons leave and wraps inside it rather than widening the strip, which is what
   keeps a longer translation of it off the editor. */
.kz-rc-codestatus{ font-size: 11.5px; color: var(--faint); flex: 1 1 120px; min-width: 0; overflow-wrap: break-word }
.kz-rc-linkbar, .kz-rc-copybar{ margin-top: 9px }
.kz-rc-hl-sel{ color: #7a5cc4 }
.kz-rc-hl-prop{ color: #a05a2c }
.kz-rc-hl-var{ color: #2a7a4f; font-weight: 600 }
.kz-rc-legacybar{ margin: 11px 13px }
/* The banner's action button sits beside the message, the way the prototype's
   .infobox .btn does. The box itself is the shipped getInfoMessageHTML card
   (plan 4.2 exception), so the button is placed into it rather than the card
   being reproduced.

   Two corrections keep the message column at the share of the pane the
   prototype gives it (309 of a 527px pane, 59%):

   1. getInfoMessageHTML writes "margin:16px auto" INLINE on its card, so the
      card carried 16px of its own vertical margin on top of the 11px the
      .legacybar rule is supposed to supply. Only !important reaches an inline
      style. The prototype's .infobox is margin:0 for the same reason.
   2. The card is a flex row of icon / message / action. At the editor pane's
      380px the action cannot sit beside a message column of its designed width,
      so the row is allowed to wrap and the action drops to its own line rather
      than squeezing the message to a third of its column. The message keeps a
      floor of 200px, which is what decides when that happens: at the
      prototype's pane width the action still fits beside it and the row does
      not wrap, so the prototype's own layout is unchanged. */
.kz-rc-legacybar > div{ margin: 0 !important; flex-wrap: wrap !important }
/* The component writes "flex:1 1 auto;min-width:0" inline on the message
   column, so both halves of the wrap rule have to outrank it. flex-basis 0
   keeps the message beside the icon (at basis auto its max-content width is
   what flexbox measures for the line break, so the message would take a line of
   its own and leave the icon stranded on the one above); the 200px floor is
   then the only thing that decides whether the action still fits beside it. */
.kz-rc-legacybar > div > div{ flex: 1 1 0 !important; min-width: 200px !important }
.kz-rc-legacybar .kz-rc-btn{ flex: 0 0 auto; align-self: center; margin-left: auto }
/* A banner state has no region cards to inset, and the banner already carries
   the 13px side margin the prototype gives it, so the guided body's own padding
   would indent it a second time - which is what squeezed it. */
.kz-rc-guided.kz-rc-guided-banner{ padding: 0 !important }
/* The editor takes everything the toolbar and the rail leave. min-height is a
   FLOOR and nothing else now that the stack around it is a real flex column -
   it used to be the editor's only height, which is what pinned it to twelve
   lines on a full-height pane. 90px is about five lines of Ace: below that the
   editor stops being usable, and a window short enough to reach it has already
   squeezed the rest of the editor pane past the point of working in.

   box-sizing: border-box !important beats the "box-sizing: content-box" Panel
   writes INLINE on every widget div. The width and height runs are the guard
   beside it: CodeEditor's constructor asks for a 60px height, and a Panel
   allowed to control its own box writes that height inline - which would pin
   the editor at 60px and undo everything above. createEditorPane turns that off
   (m_controlWidth / m_controlHeight false), so today there is no inline width
   or height to beat; the declarations are what keeps it that way if the widget
   is ever wired differently. */
.kz-rc-editstack{ position: relative; flex: 1; min-height: 90px; overflow: hidden; box-sizing: border-box !important; width: auto !important; height: auto !important }
.kz-rc-editstack pre, .kz-rc-editstack textarea{ margin: 0; position: absolute; inset: 0; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.62; white-space: pre-wrap; word-break: break-word; overflow: auto; border: 0; tab-size: 2 }
.kz-rc-editstack pre{ background: #fcfdfe; pointer-events: none; color: var(--ink) }
.kz-rc-editstack textarea{ background: transparent; color: transparent; caret-color: var(--ink); resize: none; outline: none }
.kz-rc-hl-t{ color: #7a5cc4 }
.kz-rc-hl-c{ color: #93a1ad; font-style: italic }
.kz-rc-hl-chip{ background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-ln); border-radius: 4px; padding: 0 3px; font-weight: 600 }
.kz-rc-hl-chip.kz-rc-calc{ background: var(--purple-bg); border-color: var(--purple-ln); color: var(--purple) }
.kz-rc-hl-chip.kz-rc-bad{ background: var(--red-bg); border-color: #f3c6c1; color: var(--red) }
/* The prototype's .hl-mark: the green wash over every data-kz-* attribute, which
   is what tells the author which parts of the markup are the annotated regions
   the guided view writes into.

   The prototype's code area is a highlighted <pre>, so it wraps each match in a
   span. The product's is Ace, which draws a text marker as an absolutely
   positioned div in its own marker layer under the text - so the class has to
   position itself. The colours are the prototype's, unchanged. */
.kz-rc-hl-mark{ position: absolute; background: #eafaf1; border-bottom: 1px solid var(--green-ln) }

/* ---- the DIAGNOSTICS rail ------------------------------------------------
   Owner round-3 follow-up E2: "the 'Diagnostic information' should be on a
   single line when possible."

   The rail used to be a caption row with its own border, and then one row per
   entry - three lines of chrome to say that a clean section is clean. Every
   pixel of it comes off the editor above, so on a clean section it is now ONE
   line: the caption and both ok entries on the same row.

   It WRAPS, it never clips. Entries that do not all fit on the line take
   another one; an entry whose own text is longer than the room left on its line
   wraps inside its own box - min-width: 0 on the list and on each entry is what
   allows that, since a flex item refuses to shrink below its content otherwise.
   A long error message is the one entry that must always be readable in full,
   and it is also the reason the rail exists at all. The list keeps a 170px
   floor, so rather than being squeezed into a two-word column beside the
   caption in a narrow editor pane it drops onto its own line, which is the
   shape the rail had before this change. max-height still bounds the whole
   thing, and what does not fit scrolls. */
.kz-rc-diag{ border-top: 1px solid var(--line); background: #fbfcfd; flex: none; max-height: 128px; overflow: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 12px }
.kz-rc-diag .kz-rc-hd{ font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); flex: none }
.kz-rc-diag ul{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; flex: 1 1 170px; min-width: 0 }
.kz-rc-diag li{ list-style: none; display: flex; gap: 9px; font-size: 12px; align-items: flex-start; min-width: 0; flex: 0 1 auto }
.kz-rc-pill{ font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; flex: none; margin-top: 1px }
.kz-rc-pill.kz-rc-warn{ background: var(--amber-bg); color: var(--amber) }
.kz-rc-pill.kz-rc-ok{ background: var(--green-bg); color: var(--green-dk) }
.kz-rc-pill.kz-rc-err{ background: var(--red-bg); color: var(--red) }

/* The strip's own type size. Its shape - height, padding, overflow - is shared
   with the other two panes' second rows, up beside .kz-rc-edittools. */
.kz-rc-prevbar{ font-size: 12px }
/* The prototype's toolbar carried no Group-by selector - that moved here from
   its appbar (plan 4.4) - and a real field list is far longer than the demo's
   two options, so the selects are capped rather than sized by their content. */
.kz-rc-prevbar select{ max-width: 150px; min-width: 0; text-overflow: ellipsis }
/* The scope and cap selects carry TRANSLATED chrome; the record and group-by
   selects carry DATA whose length nobody controls. So the 150px guard stays on
   the data ones, and the chrome ones size to their own caption - French
   "Donnees d'exemple (5)" needs 172px - bounded by the bar, which wraps. */
.kz-rc-prevbar select#rcPreviewScope, .kz-rc-prevbar select#rcPreviewCap{ max-width: 100% }
.kz-rc-live{ display: flex; align-items: center; gap: 5px; color: var(--green-dk); font-weight: 600; font-size: 11px }
.kz-rc-live b{ width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block }
.kz-rc-live.kz-rc-busy b{ animation: kz-rc-pulse .5s infinite }
/* The render did not come back. The sheet keeps the last good output, so the
   badge is what says the preview is stale; its title carries the reason. */
.kz-rc-live.kz-rc-failed{ color: var(--red) }
.kz-rc-live.kz-rc-failed b{ background: var(--red); animation: none }
@keyframes kz-rc-pulse{ 0%, 100%{ opacity: 1 } 50%{ opacity: .25 } }
.kz-rc-paper{ background: #eef1f4; padding: 14px; flex: 1; overflow: auto; min-height: 0 }
.kz-rc-sheet{ background: #fff; border-radius: 5px; box-shadow: 0 1px 4px rgba(16, 24, 40, .13); padding: 18px; font-size: 12px }
.kz-rc-sheet pre.kz-rc-txt{ margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink) }

.kz-rc-hl{ outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px }
.kz-rc-rep{ position: relative; outline: 1.5px dashed var(--green-ln); outline-offset: 2px; border-radius: 4px }
/* A section whose whole stored chunk is a closing tag - Group By Footer is
   literally "</div>" - owns the END of the element it closes, not the element.
   The group-by indent it closes is as tall as the group, so ringing it reads as
   "everything is selected"; the closing edge is what the section actually is.
   An inset shadow rather than a border, because a border would move the report's
   own layout by two pixels every time the node is clicked. */
.kz-rc-hl-close{ box-shadow: inset 0 -3px 0 var(--green) }

/* The element the CODE view's caret is standing in.
 *
 * It has to read INSIDE the section mark rather than against it, and the two
 * green marks above already own the element's `outline` - an element can carry
 * only one, and the caret element is very often the selected section's own root.
 * So this is drawn with box-shadow instead: a ring hugging the inside edge, plus
 * a hairline just outside it, which fits in the 2px the outlines leave free
 * (they sit at outline-offset: 2px). Neither property takes part in layout, so
 * walking the caret through a chunk cannot move the report a pixel - which is
 * the same reason .kz-rc-hl-close is a shadow and not a border.
 *
 * Blue, not green, because it answers a different question: green is the section
 * you selected, blue is where your caret is. Both are the sheet's own accents.
 *
 * Declared after .kz-rc-hl-close deliberately - they are the only two rules here
 * that write box-shadow, and on the one element that could carry both (a closing
 * section's element with the caret in it) the caret is the more specific answer
 * and should win.
 *
 * The name is hl-caret and not caret because .kz-rc-caret is TAKEN: it is the
 * outline tree's own disclosure chevron, up at line 368, and it declares
 * width: 9px; height: 9px. Marking a rendered report element with that name
 * resized every element the caret landed on to a 9px square.
 *
 * The !important beats the report's OWN inline box-shadow. The shipped card
 * template writes one on the element it opens - the card_open.html of any
 * WEB-INF/report_templates/card folder, "box-shadow: 0 2px 2px
 * rgba(33,61,70,.08), 0 4px 8px rgba(33,61,70,.08)" on div.kz-record-card - and
 * an inline style beats any class rule, so without this the caret mark simply
 * did not appear on a record card. It is measured, not assumed: the computed
 * box-shadow on a marked card was the template's two shadows and neither of
 * these two. .kz-rc-hl above needs no such mark because it writes `outline`,
 * which no shipped template sets inline. */
.kz-rc-hl-caret{ box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 1px var(--blue-ln) !important; border-radius: 3px }

.kz-rc-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 11px }
.kz-rc-emit{ font-family: var(--mono); font-size: 11.5px; background: #f5f7f9; border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; margin-top: 12px; color: var(--muted); word-break: break-all }
.kz-rc-emit b{ color: var(--blue); font-weight: 600 }
/* The Update-from-defaults dialog: the prototype's explanatory paragraph over
   its list of section verdicts. */
.kz-rc-dlgnote{ margin: 0 0 12px; color: var(--muted); font-size: 13px }
.kz-rc-updlist{ overflow: auto }
.kz-rc-secline{ display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid #f2f5f7 }
.kz-rc-secline:last-child{ border-bottom: 0 }
.kz-rc-secline .kz-rc-st{ margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px }
.kz-rc-st.kz-rc-keep{ background: var(--green-bg); color: var(--green-dk) }
.kz-rc-st.kz-rc-upd{ background: var(--blue-bg); color: var(--blue) }
.kz-rc-picker{ max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px }
.kz-rc-pgrp{ padding: 6px 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); background: #fafbfc; border-bottom: 1px solid var(--line); position: sticky; top: 0 }
.kz-rc-pitem{ display: flex; align-items: center; gap: 9px; padding: 7px 11px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f4f6f8 }
.kz-rc-pitem:hover{ background: var(--green-bg) }
.kz-rc-pitem .kz-rc-tag{ margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44% }

/* The authoring dialogs. The prototype's .modal chrome is the framework Dialog
   here, so what is ported is its BODY - .modal .bd - and the two runs the body
   holds that the prototype styled inline.
   A dialog's content Panel is sized by the Dialog, which writes padding, width,
   height and box-sizing onto it as INLINE styles; the prototype's own body
   padding therefore has to be marked to win the cascade, exactly as the
   .kz-rc-btn block above does. */
.kz-rc-dlgbody{ padding: 17px !important; box-sizing: border-box !important; width: auto !important; height: auto !important; border: 0 !important; font-size: 13px }
.kz-rc-dlgbody > .kz-rc-two{ margin-bottom: 13px }
.kz-rc-dlgbody > .kz-rc-two:last-child{ margin-bottom: 0 }
/* Panel writes its margins inline, so the prototype's gap under the search box
   has to be asked for explicitly - same reason as the .kz-rc-btn block above. */
.kz-rc-pickq{ margin-bottom: 11px !important }
.kz-rc-pickq input[type=text]{ width: 100% !important; height: auto !important; box-sizing: border-box }

.kz-rc-warnbar{ padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfd; flex: none }
/* The prototype's `.warnbar .infobox{ margin: 0 }`: the box fills the bar.

   getInfoMessageHTML writes `max-width: 640px; margin: 16px auto` as INLINE
   styles, which centres the card and caps it at 640px - so the Word / PDF
   explanation floated in the middle of an otherwise empty pane instead of
   sitting left-aligned across the top of it, the way the prototype's does. An
   inline style is only beatable with !important. */
.kz-rc-warnbar > div{ max-width: none !important; margin: 0 !important }

/* The framework Tree wraps every node in a table row of its own, and its
   show/hide of a branch writes display:block onto that row. The ported node
   markup lives inside the cell, so the whole wrapper is made block-level to
   match - the table adds nothing of its own. */
.kz-rc-outline{ padding: 0 !important; border: 0 !important; background: transparent !important; box-sizing: border-box !important; width: auto !important; height: auto !important }
.kz-rc-outline table.tree,
.kz-rc-outline table.tree > tbody,
.kz-rc-outline table.tree tr{ display: block; width: 100%; margin: 0; padding: 0; border: 0; border-collapse: collapse }
.kz-rc-outline table.tree td{ display: block; width: 100%; padding: 0; border: 0 }

@media (max-width: 1200px)
{
	.kz-rc-grid3{ grid-template-columns: 1fr }
	.kz-rc-pane + .kz-rc-pane{ border-left: 0; border-top: 1px solid var(--line) }
	/* One column: the panes go back to a row each, and the column each of them
	   names above would otherwise conjure two implicit tracks beside it. */
	.kz-rc-grid3 > .kz-rc-pane{ grid-row: auto }
	.kz-rc-grid3 > .kz-rc-pane:nth-child(1),
	.kz-rc-grid3 > .kz-rc-pane:nth-child(2),
	.kz-rc-grid3 > .kz-rc-pane:nth-child(3){ grid-column: 1 }
	/* Stacked, there is no seam between two columns to drag. The view drops its
	   inline track list at the same breakpoint, so this rule and that one agree. */
	.kz-rc-split{ display: none }
}