/* ============================================================
   calc-view-cards.css — aicost.ai v4.1 "View Cards" system
   PetsCalculator-inspired card components.
   Load AFTER calc-pill-group.css. Pure CSS, no JS required
   except severity class swaps in each calc's render().
   ============================================================ */

:root {
  --vc-ink: #1d3a4a;
  --vc-teal: var(--calc-accent, #00a67e);
  --vc-teal-dark: var(--calc-accent-dark, #007a5c);
  --vc-orange: #f4a261;
  --vc-orange-strong: #ff6b1a;
  --vc-coral: #e76f51;
  --vc-peach: #fdf3ec;
  --vc-mint: #e8f5f0;
  --vc-muted: var(--calc-muted, #6b7280);
  --vc-border: var(--calc-border, #e5e7eb);
  --vc-radius: 16px;
  --vc-section-gap: 56px;
}

/* ---------- Rhythm & micro-labels ---------- */
.vc-section { margin: var(--vc-section-gap) 0; }
.vc-micro {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vc-muted);
}

/* ---------- Intro box (above calculator) ---------- */
.vc-intro {
  max-width: 720px; margin: 18px auto 26px; padding: 18px 22px;
  background: var(--vc-peach); border: 1.5px solid var(--vc-orange);
  border-radius: 14px; text-align: center;
  font-size: .975rem; line-height: 1.7; color: var(--vc-ink);
}
.vc-intro strong { color: var(--vc-teal-dark); }

/* ---------- Example chips (one-tap form presets) ---------- */
.vc-example-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.vc-example-chips .vc-chip {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--vc-ink);
  background: var(--vc-peach); border: 1px solid var(--vc-orange);
  border-radius: 999px; padding: 8px 14px; min-height: 38px;
  cursor: pointer; touch-action: manipulation;
  transition: background .12s, color .12s;
}
.vc-example-chips .vc-chip:hover,
.vc-example-chips .vc-chip:active { background: var(--vc-orange); color: #fff; }

/* ---------- Result hero ---------- */
.vc-result-hero {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--vc-border); border-radius: var(--vc-radius);
  padding: 26px 24px 20px; text-align: center; margin-bottom: 16px;
  box-shadow: 0 6px 24px rgba(29,58,74,.07);
}
.vc-result-hero::before {              /* gradient top strip */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--vc-teal), var(--vc-orange), var(--vc-coral));
}
.vc-result-eyebrow { font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vc-ink);
  border-bottom: 1px solid var(--vc-border); padding-bottom: 10px; margin-bottom: 14px; display: block; }
.vc-result-val {
  font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 800; line-height: 1;
  color: var(--vc-coral); font-variant-numeric: tabular-nums; margin: 4px 0 2px;
}
.vc-result-unit { font-size: 1.05rem; font-weight: 700; color: var(--vc-coral); opacity: .85; }
.vc-result-advice {
  margin: 16px auto 8px; max-width: 480px; padding: 12px 16px;
  background: var(--vc-peach); border-radius: 10px;
  font-size: .9rem; line-height: 1.6; color: var(--vc-ink); font-weight: 600;
}
.vc-result-foot { font-size: .74rem; color: var(--vc-muted); margin-top: 10px; line-height: 1.5; }

/* ---------- Stage / risk bar ---------- */
.vc-stage-bar { max-width: 460px; margin: 14px auto 0; padding: 12px 16px;
  border: 1px solid var(--vc-border); border-radius: 12px; background: #fff; }
.vc-stage-labels { display: flex; justify-content: space-between; margin-bottom: 8px; }
.vc-stage-labels span { font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vc-muted); }
.vc-stage-labels span.active { color: var(--vc-coral); }
.vc-stage-track { height: 8px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.vc-stage-fill { height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--vc-teal), var(--vc-orange), var(--vc-coral));
  transition: width .35s ease; }

