/* ==========================================================================
   Where antiseizure medications act (components/asm-synapse.js)

   The frame is the shared teaching-figure frame (.brf). Each drug target
   belongs to one family, and the family sets one hue used three ways: the
   protein in the picture (--c), text in that hue (--ci, darker in light mode
   and lighter in dark mode so it reads on the surface) and a soft tint (--ct).
   Cells are pale tints of their own; membranes are one ink.
   ========================================================================== */

.asm-model {
  --asm-ecs: #faf9fc;
  --asm-mem: #8c80a1;
  --asm-pre-ex: #fff2e3;
  --asm-pre-in: #e3f6ec;
  --asm-post: #f2edfb;
  --asm-astro: #e2f2f6;
  --asm-thal: #fff5d6;
  --asm-ser-t: #fde9f2;
  --asm-ves: #ffffff;
  --asm-nucleus: #e6def3;
  --asm-mito: #fde3d3;
  --asm-er: #f1c9dd;
  --asm-ink: var(--text-color);
  --asm-muted: var(--text-secondary);
  --asm-ring: var(--text-color);
}
body.dark .asm-model {
  --asm-ecs: #362a4c;
  --asm-mem: #a99cc2;
  --asm-pre-ex: #57404a;
  --asm-pre-in: #2f5048;
  --asm-post: #463a62;
  --asm-astro: #2f4c5b;
  --asm-thal: #574b32;
  --asm-ser-t: #5a3a52;
  --asm-ves: #4d4166;
  --asm-nucleus: #574a74;
  --asm-mito: #6a4b47;
  --asm-er: #7a4d68;
}

