/* Citywide Impact Summary section builder (builder.js) — the one stylesheet.
 *
 * cis/editor.html (light, served at /editor.html) and portal/dashboard.html
 * (dark, compose mode) both load it as /cis-builder.css, right after their own
 * <style>. It styles only the markup builder.js emits (the cis-* classes). Each
 * page's chrome around the builder stays in that page.
 *
 * Every value that differs between the two pages is a --cis-* custom property,
 * and each page sets all of them in its own <style>. Nothing here has a default,
 * so a page cannot quietly pick up the other page's palette.
 *
 *   --cis-line  --cis-muted  --cis-mono                  palette and fonts
 *   --cis-sec-edge  --cis-sec-radius  --cis-sec-pad
 *   --cis-sec-margin  --cis-sec-bg                       section card
 *   --cis-off-opacity  --cis-off-edge
 *   --cis-off-body-opacity                               an excluded section
 *   --cis-head-gap  --cis-head-weight  --cis-head-size
 *   --cis-title-size  --cis-meta-size  --cis-meta-font
 *   --cis-inc-size  --cis-inc-order  --cis-inc-push      section header
 *   --cis-body-gap  --cis-item-gap  --cis-lbl-width
 *   --cis-st-min                                         item lines
 *   --cis-del-ink  --cis-del-line  --cis-del-pad
 *   --cis-add-ink  --cis-add-line  --cis-add-pad
 *   --cis-btn-size  --cis-btn-radius                     remove / add buttons
 *   --cis-th-size  --cis-th-pad  --cis-promote-th-end
 *   --cis-row-head-ink  --cis-cell-min  --cis-fcell-width
 *   --cis-hint-margin                                    tables and forestry grid
 *   --cis-advisory  --cis-warning  --cis-option-bg       severity (issue #118)
 */
.cis-sec{border:1px solid var(--cis-line);border-left:var(--cis-sec-edge);border-radius:var(--cis-sec-radius);
         padding:var(--cis-sec-pad);margin:var(--cis-sec-margin);background:var(--cis-sec-bg)}
.cis-sec.cis-off{opacity:var(--cis-off-opacity);border-left-color:var(--cis-off-edge)}
.cis-sec.cis-off .cis-body{opacity:var(--cis-off-body-opacity)}
.cis-sec-head{display:flex;align-items:center;gap:var(--cis-head-gap);flex-wrap:wrap;
              font-weight:var(--cis-head-weight);font-size:var(--cis-head-size)}
.cis-sec-title{font-weight:700;font-size:var(--cis-title-size)}
.cis-sec-meta{font-weight:400;font-size:var(--cis-meta-size);font-family:var(--cis-meta-font);color:var(--cis-muted)}
.cis-inc-wrap{order:var(--cis-inc-order);margin-left:var(--cis-inc-push);font-weight:400;font-size:var(--cis-inc-size);
              display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;color:var(--cis-muted)}
.cis-body{margin-top:var(--cis-body-gap)}
/* Controls sit at the top of a tall row, beside the first line of text. */
.cis-item{display:flex;gap:var(--cis-item-gap);align-items:flex-start;margin-top:6px}
.cis-lbl{width:var(--cis-lbl-width)}
.cis-st{flex:1;min-width:var(--cis-st-min)}
/* Label and status boxes are textareas that wrap and grow with their text
   (builder.js fit()), so a long line is never hidden past the box edge. Table
   cells stay one line and show their full text as a tooltip. */
textarea.cis-lbl,textarea.cis-st{display:block;resize:none;overflow:hidden;box-sizing:border-box;
         font-family:inherit;line-height:normal;white-space:pre-wrap;overflow-wrap:anywhere}
.cis-sev{font-size:12px;padding:5px 6px;max-width:150px}
/* The status box wears the colour the email will use, so a reassurance left
   sitting on a feed's warning severity is visible (issue #118).
   --cis-line-ink is set on the status box and the picker themselves. A page whose
   own field rule sets `color` at higher specificity (the portal's
   `#cisComposer input`) reads it there, or every line shows in one colour. */
.cis-item[data-sev="advisory"] .cis-st,
.cis-item[data-sev="advisory"] .cis-sev{--cis-line-ink:var(--cis-advisory)}
.cis-item[data-sev="significant"] .cis-st,
.cis-item[data-sev="significant"] .cis-sev{--cis-line-ink:var(--cis-warning)}
.cis-item[data-sev="advisory"] .cis-st,
.cis-item[data-sev="advisory"] .cis-sev,
.cis-item[data-sev="significant"] .cis-st,
.cis-item[data-sev="significant"] .cis-sev{color:var(--cis-line-ink);font-weight:600}
/* Each option keeps its own colour. Without these they inherit the select's, so
   the open list shows every choice in the colour already picked. Both pages draw
   the open list in the email's own colours, so Normal reads black. */
.cis-sev option{background:var(--cis-option-bg)}
.cis-sev option[value="normal"]{color:#1a1a1a;font-weight:400}
.cis-sev option[value="advisory"]{color:#a8660a;font-weight:600}
.cis-sev option[value="significant"]{color:#b3261e;font-weight:600}
.cis-rt{width:70px;font-family:var(--cis-mono);font-size:12px;box-sizing:border-box}
.cis-del,.cis-add-item,.cis-add-row{background:transparent;font-size:var(--cis-btn-size);
         border-radius:var(--cis-btn-radius);cursor:pointer}
.cis-del{color:var(--cis-del-ink);border:1px solid var(--cis-del-line);padding:var(--cis-del-pad)}
.cis-add-item,.cis-add-row{color:var(--cis-add-ink);border:1px solid var(--cis-add-line);
         padding:var(--cis-add-pad);margin-top:8px}
.cis-scroll{overflow-x:auto}
.cis-table,.cis-ftable{width:100%;border-collapse:collapse}
.cis-table th,.cis-ftable th{font-size:var(--cis-th-size);text-align:left;color:var(--cis-muted);font-weight:600;
         padding:var(--cis-th-pad)}
.cis-ftable th[scope=row]{color:var(--cis-row-head-ink);font-size:12.5px}
.cis-cell{width:100%;min-width:var(--cis-cell-min)}
.cis-fcell{width:var(--cis-fcell-width)}
.cis-promote-cell{width:1%;white-space:nowrap;text-align:center;padding-right:10px}
/* The header cell above the ticks: --cis-th-pad outranks the rule above there. */
.cis-table th.cis-promote-cell{padding-right:var(--cis-promote-th-end)}
.cis-hint{font-size:11px;color:var(--cis-muted);margin:var(--cis-hint-margin)}