/* The calm pass, Area A, the map workspace (map.js, landuse.js, whatdrains.js, drainage.js, addpractice.js, greenroof.js, boundary-import.js).

   docs/CALM-UI.md. Only this area edits this file; it loads after ui.css,
   so a rule here may quiet a rule in style.css without editing style.css.
   Theme tokens only (no hex), light and dark, phone width. */

/* ---------- a "?" on the map ----------
   The cards and the legend sit in a column that scrolls inside the map
   (.map-bl), and the tool rail floats over it, so a floating note would be
   cut off by the column. There a note opens in the flow, under its line,
   and pushes the card down. A closed note stays out of the flow. */
.map-bl .calm-info-wrap, .map-hint .calm-info-wrap { display: contents; }
.map-bl .calm-pop, .map-hint .calm-pop {
  position: static; display: block; width: auto; max-width: none; margin: 6px 0 2px;
  box-shadow: none; background: var(--sunk); border-color: var(--line); font-size: 12px; line-height: 1.45;
  color: var(--ink-mid); transform: none !important;
}
.map-bl .calm-pop[hidden], .map-hint .calm-pop[hidden] { position: absolute; margin: 0; }
/* The legend's words let the map take the pointer; its "?" must not. */
.map-legend .calm-info-wrap, .map-legend .calm-info { pointer-events: auto; }
.map-legend .lg-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.map-legend .lg-soils { flex-wrap: wrap; }
.map-legend .lg-note .calm-pop, .map-legend .lg-soils .calm-pop, .map-legend .lg-chips .calm-pop { flex-basis: 100%; }
.map-legend .lg-soils .calm-info, .map-legend .lg-chips .calm-info { margin-left: 4px; }
.map-legend .calm-info { width: 16px; height: 16px; font-size: 10px; }

/* The hint under the tools: one line and its "?". */
.map-hint { color: var(--ink-mid); }
.map-hint .calm-info { width: 16px; height: 16px; font-size: 10px; margin-left: 2px; }

/* The map panel's title: its line is behind the "?" beside it. */
.map-panel > h2.with-action { justify-content: flex-start; align-items: center; gap: 8px; }
.map-panel > h2 .calm-pop { font: 400 13px/1.5 var(--sans); }
.map-panel > h2 .calm-pop .panel-sub { display: inline; font: inherit; color: inherit; margin: 0; }
@media (max-width: 640px) {
  .map-panel > h2 .calm-pop .panel-sub { display: inline; }
}

/* ---------- the cards on the map ---------- */
.map-practice .mp-text .calm-info { width: 16px; height: 16px; font-size: 10px; }
.map-practice .da-warn .calm-info { width: 16px; height: 16px; font-size: 10px; margin-left: 2px; }
.wd-off label strong { display: inline; }
.wd-off .calm-info { width: 16px; height: 16px; font-size: 10px; margin-left: 4px; }

/* ---------- "What drains here?" ---------- */
.wd-ot small .calm-info { width: 16px; height: 16px; font-size: 10px; margin-left: 2px; }
.wd-lead .calm-info { margin-left: 2px; }

/* ---------- Add green infrastructure (BMP) ----------
   The list is names. The plain line of a kind shows once it is chosen;
   a group's why is behind its "?". */
.gi-kind:not(.on) .gi-kd { display: none; }
.gi-gh { display: flex; align-items: center; gap: 6px; }
.gi-gh .calm-info { width: 16px; height: 16px; font-size: 10px; }
/* A group's note spans its heading, inside the list that scrolls. */
.gi-gh { position: relative; }
.gi-gh .calm-info-wrap { position: static; }
.gi-gh .calm-pop { left: 0; right: 0; width: auto; max-width: none; }
.gi-after .calm-info { margin-left: 2px; }

/* ---------- Proposed land use ---------- */
#landuse-panel .lu-empty { padding: 8px 0; }
#landuse-panel .lu-empty .lu-lead { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
#landuse-panel .lu-empty .note { margin: 0 0 12px; }
.lu-balance .calm-info { margin-left: 4px; }

/* ---------- Drainage areas ----------
   A quiet empty state (no dashed box), and a "?" beside a field's label
   in place of a line of text under it. */
.da-empty.calm-empty { border: 0; padding: 8px 0; text-align: left; background: none; }
.da-empty .calm-empty-title { margin: 0 0 12px; }
.da-empty .da-empty-acts { justify-content: flex-start; }
.da-empty .calm-pop .da-empty-lead { display: block; margin: 0; max-width: none; font-size: 13px; color: var(--ink); }
.da-lrow { display: flex; align-items: center; gap: 6px; }
.da-hint .calm-info, .da-origin .calm-info, .da-acts .calm-info, .da-ask .calm-info { margin-left: 4px; }
.da-foot { align-items: center; }
.da-results .calm-details.da-notes { margin-top: 12px; }
.da-results .calm-details-body .calm-p + .calm-p { margin-top: 8px; }