/* family colors: shape, ink, tint */
.asm-model [data-fam="na"] { --c: #e5484d; --ci: #b4232f; }
.asm-model [data-fam="k"] { --c: #f2902f; --ci: #a2520a; }
.asm-model [data-fam="ca"] { --c: #e8b012; --ci: #8a6300; }
.asm-model [data-fam="rel"] { --c: #3b82f6; --ci: #1d5fc4; }
.asm-model [data-fam="glu"] { --c: #9b5de5; --ci: #6d34b8; }
.asm-model [data-fam="gaba"] { --c: #1fae78; --ci: #127650; }
.asm-model [data-fam="carb"] { --c: #14b3c2; --ci: #0b7882; }
.asm-model [data-fam="ser"] { --c: #ec4899; --ci: #b3246b; }
.asm-model [data-fam="cell"] { --c: #a27752; --ci: #7a5434; }
.asm-model [data-fam="cbd"] { --c: #86a92b; --ci: #577512; }
.asm-model [data-group="multi"] { --c: #6b6880; --ci: var(--text-color); }
body.dark .asm-model [data-fam="na"] { --c: #ff6b6f; --ci: #ff9da0; }
body.dark .asm-model [data-fam="k"] { --c: #ffa24d; --ci: #ffc28a; }
body.dark .asm-model [data-fam="ca"] { --c: #f5c63a; --ci: #f8d978; }
body.dark .asm-model [data-fam="rel"] { --c: #5f9cff; --ci: #a8c8ff; }
body.dark .asm-model [data-fam="glu"] { --c: #b585f5; --ci: #d4b6ff; }
body.dark .asm-model [data-fam="gaba"] { --c: #34c98f; --ci: #82e3bb; }
body.dark .asm-model [data-fam="carb"] { --c: #2ccbd9; --ci: #86e6ee; }
body.dark .asm-model [data-fam="ser"] { --c: #ff6fb2; --ci: #ffaad1; }
body.dark .asm-model [data-fam="cell"] { --c: #c49870; --ci: #e2c3a5; }
body.dark .asm-model [data-fam="cbd"] { --c: #a5c94a; --ci: #cbe58c; }
.asm-model [data-fam] { --ct: color-mix(in srgb, var(--c) 14%, transparent); }

/* ------------------------------------------------------------ header */
.asm-head { margin: 0 0 0.75rem; }
.asm-title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--text-color); }
.asm-sub { margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }

.asm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.6rem;
}
.asm-views { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.asm-view,
.asm-play,
.asm-clear,
button.asm-find {
  min-height: 36px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-color);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.asm-view:hover, .asm-play:hover, .asm-clear:hover, button.asm-find:hover { background: var(--surface-2); }
.asm-view.is-active { border-color: var(--text-color); background: var(--text-color); color: var(--surface-1); }
.asm-play { display: inline-flex; align-items: center; gap: 0.45rem; }
.asm-play-icon {
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.asm-play[aria-pressed="true"] .asm-play-icon { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.asm-model :is(button, [tabindex]):focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }

/* ------------------------------------------------------------ the picture */
.asm-stage {
  position: relative;
  aspect-ratio: 1200 / 760;
  border-radius: 14px;
  overflow: hidden;
  background: var(--asm-ecs);
  touch-action: manipulation;
}
.asm-stage.is-narrow { aspect-ratio: 4 / 3; }
.asm-svg { display: block; width: 100%; height: 100%; }
.asm-svg text { font-family: inherit; }
.asm-ecs { fill: var(--asm-ecs); }
.asm-cell { stroke: none; }
.asm-pre-ex { fill: var(--asm-pre-ex); }
.asm-pre-in { fill: var(--asm-pre-in); }
.asm-post { fill: var(--asm-post); }
.asm-astro { fill: var(--asm-astro); }
.asm-thal { fill: var(--asm-thal); }
.asm-ser-t { fill: var(--asm-ser-t); }
.asm-mem { fill: none; stroke: var(--asm-mem); stroke-width: 6; stroke-linejoin: round; stroke-opacity: 0.55; }
.asm-mem-thin { stroke: var(--asm-mem); stroke-width: 4; stroke-opacity: 0.5; }
.asm-dend { fill: none; stroke: var(--asm-thal); stroke-width: 12; stroke-linecap: round; }
.asm-nucleus { fill: var(--asm-nucleus); stroke: var(--asm-mem); stroke-width: 3; stroke-opacity: 0.45; }
.asm-er { fill: none; stroke: var(--asm-er); stroke-width: 9; stroke-linecap: round; }
.asm-mito ellipse { fill: var(--asm-mito); stroke: var(--asm-mem); stroke-width: 2; stroke-opacity: 0.5; }
.asm-mito path { fill: none; stroke: var(--asm-mem); stroke-width: 1.5; stroke-opacity: 0.45; }
.asm-inset { fill: var(--surface-1); stroke: var(--border-color); stroke-width: 1.5; }
.asm-trace { fill: none; stroke: var(--text-color); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.asm-region { font-size: 16px; font-weight: 700; fill: var(--asm-muted); }
.asm-region-in { font-size: 14px; font-weight: 600; }
.asm-ion { font-size: 13px; font-weight: 700; fill: var(--asm-muted); opacity: 0.8; }
.asm-ves-wall { fill: var(--asm-ves); stroke: var(--asm-mem); stroke-width: 1.5; stroke-opacity: 0.7; }
.asm-cargo-glu { fill: #8f5bd6; }
.asm-cargo-gaba { fill: #1d9a6b; }
.asm-cargo-ser { fill: #d63f88; }
body.dark .asm-cargo-glu { fill: #c49bff; }
body.dark .asm-cargo-gaba { fill: #5fd8a6; }
body.dark .asm-cargo-ser { fill: #ff8cc4; }
.asm-dna { fill: none; stroke: var(--asm-mem); stroke-width: 2.5; stroke-opacity: 0.6; }
.asm-intext { font-size: 12px; font-weight: 700; fill: #fff; pointer-events: none; }
.asm-intext-dark { fill: var(--asm-muted); font-weight: 600; }
.asm-brake { stroke: var(--asm-mem); stroke-width: 5; stroke-linecap: round; }

/* targets */
.asm-t { cursor: pointer; outline: none; }
.asm-hit { fill: transparent; stroke: transparent; stroke-width: 2.5; transition: fill 0.15s ease, stroke 0.15s ease; }
.asm-sh { fill: var(--c); stroke: color-mix(in srgb, var(--c) 70%, #000); stroke-width: 1; }
.asm-sub { fill: color-mix(in srgb, var(--c) 70%, #fff); }
.asm-helix { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; }
.asm-stalk { stroke: var(--c); stroke-width: 3; }
.asm-gate { stroke: color-mix(in srgb, var(--c) 60%, #000); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.asm-mg { fill: #9a96a8; stroke: #fff; stroke-width: 1; }
.asm-site { fill: #fff; stroke: color-mix(in srgb, var(--c) 60%, #000); stroke-width: 1.2; }
.asm-arrow { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.asm-lab { font-size: 16px; font-weight: 700; fill: var(--ci); pointer-events: none; }
.asm-lab2 { font-size: 13.5px; font-weight: 600; }
.asm-t:hover .asm-hit,
.asm-t:focus-visible .asm-hit { fill: var(--ct); stroke: var(--c); }
.asm-svg.has-sel .asm-t:not(.is-on):not(.is-also) { opacity: 0.28; }
.asm-svg.has-sel .asm-t:not(.is-on):not(.is-also):hover,
.asm-svg.has-sel .asm-t:not(.is-on):not(.is-also):focus-visible { opacity: 0.75; }
.asm-t.is-on .asm-hit { fill: var(--ct); stroke: var(--c); stroke-width: 3; }
.asm-t.is-on .asm-shapes { filter: drop-shadow(0 0 6px var(--c)); }
.asm-t.is-also .asm-hit { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-dasharray: 7 5; }
.asm-t { transition: opacity 0.2s ease; }

/* signalling (plays only on request, and never with reduced motion) */
.asm-flow, .asm-ap { opacity: 0; }
.asm-model.is-playing .asm-flow { opacity: 1; }
.asm-model.is-playing .asm-drift { animation: asm-drift 1.8s ease-in infinite; }
.asm-model.is-playing .asm-drift-left { animation: asm-drift-left 2s ease-in-out infinite; }
.asm-model.is-playing .asm-ap { animation: asm-ap 1.8s linear infinite; }
.asm-model.is-playing .asm-ap-in { animation-delay: 0.6s; }
.asm-model.is-playing .asm-trace { stroke-dasharray: 260; animation: asm-trace 2.4s linear infinite; }
.asm-ap { fill: #ffd84d; stroke: #e5484d; stroke-width: 2; }
@keyframes asm-drift { 0% { transform: translateY(-8px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes asm-drift-left { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-26px); opacity: 0; } }
@keyframes asm-ap { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(96px); opacity: 1; } 75%, 100% { transform: translateY(110px); opacity: 0; } }
@keyframes asm-trace { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .asm-model.is-playing .asm-drift, .asm-model.is-playing .asm-drift-left, .asm-model.is-playing .asm-ap, .asm-model.is-playing .asm-trace { animation: none; }
  .asm-model.is-playing .asm-ap { opacity: 1; }
  .asm-t, .asm-hit { transition: none; }
}

/* ------------------------------------------------------------ details and drugs */
.asm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1rem 1.25rem;
  margin-top: 1rem;
  align-items: start;
}
.asm-detail {
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-color);
}
.asm-detail p { margin: 0 0 0.55rem; }
.asm-detail p:last-child { margin-bottom: 0; }
.asm-kicker { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.2rem !important; font-size: 0.8125rem; font-weight: 600; color: var(--ci, var(--text-secondary)); }
.asm-d-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.asm-d-row { display: grid; gap: 0.3rem; }
.asm-d-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); }
.asm-point { padding: 0.55rem 0.7rem; border-left: 3px solid var(--accent-color); background: var(--surface-1); border-radius: 0 8px 8px 0; }
.asm-warn { font-size: 0.875rem; color: var(--text-secondary); }
.asm-src { font-size: 0.8125rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.asm-src a { color: var(--accent-color); }
.asm-d-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.asm-clear { margin-top: 0.2rem; }
a.asm-find { font-size: 0.875rem; font-weight: 600; color: var(--accent-color); }
.asm-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.75rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--text-secondary); }
.asm-key li { display: flex; align-items: center; gap: 0.4rem; }
.asm-dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--c, var(--text-secondary)); }
.asm-acts { display: grid; gap: 0.35rem; margin: 0.2rem 0 0.7rem; padding: 0; list-style: none; }
.asm-acts li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.asm-act {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 34px; padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--border-color));
  border-radius: 10px; background: var(--ct); color: var(--text-color);
  font: inherit; font-size: 0.875rem; font-weight: 600; text-align: left; cursor: pointer;
}
.asm-act-kind { flex: none; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }

.asm-drugs-title { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--text-color); }
.asm-group + .asm-group { margin-top: 0.6rem; }
.asm-group-name { margin: 0 0 0.3rem; font-size: 0.8125rem; font-weight: 700; color: var(--ci, var(--text-secondary)); }
.asm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.asm-chips-inline { display: flex; }
.asm-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 34px; padding: 0.28rem 0.7rem;
  border: 1px solid var(--border-color); border-radius: 999px;
  background: var(--surface-1); color: var(--text-color);
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.asm-chip:hover { border-color: var(--c); }
.asm-chip-note { font-weight: 500; font-size: 0.75rem; color: var(--text-secondary); }
.asm-drugs.has-sel .asm-chip:not(.is-lit) { opacity: 0.55; }
.asm-chip.is-lit { border-color: var(--c); background: var(--ct); }
.asm-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c); }
@media (prefers-reduced-motion: reduce) { .asm-chip { transition: none; } }

@media (max-width: 760px) {
  .asm-body { grid-template-columns: minmax(0, 1fr); }
  /* the zoom buttons scroll sideways in one row */
  .asm-bar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  .asm-views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -0.2rem; padding: 0.1rem 0.2rem; }
  .asm-views::-webkit-scrollbar { display: none; }
  .asm-view { flex: none; }
  .asm-play { align-self: flex-start; }
}
@media (max-width: 600px) {
  .asm-model.brf { padding: 0.75rem; }
  .asm-detail { padding: 0.75rem 0.8rem; }
  .asm-view { min-height: 34px; padding: 0.3rem 0.65rem; font-size: 0.8125rem; }
  .asm-key { grid-template-columns: minmax(0, 1fr); }
}

/* where the medication tab hosts the model */
.asm-model-host { margin: 1.5rem 0 1.25rem; }