/* ============================================================
   Gantry web — Lists workspace                    #/lists · #/lists/:id
   Layout + motion for surfaces/web/lists.jsx. Tokens only.
   ============================================================ */

.cg-l-page { display: flex; flex-direction: column; gap: 16px; }
.cg-l-wait {
  font-family: var(--font-serif); font-size: 14px; color: var(--fg-3);
}

.cg-l-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cg-l-h1 {
  margin: 6px 0 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: 32px; line-height: 1.08; letter-spacing: -0.01em; color: var(--fg);
}
.cg-l-lede {
  margin: 8px 0 0; max-width: 60ch;
  font-size: 13px; line-height: 1.5; color: var(--fg-2);
}

/* ---------- Rename / delete, on the heading ----------
   The two controls sit in reserved space beside the name and fade up into it
   on hover, so the heading does not reflow when they arrive. While hidden the
   row takes NO pointer events: at opacity 0 they are still real buttons, and
   an invisible delete under the cursor is the one accident this whole gesture
   exists to avoid. They stay tabbable, and :focus-within reveals them for the
   keyboard — which is also why the reveal is not a React hover state. */
.cg-l-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cg-l-title-acts {
  display: inline-flex; align-items: center; gap: 2px;
  flex: none; pointer-events: none;
}
.cg-l-title:hover .cg-l-title-acts,
.cg-l-title:focus-within .cg-l-title-acts { pointer-events: auto; }

.cg-l-title-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--fg-4); cursor: pointer;
  opacity: 0; transform: translateX(-6px) scale(.9);
  transition: opacity .18s var(--ease), transform .18s var(--ease),
              background .14s var(--ease), color .14s var(--ease);
}
/* The delete trails the edit in, so the pair reads as a sequence rather than
   a block landing at once. The delay is per-property, in the order the
   transition above declares them: it belongs to the REVEAL, and a bare
   `transition-delay` would also lag this button's own hover feedback. */
.cg-l-title-act + .cg-l-title-act { transition-delay: .05s, .05s, 0s, 0s; }
.cg-l-title:hover .cg-l-title-act,
.cg-l-title:focus-within .cg-l-title-act { opacity: 1; transform: none; }
.cg-l-title-act:hover { background: var(--bg-hover); color: var(--fg); }
.cg-l-title-act-bad:hover { color: var(--bad); }
.cg-l-title-act:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* A touch pointer has no hover to reveal them with, so they are simply
   there — the gesture the reveal buys back is one a phone never makes. */
@media (hover: none) {
  .cg-l-title-acts { pointer-events: auto; }
  .cg-l-title-act { opacity: 1; transform: none; }
}

.cg-l-body {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px;
  align-items: start;
}
@media (max-width: 1000px) { .cg-l-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Rail ---------- */
.cg-l-rail { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cg-l-rail-section { display: flex; flex-direction: column; gap: 4px; }
.cg-l-rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cg-l-rail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 8px; margin: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 12.5px; color: var(--fg-2); text-align: left;
  cursor: pointer; min-width: 0;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.cg-l-rail-row:hover { background: var(--bg-hover); color: var(--fg); }
.cg-l-rail-row[data-active="true"] {
  background: var(--bg-hover); color: var(--fg); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand);
}
.cg-l-rail-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cg-l-rail-name {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-l-rail-n { font-size: 11px; color: var(--fg-4); flex: none; }
/* The kind glyph never shrinks and the NAME is the child that elides, so a
   narrow rail eats the name's tail rather than the mark that says what the
   list is about. */
.cg-l-rail-kind { flex: none; display: inline-flex; color: var(--fg-4); }
.cg-l-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A saved search's number is live, and the rail says so in its own colour. */
.cg-l-rail-live { color: var(--brand-text); }
.cg-l-rail-empty {
  margin: 4px 8px 0; font-size: 11.5px; line-height: 1.45; color: var(--fg-4);
}
.cg-l-rail-note { margin: 6px 8px 0; font-size: 10px; color: var(--fg-4); }

.cg-l-create { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 10px; }
.cg-l-create .cg-input { width: 100%; }
.cg-l-create-btns { display: flex; gap: 8px; }

/* ---------- Main ---------- */
.cg-l-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cg-l-overview {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.cg-l-explain {
  margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--fg-2);
}
.cg-l-explain-n { font-size: 34px; line-height: 1; }

.cg-l-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.cg-l-toolbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cg-l-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-l-count { font-size: 11px; color: var(--fg-3); }
/* GUI.Switch's `label` is the ACCESSIBLE name, not visible text, so the
   control is paired with its own words rather than left as a bare toggle. */
.cg-l-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-2); cursor: pointer;
}
.cg-l-missing { color: var(--warn); }

