/**
 * <concept-card> canonical styles — Phase 3 of the surface-architecture
 * migration.
 *
 * Single owner of the concept-card chrome. Replaces the pre-migration
 * .summary-concept / .summary-concept-head / .summary-concept-title
 * rules that lived in styles.css.
 *
 * Token fallbacks per spec §5.2 so the primitive renders correctly when
 * loaded standalone (e.g. on the dev fixture page that doesn't load
 * styles.css).
 *
 * Per spec §5.4: this file does NOT name slot-tile or slot-grid
 * selectors. The internal slot-grid (summary mode) is sized by
 * slot_grid.css's slot-grid[data-mode="summary"] rules.
 */

/* ============================================================
 * Host element — block-level. Default neutral so canvas mode
 * is transparent. Summary mode below adds the cream chrome.
 * ============================================================ */
concept-card {
  display: block;
  box-sizing: border-box;
}

/* ============================================================
 * Summary mode chrome — cream tint + cinnamon left rule + soft
 * shadow. Pulled verbatim from the pre-migration
 * `.summary-concept` rule in styles.css lines 1669-1682 so the
 * visual treatment is identical pre/post Phase 3.
 *
 * The hover state lifts the border-left to the deeper accent
 * shade — same as the original .summary-concept:hover.
 * ============================================================ */
