/* ACQ-AREA-MAP-1: the modelling map Pick area and Grid share (Components/ModelMap.razor): the layers panel with its
   legend swatches and live counts, the dashed-proposal tray, the edge check, and Grid's inactive-cell controls.
   Role and domain tokens only (css/theme.css). */

.aq-model-map { display: grid; gap: 12px; }

.aq-model-layers { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 12px; }
.aq-model-layers-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.aq-model-layers-head .aq-grid-kicker { margin: 0; }
.aq-model-labels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.aq-model-labels .aq-grid-seg button { min-width: 32px; }
.aq-model-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.aq-model-check input, .aq-model-row input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

.aq-model-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.aq-model-group { display: grid; gap: 8px; align-content: start; }
.aq-model-group-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aq-model-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aq-model-rows li { display: grid; gap: 4px; }
.aq-model-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; min-height: 24px; }
.aq-model-name { flex: 1 1 auto; }
.aq-model-count {
  font-family: var(--mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 20px; height: 20px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink);
}
.aq-model-note { font-size: 12px; line-height: 1.45; color: var(--muted); padding-left: 24px; }

/* Legend swatches: the same colours the map draws. */
.aq-model-swatch { flex: none; width: 20px; height: 12px; border-radius: 4px; border: 1px solid var(--line-strong); }
.aq-model-swatch.is-outcrop { background: color-mix(in srgb, var(--aquifer-outcrop) 35%, transparent); border: 1.5px solid var(--aquifer-outcrop); }
.aq-model-swatch.is-subsurface {
  border: 1.5px dashed var(--aquifer-subsurface);
  background: repeating-linear-gradient(135deg, var(--aquifer-subsurface) 0 2px, transparent 2px 5px);
}
.aq-model-swatch.is-faults { height: 0; border: 0; border-top: 2.5px solid var(--fault); border-radius: 0; }
.aq-model-swatch.is-geology { background: linear-gradient(90deg, var(--strata-1), var(--strata-3), var(--strata-5)); }
.aq-model-swatch.is-water { height: 0; border: 0; border-top: 3px solid var(--water); border-radius: 0; }
.aq-model-swatch.is-wells, .aq-model-swatch.is-pumping, .aq-model-swatch.is-springs, .aq-model-swatch.is-gauges { width: 12px; height: 12px; border-radius: 50%; }
.aq-model-swatch.is-wells { background: var(--well-level); border-color: var(--surface); box-shadow: 0 0 0 1px var(--well-level); }
.aq-model-swatch.is-pumping { background: var(--surface); border: 2.5px solid var(--well-pump); }
.aq-model-swatch.is-springs { background: var(--spring); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--spring); }
.aq-model-swatch.is-gauges { background: var(--gauge); border-color: var(--surface); box-shadow: 0 0 0 1px var(--gauge); }
.aq-model-swatch.is-huc8 { height: 0; border: 0; border-top: 2px solid var(--huc-line); border-radius: 0; }
.aq-model-swatch.is-huc12 { height: 0; border: 0; border-top: 1.5px dashed var(--huc-line); border-radius: 0; }
.aq-model-swatch.is-gcd { height: 0; border: 0; border-top: 2px solid var(--gcd-line); border-radius: 0; }
.aq-model-swatch.is-county { height: 0; border: 0; border-top: 1.5px dashed var(--county-line); border-radius: 0; }

/* The dashed proposal: an assistant's edit or an uploaded shape, waiting for Accept or Discard. */
.aq-area-tray {
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1);
  padding: 16px; display: grid; gap: 8px;
}
.aq-area-tray-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--proposal); }
.aq-area-tray-sentence { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.aq-area-tray-facts { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aq-area-tray .aq-step-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aq-area-tray .aq-grid-key { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.aq-grid-key.is-proposal { border: 2px dashed var(--proposal); background: color-mix(in srgb, var(--proposal) 8%, transparent); }
.aq-grid-key.is-focus { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; }
.aq-grid-key.is-inactive { border: 1px solid var(--ink); background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); opacity: .7; }

/* Drawing extras: snap and turn while the boundary is being drawn. */
.aq-area-draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.aq-area-upload { position: relative; overflow: hidden; }
.aq-area-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aq-area-upload:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The edge distance check under the map. */
.aq-area-edge { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aq-area-edge.is-warn { color: var(--on-warn); background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 4px; padding: 8px 12px; }
.aq-area-edge input { width: 64px; height: 28px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }

/* Grid: the lens with the true cells when the map thins the lines (amendment c). */
.aq-grid-lens-item { align-items: center; }
.aq-grid-lens { flex: none; }
.aq-grid-lens-bg { fill: var(--surface-2); }
.aq-grid-lens-lines { fill: none; stroke: var(--accent); stroke-width: 0.8; }
.aq-grid-lens-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.aq-grid-rotation { flex-wrap: wrap; row-gap: 8px; }
.aq-grid-rotation .hx-btn { margin-bottom: 2px; white-space: nowrap; }

/* Grid: inactive cells instead of trimming. */
.aq-inactive { display: grid; gap: 8px; }
.aq-inactive-aquifers { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-left: 24px; }
.aq-inactive-tools { display: flex; flex-wrap: wrap; gap: 8px; }
/* A pressed tool reads as a pressed filter chip (base §3): the accent fill, one at a time. */
.aq-inactive-tools .hx-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.aq-inactive-counts { margin: 0; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (max-width: 1280px) { .aq-model-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .aq-model-groups { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .aq-area-tray { transition: none; } }