/* ── Layer panel ──────────────────────────────────────────────────────────────
   Increment 2 of the redesign. The rail took the navigation density; this takes
   the panel's own. 266px of chrome sat above the first dataset — header, area
   block, four unlabelled list-mode icons, five unlabelled bulk icons, search.

   Same approach as the rail: these are new FRONT-ENDS onto controls that already
   exist. setLayerListMode() writes to #layer-listmode-label and iterates
   .llm-tab (harmlessly empty now); layer-counts.js writes #layer-visible-count.
   Both ids are preserved, so no controller needed changing.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Mode-aware panel header ──────────────────────────────────────────────────
   #panel-layers is shared between Explore→Browse and Assess→Screen. It announced
   "STEP 2 — SCREEN · Choose what to check · Only layers switched on here are
   queried" in BOTH — so browsing told you that you were on step 2 of a workflow
   you had never started. Each mode now gets its own words. */
.panel-hdr .hdr-explore,
.panel-hdr .hdr-assess { display: none; }
body[data-mode="explore"] .panel-hdr .hdr-explore { display: block; }
body[data-mode="assess"]  .panel-hdr .hdr-assess  { display: block; }

/* ── One gutter ───────────────────────────────────────────────────────────────
   The panel had four different left edges — header 14, segment 12, chips 10,
   search 10, cards 12 — because it is three generations of CSS stacked up:
   original inline styles, the old stylesheet, and this one. Nothing was wrong
   individually; together they read as untidy, which is exactly what a side-by-side
   against the concept shows. One value, applied to every band. */
#panel-layers { --lp-gutter: 12px; }
#panel-layers .panel-hdr,
#panel-layers .lp-chips,
#panel-layers .lp-search { padding-left: var(--lp-gutter) !important; padding-right: var(--lp-gutter) !important; }
#panel-layers .lp-seg { margin-left: var(--lp-gutter); margin-right: var(--lp-gutter); }
#panel-layers #explore-foot { padding-left: var(--lp-gutter); padding-right: var(--lp-gutter); }

/* Search styling lives in css/concept-port.css, which ports the concept's .srow
   wholesale. The rule that was here padded the field 30px each side to clear a
   magnifier glyph and a ✕ that no longer exist, and it fought the port for the
   same property — the duplicate-rule trap this file has already sprung twice. */

/* ── Explore's CTA ────────────────────────────────────────────────────────────
   A full-width gradient button is what the app uses for "you are finished here,
   move on". Browsing is not that: the area is optional and the panel should not
   shout at you to leave it. Quiet outline, matching the concept. */
#explore-foot .define-cta {
  background: transparent !important;
  border: 1px dashed var(--divider) !important;
  color: var(--text-dim) !important;
  font-weight: 600 !important;
}
#explore-foot .define-cta:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* ── All / On / Triggers ──────────────────────────────────────────────────── */
.lp-seg {
  display: flex; gap: 2px; padding: 2px;
  margin: var(--s3) var(--s4) 0;
  background: var(--surface-tint);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  flex-shrink: 0;
}
.lp-seg button {
  flex: 1; padding: var(--s2) var(--s3);
  background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--text-dim); font: var(--t-md) var(--font); cursor: pointer;
}
.lp-seg button:hover { color: var(--text); }
.lp-seg button[aria-selected="true"] { background: var(--teal-dim); color: var(--teal); font-weight: 600; }

/* ── Explore's foot ───────────────────────────────────────────────────────────
   #screen-cta is Assess-only, so browsing ended in nothing. This is the seam into
   Assess, and it says browsing costs nothing — which is the actual hesitation. */
#explore-foot { padding: var(--s4) var(--s4) var(--s5); flex-shrink: 0; }
#explore-foot .explore-foot-note {
  margin: var(--s2) 0 0; text-align: center;
  font-size: var(--t-sm); color: var(--text-faint);
}
body[data-mode="assess"] #explore-foot { display: none; }
body[data-mode="explore"] #screen-cta { display: none; }

/* ── Chips ────────────────────────────────────────────────────────────────── */
/* No background and no rule. Painting these bands --navy-dark was a dark-first
   mistake: against --navy it is nearly invisible (#111e2e on #1a2e44), but the
   light theme re-themes the same two tokens to #EEF2F6 on #ffffff, where it reads
   as a grey strip across the top of an otherwise white panel. The concept has one
   panel colour throughout, with contrast carried by the cards and the controls —
   so the bands simply inherit. */
.lp-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: transparent;
  flex-shrink: 0;
}
.lp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px var(--s4);
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font: var(--t-sm) var(--font);
  cursor: pointer; white-space: nowrap;
}
.lp-chip:hover { border-color: var(--teal); color: var(--text); }
.lp-chip b { font-weight: 600; color: var(--text); }
.lp-chip .cv { font-size: var(--t-2xs); color: var(--text-faint); }
.lp-chip[aria-expanded="true"] { border-color: var(--teal); color: var(--text); }

/* The trigger chip wears amber even at rest — deliberately. It is the one filter
   a free catalogue cannot offer, so it should not look like its neighbours. */
.lp-chip.trig { color: var(--amber); border-color: rgba(239,159,39,.24); }
.lp-chip.trig:hover { border-color: var(--amber-border); }
.lp-chip.trig[data-on="true"] {
  background: var(--amber-dim); border-color: var(--amber-border); color: var(--amber); font-weight: 600;
}

