/*
 * The left-hand panel: the saved searches, one of which is open.
 *
 * The criteria used to live here on their own while the searches sat in a strip
 * above the columns. Nothing on screen tied a switch to a card — you threw one
 * on the left and a number changed at the top. Opened in place, a card holds
 * its own criteria and the relationship needs no explaining.
 *
 * Only one card is open at a time. Two would put two sets of switches on screen
 * with only a heading to say which search each belongs to, which is the problem
 * this layout exists to remove.
 */

.search-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.search-list__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--space-2) var(--space-1);
}

.search-list__header b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.search-list__header span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* No border, a soft shadow, and a ring when selected — Emilia's card. A border
 * is subtracted from the box; a ring is painted outside it, so a selected card
 * stays exactly the width of an unselected one. */
.search-card {
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.15s, background 0.15s;
}

/* Active but folded: the listings on the right belong to this card, and the
 * panel has to keep saying so once the criteria are out of sight. */
.search-card--active {
  box-shadow: var(--ring-selected), var(--shadow);
}

.search-card--open.search-card--active {
  box-shadow: var(--ring-selected), var(--shadow);
}

/* The card's identity: its name and what it found, on one line, ruled off from
 * the specification below. Set larger than anything in the panel — the block
 * underneath deliberately looks like a listing, and without a change of
 * register the two would read as one continuous thing. */
/* Two rows: the name, then the figures. On one row a name of three words
 * wrapped through the funnel printed beside it. */
.search-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--line);
}

/* The name takes the width it needs; the pencil holds the right edge. */
.search-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.search-card__facts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Under the bar, and quieter than it: this says what is being counted, which
 * is context rather than the measurement itself. */
.search-card__progress-legend {
  margin: var(--space-1) var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.search-card__progress-legend b {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* Same inner padding as a listing row, so the marks in both columns end at the
 * same distance from their column's right edge — 39px, measured. Four pixels
 * out and the two lines stop reading as one column across the gap. */
.search-card__spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

/* Spans the full width beneath the name and the control, and the marks sit at
 * the same abscissa as the ones on a listing row so the two can be read down
 * the screen as one column. */
/* The summary spans the card, beneath the name and the control. It is the same
 * component a listing row uses, so nothing here restyles it — that would be the
 * start of the two drifting apart again. */
/* Nothing here restyles the shared summary — that would be the start of the
 * two card kinds drifting apart again. */

.search-card__select {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--ink);
}

/* Present at rest, emphasised under the pointer.
 *
 * The desktop convention is to reveal this control on hover and it would suit
 * the primary target — but the same page has to work on an iPad, where there is
 * no hover and the control would simply never appear. Hiding it behind
 * `@media (hover: hover)` would solve that and is the right tool when a list is
 * long enough for the noise to matter; with two or three cards it only costs
 * discoverability on both. */
.search-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Retrieved → still in contention. Two numbers, because one would hide which of
 * the two stages did the narrowing: Immoweb's filters, or ours. */
.search-card__funnel {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.search-card__arrow,
.search-card__funnel-label {
  color: var(--ink-faint);
}

/* Says out loud what the absence of a Save button would otherwise leave the
 * reader to guess. Nothing here is destructive, so nothing needs confirming —
 * but that is only obvious once someone has written it down. */
.search-list__add {
  display: contents;
}

.search-card__new {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  width: 100%;
  padding: var(--space-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.search-card__new:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* The pencil: on the active card only, so it appears once rather than beside
 * every search. Quiet at rest, filled while its panel is open. */
.search-card__edit {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  text-decoration: none;
}

.search-card__edit svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.search-card__edit--on {
  background: var(--accent);
  color: var(--accent-contrast);
}

@media (hover: hover) and (pointer: fine) {
  .search-card__edit:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }
}

/* What a sweep is doing. Absent when there is nothing to say — a badge reading
 * "idle" beside every card would be noise standing in for information. */
.search-card__state {
  flex: none;
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: var(--label-weight);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.search-card__state--blocked,
.search-card__state--failed {
  background: var(--inferred-soft);
  color: var(--inferred);
}

/* How far the running sweep has got.
 *
 * Two states and they say different things. A known fraction fills from the
 * left; an unknown one — a sweep that has not yet counted its pages — sweeps
 * back and forth, because "we are working" and "we are 0 % done" are not the
 * same claim and must not look alike.
 *
 * Two pixels tall: the card already carries a name, a funnel, a state and a
 * button, and this is the one element that has to be read at a glance from
 * across the room rather than studied. */
.search-card__progress {
  height: 2px;
  /* Inset to the card's own padding: the bar sits outside the head, which
     carries it, and flush against the edge it read as a rule rather than as a
     measurement of this card. */
  margin: var(--space-2) var(--space-4) 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.search-card__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.4s ease;
}

.search-card__progress-fill--unknown {
  width: 35%;
  animation: search-card-sweep 1.4s ease-in-out infinite;
}

@keyframes search-card-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}

/* An animation that never stops is a distraction for a reader who has asked
 * not to be moved. The bar stays, the sweeping stops. */
@media (prefers-reduced-motion: reduce) {
  .search-card__progress-fill--unknown {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }

  .search-card__progress-fill {
    transition: none;
  }
}

/* The fraction, beside the phase it belongs to. */
.search-card__state b {
  margin-left: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* The estimate. Lighter than the count beside it, because one is a fact and
 * the other is a guess, and they should not carry the same weight. */
.search-card__eta {
  margin-left: 0.4em;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
}

.search-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.search-card__sweep-form {
  display: contents;
}

/* The one control in the application that spends requests, so it looks like a
 * decision rather than a link. */
.search-card__sweep {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
}

.search-card__sweep[disabled] {
  border-color: var(--line-strong);
  background: var(--surface-sunken);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.search-card__hint {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}