/* Case study search (search-case-studies-tool.html). Loaded after project.css; behaviour in js/case-search.js.
   One panel: search bar and "I'm hiring for" presets on top, filter list on the left, results scrolling on the right.
   Phones: the filter list is hidden behind a "Filters" button and takes the results' place when opened. */

.cst-title { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.cst-title .chip { margin-top: 0.4em; }

.cst-panel { --cs-sunk: color-mix(in srgb, var(--card) 55%, var(--paper)); margin-top: var(--space-fluid-2xl); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; height: 780px; max-height: calc(100vh - 32px); min-height: 520px; display: flex; flex-direction: column; }

/* Head: search + presets */
.cst-head { flex: none; padding: var(--space-24) var(--space-24); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-16); background: var(--cs-sunk); }
.cst-search { display: flex; align-items: center; gap: var(--space-12); height: 52px; padding: 0 var(--space-12) 0 var(--space-16); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--faint); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.cst-search:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.cst-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cst-search svg { flex: none; display: block; }
.cst-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); }
.cst-search input::placeholder { color: var(--muted); opacity: 0.8; }
.cst-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cst-clear { flex: none; width: 30px; height: 30px; border: 0; border-radius: var(--radius-pill); background: var(--paper-2); color: var(--muted); font-size: 12px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.2s var(--ease); }
.cst-clear:hover { background: var(--ink); color: var(--paper); transform: rotate(90deg); }
.cst-clear[hidden] { display: none; }

.cst-quick { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.cst-quick-label { color: var(--muted); margin-right: var(--space-4); }
.cst-chips { display: contents; }
.cst-chip, .cst-filters-btn { display: inline-flex; align-items: center; gap: var(--space-8); height: 34px; padding: 0 var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s var(--ease); }
.cst-chip:hover { border-color: var(--accent); }
.cst-chip:active, .cst-filters-btn:active { transform: scale(0.97); }
.cst-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cst-filters-btn { display: none; }
.cst-filters-btn.has-sel { border-color: var(--ink); }
.cst-filters-btn.is-open { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Body: filters + results */
.cst-body { flex: 1; min-height: 0; display: flex; }
.cst-filters { flex: 0 1 270px; min-width: 200px; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-20) var(--space-16); border-right: 1px solid var(--line); background: var(--cs-sunk); display: flex; flex-direction: column; gap: var(--space-24); }
.cst-groups { display: flex; flex-direction: column; gap: var(--space-24); }
.cst-group { display: flex; flex-direction: column; gap: 2px; }
.cst-group-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8) var(--space-8); }
.cst-group-head .mono { color: var(--muted); }
.cst-group-count { font-family: var(--f-mono); font-size: 10.5px; line-height: 1.5; color: #fff; background: var(--accent); border-radius: var(--radius-pill); padding: 0 var(--space-8); }
.cst-tag { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-8) var(--space-8); border: 0; border-radius: var(--radius-8); background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; transition: background 0.15s ease; }
.cst-tag:hover { background: var(--paper-2); }
.cst-tag[aria-pressed="true"] { background: var(--paper-2); font-weight: 600; }
.cst-box { flex: none; width: 16px; height: 16px; border-radius: var(--radius-4); border: 1.5px solid var(--line-strong); background: var(--card); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; transition: background 0.15s ease, border-color 0.15s ease; }
.cst-tag[aria-pressed="true"] .cst-box { background: var(--accent); border-color: var(--accent); }
.cst-tag-label { flex: 1; min-width: 0; }
.cst-tag-n { font-family: var(--f-mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.cst-more { align-self: flex-start; border: 0; background: none; padding: var(--space-8) var(--space-8); font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.cst-more:hover { text-decoration: underline; }
.cst-filters-done { display: none; }

.cst-results { flex: 1 1 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
.cst-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.cst-count { font-weight: 600; color: var(--ink); }
.cst-clear-all { border: 0; background: none; padding: 0; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.cst-clear-all:hover { text-decoration: underline; }
.cst-clear-all[hidden], .cst-empty[hidden] { display: none; }
.cst-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-32); text-align: center; display: flex; flex-direction: column; gap: var(--space-8); align-items: center; }
.cst-empty strong { color: var(--ink); font-weight: 600; }
.cst-empty span { color: var(--muted); font-size: 0.92rem; }

.cst-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.cst-card { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s ease; }
.cst-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.cst-card.is-best { border-color: var(--accent); }
.cst-card-media { flex: 1 1 200px; max-width: 100%; min-height: 150px; background: var(--paper-2); overflow: hidden; display: flex; }
.cst-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--img-dim)); }
.cst-card-body { flex: 2 1 300px; min-width: 0; padding: var(--space-20) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.cst-card-meta { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.cst-best { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: #fff; background: var(--accent); padding: 3px var(--space-8); border-radius: var(--radius-pill); }
.cst-company { color: var(--accent-ink); }
.cst-match { color: var(--muted); margin-left: auto; }
.cst-card h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 420; letter-spacing: -0.012em; line-height: 1.15; color: var(--ink); }
.cst-summary { color: var(--ink-2); font-size: 0.93rem; line-height: 1.5; }
.cst-impact { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.cst-impact strong { color: var(--ink); font-weight: 600; }
.cst-impact span { color: var(--muted); font-size: 0.84rem; }
.cst-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.cst-tags li { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.03em; padding: 3px var(--space-8); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper); color: var(--muted); }
.cst-tags li.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.cst-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-4); color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: gap 0.2s var(--ease), color 0.15s ease; }
.cst-card:hover .cst-link, .cst-link:hover { color: var(--accent-ink); gap: var(--space-12); }

.cst-caption { margin-top: var(--space-16); color: var(--muted); font-size: 0.9rem; }

@media (max-width: 760px) {
  /* The panel fills the screen: search bar on top, results scroll on their own underneath. */
  .cst-panel { height: calc(100svh - 24px); max-height: none; min-height: 480px; }
  /* Search bar with the Filters button to its right; "I'm hiring for" below, then the presets in a sideways-scrolling row. */
  .cst-head { padding: var(--space-16); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); row-gap: var(--space-12); }
  .cst-search { grid-column: 1; grid-row: 1; }
  .cst-quick { display: contents; }
  .cst-filters-btn { display: inline-flex; grid-column: 2; grid-row: 1; height: auto; align-self: stretch; border-radius: var(--radius); }
  .cst-quick-label { grid-column: 1 / -1; grid-row: 2; }
  .cst-chips { display: flex; grid-column: 1 / -1; grid-row: 3; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: -4px -14px 0; padding: 2px var(--space-16) var(--space-4); }
  .cst-chips::-webkit-scrollbar { display: none; }
  .cst-chips > * { flex: none; }
  /* Results take the rest of the panel; the full filter list replaces them while "Filters" is open. */
  .cst-body { flex-direction: column; }
  .cst-results { flex: 1 1 auto; min-height: 0; padding: var(--space-16); }
  .cst-filters { display: none; flex: 1 1 auto; min-width: 0; border-right: 0; padding: var(--space-16); }
  .cst-body[data-filters-open="true"] .cst-filters { display: flex; }
  .cst-body[data-filters-open="true"] .cst-results { display: none; }
  .cst-filters-done { display: inline-flex; position: sticky; bottom: 0; margin-top: auto; flex: none; box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.25); }
  .cst-card-body { padding: var(--space-16) var(--space-16); }
}