/* BoboEdu: flashcard-sociology-scenes.css */
/* Scenes carry their explanation through positions, props and scale. */
.soc-heading {
  fill: var(--ink);
  font: 900 13px var(--font-display);
  letter-spacing: 0.035em;
}
.soc-label {
  fill: var(--ink);
  font: 800 15px var(--font-ui);
}
.soc-small {
  fill: var(--ink);
  font: 700 11px var(--font-ui);
}
.soc-tiny {
  fill: var(--muted);
  font: 650 9px var(--font-ui);
}
.soc-answer {
  fill: var(--muted);
  font: 600 10px var(--font-ui);
}
.soc-mark {
  fill: var(--ink);
  font: 900 24px var(--font-ui);
}
.soc-number {
  fill: var(--ink);
  font: 900 20px var(--font-display);
}
.soc-line,
.soc-arrow,
.soc-axis,
.soc-link,
.soc-dashed,
.soc-bars,
.soc-puppet-string,
.soc-window-lead,
.soc-globe-grid,
.soc-return-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.soc-arrow,
.soc-axis {
  stroke: var(--ink);
}
.soc-link {
  stroke: var(--line-strong);
  stroke-width: 3;
}
.soc-dashed {
  stroke-dasharray: 5 6;
}
.soc-puppet-string {
  stroke: var(--muted);
  stroke-width: 1.6;
}
.soc-bubble {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
}
.soc-paper,
.soc-book,
.soc-envelope {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.soc-building,
.soc-stage,
.soc-platform,
.soc-pulpit,
.soc-bus {
  fill: var(--accent-soft);
  stroke: var(--line-strong);
  stroke-width: 3;
  stroke-linejoin: round;
}
.soc-door,
.soc-coat {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.8;
}
.soc-coin,
.soc-crown {
  fill: #f2c14e;
  stroke: #b07d12;
  stroke-width: 2;
  stroke-linejoin: round;
}
.soc-gear {
  fill: var(--tint);
  stroke: var(--line-strong);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.soc-gear-core {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.soc-badge,
.soc-rule-sign,
.soc-placard {
  fill: var(--tint);
  stroke: var(--ink);
  stroke-width: 2;
}
.soc-stop {
  fill: var(--bad-soft);
  stroke: var(--bad);
  stroke-width: 2.5;
}
.soc-tray {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
}
.soc-food {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2;
}
.soc-ruler {
  fill: #f2c14e;
  stroke: #b07d12;
  stroke-width: 2;
}
.soc-cross {
  fill: none;
  stroke: var(--bad);
  stroke-width: 4;
  stroke-linecap: round;
}
.soc-space {
  fill: var(--accent-soft);
  fill-opacity: 0.36;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.soc-space-alt {
  fill: var(--tint);
}
.soc-identity-disc {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.soc-curtain {
  fill: var(--tint);
  stroke: var(--line-strong);
  stroke-width: 2;
}
.soc-road {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 19;
  stroke-linecap: round;
}
.soc-foundation {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2.5;
}
.soc-fog {
  fill: var(--surface);
  fill-opacity: 0.91;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
}
.soc-meaning-disc {
  fill: var(--tint);
  stroke: var(--ink);
  stroke-width: 2;
}
.soc-boundary {
  fill: var(--accent-soft);
  fill-opacity: 0.25;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 7 5;
}
.soc-boundary-narrow {
  stroke: var(--tint);
  stroke-dasharray: 3 3;
}
.soc-dais {
  fill: var(--accent-soft);
  stroke: var(--line-strong);
  stroke-width: 2.5;
}
.soc-emblem {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 3;
}
.soc-mug {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 3;
}
.soc-community-ring {
  fill: var(--accent-soft);
  fill-opacity: 0.25;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.soc-community-1 {
  fill: var(--good-soft);
  stroke: var(--good);
}
.soc-community-2 {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.soc-water {
  fill: none;
  stroke: #55b7df;
  stroke-width: 5;
  stroke-linecap: round;
}
.soc-canoe {
  fill: #dba568;
  stroke: #8f5d32;
  stroke-width: 3;
  stroke-linejoin: round;
}
.soc-paddle {
  fill: #dba568;
  stroke: #8f5d32;
  stroke-width: 3;
  stroke-linejoin: round;
}
.soc-shelter {
  fill: none;
  stroke: var(--good);
  stroke-width: 5;
  stroke-linecap: round;
}
.soc-fracture {
  fill: none;
  stroke: var(--bad);
  stroke-width: 3;
  stroke-linejoin: round;
}
.soc-gate {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 6;
}
.soc-open-door {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 3;
}
.soc-lock {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2;
}
.soc-wheel {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 5;
}
.soc-glass {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}
.soc-seal {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 2;
}
.soc-return-arrow {
  stroke: var(--good);
  stroke-dasharray: 5 4;
}
.soc-church-mark {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 4;
}
.soc-fading-influence {
  fill: none;
  stroke: var(--muted);
  stroke-width: 17;
  stroke-dasharray: 2 12;
  opacity: 0.6;
}
.soc-lamp {
  fill: #f2c14e;
  stroke: #b07d12;
  stroke-width: 2;
}
.soc-signpost {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.soc-barrier {
  fill: none;
  stroke: var(--bad);
  stroke-width: 7;
  stroke-linecap: round;
}
.soc-window {
  fill: var(--tint);
  stroke: var(--line-strong);
  stroke-width: 3;
}
.soc-window-lead {
  stroke: var(--line-strong);
  stroke-width: 4;
}
.soc-tv {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 5;
}
.soc-sofa {
  fill: var(--tint);
  stroke: var(--line-strong);
  stroke-width: 3;
}
.soc-signal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.soc-chart-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.soc-data-bar {
  fill: var(--accent);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.soc-data-bar-1 {
  fill: var(--tint);
}
.soc-data-dot {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 1;
}
.soc-stat-filled {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1;
}
.soc-stat-empty {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.soc-globe {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
}
.soc-globe-grid {
  stroke-width: 1.5;
}
.soc-magnifier {
  fill: var(--accent-soft);
  fill-opacity: 0.25;
  stroke: var(--accent);
  stroke-width: 4;
}
.soc-inspect-handle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
}
.soc-opportunity-steps {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 13;
  stroke-linejoin: round;
}
.soc-opportunity-sign {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2;
}
.soc-dark-room {
  fill: var(--bg);
  stroke: var(--muted);
  stroke-width: 3;
}
.soc-light-label {
  fill: var(--muted);
  font: 700 11px var(--font-ui);
}
.soc-map-land {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2.5;
}
.soc-map-point {
  fill: var(--bad);
  stroke: var(--surface);
  stroke-width: 2;
}
.soc-terrain {
  fill: none;
  stroke: var(--good);
  stroke-width: 3;
}
.soc-fence {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 3;
}
.soc-dna,
.soc-dna-rung {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.soc-dna-rung {
  stroke: var(--tint);
  stroke-width: 2;
}
.soc-clothes-rail {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 5;
}
.soc-hanging-tag {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.soc-calendar {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.soc-compass {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}
.soc-compass-needle {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 2;
}
.soc-domino {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.soc-clock {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}
.soc-microscope {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linejoin: round;
}
.soc-uncertain-past {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
.soc-brain {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
}
.soc-neural-link {
  fill: none;
  stroke: var(--tint);
  stroke-width: 3;
}
.soc-neuron {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.soc-block {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2;
}
.soc-source-tag {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2;
}
.soc-bone {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
}
.soc-beetle {
  fill: var(--ink);
  stroke: var(--muted);
  stroke-width: 1.5;
}
.soc-beetle-legs {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.soc-theory-lens {
  fill: var(--accent-soft);
  fill-opacity: 0.25;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.soc-tipi {
  fill: var(--surface);
  stroke: #9c7547;
  stroke-width: 3;
}
.soc-robe {
  fill: #9c7547;
  stroke: #614124;
  stroke-width: 2.5;
}
.soc-scales {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
}
.soc-product {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2.5;
}
.soc-heart {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 3;
}
.soc-crystal {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.soc-crossing {
  fill: none;
  stroke: var(--surface);
  stroke-width: 12;
}
.soc-brickwork {
  fill: var(--accent-soft);
  stroke: var(--line-strong);
  stroke-width: 2.5;
}
.soc-route-map {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
}
.soc-faded-bobo {
  opacity: 0.25;
}
.diagram-disclosure[open] .soc-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: soc-gear-mesh 1.2s ease-in-out 0s infinite alternate;
}
.diagram-disclosure[open] .soc-gear-reverse {
  animation-direction: alternate-reverse;
}
.diagram-disclosure[open] .soc-bobo-retreat .diagram-bobo-body {
  animation: soc-back-away 2s ease-in-out 0s infinite alternate;
}
.diagram-disclosure[open] .soc-signal {
  animation: soc-broadcast 1s ease-in-out 0s infinite;
}
@keyframes soc-gear-mesh {
  to {
    transform: rotate(18deg);
  }
}
@keyframes soc-back-away {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-80px);
  }
}
@keyframes soc-broadcast {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diagram-disclosure[open] .soc-gear,
  .diagram-disclosure[open] .soc-bobo-retreat .diagram-bobo-body,
  .diagram-disclosure[open] .soc-signal {
    animation: none !important;
  }
}