/* ---------- Green roof ---------- */
#greenroof-panel .pr-sec h3 { justify-content: flex-start; align-items: center; gap: 8px; }
#greenroof-panel .pr-sec h3 .calm-info-wrap { margin-left: 0; }
#greenroof-panel .pr-condrow .calm-info-wrap { margin-left: 4px; }
#greenroof-panel .pr-field label .calm-info { width: 16px; height: 16px; font-size: 10px; margin-left: 4px; }
#greenroof-panel .gr-weak { padding-top: 6px; padding-bottom: 6px; }
#greenroof-panel .gr-notcounted { margin: 8px 0; }
#greenroof-panel .gr-margin .calm-info-wrap { margin-top: 6px; }

/* ---------- Suggested drainage areas (catchments.js) ----------
   A title, one row per practice (tick, its map color, name, acres), the
   bypass line, one primary button. The swatch color is the practice's map
   color (data, not theme), so it is set inline. */
.ct { padding: 4px 0 8px; }
.ct-title { margin: 0 0 8px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 4px; }
.ct-busy { margin: 0 0 8px; }
.ct-list { list-style: none; margin: 0 0 8px; padding: 0; }
.ct-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ct-row:first-child { border-top: 1px solid var(--line); }
.ct-row input { margin: 0; flex: none; width: 18px; height: 18px; }
.ct-row label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; cursor: pointer; margin: 0;
  text-transform: none; letter-spacing: normal; font: 400 14px/1.4 var(--sans); color: var(--ink); }
.ct-sw { flex: none; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.ct-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ct-ac { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-mid); }
.ct-row.off .ct-name, .ct-row.off .ct-ac { color: var(--ink-soft); }
.ct-row.off .ct-sw { opacity: .35; }
.ct-low { flex: none; font-size: 12px; color: var(--ink-mid); border-bottom: 1px dotted var(--ink-soft); }
.ct-row .calm-info { flex: none; }
.ct-bypass, .ct-skip { margin: 0 0 8px; }
.ct-bypass .calm-info { margin-left: 4px; }
.ct .calm-notice { margin: 0 0 12px; }
.ct .da-acts { margin-top: 12px; }
.ct .ack { margin-top: 12px; }

/* Its labels on the map: the practice's color as a dot, name and acres on
   one line. */
.da-map-label.ct-map-label { display: flex; align-items: center; gap: 6px; border-style: solid;
  border-color: rgba(255,255,255,.55); }
.da-map-label.ct-map-label span { display: inline; }
.da-map-label.ct-map-label i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.da-map-label.ct-map-label.off { opacity: .55; }

/* ---------- Add BMP's progress row, repeated on each step (B2-11) ---------- */
.map-hint .gi-steps { margin: 0 0 4px; font-size: 11px; gap: 2px 10px; }
.gi-steps li.done { color: var(--ink-mid); }
.wd-dialog .gi-steps { margin-bottom: .5rem; }
/* Three actions in the Add BMP dialog: they wrap on a phone, Cancel last. */
.gi-picker .dialog-actions { flex-wrap: wrap; }
@media (max-width: 520px) {
  .gi-picker .dialog-actions [data-gi-cancel] { order: 3; }
}

/* ---------- while a draw tool is armed (B2-05) ----------
   The rail folds to its title row and view switch, the armed tool (pressed, and pressing it
   again stops drawing), the finish buttons and the hint; the
   search, the other tools, the legend and the big cards step aside, so a
   corner click lands on the map. They come back when the shape closes. */
.mapwrap.is-drawing .map-search,
.mapwrap.is-drawing .map-tools .toolgroup:not(:has(#tool-finish)):not(:has(.tool[aria-pressed="true"])),
.mapwrap.is-drawing .map-tools .toolgroup .tool:not([aria-pressed="true"]):not(#tool-finish):not(#tool-undo),
.mapwrap.is-drawing .map-tools #tool-clear,
.mapwrap.is-drawing .map-legend,
.mapwrap.is-drawing .map-practice { display: none !important; }
.mapwrap.is-drawing .map-rail { width: auto; max-width: 300px; }
/* A figure never breaks over two lines. */
.map-practice .mp-area, .map-readout .ro-fig, .map-legend .lg-ac { white-space: nowrap; }

/* ---------- the legend (B2-17) ---------- */
.map-legend .lg-src { flex-basis: 100%; font-size: 11px; color: var(--ink-soft); }
/* Where a drainage area drains, on its own line rather than cut off. */
.lg-row.area .lg-name { white-space: normal; }
.lg-row.area .lg-to { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }