/* Single-chain variable fragment lesson. All rules scoped under .scf-* */

.scf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scf-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.scf-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.scf-hero { width: min(80%, 320px); }
.scf-hero img { width: 100%; display: block; }
.scf-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; transition: opacity .3s; }
.scf-t.dim { fill: var(--dim); font-size: 13px; }
.scf-t.start { text-anchor: start; }
.scf-t.gone { opacity: 0; }

.scf-d { stroke-width: 2; }
.scf-d.h { fill: #4A3F9E; stroke: var(--violet-bright); }
.scf-d.l { fill: #1F5A48; stroke: var(--mint); }
.scf-d.v { stroke: var(--gold); stroke-width: 3; }
.scf-d.g2 { stroke: #7FC8FF; }
.scf-hinge { stroke: var(--violet-bright); stroke-width: 3; }
.scf-ag circle { fill: rgba(252,192,80,.25); stroke: var(--gold); stroke-width: 2; }
.scf-ag path { fill: var(--gold); }

/* carving */
.scf-hit { fill: transparent; }
.scf-cut { cursor: pointer; }
.scf-mv { transition: transform .5s ease-in, opacity .5s; }
.scf-cut.gone .scf-mv { transform: translateY(40px); opacity: 0; }
.scf-cut.gone { pointer-events: none; }
.scf-cut.no .scf-d { stroke: var(--red); }
.scf-left .scf-cut:not(.gone) .scf-d { filter: drop-shadow(0 0 6px rgba(252,192,80,.6)); }

/* the pair */
.scf-link { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; }
.scf-pair .scf-link { opacity: 0; transition: opacity .3s; }
.scf-pair.tied .scf-link { opacity: 1; }
.scf-linker .scf-link, .scf-pair:has(.scf-beads) .scf-link { opacity: .35; }
.scf-bead { fill: var(--gold); }
.scf-pair .scf-t { font-size: 13px; }
.scf-ag2 { transition: transform .35s ease-out; }
.scf-pair.shut .scf-d { filter: drop-shadow(0 0 6px rgba(63,214,154,.5)); }
.scf-state { font-weight: 700; }
.scf-pair.shut .scf-state { fill: var(--mint); }

/* the trade */
.scf-gain { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; padding-top: 8px; }
.scf-gain.one { grid-template-columns: 1fr; }
.scf-gain div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 12px; text-align: center; }
.scf-gain b { display: block; font: 700 26px var(--serif); color: var(--gold); margin-bottom: 6px; }
.scf-gain span { font-size: 14px; color: var(--dim); line-height: 1.35; }

/* two grips */
.scf-cancer { fill: rgba(216,85,95,.2); stroke: #D8555F; stroke-width: 2.5; transition: opacity .5s; }
.scf-tcell { fill: rgba(123,92,253,.16); stroke: var(--violet-bright); stroke-width: 2.5; }
.scf-kn.tri { fill: var(--gold); }
.scf-kn.sq { fill: #7FC8FF; }
.scf-bite.killed .scf-lc { opacity: .3; transition: opacity .5s; }
.scf-stalk { stroke: var(--text); stroke-width: 4; }

@media (max-height: 700px) {
  .scf-hero { width: min(62%, 240px); }
  .scf-y { max-height: 226px; }
  .scf-pair { max-height: 214px; }
}

.scf-key { display: flex; gap: 14px; justify-content: center; font-size: 13px; color: var(--dim); font-weight: 600; }
.scf-key span { display: inline-flex; align-items: center; gap: 6px; }
.scf-key i { width: 18px; height: 13px; border-radius: 4px; border: 2px solid; }
.scf-key i.h { background: #4A3F9E; border-color: var(--violet-bright); }
.scf-key i.l { background: #1F5A48; border-color: var(--mint); }
.scf-key i.v { background: #4A3F9E; border-color: var(--gold); }