/* ── Concept port ─────────────────────────────────────────────────────────────
   Loaded LAST, deliberately.

   The panel had been converging on the concept by overriding the existing card a
   piece at a time, and it never arrived — it read as an imitation, because the
   underlying component was still the old one wearing new paint. The concept is a
   clean-room stylesheet: one spacing scale, one radius, one rule per thing. The
   app is three generations stacked (inline styles, the original sheets, then
   panel.css). Another override layer would have produced another near-miss.

   So this file is the concept's OWN component CSS, transcribed against the app's
   class names rather than reinvented. Where a value appears here it is the value
   from sitecensus-explore-concept-v2.html, not an approximation of it.

   What is deliberately NOT ported: the concept's row is tidier partly because it
   carries less. The app's category header also holds an opacity control and
   reorder arrows. Those are real capability, so they move into the row rather
   than being deleted — see "Demoted controls" at the foot.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Panel header — concept .panel-head ───────────────────────────────────────
   Title and close on one line, with the eyebrow naming the pathway above it.
   The header keeps the panel's gutter (set in panel.css) rather than the
   concept's own padding, so it lines up with the six bands below it. */
#panel-layers .panel-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}
#panel-layers .panel-hdr > div { flex: 1 1 auto; min-width: 0; }
#panel-layers .panel-hdr .res-eyebrow {
  display: block;
  font-size: var(--t-2xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 400;
  margin-bottom: 1px;
}
#panel-layers .panel-close {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--t-md);
  line-height: 1;
  /* Aligns with the title's cap-height rather than the block's top edge. */
  margin-top: 2px;
}
#panel-layers .panel-close:hover { background: var(--surface-tint); color: var(--text); }
#panel-layers .panel-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── One gutter, actually ─────────────────────────────────────────────────────
   The cards sat at 24px while everything else sat at 12, because
   layers.css gives #layer-list-container its own `padding: 0 var(--s5) var(--s5)`
   and the card then adds its own margin on top. Two gutters stacked, which is
   what reads as "the search is wider than the boxes" — it was not; the boxes were
   narrower by exactly one extra gutter.
   The gutter belongs to the CARD, so the container gives up its horizontal
   padding and keeps the bottom. */
#panel-layers #layer-list-container { padding-left: 0; padding-right: 0; }

/* ── Search — concept .srow ───────────────────────────────────────────────────
   A flex row: field takes the space, Reset sits beside it. Replaces a full-bleed
   input with an absolutely-positioned magnifier and a ✕ inside the field. */
#panel-layers .lp-search {
  display: flex;
  gap: var(--s3);
  align-items: center;
}
#panel-layers .lp-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  padding: var(--s3) var(--s4) !important;
  background: var(--navy-mid);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg) !important;
  color: var(--text);
  font: var(--t-md) var(--font) !important;
  outline: none;
}
#panel-layers .lp-search input::placeholder { color: var(--text-faint); }
#panel-layers .lp-search input:focus { border-color: var(--teal); }
#panel-layers #layer-search-reset {
  flex: 0 0 auto;
  padding: var(--s3) var(--s5);
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  color: var(--text-dim);
  font: var(--t-md) var(--font);
  cursor: pointer;
}
#panel-layers #layer-search-reset:hover { border-color: var(--teal); color: var(--teal); }

/* ── The card — concept .cat ──────────────────────────────────────────────── */
#panel-layers .lg {
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  margin: 0 var(--lp-gutter) var(--s2);
  background: var(--navy-mid);
  overflow: hidden;
  box-shadow: none;
}
#panel-layers .lg-hdr {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
#panel-layers .lg-hdr:hover { background: var(--surface-tint); }

/* Name block — concept .cat-txt */
#panel-layers .lg-name { flex: 1 1 auto; min-width: 0; display: block; }
#panel-layers .lg-name b {
  display: block;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
#panel-layers .lg-name small {
  display: block;
  font-size: var(--t-sm);
  color: var(--text-dim);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-layers .lg-total {
  font-size: var(--t-sm);
  color: var(--text-faint);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  margin-left: 0;
}
#panel-layers .lg-count {
  font-size: var(--t-2xs); font-weight: 700;
  color: #06231a; background: var(--teal);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  flex: 0 0 auto;
}
#panel-layers .lg-count:empty, #panel-layers .lg-count.none { display: none; }

