/* =====================================================================
   Cardio-SM v1.2 theme — "heartbeat to helix"
   Loaded AFTER style.css. Removing this file (and motion.js) restores the
   previous look of the pages that still use the old classes.
   Palette: a diverging burgundy <-> teal scale = the benign <-> pathogenic axis.
   ===================================================================== */

:root {
  --csm-path: #840b27;          /* brand burgundy / Pathogenic */
  --csm-lpath: #b5475f;         /* Likely pathogenic */
  --csm-vus: #85808a;           /* Uncertain */
  --csm-lben: #3e9c98;          /* Likely benign */
  --csm-ben: #0b6b6b;           /* Benign */
  --csm-deep: #3a0a16;          /* bands */
  --csm-deep-2: #5a0f22;
  --csm-surface: #f5f6f8;       /* page */
  --csm-paper: #ffffff;         /* panels */
  --csm-ink: #1c1a20;
  --csm-ink-2: #4b4752;
  --csm-line: #e2e0e5;
  --csm-focus: #0b6b6b;
  --csm-radius-lg: 18px;
  --csm-radius: 12px;
  --csm-radius-sm: 8px;
  --csm-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --csm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------- base */
body.csm {
  font-family: var(--csm-font);
  font-stretch: 100%;
  background: var(--csm-surface);
  color: var(--csm-ink);
  line-height: 1.55;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.csm .container { padding-left: 16px; padding-right: 16px; }
body.csm a { color: var(--csm-path); }
body.csm :focus-visible { outline: 3px solid var(--csm-focus); outline-offset: 2px; }
body.csm .card:hover { transform: none; }

/* ------------------------------------------------------------- top band (shared) */
.csm-band {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(132, 11, 39, .55) 0%, transparent 55%),
    var(--csm-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
body.csm .csm-band a, body.csm .csm-band a:hover { color: #fff; }
.csm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.csm-brand img { height: 40px; width: auto; }
.csm-brand-name { font-weight: 800; font-stretch: 112%; font-size: 1.25rem; letter-spacing: .01em; }
.csm-brand-sub { font-size: .9rem; opacity: .8; }

/* ------------------------------------------------------------- home */
.csm-hero { padding: 28px 0 0; }
.csm-hero h1 {
  font-weight: 800; font-stretch: 125%; line-height: 1.02;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem); margin: 28px 0 10px; letter-spacing: -.01em;
}
.csm-hero p.lead { max-width: 60ch; font-size: 1.125rem; opacity: .9; margin: 0 0 8px; }
.csm-trace { display: block; width: 100%; height: 150px; margin-top: 18px; }
.csm-trace .ecg { fill: none; stroke: #ff8aa3; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.csm-trace .strand-a { fill: none; stroke: #ff8aa3; stroke-width: 2.4; }
.csm-trace .strand-b { fill: none; stroke: #7fd3cf; stroke-width: 2.4; }
.csm-trace .rung { stroke-width: 2; stroke-linecap: round; }
.helix-strip .strand-a { fill: none; stroke: #ff8aa3; stroke-width: 2; }
.helix-strip .strand-b { fill: none; stroke: #7fd3cf; stroke-width: 2; }
.helix-strip .rung { stroke-width: 1.6; stroke-linecap: round; }

.csm-home-main { padding: 36px 0 48px; flex: 1 0 auto; }
.csm-home-main h2 { font-size: 1.5625rem; font-weight: 700; margin: 0 0 4px; }
.csm-home-main .hint { color: var(--csm-ink-2); margin-bottom: 22px; max-width: 70ch; }
.gene-grid-v2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gene-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 150px; padding: 18px 18px 16px; border-radius: var(--csm-radius);
  background: var(--csm-paper); border: 1px solid var(--csm-line);
  color: var(--csm-ink); text-decoration: none; position: relative;
  transition: border-color .2s var(--csm-ease), box-shadow .2s var(--csm-ease), transform .2s var(--csm-ease);
}
.gene-tile:hover { border-color: var(--csm-path); box-shadow: 0 10px 24px -14px rgba(58, 10, 22, .55); transform: translateY(-2px); color: var(--csm-ink); }
.gene-tile .sym { font-weight: 800; font-stretch: 125%; font-size: 1.95rem; line-height: 1; color: var(--csm-path); }
.gene-tile .prot { font-size: .95rem; color: var(--csm-ink); }
.gene-tile .tx { font-size: .8rem; color: var(--csm-ink-2); }
.gene-tile .tag {
  position: absolute; top: 14px; right: 14px; font-size: .72rem; font-weight: 600;
  color: var(--csm-path); border: 1px solid rgba(132, 11, 39, .35); border-radius: 999px; padding: 1px 8px;
}

/* ------------------------------------------------------------- footer (shared) */
.csm-footer { border-top: 1px solid var(--csm-line); background: var(--csm-paper); padding: 14px 0; font-size: .875rem; color: var(--csm-ink-2); }
.csm-footer .row-flex { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.csm-footer .version-badge, .csm-band .version-badge {
  cursor: pointer; border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px;
  font-weight: 600; font-size: .8rem; background: transparent; color: inherit; box-shadow: none; margin: 0;
}
.csm-footer .version-badge { color: var(--csm-path); }
.motion-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.motion-switch input { width: 34px; height: 18px; appearance: none; border-radius: 999px; background: #cfcbd3; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.motion-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--csm-ease); }
.motion-switch input:checked { background: var(--csm-ben); }
.motion-switch input:checked::after { transform: translateX(16px); }

/* ------------------------------------------------------------- gene page header */
.csm-gene-band { padding: 18px 0 20px; }
.csm-gene-band .topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.csm-back { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; opacity: .85; text-decoration: none; }
.csm-back:hover { opacity: 1; }
.csm-gene-title { display: flex; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; margin-top: 10px; position: relative; z-index: 1; }
.csm-gene-title .sym { font-weight: 800; font-stretch: 125%; font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: .95; letter-spacing: -.01em; }
.csm-gene-title .meta { padding-bottom: 6px; }
.csm-gene-title .meta .prot { font-size: 1.125rem; font-weight: 600; }
.csm-gene-title .meta .tx { font-size: .9rem; opacity: .8; }
.csm-gene-band .helix-strip { position: absolute; right: 0; bottom: 0; height: 78%; width: min(46%, 560px); opacity: .45; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
/* external links row — keeps .card-header/.d-flex.gap-2 used by main.js */
.csm-gene-band .card-header { background: transparent !important; border: 0; padding: 0; margin-top: 14px; position: relative; z-index: 1; }
.csm-gene-band .card-header .btn { border-radius: 999px; font-weight: 600; }
.csm-gene-band .card-header .btn-outline-light { border-color: rgba(255, 255, 255, .45); }

/* ------------------------------------------------------------- gene page body */
.csm-work { padding: 24px 0 40px; flex: 1 0 auto; }
.csm-panel { background: var(--csm-paper); border: 1px solid var(--csm-line); border-radius: var(--csm-radius-lg); padding: 20px; }
.csm-panel + .csm-panel { margin-top: 16px; }
.csm-panel h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 12px; }
.csm-panel .sub { color: var(--csm-ink-2); font-size: .9rem; margin: -6px 0 14px; }

body.csm #variantName { border: 2px solid var(--csm-line) !important; border-radius: var(--csm-radius) !important; font-size: 1.25rem; font-weight: 600; padding: 12px 14px; }
body.csm #variantName:focus { border-color: var(--csm-path) !important; box-shadow: 0 0 0 4px rgba(132, 11, 39, .12) !important; }
body.csm #variantOkBtn { border-radius: var(--csm-radius); }

/* parameter tiles (criteria buttons) */
body.csm .criteria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; }
body.csm .criteria-btn {
  min-height: 92px; padding: 14px 14px 12px; border-radius: var(--csm-radius);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px;
  text-align: left; font-size: 1rem; font-weight: 700; line-height: 1.2;
  transition: background-color .25s var(--csm-ease), border-color .25s var(--csm-ease), color .25s var(--csm-ease);
}
body.csm .criteria-btn:hover { transform: none; box-shadow: none; }
body.csm .criteria-btn .codes { font-size: .78rem; font-weight: 500; color: var(--csm-ink-2); }
body.csm .criteria-btn .got { font-size: .8rem; font-weight: 700; }
body.csm .criteria-btn:not(.parameter-used):not(.parameter-error) { background: var(--csm-paper); border: 1.5px solid var(--csm-line); color: var(--csm-ink); }
body.csm .criteria-btn:not(.parameter-used):not(.parameter-error):hover { border-color: var(--csm-path); background: #fff; color: var(--csm-ink); }
body.csm .criteria-btn.parameter-used { background: var(--csm-ink) !important; border: 1.5px solid var(--csm-ink) !important; color: #fff !important; box-shadow: none !important; }
body.csm .criteria-btn.parameter-used .codes { color: rgba(255, 255, 255, .65); }
body.csm .criteria-btn.parameter-used:hover { background: #2c2832 !important; }
body.csm .criteria-btn.parameter-error {
  background: repeating-linear-gradient(135deg, #f1f0f3 0 8px, #e8e6ec 8px 16px) !important;
  border: 1.5px dashed #b9b4bf !important; color: var(--csm-ink-2) !important; box-shadow: none !important;
}
body.csm .criteria-btn.parameter-error:hover { border-color: var(--csm-ink-2) !important; }
.criteria-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--csm-ink-2); margin-top: 12px; }
.criteria-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; border: 1.5px solid var(--csm-line); }
.criteria-legend .l-used i { background: var(--csm-ink); border-color: var(--csm-ink); }
.criteria-legend .l-none i { background: repeating-linear-gradient(135deg, #f1f0f3 0 3px, #dcd9e0 3px 6px); border-style: dashed; border-color: #b9b4bf; }

/* classification column */
.csm-sticky { position: sticky; top: 16px; }
body.csm .classification-label {
  display: inline-block; min-width: 0; margin: 0; padding: 8px 18px; border-radius: 999px;
  font-weight: 700; font-size: 1.125rem; text-transform: none; letter-spacing: 0; box-shadow: none;
  transition: background-color .35s var(--csm-ease);
}
body.csm .classification-pathogenic { background: var(--csm-path); color: #fff; }
body.csm .classification-likely-pathogenic { background: var(--csm-lpath); color: #fff; }
body.csm .classification-uncertain { background: var(--csm-vus); color: #fff; }
body.csm .classification-likely-benign { background: var(--csm-lben); color: #fff; }
body.csm .classification-benign { background: var(--csm-ben); color: #fff; }
.csm-score-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
body.csm #scoreValue {
  font-size: 3rem; font-weight: 800; font-stretch: 112%; line-height: 1;
  background: none; -webkit-text-fill-color: currentColor; color: var(--csm-ink); text-shadow: none;
}
.csm-score-row .unit { color: var(--csm-ink-2); font-size: .9rem; }

/* diverging meter: the bar width (set by main.js) only positions the heart marker */
.csm-meter { position: relative; height: 14px; border-radius: 999px; margin: 18px 0 6px;
  background: linear-gradient(90deg, var(--csm-ben) 0%, var(--csm-lben) 25%, var(--csm-vus) 50%, var(--csm-lpath) 75%, var(--csm-path) 100%); }
body.csm .csm-meter .progress { background: transparent !important; box-shadow: none !important; height: 14px !important; overflow: visible; border-radius: 999px; }
body.csm .csm-meter .progress-bar { background: transparent !important; box-shadow: none !important; overflow: visible; position: relative !important; transition: width .8s var(--csm-ease) !important; }
body.csm .csm-meter .progress-bar::after {
  content: ''; position: absolute; right: -13px; top: -8px; width: 26px; height: 26px; border: 0; border-radius: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.3 3 4.5 6.6 4.5c2 0 3.6 1.1 4.4 2.6.8-1.5 2.4-2.6 4.4-2.6 3.6 0 5.7 3.8 4.2 7.3C19.5 16.4 12 21 12 21z' fill='%23ffffff' stroke='%233a0a16' stroke-width='1.6'/%3E%3C/svg%3E");
  box-shadow: none; transform-origin: 50% 60%;
}
.csm-meter-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--csm-ink-2); }
html[data-motion="on"] body.csm .csm-meter .progress-bar.beat::after { animation: csm-beat .9s var(--csm-ease) 1; }
@keyframes csm-beat { 0% { transform: scale(1); } 18% { transform: scale(1.35); } 32% { transform: scale(1.05); } 48% { transform: scale(1.25); } 100% { transform: scale(1); } }

.class-distance { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .85rem; color: var(--csm-ink-2); }
.class-distance .dist-up { color: var(--csm-path); }
.class-distance .dist-down { color: var(--csm-ben); }

body.csm #criteriaList { max-height: 260px; overflow-y: auto; }
body.csm #criteriaList .list-group-item { border: 0; border-bottom: 1px solid var(--csm-line); background: transparent; padding: 8px 2px; border-radius: 0; margin: 0; }
body.csm #criteriaList .list-group-item:hover { transform: none; background: transparent; }
.crit-points { font-weight: 800; font-size: .85rem; border-radius: 999px; padding: 1px 9px; color: #fff; }
.crit-points.crit-path { background: var(--csm-path); }
.crit-points.crit-benign { background: var(--csm-ben); }

.csm-actions { display: grid; gap: 8px; margin-top: 16px; }
body.csm .csm-actions .btn { border-radius: var(--csm-radius); font-weight: 600; padding: 10px 14px; text-align: left; }
body.csm .csm-actions .btn-report { background: var(--csm-path); border-color: var(--csm-path); color: #fff; }
body.csm .csm-actions .btn-report:hover { background: #6e0920; border-color: #6e0920; color: #fff; }
body.csm .csm-actions .btn-quiet { background: transparent; border: 1.5px solid var(--csm-line); color: var(--csm-ink); }
body.csm .csm-actions .btn-quiet:hover { border-color: var(--csm-ink-2); background: #fff; color: var(--csm-ink); }
body.csm .csm-actions .btn-reset { background: transparent; border: 1.5px solid transparent; color: var(--csm-path); }
body.csm .csm-actions .btn-reset:hover { border-color: rgba(132, 11, 39, .35); background: #fff; color: var(--csm-path); }

/* ------------------------------------------------------------- modals */
body.csm .modal-content { border-radius: var(--csm-radius-lg); }
body.csm .modal-header { background: var(--csm-deep) !important; border-radius: var(--csm-radius-lg) var(--csm-radius-lg) 0 0; }
body.csm .modal-title { font-weight: 700; }
body.csm .form-check-input:checked { background-color: var(--csm-path); border-color: var(--csm-path); }
body.csm .btn-primary { background: var(--csm-path); border-color: var(--csm-path); }
body.csm .btn-primary:hover:not(:disabled) { background: #6e0920; border-color: #6e0920; }
body.csm .btn-outline-primary { color: var(--csm-path); border-color: var(--csm-path); }
body.csm .btn-outline-primary:hover { background: var(--csm-path); color: #fff; }

/* PVS1 wizard */
.pvs1-wizard { background: #fbfafc; border-color: var(--csm-line) !important; }
.pvs1-wizard #pvs1Facts { color: var(--csm-ink-2); }
.pvs1-wizard #pvs1Path li { margin-bottom: 3px; }
.pvs1-wizard .pvs1-step-auto { color: var(--csm-ink-2); }
.pvs1-wizard .pvs1-step-scenario { list-style: none; margin-left: -14px; font-weight: 600; color: var(--csm-ink); }
.pvs1-wizard .pvs1-step-result { color: var(--csm-path); }
.pvs1-qbox { background: #fff; border: 1.5px solid var(--csm-path); }
.pvs1-edit { font-size: .8rem; text-decoration: none; }

/* auto-fill */
.prefill-panel { background: #fff; border: 1px dashed #c9c4cf; border-radius: var(--csm-radius); padding: 10px 12px; }
.prefill-title { font-weight: 700; color: var(--csm-path); }
.prefill-chip { font-size: .82rem; background: var(--csm-surface); border: 1px solid var(--csm-line); border-radius: 999px; padding: 2px 10px; }
.prefill-chip-info { opacity: .75; }
.prefill-sources { opacity: .75; }

/* report */
.report-meta span { margin-right: 14px; }
.report-criteria .report-criterion { border-left: 3px solid var(--csm-path); padding: 6px 10px; margin-bottom: 10px; background: #fcfbfd; }
.report-evidence { font-size: .85rem; max-width: 640px; }
.report-evidence th { width: 45%; font-weight: 600; color: var(--csm-ink-2); }
.report-path { background: #fff; border: 1px solid var(--csm-line); border-radius: var(--csm-radius-sm); padding: 6px 10px; }

/* changelog */
#changelogModal .cl-version { color: var(--csm-path); font-weight: 800; font-stretch: 112%; }
#changelogModal .cl-version small { font-weight: 500; }
#changelogModal li { margin-bottom: 6px; }

/* ------------------------------------------------------------- motion switch & reduced motion */
html[data-motion="off"] .csm-trace .anim, html[data-motion="off"] .helix-strip { animation: none !important; }

/* ------------------------------------------------------------- legacy dark-mode block neutralised */
@media (prefers-color-scheme: dark) {
  body.csm { background: var(--csm-surface); color: var(--csm-ink); }
  body.csm .card, body.csm .modal-body { background: var(--csm-paper); color: var(--csm-ink); }
  body.csm .form-control, body.csm .form-select { background: #fff; border-color: #ced4da; color: var(--csm-ink); }
  body.csm .list-group-item { background: transparent !important; color: var(--csm-ink); }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 992px) {
  .gene-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csm-sticky { position: static; }
  .csm-gene-band .helix-strip { width: 70%; opacity: .3; }
}
@media (max-width: 576px) {
  .gene-grid-v2 { grid-template-columns: 1fr; }
  body.csm .criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csm-trace { height: 110px; }
  .gene-tile { min-height: 120px; }
}

/* toasts in the page palette */
body.csm .custom-alert { background: #fff !important; color: var(--csm-ink) !important; border: 1px solid var(--csm-line) !important;
  border-left: 6px solid var(--csm-ink-2) !important; border-radius: var(--csm-radius) !important; box-shadow: 0 18px 40px -18px rgba(28, 26, 32, .45) !important; }
body.csm .custom-alert.alert-success { border-left-color: var(--csm-ben) !important; }
body.csm .custom-alert.alert-danger { border-left-color: var(--csm-path) !important; }
body.csm .custom-alert.alert-warning { border-left-color: #c58a12 !important; }
body.csm .custom-alert.alert-info { border-left-color: var(--csm-lben) !important; }

/* =============================================================== v1.2 extra motion */
/* (1) cardiac monitor in the gene header: faint ECG line + travelling bright trace */
.csm-gene-band .ecg-monitor { position: absolute; left: 0; bottom: 0; width: 100%; height: 46px; pointer-events: none; opacity: .9; }
.ecg-monitor .base { fill: none; stroke: rgba(255, 138, 163, .22); stroke-width: 1.5; }
.ecg-monitor .sweep { fill: none; stroke: #ff8aa3; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 138, 163, .9)); stroke-dasharray: 160 3000; stroke-dashoffset: 160; }
html[data-motion="on"] .ecg-monitor .sweep { animation: csm-sweep 5.5s linear infinite; }
@keyframes csm-sweep { from { stroke-dashoffset: 160; } to { stroke-dashoffset: -2900; } }
html[data-motion="off"] .ecg-monitor .sweep { opacity: 0; }

/* (2) classification pill beats when the class changes */
html[data-motion="on"] body.csm .classification-label.csm-pulse { animation: csm-beat .9s var(--csm-ease) 1; }

/* (3) a criterion applied: the tile fills with a sweep */
html[data-motion="on"] body.csm .criteria-btn.parameter-used {
  background-color: var(--csm-paper) !important;
  background-image: linear-gradient(90deg, var(--csm-ink) 0 50%, var(--csm-paper) 50% 100%) !important;
  background-size: 200% 100% !important; background-position: 0 0 !important; animation: csm-fill .7s var(--csm-ease) 1;
}
@keyframes csm-fill { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* (4) home tiles: a helix twists in the background on hover */
.gene-tile { overflow: hidden; isolation: isolate; }
.gene-tile::after {
  content: ''; position: absolute; right: -10px; bottom: -6px; width: 180px; height: 64px; z-index: -1; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='64' viewBox='0 0 90 64'%3E%3Cpath d='M0 32 C 11 4, 34 4, 45 32 S 79 60, 90 32' fill='none' stroke='%23840b27' stroke-width='2.5'/%3E%3Cpath d='M0 32 C 11 60, 34 60, 45 32 S 79 4, 90 32' fill='none' stroke='%230b6b6b' stroke-width='2.5'/%3E%3Cg stroke='%23840b27' stroke-opacity='.5' stroke-width='2'%3E%3Cpath d='M12 14v36M22 10v44M33 14v36M57 14v36M68 10v44M78 14v36'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 50% / 90px 64px;
  transition: opacity .25s var(--csm-ease);
}
.gene-tile:hover::after, .gene-tile:focus-visible::after { opacity: .14; }
html[data-motion="on"] .gene-tile:hover::after { animation: csm-twist 1.6s linear infinite; }
@keyframes csm-twist { from { background-position: 0 50%; } to { background-position: -90px 50%; } }

/* (5) loading: a tiny spinning helix */
.csm-helix-spin { display: inline-block; position: relative; width: 22px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.csm-helix-spin::before, .csm-helix-spin::after {
  content: ''; position: absolute; top: 4px; width: 6px; height: 6px; border-radius: 50%;
  animation: csm-orbit 1s ease-in-out infinite;
}
.csm-helix-spin::before { left: 2px; background: var(--csm-path); }
.csm-helix-spin::after { right: 2px; background: var(--csm-ben); animation-delay: -.5s; }
@keyframes csm-orbit { 0%, 100% { transform: translateY(-4px) scale(.7); } 50% { transform: translateY(4px) scale(1.15); } }
html[data-motion="off"] .csm-helix-spin::before, html[data-motion="off"] .csm-helix-spin::after { animation-duration: 2.4s; }


/* =============================================================== v2.0 Long QT syndrome (KCNQ1) */
/* Home: one section per disease; the LQTS section has its own indigo accent, kept apart from the HCM grid */
:root { --csm-lqts: #33408f; --csm-lqts-soft: #e9ebf7; }
.disease-section { margin-top: 26px; }
.disease-section + .disease-section { margin-top: 38px; padding-top: 26px; border-top: 1px dashed var(--csm-line); }
.disease-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; }
.disease-head h3 { font-size: 1.25rem; font-weight: 800; font-stretch: 112%; margin: 0; }
.disease-hcm .disease-head h3 { color: var(--csm-path); }
.disease-lqts .disease-head h3 { color: var(--csm-lqts); }
.disease-vcep { font-size: .85rem; color: var(--csm-ink-2); }
.disease-note { font-size: .9rem; color: var(--csm-ink-2); max-width: 78ch; margin: -6px 0 14px; }
.gene-tile-lqts { background: linear-gradient(160deg, var(--csm-lqts-soft) 0%, var(--csm-paper) 70%); border-color: rgba(51, 64, 143, .28); }
.gene-tile-lqts .sym { color: var(--csm-lqts); }
.gene-tile-lqts .tag { color: var(--csm-lqts); border-color: rgba(51, 64, 143, .35); }
.gene-tile-lqts:hover { border-color: var(--csm-lqts); box-shadow: 0 10px 24px -14px rgba(51, 64, 143, .55); }
.gene-tile-lqts::after { display: none; }
.qt-mini { width: 100%; height: 22px; display: block; }
.qt-mini path { fill: none; stroke: var(--csm-lqts); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 220; stroke-dashoffset: 0; opacity: .75; }
html[data-motion="on"] .gene-tile-lqts:hover .qt-mini path { animation: csm-qt-draw 1.4s var(--csm-ease) infinite; }
@keyframes csm-qt-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }

/* Gene page: disease chip in the header; LQTS pages use the indigo band */
.csm-disease-chip { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; padding: 1px 10px; }
body.csm-lqts .csm-band {
  background: radial-gradient(120% 140% at 0% 0%, rgba(77, 96, 196, .55) 0%, transparent 55%), #161b44;
}
body.csm-lqts .criteria-btn.parameter-unused:hover { border-color: var(--csm-lqts); }

body.csm.csm-lqts .modal-header { background: #161b44 !important; }

/* =============================================================== v2.0.1 compact home, animations always on */
/* Home: short band (title + trace side by side) so title, HCM genes and KCNQ1 fit in one screen */
.csm-hero { padding: 16px 0 20px; position: relative; }
.csm-hero .container { position: relative; z-index: 1; }
.csm-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 14px 0 6px; line-height: 1.05; }
.csm-hero p.lead { font-size: 1rem; max-width: 58ch; margin: 0; }
/* title on the left, trace on the right (bleeds to the right edge of the window) */
.csm-hero-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
/* --csm-cw = Bootstrap .container max-width: the trace extends from the title to the right edge of the window */
.csm-hero { --csm-cw: 100vw; }
@media (min-width: 576px) { .csm-hero { --csm-cw: 540px; } }
@media (min-width: 768px) { .csm-hero { --csm-cw: 720px; } }
@media (min-width: 992px) { .csm-hero { --csm-cw: 960px; } }
@media (min-width: 1200px) { .csm-hero { --csm-cw: 1140px; } }
@media (min-width: 1400px) { .csm-hero { --csm-cw: 1320px; } }
.csm-hero-art { min-width: 0; margin-right: calc((var(--csm-cw) - 100vw) / 2 - 16px); }
.csm-hero .csm-trace { display: block; width: 100%; height: 150px; margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
.csm-home-main { padding: 18px 0 24px; }
.csm-home-main h2 { font-size: 1.35rem; }
.csm-home-main .hint { margin-bottom: 4px; }
.disease-section { margin-top: 14px; }
.disease-section + .disease-section { margin-top: 22px; padding-top: 16px; }
.disease-head { display: block; margin-bottom: 10px; }
.disease-head h3 { font-size: 1.1rem; }
.disease-vcep { display: block; font-size: .8rem; }
.gene-grid-v2 { gap: 12px; }
.gene-tile { min-height: 104px; padding: 14px 16px 12px; gap: 10px; }
.gene-tile .sym { font-size: 1.6rem; }
.gene-tile .prot { font-size: .9rem; }
/* wide screens: HCM (4 columns x 2 rows) and Long QT side by side, still separate */
.disease-row { display: block; }
@media (min-width: 1200px) {
  .disease-row { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(250px, 1fr); gap: 28px; align-items: stretch; }
  .disease-row .disease-section { margin-top: 14px; }
  .disease-row .disease-section + .disease-section { padding: 0 0 0 28px; border-top: 0; border-left: 1px dashed var(--csm-line); }
  .disease-row .disease-head { min-height: 64px; }
  .disease-lqts { display: flex; flex-direction: column; }
  .disease-lqts .gene-grid-v2 { grid-template-columns: 1fr; flex: 1; }
  .disease-lqts .gene-tile { height: 100%; }
}
@media (max-width: 768px) {
  .csm-hero-grid { grid-template-columns: 1fr; }
  .csm-hero-text { position: relative; z-index: 1; }
  .csm-hero-art { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; opacity: .35; }
  .csm-hero .csm-trace { height: 110px; -webkit-mask-image: none; mask-image: none; }
}

/* the decorative animations run also when the system asks to reduce motion (requested: always on) */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="on"] .ecg-monitor .sweep { animation: csm-sweep 5.5s linear infinite !important; }
  html[data-motion="on"] body.csm .classification-label.csm-pulse { animation: csm-beat .9s var(--csm-ease) 1 !important; }
  html[data-motion="on"] body.csm .csm-meter .progress-bar.beat::after { animation: csm-beat .9s var(--csm-ease) 1 !important; }
  html[data-motion="on"] body.csm .criteria-btn.parameter-used { animation: csm-fill .7s var(--csm-ease) 1 !important; }
  html[data-motion="on"] .gene-tile:hover::after { animation: csm-twist 1.6s linear infinite !important; }
  html[data-motion="on"] .gene-tile-lqts:hover .qt-mini path { animation: csm-qt-draw 1.4s var(--csm-ease) infinite !important; }
  .csm-helix-spin::before { animation: csm-orbit 1s ease-in-out infinite !important; }
  .csm-helix-spin::after { animation: csm-orbit 1s ease-in-out -.5s infinite !important; }
}