/* ── ILLNESS SCRIPTS INDEX PAGE ───────────────────────────────────────────── */
.scripts-page { padding-bottom: 48px; }

/* Hero — compact: title + meta only, no verbose description */
.scripts-hero {
  margin-bottom: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fffbeb 0%, #f0fdfa 50%, #eef2ff 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.scripts-hero-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.scripts-hero-count {
  font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.scripts-hero-title {
  font-size: 20px; font-weight: 700; color: var(--text);
  margin: 0;
}

/* Search */
.scripts-search-wrap { margin-bottom: 12px; }

/* Region jump chips — single scrollable row, never wraps */
.scripts-jump-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 20px;
  padding-bottom: 2px;   /* space for scroll momentum */
}
.scripts-jump-bar::-webkit-scrollbar { display: none; }
.scripts-jump-chip {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;        /* chips never shrink/wrap */
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition);
}
.scripts-jump-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
}
/* Per-region chip colours */
.scripts-jump-chip--lumbar     { border-color: color-mix(in srgb, var(--col-lumbar) 30%, transparent); }
.scripts-jump-chip--lumbar:hover     { background: var(--col-lumbar-bg);     color: var(--col-lumbar); }
.scripts-jump-chip--cervical   { border-color: color-mix(in srgb, var(--col-cervical) 30%, transparent); }
.scripts-jump-chip--cervical:hover   { background: var(--col-cervical-bg);   color: var(--col-cervical); }
.scripts-jump-chip--shoulder   { border-color: color-mix(in srgb, var(--col-shoulder) 30%, transparent); }
.scripts-jump-chip--shoulder:hover   { background: var(--col-shoulder-bg);   color: var(--col-shoulder); }
.scripts-jump-chip--hip        { border-color: color-mix(in srgb, var(--col-hip) 30%, transparent); }
.scripts-jump-chip--hip:hover        { background: var(--col-hip-bg);        color: var(--col-hip); }
.scripts-jump-chip--knee       { border-color: color-mix(in srgb, var(--col-knee) 30%, transparent); }
.scripts-jump-chip--knee:hover       { background: var(--col-knee-bg);       color: var(--col-knee); }
.scripts-jump-chip--lower-limb { border-color: color-mix(in srgb, var(--col-lower-limb) 30%, transparent); }
.scripts-jump-chip--lower-limb:hover { background: var(--col-lower-limb-bg); color: var(--col-lower-limb); }
.scripts-jump-chip--upper-limb { border-color: color-mix(in srgb, var(--col-upper-limb) 30%, transparent); }
.scripts-jump-chip--upper-limb:hover { background: var(--col-upper-limb-bg); color: var(--col-upper-limb); }
.scripts-jump-chip--biopsych { border-color: color-mix(in srgb, var(--col-pain-psych) 30%, transparent); }
.scripts-jump-chip--biopsych:hover { background: var(--col-pain-psych-bg); color: var(--col-pain-psych); }

/* Region groups */
.scripts-group { margin-bottom: 28px; }

/* Group headers — coloured left border + tinted background per region */
.scripts-group-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.scripts-group-icon { font-size: 17px; flex-shrink: 0; }
.scripts-group-label { font-size: 14px; font-weight: 700; color: var(--text); }
.scripts-group-count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 20px;
}
/* Tier-1 count badge inside group header */
.scripts-group-tier1 {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tier1-color);
  background: var(--tier1-bg);
  border: 1px solid #f5c6c6;
  padding: 2px 8px; border-radius: 20px;
}

/* Per-region group header colouring */
.scripts-group[data-region="lumbar"]     .scripts-group-header { border-left-color: var(--col-lumbar);     background: var(--col-lumbar-bg); }
.scripts-group[data-region="lumbar"]     .scripts-group-label  { color: var(--col-lumbar); }
.scripts-group[data-region="cervical"]   .scripts-group-header { border-left-color: var(--col-cervical);   background: var(--col-cervical-bg); }
.scripts-group[data-region="cervical"]   .scripts-group-label  { color: var(--col-cervical); }
.scripts-group[data-region="shoulder"]   .scripts-group-header { border-left-color: var(--col-shoulder);   background: var(--col-shoulder-bg); }
.scripts-group[data-region="shoulder"]   .scripts-group-label  { color: var(--col-shoulder); }
.scripts-group[data-region="hip"]        .scripts-group-header { border-left-color: var(--col-hip);        background: var(--col-hip-bg); }
.scripts-group[data-region="hip"]        .scripts-group-label  { color: var(--col-hip); }
.scripts-group[data-region="knee"]       .scripts-group-header { border-left-color: var(--col-knee);       background: var(--col-knee-bg); }
.scripts-group[data-region="knee"]       .scripts-group-label  { color: var(--col-knee); }
.scripts-group[data-region="lower-limb"] .scripts-group-header { border-left-color: var(--col-lower-limb); background: var(--col-lower-limb-bg); }
.scripts-group[data-region="lower-limb"] .scripts-group-label  { color: var(--col-lower-limb); }
.scripts-group[data-region="upper-limb"] .scripts-group-header { border-left-color: var(--col-upper-limb); background: var(--col-upper-limb-bg); }
.scripts-group[data-region="upper-limb"] .scripts-group-label  { color: var(--col-upper-limb); }
.scripts-group[data-region="biopsychosocial"] .scripts-group-header { border-left-color: var(--col-pain-psych); background: var(--col-pain-psych-bg); }
.scripts-group[data-region="biopsychosocial"] .scripts-group-label  { color: var(--col-pain-psych); }
.scripts-group[data-region="multi-region"] .scripts-group-header { border-left-color: var(--col-multi);   background: var(--col-multi-bg); }
.scripts-group[data-region="multi-region"] .scripts-group-label  { color: var(--col-multi); }