.cg-l-search {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.cg-l-search .cg-input { width: 280px; max-width: 100%; }
.cg-l-picked {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--fg-2);
  animation: cg-l-rise .25s var(--ease) both;
}

/* ---------- Table ---------- */
.cg-l-table-card { overflow: hidden; }
.cg-l-rows { list-style: none; margin: 0; padding: 0; }
.cg-l-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  animation: cg-l-rise .38s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 18ms);
}
.cg-l-row:last-child { border-bottom: 0; }
.cg-l-row:hover { background: var(--bg-hover); }
.cg-l-row-tick { display: inline-flex; flex: none; }
.cg-l-row-tick input { accent-color: var(--brand); }
.cg-l-avatar { width: 28px; height: 28px; font-size: 10.5px; flex: none; }
.cg-l-row-main {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.cg-l-row-main:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cg-l-row-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg);
}
.cg-l-row-sub { font-size: 10.5px; color: var(--fg-4); }

/* ---------- Strategic Insights ---------- */
.cg-l-insights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.cg-l-insight {
  animation: cg-l-rise .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.cg-l-insight-quiet {
  margin: 10px 0 0; font-size: 11.5px; color: var(--fg-4); line-height: 1.45;
}
.cg-l-insight-cards { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.cg-l-insight-card { display: flex; flex-direction: column; gap: 5px; }
.cg-l-insight-year { font-size: 10px; color: var(--fg-4); }
.cg-l-insight-title {
  font-size: 12px; line-height: 1.35; color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cg-l-insight-who { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cg-l-chip {
  width: 22px; height: 22px; padding: 0; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--fg-3);
  font: inherit; font-size: 9px; letter-spacing: .02em; cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.cg-l-chip:hover { border-color: var(--brand); color: var(--fg); }
.cg-l-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cg-l-chip-more { font-size: 10px; color: var(--fg-4); }

@keyframes cg-l-rise {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-l-row, .cg-l-insight, .cg-l-picked { animation: none; }
  .cg-l-rail-row, .cg-l-chip { transition: none; }
  /* Still hidden until hover — the reveal is the point; only the travel and
     the fade go. */
  .cg-l-title-act { transition: none; transform: none; }
}

/* ---------- Rename / delete overlays ---------- */
.cg-l-overlay { width: min(440px, 100%); }
.cg-l-overlay-head { flex: 1; min-width: 0; }
.cg-l-overlay-title {
  margin-top: 3px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: 19px; line-height: 1.2; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-l-overlay .cg-input { width: 100%; }
.cg-l-overlay-copy {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-2);
}
.cg-l-overlay-copy:first-child { margin-top: 0; }
.cg-l-overlay-warn { margin: 8px 0 0; font-size: 11px; color: var(--warn); }
.cg-l-overlay-spacer { flex: 1; }
.cg-l-overlay-err {
  margin-top: 14px; padding: 10px 12px;
  border-left: 3px solid var(--bad); border-radius: var(--r-sm);
  background: var(--bg-hover);
}
.cg-l-overlay-err-t { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.cg-l-overlay-err-d {
  margin-top: 3px; font-size: 11.5px; line-height: 1.45;
  color: var(--bad); word-break: break-word;
}

/* ---------- View switcher projections (PROD-41) ---------- */
.cg-l-views { flex: none; }
.cg-l-map-card { overflow: hidden; position: relative; }
/* An explicit height, and explicit width/height on the map itself: MapLibre
   stamps `position: relative` on its container, which beats an absolutely
   positioned `inset: 0` and collapses the element to nothing — no error, and
   a canvas that paints one row of pixels. */
.cg-l-map { width: 100%; height: 520px; }
@media (max-width: 1000px) { .cg-l-map { height: 400px; } }
.cg-l-map-note {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 9px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 10px; color: var(--fg-3);
  pointer-events: none;
}
.cg-l-network { display: flex; flex-direction: column; gap: 8px; }
.cg-l-network-note {
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--fg-2);
}
.cg-l-network-note strong { color: var(--fg); font-weight: 600; }