/* Reference tab (WI-000693) — API-docs-style Surface→Component browser inside the
   System panel. Persistent left nav + in-place content pane (no overlay). Uses the
   theme-aware tokens so it follows light/dark like the rest of the app. */

/* Fill the padded panel-content cell edge-to-edge only when it holds the Reference
   two-pane (leaves every other tab's padding untouched). */
.tpanel__content:has(> .refwrap) { padding: 0; }

.refwrap {
  display: flex;
  height: 100%;
  min-height: 440px;
  min-width: 0;
}

/* ---- Left nav ---------------------------------------------------------- */
.refnav {
  flex: 0 0 258px;
  width: 258px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
}
.refnav__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.refnav__search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.refnav__search input::placeholder { color: var(--text-faint); }
.refnav__clear {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
}
.refnav__clear:hover { color: var(--text); }

.refnav__scroll {
  flex: 1;
  overflow: auto;
  padding: 6px 0 14px;
}
.refnav__empty { padding: 12px 14px; font-size: 13px; }
.refnav__empty--sub { padding: 4px 14px 6px 30px; font-size: 12px; }

.refnav__surface { margin-bottom: 2px; }
.refnav__shead {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 6px 4px;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
.refnav__sname {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
}
.refnav__sname i { color: var(--text-faint); font-size: 14px; }
.refnav__sname span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refnav__sopen { flex: 0 0 auto; }

.refnav__twist {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 4px;
}
.refnav__twist:hover { color: var(--text); background: var(--border); }
.refnav__twist--leaf { cursor: default; }
.refnav__twist--leaf:hover { background: transparent; }

.refnav__comp {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
}
.refnav__complabel,
.refnav__result {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  text-align: left;
}
.refnav__complabel:hover,
.refnav__result:hover { background: var(--border); }
.refnav__comp.is-active > .refnav__complabel,
.refnav__result.is-active {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--text);
  font-weight: 600;
}
.refnav__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.refnav__compname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.refnav__count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-faint);
  background: var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

.refnav__results { padding: 4px 6px; display: flex; flex-direction: column; gap: 1px; }
.refnav__result { padding: 6px 6px; }
.refnav__result-surf { flex: 0 0 auto; font-size: 11px; }

/* ---- Drag-to-reorganize (WI-000711) ------------------------------------ */
.refnav__comp[draggable="true"],
.refnav__shead[draggable="true"] { cursor: grab; }
.refnav__comp[draggable="true"]:active,
.refnav__shead[draggable="true"]:active { cursor: grabbing; }

/* Component drop indicators: a line above/below to reorder, an outline to nest. */
.refnav__comp { position: relative; }
.refnav__comp--drop-before::before,
.refnav__comp--drop-after::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--brand); border-radius: 2px; z-index: 3; pointer-events: none;
}
.refnav__comp--drop-before::before { top: -1px; }
.refnav__comp--drop-after::after { bottom: -1px; }
.refnav__comp--drop-onto {
  outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset: -2px; border-radius: 6px;
}

/* Surface header drop indicators: a line to reorder surfaces, a fill to re-home a
   component into the surface. (.refnav__shead is position:sticky, itself a containing
   block for the absolute pseudo-elements — no extra positioning needed.) */
.refnav__shead--drop-before::before,
.refnav__shead--drop-after::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 2px;
  background: var(--brand); border-radius: 2px; z-index: 3; pointer-events: none;
}
.refnav__shead--drop-before::before { top: 0; }
.refnav__shead--drop-after::after { bottom: 0; }
.refnav__shead--drop-home {
  background: color-mix(in srgb, var(--brand) 16%, var(--bg-elevated));
  outline: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: -2px; border-radius: 4px;
}

/* ---- Right content pane ------------------------------------------------ */
.refcontent {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.refcontent__head {
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
}
.refcontent__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.refcontent__title .refnav__dot { width: 10px; height: 10px; }
.refcontent__body {
  flex: 1;
  overflow: auto;
  padding: 14px 16px 16px;
}

/* Section strip — sits on the LIGHT content background, so it can't reuse the
   dark-teal .tpanel__tab colors. */
.refsec {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  margin-top: 12px;
}
.refsec__tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: 13px;
  cursor: pointer;
}
.refsec__tab:hover { color: var(--text); }
.refsec__tab.is-active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }

/* ---- Component detail refinements (WI-000693-005) ---------------------- */
/* Top row: Component name (+ slug subtext) · Surface · Parent Component, inline,
   wrapping only on a narrow panel. */
.cdetail__top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cdetail__namecol { flex: 2 1 240px; min-width: 190px; display: flex; flex-direction: column; }
.cdetail__field { flex: 1 1 160px; min-width: 150px; display: flex; flex-direction: column; }
.cdetail__label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 5px; }
.cdetail__slug { font-size: 12px; color: var(--text-faint); margin-top: 5px; }
.cdetail__inline { display: flex; gap: 6px; align-items: center; }
.cdetail__inline .select { flex: 1; min-width: 0; }

/* Detail selects (Surface / Parent Component) match the text .input — same
   border/background/height/radius/padding — plus a dropdown caret via an inline
   SVG chevron. SCOPED to the detail; the global .select stays untouched
   (WI-000693-006). */
.select--field {
  width: 100%;
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px 34px 8px 10px;
  font: inherit;
  line-height: 1.5;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.select--field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }
.select--field:disabled { opacity: 0.55; cursor: not-allowed; }

/* Right-aligned header controls group (Save + ⋯) — shared by the Reference
   header and the overlay ComponentPanel header (WI-000693-006). */
.cdetail__headctl { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cdetail__headctl .btn { flex: 0 0 auto; }
.cdetail__headctl .ovfmenu { margin-left: 0; }

/* Compact, left-aligned color swatches (vs the full-width .swatchgrid). */
.swatchrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Features folded into Details as a subsection. */
.cdetail__features { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.cdetail__subhead { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }

/* Header ⋯ overflow menu (shared by the Reference header + overlay ComponentPanel). */
.ovfmenu { position: relative; display: inline-flex; }
.refcontent__title .ovfmenu { margin-left: auto; }
.ovfmenu__scrim { position: fixed; inset: 0; z-index: 20; }
.ovfmenu__pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 21;
  min-width: 184px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.ovfmenu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.ovfmenu__item:hover { background: var(--border); }
.ovfmenu__item--danger { color: #EF4444; }
.ovfmenu__item--danger:hover { background: color-mix(in srgb, #EF4444 14%, transparent); }
.ovfmenu__sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* Detail-panel title row that carries the ⋯ menu (WI-000695-001). */
.tpanel__title--withmenu { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpanel__title--withmenu > span { min-width: 0; }

/* Landing (no component selected) */
.refcontent--landing { align-items: center; justify-content: center; }
.refland {
  max-width: 420px;
  text-align: center;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.refland > i { font-size: 40px; color: var(--text-faint); }
.refland__title { font-size: 20px; font-weight: 600; color: var(--text); }
.refland__stats { display: flex; gap: 8px; margin-top: 6px; }