/* ── The switch — concept .sw ─────────────────────────────────────────────────
   Built on the existing checkbox rather than replacing it: every toggle handler,
   the tri-state parent logic in layer-counts.js and the bulk on/off actions all
   target that input. appearance:none keeps the element and its events, and
   repaints it. A real <input> also keeps the keyboard and screen-reader
   behaviour a <span role="switch"> would have had to reimplement. */
#panel-layers .lg-toggle { display: flex; align-items: center; flex: 0 0 auto; }
#panel-layers .lg-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative;
  width: 32px; height: 18px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--navy-light);
  border: 1px solid var(--divider);
  cursor: pointer;
  flex: 0 0 auto;
}
#panel-layers .lg-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .16s ease, background .16s ease;
}
#panel-layers .lg-toggle input[type="checkbox"]:checked {
  background: var(--teal-dim);
  border-color: var(--teal-border);
}
#panel-layers .lg-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: var(--teal);
}
/* Tri-state: some children on. Neither off nor fully on, and it should not look
   like either. */
#panel-layers .lg-toggle input[type="checkbox"]:indeterminate {
  background: var(--teal-dim); border-color: var(--teal-border);
}
#panel-layers .lg-toggle input[type="checkbox"]:indeterminate::after {
  transform: translateX(7px); background: var(--teal);
}
#panel-layers .lg-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}

/* Caret — concept .cat-car. Leads the row rather than trailing it: it says
   "there is more inside", which is read before the name, not after.
   No rotation here: the app swaps the GLYPH between ▸ and ▾ in the header's own
   click handler, so rotating as well would turn ▾ sideways. */
#panel-layers .lg-chev {
  order: -1;
  margin-left: 0 !important;
  flex: 0 0 auto;
  width: 10px;
  font-size: var(--t-xs);
  color: var(--text-faint);
}

/* The category colour dot is carried by the map legend, the Review tiles and the
   report. In a list of seven rows it was a seventh thing to read before the name. */
#panel-layers .lg-dot { display: none; }

/* ── Demoted controls ─────────────────────────────────────────────────────────
   Opacity and reorder are real capability and are NOT deleted — they move out of
   the resting row and appear when the card is open, which is when someone is
   actually working on that category.

   Class names are .li-op and .li-reorder (row-chrome.js) — not the ones a guess
   would produce, which is why they are read from the source rather than assumed.
   Revealed via :has() on the app's real open state, .lg-items.expanded, since
   expansion is tracked there and not with a class on the card. */
#panel-layers .lg-hdr > .li-op,
#panel-layers .lg-hdr > .li-reorder { display: none; }
#panel-layers .lg:has(.lg-items.expanded) .lg-hdr > .li-op { display: inline-flex; }
#panel-layers .lg:has(.lg-items.expanded) .lg-hdr > .li-reorder { display: inline-flex; }

/* ── Rows inside a card — concept .lyr ────────────────────────────────────── */
#panel-layers .lg-items { border-top: 1px solid var(--divider); padding: var(--s2); }
#panel-layers .lg-items .li {
  border-radius: var(--r-md);
  padding: var(--s3);
}
#panel-layers .lg-items .li:hover { background: var(--surface-tint); }

/* ── "My data" — concept's two quiet links, not a band ────────────────────────
   The concept demotes this to "Add your own data · Browse a service" under the
   library, with the Baseline hand-off beneath. A titled band with two buttons and
   a dashed drop target is a lot of furniture for a fifth-visit action, and it was
   reading as a section of the library rather than a footnote to it.
   The drop target is kept — it is the actual affordance — but only once you have
   asked for it. */
