/* --- Modern Fenced Cards (iOS-like) --- */
:root{
  --reef:#2e4a47; --sea-foam:#a8c4b3; --coral:#e9896a;
  --border-strong: rgba(15, 23, 42, .12);
  --border-soft: rgba(15, 23, 42, .06);
  --glass: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  --radius-2xl: 28px; --pill: 999px;
  --shadow-md: 0 14px 30px rgba(15,23,42,.14);
}

/* Base card tweaks */
.card{background: var(--glass); border-radius: var(--radius-2xl); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); overflow: clip; padding: 0}

/* Gradient fence */
.card--fenced{ position: relative; isolation: isolate }
.card--fenced::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(232,137,106,.45), rgba(168,196,179,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.card--fenced::after{
  content:""; position:absolute; inset: -10% -8% auto -8%; height: 40%; border-radius: inherit;
  background: radial-gradient(120% 120% at 0% 0%, rgba(168,196,179,.20), transparent 60%);
  filter: blur(10px); z-index: -1;
}

/* Sections */
.card-head{ padding: .9rem 1rem .4rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem }
.card-title{ font-size: 1.02rem; color: var(--reef); letter-spacing: .02em }
.subhead{ font-size:.86rem; color:#6b7280 }
.card-body{ padding: .7rem 1rem 1rem }
.card-foot{ padding: .6rem 1rem 1rem; border-top: 1px solid var(--border-soft); display:flex; justify-content:flex-end }
.card-titlewrap{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.badge-pill{ font-size: .75rem; padding: .22rem .7rem; border-radius: var(--pill); background: rgba(232,137,106,.12); color: var(--coral); border: 1px solid rgba(232,137,106,.33); white-space: nowrap }
.divider{ height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); margin: .6rem 0 }

/* Utilities */
.soft-note{ font-size: .9rem; color:#4b5563; background: rgba(15,23,42,.03); border:1px dashed rgba(148,163,184,.7); padding:.7rem .8rem; border-radius: 14px; margin-top:.6rem }
.meta-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem .9rem; margin:.7rem 0 }
.meta-grid .label{ font-size: .78rem; color:#9ca3af; text-transform: uppercase; letter-spacing:.12em; margin-bottom:.15rem }
.meta-grid .val{ margin:0; color:#111827; font-weight:500 }
@media (max-width:640px){ .meta-grid{ grid-template-columns: 1fr } }

.list-clean{ list-style: none; margin: .2rem 0 0; padding: 0 }
.list-clean li{ position: relative; padding-left: 1.1rem; margin: .38rem 0 }
.list-clean li::before{ content: ""; position: absolute; left: 0; top: .55rem; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--coral), var(--sea-foam)); box-shadow: 0 0 0 2px rgba(255,255,255,.9) }
.list-clean.neg li::before{ background: var(--coral) }

.card-title .dot{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:.86rem; background: rgba(90,125,124,.08); color: var(--reef); margin-right:.3rem }

.stat-row{ display:flex; flex-wrap: wrap; gap:.4rem; margin-top:.6rem }
.stat-pill{ padding:.28rem .7rem; border-radius:999px; font-size:.78rem; border:1px solid rgba(90,125,124,.35); background: rgba(168,196,179,.18); color: var(--reef) }

.card-stack .card{ height: 100% }