/*
  Component — Stock search + stock placeholder
*/

.search-page,
.stock-page {
  padding-bottom: var(--space-6);
}

.search-page__header,
.stock-page__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.search-page__back,
.stock-page__back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.search-page__back img,
.stock-page__back img {
  width: 18px;
  height: 18px;
  opacity: 0.72;
}

.search-page__input-wrap {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.search-page__input-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  flex-shrink: 0;
}

.search-page__input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.search-page__target {
  display: flex;
  align-items: center;
  min-height: 28px;
  gap: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

#search-target-label {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-semibold);
}

.search-page__section-title {
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
}

.search-page__list {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.search-row {
  cursor: pointer;
}

.search-row__add {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.search-row__add img {
  width: 20px;
  height: 20px;
}

.search-row__add.is-added {
  opacity: 0.55;
}

.search-page__empty {
  padding: var(--space-10) 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.stock-page__title-wrap {
  min-width: 0;
}

.stock-page__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.stock-page__subtitle {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.stock-page__body {
  display: grid;
  gap: var(--space-3);
}

.stock-page__quote {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.stock-page__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.stock-page__price {
  margin-top: var(--space-1);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.stock-page__change {
  padding-bottom: 4px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.stock-page__price.is-up,
.stock-page__change.is-up { color: var(--color-up); }
.stock-page__price.is-down,
.stock-page__change.is-down { color: var(--color-down); }
.stock-page__price.is-flat,
.stock-page__change.is-flat { color: var(--color-flat); }

.stock-page__placeholder {
  padding: var(--space-10) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}