/* Stock detail and forecast pages aligned with currency-rate visual language. */

.stock-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #efd5a7;
  border-radius: 12px;
  background: #fff9ef;
  color: #76531d;
  font-size: 14px;
}

.stock-history-chart {
  height: 360px;
}

.stock-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.stock-card-head .rate-eyebrow {
  margin-bottom: 4px;
}

.stock-forecast-teaser h2,
.stock-forecast-section h2 {
  margin-bottom: 4px;
}

.stock-teaser-grid {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.stock-teaser-card {
  display: grid;
  grid-template-columns: minmax(76px, .8fr) minmax(90px, 1fr) auto;
  grid-template-areas:
    "label price delta"
    "meta meta meta";
  gap: 2px 12px;
  align-items: baseline;
  padding: 12px 13px;
  border: 1px solid var(--rate-border);
  border-radius: 11px;
  color: var(--rate-ink);
  text-decoration: none;
  background: #fbfdff;
}

.stock-teaser-card:hover {
  background: #f2f7fd;
  border-color: #c9d9ec;
}

.stock-teaser-card > span {
  grid-area: label;
  color: var(--rate-muted);
  font-size: 12px;
  font-weight: 650;
}

.stock-teaser-card > strong {
  grid-area: price;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stock-teaser-card > em {
  grid-area: delta;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.stock-teaser-card > small {
  grid-area: meta;
  color: var(--rate-muted);
  font-size: 11px;
}

.stock-primary-link,
.stock-back-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.stock-forecast-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.stock-forecast-nav .stock-back-link {
  margin-top: 0;
  white-space: nowrap;
}

.stock-forecast-layout {
  grid-template-columns: minmax(0, 2.15fr) minmax(250px, .85fr);
}

.stock-forecast-section {
  scroll-margin-top: 18px;
}

.stock-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 8px;
}

.stock-summary-grid > div {
  min-width: 0;
  padding: 13px;
  background: #f6f8fb;
  border-radius: 10px;
}

.stock-summary-grid span,
.stock-summary-grid small {
  display: block;
  color: var(--rate-muted);
  font-size: 12px;
}

.stock-summary-grid strong {
  display: block;
  margin: 4px 0;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.positive {
  color: #137a53;
}

.negative {
  color: #bb4251;
}

.neutral {
  color: #52657a;
}

.stock-forecast-chart {
  height: 340px;
}

.stock-forecast-table-wrap {
  margin-top: 18px;
}

.stock-forecast-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.stock-forecast-table th,
.stock-forecast-table td {
  padding: 9px 7px;
  border-bottom: 1px solid var(--rate-border);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.stock-forecast-table th {
  color: var(--rate-muted);
  font-size: 12px;
  font-weight: 600;
}

.stock-forecast-table th:first-child,
.stock-forecast-table td:first-child {
  text-align: left;
}

.stock-forecast-table tr:last-child td {
  border-bottom: 0;
}

.stock-forecast-table small {
  color: inherit;
  font-size: 11px;
}

.stock-empty {
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 10px;
  background: #f6f8fb;
  color: var(--rate-muted);
  font-size: 14px;
}

.stock-forecast-aside {
  position: sticky;
  top: 18px;
}

@media (max-width: 960px) {
  .stock-forecast-layout {
    grid-template-columns: 1fr;
  }

  .stock-forecast-aside {
    position: static;
  }
}

@media (max-width: 700px) {
  .stock-summary-grid {
    grid-template-columns: 1fr;
  }

  .stock-forecast-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .stock-forecast-table,
  .stock-forecast-table tbody {
    display: block;
    width: 100%;
  }

  .stock-forecast-table thead {
    display: none;
  }

  .stock-forecast-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rate-border);
  }

  .stock-forecast-table tr:last-child {
    border-bottom: 0;
  }

  .stock-forecast-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .stock-forecast-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--rate-muted);
    font-size: 11px;
  }

  .stock-forecast-table td:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .stock-history-chart,
  .stock-forecast-chart {
    height: 280px;
  }

  .stock-teaser-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label delta"
      "price price"
      "meta meta";
  }

  .stock-teaser-card > em {
    text-align: right;
  }
}