concept-card[data-mode="summary"] {
  background: var(--accent-tint, #F5EAE0);
  border-radius: var(--radius-lg, 16px);
  padding: 20px 22px 22px;
  box-shadow: inset 0 0 0 1px var(--accent-soft, #E4D4C5),
              var(--shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
  border-left: 4px solid var(--accent, #C97849);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.18s ease,
              border-left-color 0.18s ease,
              transform 0.18s ease;
}
concept-card[data-mode="summary"]:hover {
  box-shadow: inset 0 0 0 1px var(--accent, #C97849),
              var(--shadow-lift, 0 4px 12px rgba(0, 0, 0, 0.08));
  border-left-color: var(--accent-deep, #A85E3B);
}

/* ============================================================
 * Summary mode head — title + status pills laid out horizontally
 * with space-between. Mirrors the pre-migration
 * .summary-concept-head rule in styles.css lines 1684-1687.
 * ============================================================ */
concept-card[data-mode="summary"] .concept-card__head--summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Summary mode title — same visual treatment as the pre-migration
 * .summary-concept-title rule (styles.css lines 1688-1699). Clickable
 * via the JS event listener; CSS just provides hover affordance. */
concept-card[data-mode="summary"] .concept-card__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #2A2520);
  margin: 0;
  transition: color 0.15s, background 0.15s;
}
concept-card[data-mode="summary"] .concept-card__title--clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
}
concept-card[data-mode="summary"] .concept-card__title--clickable:hover {
  color: var(--accent-deep, #A85E3B);
  background: var(--accent-tint, #F5EAE0);
}

concept-card[data-mode="summary"] .concept-card__status-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============================================================
 * H17 — adaptive panel count. Every card in a group reserves a row
 * as wide as the group's longest concept so sibling cards line up.
 *
 * The card sets --summary-min-cols to the group's max_slots (or its
 * own count when no group context). Summary tiles are fixed 160px in
 * a 12px-gap flex-nowrap row (slot_grid.css §summary), so N columns
 * occupy N*160 + (N-1)*12 px. We reserve that as the grid's min-width;
 * shorter concepts then occupy the same width as the longest. The
 * grid still scrolls (overflow-x: auto) if the row exceeds the
 * viewport, so this only PADS short rows, never clips long ones.
 *
 * Falls back to no min-width when the property is unset (e.g. the dev
 * fixture or single-concept use), preserving prior behaviour.
 * ============================================================ */
concept-card[data-mode="summary"] > slot-grid[data-mode="summary"] > .slot-grid__content {
  min-width: calc(
    var(--summary-min-cols, 0) * 160px
    + max(var(--summary-min-cols, 0) - 1, 0) * 12px
  );
}

/* ============================================================
 * Fix C1 — summary description blob. The by-folder API returns
 * concept_description per concept; render it at the bottom of the
 * card, subtle, so the operator gets the pitch at a glance without
 * opening Detail. Normal prose formatting (plain text), muted ink,
 * comfortable line-height. Stays bottom-left because the card is a
 * flex column and this is its last child.
 * ============================================================ */
concept-card[data-mode="summary"] .concept-card__desc {
  margin: 0;
  font-family: var(--body, Inter, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft, #5E564C);
  max-width: 720px;
  white-space: pre-wrap;
}
concept-card[data-mode="summary"] .concept-card__desc[hidden] {
  display: none;
}

/* ============================================================
 * Canvas mode — no outer chrome. The React Flow .cv-node /
 * .cv-concept rules provide the outer box; concept-card just
 * renders the header content laid out by the inner flex.
 *
 * Canvas mode header mirrors the pre-Phase-3 .cv-concept-head
 * layout (canvas.css lines 801-844) so the visual treatment of
 * project icon + title + meta is preserved verbatim.
 * ============================================================ */
concept-card[data-mode="canvas"] {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

concept-card[data-mode="canvas"] .concept-card__head--canvas {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--surface, #FFFDFA);
  border-bottom: 1px solid var(--ink-ghost, #ECE3D8);
  position: relative;
  /* Header is the React Flow node drag handle (matches pre-migration
   * .cv-concept-head behavior). React Flow attaches its own pointer
   * handlers; the cursor here is the visual affordance only. */
  cursor: grab;
}
concept-card[data-mode="canvas"] .concept-card__head--canvas:active {
  cursor: grabbing;
}

concept-card[data-mode="canvas"] .concept-card__head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

concept-card[data-mode="canvas"] .concept-card__head-text {
  min-width: 0;
  flex: 1;
}

concept-card[data-mode="canvas"] .concept-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  background: var(--canvas-deep, #F0E6D6);
}

concept-card[data-mode="canvas"] .concept-card__icon--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display, Inter, sans-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-deep, #A85E3B);
  background: var(--accent-tint, #F5EAE0);
}

concept-card[data-mode="canvas"] .concept-card__title {
  font-family: var(--display, Inter, sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #2A2520);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 760px;
}

concept-card[data-mode="canvas"] .concept-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  color: var(--ink-muted, #7A7269);
}
concept-card[data-mode="canvas"] .concept-card__meta .dot {
  color: var(--ink-faint, #BAB1A6);
}

/* Right-side actions area — flex layout pins it to the right. The
 * surface populates it with the React-rendered OpenInAirtableLink.
 * margin-left: auto guarantees the slot floats right even when the
 * left content doesn't fill the row. */
concept-card[data-mode="canvas"] .concept-card__head-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

/* ============================================================
 * Detail mode — Wave 18D Fix C.
 *
 * The Detail surface is full-bleed: it sits inside the page's main
 * `.frame` block and owns the whole horizontal width. The card here
 * provides a unified header (title + status pills) but NO outer chrome
 * (no cream background, no border-left rule, no inset shadow) — Detail
 * is its own canvas, not a "card in a list" like Summary.
 *
 * The surface places its body content (storyboard section, warm-pool,
 * description grid, actions) as direct children of <concept-card>,
 * appearing AFTER `.concept-card__head--detail` in the DOM. We use
 * flex layout on the host so the head sits at the top and the body
 * stacks naturally below it.
 *
 * Title styling mirrors the pre-Fix-C `.title-block h1` rule in
 * styles.css (lines 620 + 636) so the visual treatment is identical
 * pre/post.
 * ============================================================ */
concept-card[data-mode="detail"] {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

concept-card[data-mode="detail"] .concept-card__head--detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Detail-mode title — mirrors the pre-Fix-C `.title-block h1` rule in
 * styles.css (32px / 1.15 / 600 / -0.02em). */
concept-card[data-mode="detail"] .concept-card__title--detail {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink, #2A2520);
  margin: 0;
}

concept-card[data-mode="detail"] .concept-card__status-row--detail {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}