/* ── CARDS ──────────────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: #b3c8e8;
}
.card-title  { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 5px; }
.card-desc   { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Compact card variant — used inside region groups */
.card-compact { padding: 10px 13px; }
.card-compact .card-title  { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.card-compact .card-desc   { font-size: 11px; color: var(--text-muted); }
.card-compact .card-badges { margin-top: 6px; }

/* Condition region groups */
#condition-groups { display: flex; flex-direction: column; gap: 0; }

/* Use top-border via sibling selector so filtered (hidden) groups don't leave orphaned dividers */
.cond-group {
  padding: 16px 0 12px;
}
.cond-group + .cond-group {
  border-top: 1px solid #E5E9F0;
  padding-top: 16px;
}
.cond-group--first-visible {
  border-top: none !important;
  padding-top: 16px;
}
.cond-group:first-child { padding-top: 4px; }

.cond-group-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  background: var(--primary-bg);
}
.cond-group-name {
  font-size: 15px; font-weight: 700;
  color: var(--primary); letter-spacing: -0.01em;
}
.cond-group-count {
  font-size: 11px; font-weight: 600; line-height: 1;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 2px 7px; margin-left: auto;
}
/* Cross-link to the region's presentations (hub) */
.cond-xlink {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-height: 28px; display: inline-flex; align-items: center;
}
.cond-xlink:hover { color: var(--primary); text-decoration: underline; }
.cond-xlink + .cond-group-count { margin-left: 8px; }

/* Per-region colour theming */
.cond-group[data-region="lumbar"]     .cond-group-header { border-color: var(--col-lumbar);     background: var(--col-lumbar-bg); }
.cond-group[data-region="lumbar"]     .cond-group-name   { color: var(--col-lumbar); }
.cond-group[data-region="cervical"]   .cond-group-header { border-color: var(--col-cervical);   background: var(--col-cervical-bg); }
.cond-group[data-region="cervical"]   .cond-group-name   { color: var(--col-cervical); }
.cond-group[data-region="shoulder"]   .cond-group-header { border-color: var(--col-shoulder);   background: var(--col-shoulder-bg); }
.cond-group[data-region="shoulder"]   .cond-group-name   { color: var(--col-shoulder); }
.cond-group[data-region="hip"]        .cond-group-header { border-color: var(--col-hip);        background: var(--col-hip-bg); }
.cond-group[data-region="hip"]        .cond-group-name   { color: var(--col-hip); }
.cond-group[data-region="knee"]       .cond-group-header { border-color: var(--col-knee);       background: var(--col-knee-bg); }
.cond-group[data-region="knee"]       .cond-group-name   { color: var(--col-knee); }
.cond-group[data-region="lower-limb"] .cond-group-header { border-color: var(--col-lower-limb); background: var(--col-lower-limb-bg); }
.cond-group[data-region="lower-limb"] .cond-group-name   { color: var(--col-lower-limb); }
.cond-group[data-region="upper-limb"] .cond-group-header { border-color: var(--col-upper-limb); background: var(--col-upper-limb-bg); }
.cond-group[data-region="upper-limb"] .cond-group-name   { color: var(--col-upper-limb); }
/* v2.35c — Multi-Region / Systemic is a high rule-out priority group: calm violet
   accent (distinct from red-flag red so it never overpowers emergency content). */
.cond-group[data-region="multi-region"] .cond-group-header {
  border-left-width: 5px; border-color: #7c3aed; background: rgba(124, 58, 237, 0.07);
}
.cond-group[data-region="multi-region"] .cond-group-name   { color: #5b21b6; }
.cond-group-flag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #5b21b6; background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.22); border-radius: 6px;
  padding: 2px 7px; line-height: 1.45; white-space: nowrap;
}
.cond-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

/* Filter summary */
.cond-filter-summary {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 12px; padding: 6px 12px;
  background: var(--primary-bg); border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

/* Draft card — fully opaque amber tint so it reads distinctly from glass cards */
.card-draft { background: rgba(255, 251, 240, 0.97); border-color: var(--draft-border); }
.card-draft:hover { border-color: #c9922a; box-shadow: var(--shadow-md), 0 0 0 3px rgba(217,119,6,0.10); transform: translateY(-2px); }
.card-draft-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--draft-color);
  margin-bottom: 10px;
}

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
/* Legacy .badge wrapper — kept for compatibility */
.badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase;
}
/* Unified small inline badges used everywhere on home cards */
.badge-home-region,
.badge-home-tier1 {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}
.badge-home-region { background: var(--primary-bg); color: var(--primary); border: 1px solid #b3d0f0; }
.badge-home-tier1  { background: var(--tier1-bg);   color: var(--tier1-color); border: 1px solid #f5c6c6; }

/* Named badge variants */
.badge-draft      { background: var(--draft-bg);   color: var(--draft-color);  border: 1px solid var(--draft-border); }
.badge-screening  { background: #fce4ec; color: #880e4f; border: 1px solid #c2185b; }
.badge-region     { background: var(--primary-bg); color: var(--primary); border: 1px solid #b3d0f0; }
.badge-checklist  { background: #f3e5f5; color: #6a1b9a; border: 1px solid #7b1fa2; }
.badge-med        { background: #e8f5e9; color: #2e7d32; border: 1px solid #2e7d32; }
.badge-pres       { background: var(--primary-bg); color: var(--primary); border: 1px solid var(--primary); }
.badge-tier1      { background: var(--tier1-bg); color: var(--tier1-color); border: 1px solid #f5c6c6; }

/* ── Backward compatibility stubs (card classes no longer rendered) ──────────── */
.is-card { display: flex; flex-direction: column; }
.is-card-body { padding: 16px; flex: 1; }

/* ── BLUR FALLBACK — devices without backdrop-filter support ────────────── */
/* Covers older Android WebView and some Chromium builds on low-end devices */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #top-nav  { background: rgba(250, 251, 253, 0.98) !important; }
  #bottom-nav { background: rgba(250, 251, 253, 0.98) !important; }
  .rom-inner { background: rgba(255, 255, 255, 0.98) !important; }
  #detail-panel { background: var(--surface) !important; }
}