/* ---------- Full-bleed result (boarding-pass) ---------- */
.vc-result-bleed {
  background: linear-gradient(150deg, #2fae93 0%, var(--vc-teal-dark) 100%);
  border-radius: 20px; padding: 28px 22px; color: #fff; text-align: center;
}
.vc-result-bleed .vc-badge {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  background: rgba(255,255,255,.18); font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px;
}
.vc-result-bleed .vc-bleed-val {
  font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.vc-result-bleed .vc-bleed-sub {
  margin: 16px auto 0; max-width: 440px; padding: 14px 16px;
  background: rgba(0,0,0,.18); border-radius: 12px; text-align: center;
}
.vc-result-bleed .vc-bleed-sub .vc-micro { color: rgba(255,255,255,.75); }

/* ---------- Severity stat cards (top-border coding) ---------- */
.vc-stat { background: #fff; border: 1px solid var(--vc-border); border-top-width: 4px;
  border-radius: 10px; padding: 12px 14px; text-align: center; }
.vc-stat.vc-good   { border-top-color: var(--vc-teal); }
.vc-stat.vc-warn   { border-top-color: var(--vc-orange); }
.vc-stat.vc-danger { border-top-color: var(--vc-coral); }
.vc-stat.vc-danger .vc-stat-val { color: var(--vc-coral); }
.vc-stat-val { font-size: 1.25rem; font-weight: 800; color: var(--vc-ink);
  font-variant-numeric: tabular-nums; }
.vc-stat-sub { font-size: .72rem; color: var(--vc-muted); margin-top: 2px; }

/* ---------- Mini-tile row (key numbers inside a card) ---------- */
.vc-tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.vc-tile { background: var(--vc-peach); border-radius: 10px; padding: 10px 8px; text-align: center; }
.vc-tile .vc-micro { color: #b45309; }
.vc-tile-val { font-size: 1rem; font-weight: 800; color: var(--vc-ink);
  font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- Icon tiles (current stage / next step) ---------- */
.vc-icon-tile { display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--vc-border); border-radius: 14px; padding: 14px 16px; }
.vc-icon-tile .vc-icon { flex: 0 0 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; background: var(--vc-mint); font-size: 1.3rem; }
.vc-icon-tile.warm .vc-icon { background: var(--vc-peach); }
.vc-icon-tile b { display: block; font-size: 1.02rem; color: var(--vc-ink); margin-top: 2px; }

/* ---------- Two-tone guidance pair ---------- */
.vc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vc-pair > div { background: #fff; border: 1px solid var(--vc-border);
  border-radius: 12px; padding: 16px 18px; }
.vc-pair h4 { margin: 0 0 10px; font-size: .95rem; }
.vc-pair-good h4 { color: var(--vc-teal-dark); }
.vc-pair-bad  h4 { color: var(--vc-coral); }
.vc-pair ul { list-style: none; margin: 0; padding: 0; }
.vc-pair li { padding: 5px 0; font-size: .88rem; line-height: 1.55; color: var(--vc-ink); }

/* ---------- Vertical timeline ---------- */
.vc-timeline { position: relative; padding-left: 26px; }
.vc-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--vc-border); }
.vc-tl-item { position: relative; background: #f8fafb; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; }
.vc-tl-item::before { content: ""; position: absolute; left: -26px; top: 18px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid var(--vc-border); }
.vc-tl-item.current { background: #fff; border: 1.5px solid var(--vc-orange); }
.vc-tl-item.current::before { background: var(--vc-orange-strong); border-color: var(--vc-orange-strong); }
.vc-tl-badge { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--vc-peach); color: var(--vc-coral); font-size: .62rem;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vc-tl-item b { color: var(--vc-ink); }
.vc-tl-item p { margin: 6px 0 0; font-size: .87rem; line-height: 1.6; color: var(--vc-ink); }

/* ---------- Numbered step cards ---------- */
.vc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vc-step { background: #fff; border: 1.5px solid var(--vc-teal); border-radius: 12px;
  padding: 18px 16px; text-align: center; box-shadow: 4px 4px 0 var(--vc-mint); }
.vc-step .vc-step-num { width: 34px; height: 34px; margin: 0 auto 10px; display: grid;
  place-items: center; border: 2px solid var(--vc-teal); border-radius: 50%;
  font-weight: 800; color: var(--vc-teal-dark); }
.vc-step h4 { margin: 0 0 8px; color: var(--vc-ink); font-size: .95rem; }
.vc-step p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--vc-ink); }

/* ---------- FAQ pills (native details) ---------- */
.vc-faq details { margin: 14px 0; border-radius: 999px; overflow: hidden;
  background: var(--vc-teal); }
.vc-faq details[open] { background: var(--vc-orange); border-radius: 26px; }
.vc-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 10px; min-height: 52px; margin: 0 10px;
  padding: 10px 22px; background: #fff; border-radius: 999px;
  font-weight: 700; color: var(--vc-ink); text-align: center;
  touch-action: manipulation; }
.vc-faq summary::-webkit-details-marker { display: none; }
.vc-faq summary::after { content: "⌄"; color: var(--vc-teal); font-weight: 800;
  transition: transform .15s; }
.vc-faq details[open] summary::after { content: "⌃"; color: var(--vc-orange-strong); }
.vc-faq .vc-faq-body { background: #fff; margin: 0 10px 10px; padding: 14px 24px 18px;
  border-radius: 0 0 18px 18px; font-size: .92rem; line-height: 1.7;
  color: var(--vc-ink); text-align: center; }

/* ---------- Result actions ---------- */
.vc-result-actions { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 16px; }
.vc-result-actions button, .vc-result-actions a {
  font: inherit; font-size: .85rem; font-weight: 700; min-height: 42px;
  padding: 8px 18px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--vc-border); background: #fff; color: var(--vc-ink);
  touch-action: manipulation; }
.vc-result-actions .primary { background: var(--vc-ink); border-color: var(--vc-ink); color: #fff; }

/* ---------- Inline grow (advanced expander) ---------- */
.vc-grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.vc-grow > div { overflow: hidden; }
.vc-grow.open { grid-template-rows: 1fr; }
.vc-grow-toggle { background: none; border: none; font: inherit; font-size: .88rem;
  font-weight: 700; color: var(--vc-coral); cursor: pointer; padding: 10px 0;
  border-top: 1px dashed var(--vc-border); width: 100%; text-align: left;
  touch-action: manipulation; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --vc-section-gap: 40px; }
  .vc-pair, .vc-steps { grid-template-columns: 1fr; }
  .vc-tile-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .vc-result-hero { padding: 22px 14px 16px; }
  .vc-intro { margin: 14px 14px 20px; }
  /* Stacked segmented control for 3+ long-label options */
  .pill-group--stack { flex-direction: column; gap: 6px; background: #f1f3f5;
    border-radius: 14px; padding: 5px; }
  .pill-group--stack .pill { border: none; background: transparent; border-radius: 10px; }
  .pill-group--stack .pill[aria-pressed="true"] { background: #fff; color: var(--vc-ink);
    box-shadow: 0 2px 8px rgba(29,58,74,.12); font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-stage-fill, .vc-grow, .vc-faq summary::after { transition: none; }
}