/* =====================================================
   V13 card styles
   Approved design: V13_card_preview.html
   ===================================================== */

/* ---------- Tone accents (set by the snapshot's "tone") ---------- */

.card {
  --accent: #526172;
  --accent-strong: #344253;
  --accent-border: #a6b2bf;
  --accent-tint: #e9edf2;
  --accent-tint-2: #f4f6f8;
}

.card[data-tone="green"] {
  --accent: #1b7a3a;
  --accent-strong: #146c2e;
  --accent-border: #6fcf8e;
  --accent-tint: #e6f6ea;
  --accent-tint-2: #f1faf3;
}

.card[data-tone="yellow"] {
  --accent: #866300;
  --accent-strong: #664900;
  --accent-border: #d6b64d;
  --accent-tint: #fff3c9;
  --accent-tint-2: #fff9e7;
}

.card[data-tone="orange"] {
  --accent: #a44a13;
  --accent-strong: #7e350b;
  --accent-border: #e5a16c;
  --accent-tint: #fcebdc;
  --accent-tint-2: #fdf5ee;
}

.card[data-tone="red"] {
  --accent: #a63138;
  --accent-strong: #85232b;
  --accent-border: #dd8b91;
  --accent-tint: #fbe8e9;
  --accent-tint-2: #fdf2f3;
}

.card[data-tone="blue"] {
  --accent: #245da8;
  --accent-strong: #1e4885;
  --accent-border: #83ace0;
  --accent-tint: #e7f0fc;
  --accent-tint-2: #f1f6fd;
}

/* ---------- Page ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #f4f6f8;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #141b26;
}

.page {
  padding: 32px 16px;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Card frame ---------- */

/* 3:4 portrait card. aspect-ratio is the preferred shape: when the content needs
   more room (narrow phones, long text) the card grows instead of clipping. */
.card {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--accent-border);
  border-radius: 18px;
  padding: 0 18px 16px;
  box-shadow: 0 2px 10px rgba(20, 40, 30, 0.06);
  overflow-wrap: anywhere;
}

/* Spare height (short text) is shared between the sections, not left at the bottom */
.card { justify-content: space-between; }
.card > * + * { margin-top: 12px; }
.card > .card-alert { margin-top: 14px; }

/* ---------- Header ---------- */

.card-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  margin: 0 -18px;
  padding: 14px 22px 12px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to bottom, var(--accent-tint-2), #fff);
}

.badge {
  width: 52px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
}

.title {
  margin: 0;
  font-size: clamp(22px, 7vw, 28px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
}

.state-icon { justify-self: end; width: 40px; height: 40px; color: var(--accent); }
.state-icon svg { width: 100%; height: 100%; }

/* ---------- Summary ---------- */

.summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px 4px 10px;
}

.divider { width: 1px; height: 70%; background: #d5dbe2; justify-self: center; }

.label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.price { font-size: 30px; font-weight: 800; line-height: 1.15; }
.date  { font-size: 15px; color: #4a5563; }

.risk-col { text-align: center; }

.risk-badge {
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 800;
}

.risk-low  { background: #e2f5e7; color: #146c2e; }
.risk-high { background: #fde4e4; color: #c62828; }

/* Eight-square risk bar: the number of filled squares shows the level (1-8) */
.risk-bar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-width: 150px;
  margin: 7px auto 0;
}

/* Filled squares take the color of the reading (LOW green, HIGH red); empty squares are neutral,
   so the bar always agrees with the LOW / HIGH label above it */
.risk-segment { aspect-ratio: 1; border-radius: 2px; background: #e3e7ec; }
.risk-bar.is-low  .risk-segment.is-filled { background: #2b8c49; }
.risk-bar.is-high .risk-segment.is-filled { background: #bd4148; }

/* ---------- Sections ---------- */

.section { border-radius: 12px; padding: 14px 18px; margin-top: 10px; }

.section-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.target { background: var(--accent-tint); text-align: center; padding: 14px 18px 16px; }

.target-value {
  font-size: 38px;
  font-weight: 900;
  color: var(--accent-strong);
  line-height: 1.15;
}

.target-action { font-size: 17px; font-weight: 700; margin-top: 2px; }

.why { background: #eef0f4; padding-bottom: 18px; }
.why p { margin: 0; font-size: 17px; color: #3b4452; line-height: 1.45; }

.triggers { background: #e9f1fb; }
.triggers .section-title { color: #1a4fa0; }

.trigger-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trigger { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }

.trigger-icon {
  width: 56px;
  height: 44px;
  border-radius: 8px;
  background: #fbdcdc;
  color: #d32f2f;
  display: grid;
  place-items: center;
}

.trigger-icon svg { width: 30px; height: 30px; }

/* Trigger rows that lead to buying or protection use green; DIP rows use blue */
.trigger[data-icon="up"] .trigger-icon,
.trigger[data-icon="shield"] .trigger-icon { background: #dcf2e3; color: #1b7a3a; }
.trigger[data-icon="dip"] .trigger-icon { background: #dfe9fb; color: #245da8; }

.trigger-label { font-size: 16px; font-weight: 800; color: #d32f2f; }
.trigger[data-icon="up"] .trigger-label,
.trigger[data-icon="shield"] .trigger-label { color: #1b7a3a; }
.trigger[data-icon="dip"] .trigger-label { color: #245da8; }
.trigger-text  { font-size: 16px; color: #1f2733; }
.trigger-text strong { font-weight: 800; }
.trigger-note  { font-size: 16px; color: #3b4452; }
.trigger-empty { font-size: 16px; color: #3b4452; }

/* ---------- Error / unavailable ---------- */

.update-status {
  max-width: 640px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff4d6;
  color: #6b4d00;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.error {
  max-width: 640px;
  padding: 16px;
  border-radius: 12px;
  background: #fde4e4;
  color: #8a1c1c;
  font-weight: 600;
}

/* ---------- Signal status, stale warning, simulation ---------- */

.card-alert {
  margin: -4px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4d6;
  border: 1px solid #e3c45c;
  color: #6b4d00;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.card.is-stale { opacity: 0.92; }

/* Short model-output note on the card itself (the longer disclaimer stays in the page footer) */
.card-note {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #4a5563;
}

.card-meta {
  padding-top: 10px;
  border-top: 1px solid #e3e7ec;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6573;
}

.simulation-banner {
  max-width: 640px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fde4e4;
  border: 1px solid #dd8b91;
  color: #85232b;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.page-footer {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
}

.disclaimer {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #5b6573;
}

.link-button {
  border: 0;
  background: none;
  padding: 0;
  color: #245da8;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}