.lp-count {
  margin-left: auto;
  font: var(--t-2xs) var(--font);
  color: var(--text-faint);
  letter-spacing: .5px; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── Chip menus ───────────────────────────────────────────────────────────── */
.lp-menu-wrap { position: relative; display: inline-flex; }
.lp-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  min-width: 190px; padding: var(--s2);
  background: var(--navy-mid);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
}
.lp-menu[hidden] { display: none; }
.lp-menu button {
  display: block; width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--text-muted); font: var(--t-md) var(--font); cursor: pointer;
}
.lp-menu button:hover { background: var(--surface-tint); color: var(--text); }
.lp-menu button[aria-selected="true"] { color: var(--teal); font-weight: 600; }
.lp-menu button small { display: block; color: var(--text-faint); font-size: var(--t-sm); font-weight: 400; }
.lp-menu-sec {
  font-size: var(--t-2xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .6px;
  padding: var(--s3) var(--s4) var(--s2);
}
.lp-menu-hr { height: 1px; background: var(--divider); margin: var(--s2) 0; }

/* Overflow trigger — the five bare bulk icons folded into one. */
.lp-more {
  width: 26px; height: 24px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--divider); border-radius: var(--r-pill);
  color: var(--text-dim); cursor: pointer; font-size: var(--t-lg); line-height: 1;
}
.lp-more:hover { border-color: var(--teal); color: var(--text); }

/* ── Panel chrome ─────────────────────────────────────────────────────────────
   266px of furniture sat above the first dataset. The chips took the icon rows;
   this takes the rest — header, area block and search — down to roughly 140px. */

/* The area block collapses until there IS an area. The rail carries a dedicated
   Area entry now, so "Set an area of interest" inside the Layers panel was a
   second door to the same room, occupying the top of the panel Layers exists for.
   Once an area exists the card appears and reads as STATUS rather than an action,
   which is why it stays at the top rather than moving below 340 rows.
   .has-area is set by refreshAoiCard() — the one function that already knows. */
#panel-layers #aoi-block:not(.has-area) { display: none; }

/* Search: was a 50px band of its own. Same control, less housing.
   VERTICAL only — the horizontal edge is set once, with every other band, by the
   --lp-gutter rule below. Setting padding shorthand here was overriding that rule
   (both !important, this one later) and leaving the search box 2px out of line
   with everything above and below it. */
#panel-layers .lp-search { padding-top: var(--s2) !important; padding-bottom: var(--s2) !important; }
#panel-layers .lp-search input { padding-top: 5px !important; padding-bottom: 5px !important; }

/* Header: the summary ran to two full lines at body size. It is orientation, not
   body copy — it should be readable and quiet, not compete with the categories. */
#panel-layers .panel-hdr { padding-top: var(--s3); padding-bottom: var(--s3); }
#panel-layers .panel-hdr .res-title { margin-bottom: 1px; }
#panel-layers .panel-hdr .res-summary {
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--text-dim);
}

/* ── Category rows ────────────────────────────────────────────────────────────
   "01 – REMNANT ECOSYSTEMS & VEGETATION" is a filing code; "Vegetation · 43" is
   an invitation. The name now leads, the description sits under it, and the total
   count is always visible so a collapsed card still says what it holds. */
#panel-layers .lg-name {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  text-transform: none;            /* the old rule shouted these */
  letter-spacing: 0;
}
#panel-layers .lg-name b {
  font-size: var(--t-lg); font-weight: 600; color: var(--text);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-layers .lg-name small {
  font-size: var(--t-sm); color: var(--text-dim); font-weight: 400;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The tag sat flush against the name — "Supporting contextReference". */
#panel-layers .lg-name b .scat-tag { margin-left: var(--s3); }

/* "My data" now sits below the library, so it needs a rule of its own above it
   rather than the tight spacing it had when it led the panel. */
#panel-layers #my-data-block { margin-top: var(--s5); }

#panel-layers .lg-total {
  flex: 0 0 auto;
  font-size: var(--t-sm); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-left: var(--s3);
}

/* ── Superseded panel furniture ───────────────────────────────────────────────
   Hidden, not deleted — same reasoning as the nav strips. list-modes.js still
   iterates .llm-tab and layer-counts.js still writes #layer-visible-count; both
   are preserved inside the new controls so no controller needed touching. */
#layer-listmodes,
#layer-bulk-row { display: none !important; }

/* ── A disabled primary action must look disabled ───────────────────────────
   #screen-cta ("Run the screen") is set .disabled by updateScreenCta() when
   there is no study area yet, or no category switched on. It was still painting
   at full opacity with a pointer cursor and no title, so it was visually
   identical to a working button — pressing it and getting nothing was the only
   feedback the app offered. A primary action that silently does nothing is worse
   than one that is obviously unavailable, because the user's next move is to
   press it again. */
.define-cta:disabled,
#screen-cta:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.35);
}
.define-cta:disabled:hover,
#screen-cta:disabled:hover { opacity: .5; }
/* Same treatment for the buffer controls, which had the identical problem —
   disabled but fully painted, so "Apply" read as broken rather than as waiting
   on a study area. */
#apply-buffer-btn:disabled,
#clear-buffer-btn:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.35); }