#panel-layers #my-data-block {
  margin: var(--s7) var(--lp-gutter) 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--divider);
}
#panel-layers #my-data-block > div:first-child { display: none; }   /* the old 1px rule */
#panel-layers #my-data-block .md-add-row { display: flex; gap: var(--s5); }
#panel-layers #my-data-block .md-add {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text-dim) !important;
  font-size: var(--t-md) !important;
  text-decoration: none;
}
#panel-layers #my-data-block .md-add:hover { color: var(--teal) !important; text-decoration: underline; }
/* The uppercase "MY DATA" heading goes; the links say what they do. */
#panel-layers #my-data-block > div:nth-child(2) > span:first-child { display: none; }
#panel-layers #my-data-block > div:nth-child(2) { padding: 0 !important; }
/* The dashed target stays — hiding it would quietly remove drag-and-drop, which
   the concept never had to account for because it had no upload at all. Kept as
   one quiet line rather than a box: still a drop target, no longer furniture. */
#panel-layers #custom-layer-drop {
  margin: var(--s3) 0 0 !important;
  padding: var(--s3) !important;
  border-radius: var(--r-md);
  opacity: .7;
}
#panel-layers #custom-layer-drop:hover,
#panel-layers #custom-layer-drop.drag-over { opacity: 1; }
#panel-layers #custom-layer-drop p { font-size: var(--t-sm) !important; }

/* ── Baseline hand-off ────────────────────────────────────────────────────── */
#panel-layers .lp-seam {
  margin: var(--s5) var(--lp-gutter) var(--s7);
  padding: var(--s5);
  border: 1px dashed var(--divider);
  border-radius: var(--r-lg);
  background: var(--navy-mid);
}
#panel-layers .lp-seam b { display: block; font-size: var(--t-md); margin-bottom: 2px; }
#panel-layers .lp-seam p {
  margin: 0 0 var(--s3);
  font-size: var(--t-sm); color: var(--text-dim); line-height: 1.5;
}
#panel-layers .lp-seam a { color: var(--teal); font-size: var(--t-md); text-decoration: none; }
#panel-layers .lp-seam a:hover { text-decoration: underline; }

/* ── Two line weights and a recessed fill ───────────────────────────────────
   Ported from the concept's own component rules rather than eyeballed. It uses
   --line for a CARD boundary and --line-soft for anything inside one, plus
   --inset as the recessed fill under a control. The app had a single divider
   token and no inset, so a chip was outlined exactly as hard as the card
   containing it, and nothing recessed read as recessed.

   Measured against the concept before and after, in light mode:
     card border   #AAB8C4 -> #D3DDE6
     chip border   #AAB8C4 -> #E2E9F0
     chip fill     transparent -> #EAEFF4
     card radius   8px -> 12px
     card spacing  6px -> 12px                                              */

/* Chips: recessed fill, soft border. Concept .chip. */
#panel-layers .lp-chip,
#panel-layers .lp-more {
  background: var(--inset);
  border-color: var(--divider-soft);
}

/* Group cards: the concept's radius and rhythm. A 6px gap between 8px-radius
   cards reads as a stack of boxes; 12px and 12px reads as separate cards. */
#layer-list-container .lg {
  /* 12px literal, NOT var(--r-lg, 12px) — that token already exists at 8px, so
     the fallback never fired and the radius silently stayed wrong. A var()
     fallback only applies when the property is UNDEFINED, not when it is defined
     to something you did not want. The concept calls this --r-card; the app has
     no equivalent rung, and adding one just for this would re-theme every
     8px-radius surface in the app. */
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Group header: recessed against the card body, separated by the SOFT line —
   this is the seam that was previously drawn at full card weight, which is what
   made every card look like two boxes stacked rather than one card with a head. */
#layer-list-container .lg-hdr {
  background: var(--inset);
  border-bottom: 1px solid var(--divider-soft);
}

/* Rows inside a card separate softly, never at card weight. */
#layer-list-container .lg-items .li-wrap + .li-wrap,
#layer-list-container .sg-children .li-wrap + .li-wrap {
  border-top: 1px solid var(--divider-soft);
}

/* Search: recessed, like the concept's .ex-search. It previously sat on the
   panel fill with a hard border, so it read as raised rather than as a well. */
#panel-layers .lp-search input,
#panel-layers #layer-search {
  background: var(--inset);
}