/* ============================================
   Settlr — Search screen layout
   Genuine screen-specific structure only, scoped under [data-view="search"]
   so it never leaks into other views in the compiled shell. Component styling
   (chip, empty-state, status-bar) lives in component CSS.
   Typography is applied via text-* classes in markup where a token snaps;
   only color + spacing live here. Icon sizing is applied to .icon-holder
   (replacing the former `i { font-size }` rules) so inline SVGs scale exactly
   as the Phosphor <i> glyphs did — zero visual change.

   This is a modal/utility overlay screen with NO bottom-nav dock, so the
   shell's default dock clearance is overridden to the original small padding.
   ============================================ */

/* No bottom dock on this screen — override the shell's dock clearance to the
   original .content padding-bottom (var(--spacing-32)). */
[data-view="search"] .view__content {
  --app-shell-content-pad: var(--spacing-32);
}

/* ── Search Bar ── */
[data-view="search"] .search-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-12);
  background: var(--surface-primary);
  flex-shrink: 0;
}
[data-view="search"] .search-bar__back {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--btn-icon-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-icon-fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
[data-view="search"] .search-bar__back:active { background: var(--btn-icon-bg-pressed); }
[data-view="search"] .search-bar__back .icon-holder { font-size: var(--icon-md); }

[data-view="search"] .search-bar__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 44px;
  padding: 0 var(--spacing-16);
  background: var(--input-bg-focused);
  border: var(--border-medium) solid var(--input-border-focused);
  border-radius: var(--radius-full);
}
[data-view="search"] .search-bar__input-wrap .icon-holder { font-size: var(--icon-sm); color: var(--text-brand); flex-shrink: 0; }
[data-view="search"] .search-bar__input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  outline: none;
}
[data-view="search"] .search-bar__input-wrap input::placeholder { color: var(--input-fg-default); }
[data-view="search"] .search-bar__clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  display: none;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
[data-view="search"] .search-bar__clear .icon-holder { font-size: var(--icon-sm); }

/* ── Section Header ── */
[data-view="search"] .section-header {
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-view="search"] .section-header__label {
  font-family: var(--font-body);
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
[data-view="search"] .section-header__action {
  font-family: var(--font-body);
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Recent Search Chips Row ── */
[data-view="search"] .recents-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-16) var(--spacing-12);
}

/* ── Person Result Row ── */
[data-view="search"] .result-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: var(--border-small) solid var(--contact-divider);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
[data-view="search"] .result-row:active { background: var(--contact-bg-selected); }
[data-view="search"] .result-row:last-child { border-bottom: none; }

[data-view="search"] .result-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--contact-avatar-bg);
  color: var(--contact-avatar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-14);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
[data-view="search"] .result-avatar--group {
  background: var(--action-muted);
  color: var(--action-dark);
  border-radius: var(--radius-8);
}
[data-view="search"] .result-avatar--expense {
  background: var(--expense-owe-bg);
  color: var(--expense-owe-fg);
  border-radius: var(--radius-8);
}
[data-view="search"] .result-avatar--settlement {
  background: var(--expense-lent-bg);
  color: var(--expense-lent-fg);
  border-radius: var(--radius-full);
}
[data-view="search"] .result-avatar .icon-holder { font-size: var(--icon-md); }

[data-view="search"] .result-text { flex: 1; min-width: 0; }
[data-view="search"] .result-text__name {
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  font-weight: var(--weight-semibold);
  color: var(--contact-name);
  line-height: var(--line-height-20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-view="search"] .result-text__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-12);
  font-weight: var(--weight-regular);
  color: var(--contact-subtext);
  line-height: var(--line-height-18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-view="search"] .result-right {
  flex-shrink: 0;
  text-align: right;
}
[data-view="search"] .result-amount {
  font-family: var(--font-display);
  font-size: var(--font-size-13);
  font-weight: var(--weight-semibold);
}
[data-view="search"] .result-amount--owe { color: var(--expense-owe-fg); }
[data-view="search"] .result-amount--lent { color: var(--expense-lent-fg); }
[data-view="search"] .result-chevron { color: var(--border-default); }
[data-view="search"] .result-chevron .icon-holder { font-size: var(--icon-sm); }

/* ── Divider ── */
[data-view="search"] .section-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--spacing-4) 0;
}

/* ── Highlight match ── */
[data-view="search"] mark {
  background: var(--card-create-bg);
  color: var(--text-brand);
  /* NON-TOKEN: 2px radius — no radius token for 2px; kept exact (matches
     original) to avoid a visual change. */
  border-radius: 2px;
  /* NON-TOKEN: 0 1px padding — no spacing token for 1px; kept exact. */
  padding: 0 1px;
}

/* ============================================================
   COMPONENT OVERRIDES TO PROMOTE
   (none — no shared component CSS is overridden by this screen.
   .chip / .empty-state / .status-bar render with their stock styles.)
   ============================================================ */