/* Scripts card list — column of rows */
.scripts-grid {
  display: flex; flex-direction: column; gap: 4px;
}

/* Individual script card — fc-cat-row style: tinted bg + matching border, no left accent */
.scripts-card {
  display: flex; flex-direction: row; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.scripts-card:hover { filter: brightness(0.97); }

/* Per-region: tinted background + softly matching border (mirrors fc-cat-row pattern) */
.scripts-card--lumbar     { background: color-mix(in srgb, var(--col-lumbar-bg) 70%, var(--surface));     border-color: color-mix(in srgb, var(--col-lumbar) 25%, var(--col-lumbar-bg)); }
.scripts-card--cervical   { background: color-mix(in srgb, var(--col-cervical-bg) 70%, var(--surface));   border-color: color-mix(in srgb, var(--col-cervical) 25%, var(--col-cervical-bg)); }
.scripts-card--shoulder   { background: color-mix(in srgb, var(--col-shoulder-bg) 70%, var(--surface));   border-color: color-mix(in srgb, var(--col-shoulder) 25%, var(--col-shoulder-bg)); }
.scripts-card--hip        { background: color-mix(in srgb, var(--col-hip-bg) 70%, var(--surface));        border-color: color-mix(in srgb, var(--col-hip) 25%, var(--col-hip-bg)); }
.scripts-card--knee       { background: color-mix(in srgb, var(--col-knee-bg) 70%, var(--surface));       border-color: color-mix(in srgb, var(--col-knee) 25%, var(--col-knee-bg)); }
.scripts-card--lower-limb { background: color-mix(in srgb, var(--col-lower-limb-bg) 70%, var(--surface)); border-color: color-mix(in srgb, var(--col-lower-limb) 25%, var(--col-lower-limb-bg)); }
.scripts-card--upper-limb { background: color-mix(in srgb, var(--col-upper-limb-bg) 70%, var(--surface)); border-color: color-mix(in srgb, var(--col-upper-limb) 25%, var(--col-upper-limb-bg)); }
.scripts-card--biopsych { background: color-mix(in srgb, var(--col-pain-psych-bg) 70%, var(--surface)); border-color: color-mix(in srgb, var(--col-pain-psych) 25%, var(--col-pain-psych-bg)); }
.scripts-card--multi      { background: color-mix(in srgb, var(--col-multi-bg) 70%, var(--surface));      border-color: color-mix(in srgb, var(--col-multi) 25%, var(--col-multi-bg)); }

/* Per-region label colour */
.scripts-card--lumbar     .scripts-card-name { color: var(--col-lumbar); }
.scripts-card--cervical   .scripts-card-name { color: var(--col-cervical); }
.scripts-card--shoulder   .scripts-card-name { color: var(--col-shoulder); }
.scripts-card--hip        .scripts-card-name { color: var(--col-hip); }
.scripts-card--knee       .scripts-card-name { color: var(--col-knee); }
.scripts-card--lower-limb .scripts-card-name { color: var(--col-lower-limb); }
.scripts-card--upper-limb .scripts-card-name { color: var(--col-upper-limb); }
.scripts-card--biopsych .scripts-card-name { color: var(--col-pain-psych); }
.scripts-card--multi      .scripts-card-name { color: var(--col-multi); }

/* Tier 1 — red tint, matches fc-cat--red-flag */
.scripts-card--tier1 { background: var(--tier1-bg); border-color: #FECACA; }
.scripts-card--tier1 .scripts-card-name { color: var(--tier1-color); }

.scripts-card-icon  { font-size: 17px; flex-shrink: 0; }
.scripts-card-name  {
  font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.3; flex: 1;
}
.scripts-card-tier1-badge {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tier1-color); background: var(--tier1-bg);
  border: 1px solid #f5c6c6; padding: 1px 6px; border-radius: 20px;
}
.scripts-card-arrow {
  font-size: 13px; color: var(--text-muted); flex-shrink: 0;
  transition: transform 0.12s ease;
}
.scripts-card:hover .scripts-card-arrow { transform: translateX(2px); color: var(--text-secondary); }

/* ── ILLNESS SCRIPT ───────────────────────────────────────────────────────── */

/* Pillar accent colours */
:root {
  --is-col-who:   #d97706; --is-col-who-bg:   #fffbeb;
  --is-col-what:  #0d9488; --is-col-what-bg:  #f0fdfa;
  --is-col-how:   #4f46e5; --is-col-how-bg:   #eef2ff;
  --is-col-tests: #be185d; --is-col-tests-bg: #fdf2f8;
}

/* Page wrapper */
.is-page { padding-bottom: 48px; }

/* Breadcrumb / back nav area */
.is-nav { margin-bottom: 16px; }

/* Hero block */
.is-hero {
  margin-bottom: 20px;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.is-hero-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.is-pill {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 20px;
  background: #f5f3ff; color: #4c1d95; border: 1px solid #c4b5fd;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.is-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.is-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Pillar accordions — all closed by default ───────────────────────────────── */
/* Replaces old is-tabs / is-grid / is-card system. Works identically on all     */
/* screen sizes — no JS required, no responsive gymnastics.                      */

.is-pillars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

/* <details> reset */
.is-pillar { list-style: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

/* Summary (the clickable header) */
.is-pillar-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  list-style: none; /* Remove default ▶ in Firefox */
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 15px; font-weight: 700;
  transition: background var(--transition), border-color var(--transition);
  min-height: 56px;
}
.is-pillar-summary::-webkit-details-marker { display: none; }
.is-pillar-summary::marker { display: none; }
.is-pillar-summary:hover { background: var(--bg); }
.is-pillar[open] .is-pillar-summary {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: none;
}

/* Colour-coding per pillar */
.is-pillar--who   .is-pillar-summary { border-color: var(--is-col-who);   background: var(--is-col-who-bg);   }
.is-pillar--what  .is-pillar-summary { border-color: var(--is-col-what);  background: var(--is-col-what-bg);  }
.is-pillar--how   .is-pillar-summary { border-color: var(--is-col-how);   background: var(--is-col-how-bg);   }
.is-pillar--tests .is-pillar-summary { border-color: var(--is-col-tests); background: var(--is-col-tests-bg); }
.is-pillar--who   .is-pillar-summary:hover { filter: brightness(0.97); }
.is-pillar--what  .is-pillar-summary:hover { filter: brightness(0.97); }
.is-pillar--how   .is-pillar-summary:hover { filter: brightness(0.97); }
.is-pillar--tests .is-pillar-summary:hover { filter: brightness(0.97); }

.is-pillar-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.is-pillar--who   .is-pillar-num { background: var(--is-col-who);   }
.is-pillar--what  .is-pillar-num { background: var(--is-col-what);  }
.is-pillar--how   .is-pillar-num { background: var(--is-col-how);   }
.is-pillar--tests .is-pillar-num { background: var(--is-col-tests); }

.is-pillar-icon  { font-size: 18px; flex-shrink: 0; }
.is-pillar-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.is-pillar-chevron {
  font-size: 20px; font-weight: 300; opacity: 0.5; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.is-pillar[open] .is-pillar-chevron { transform: rotate(90deg); }

/* Pillar body (content area revealed on open) */
.is-pillar-body {
  padding: 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  line-height: 1.65;
}
.is-pillar--who   .is-pillar-body { border-color: var(--is-col-who);   }
.is-pillar--what  .is-pillar-body { border-color: var(--is-col-what);  }
.is-pillar--how   .is-pillar-body { border-color: var(--is-col-how);   }
.is-pillar--tests .is-pillar-body { border-color: var(--is-col-tests); }

/* ── Pillar Blueprint section ────────────────────────────────────────────────── */
.is-blueprint-section { margin-top: 6px; margin-bottom: 16px; }
.is-blueprint-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px;
}
.is-blueprint-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-bg);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  text-decoration: none; font-size: 13px; font-weight: 600;
  transition: var(--transition);
}
.is-blueprint-link:hover { background: var(--primary); color: #fff; }
.is-blueprint-link-icon { font-size: 16px; flex-shrink: 0; }
.is-blueprint-link-label { flex: 1; }
.is-blueprint-link-arrow { opacity: 0.6; }

/* ── Illness Script pillar responsive tweaks ── */
@media (max-width: 767px) {
  .is-pillar-summary { padding: 12px 14px; min-height: 52px; }
  .is-pillar-body    { padding: 14px; }
  .is-pillar-label   { font-size: 13.5px; }
}

/* ── HOME: illness scripts tile removed — stub for any cached references ── */
.home-action-tile--scripts { display: none; }

/* ── Illness script pillar tweaks inside condition page ─────────────────── */
.cond-page .is-pillar { margin-bottom: 6px; }
.cond-page .is-pillar-summary { min-height: 48px; }
.cond-page .is-pillar-body { font-size: 13.5px; line-height: 1.75; }