/* Scene card widget (widgets/scenecard/scenecard.js): a ruled index card that turns over. */
.sc__card { position: relative; display: grid; perspective: 1400px; }
.sc__turn { align-self: flex-start; }
.sc__face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; border-radius: 6px; background: var(--wk-card); box-shadow: 0 1px 0 var(--line), 0 10px 26px rgba(0,0,0,.18); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
/* Ruled like an index card: a copper line under the heading, faint copper lines under each field. */
.sc__front { background-image: linear-gradient(var(--wk-copper), var(--wk-copper)); background-size: 100% 1px; background-position: 0 56px; background-repeat: no-repeat; }
.sc__back { transform: rotateY(180deg); flex-direction: row; gap: 28px; }
.sc__card.is-over .sc__front { transform: rotateY(-180deg); }
.sc__card.is-over .sc__back { transform: rotateY(0); }
.sc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 22px; font-size: 12px; color: var(--muted); }
.sc__top b { font-size: 20px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.sc__top .wk-red i { height: 12px; }
.sc__fields { display: flex; flex-direction: column; }
.sc__f { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 32px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--wk-copper) 28%, transparent); outline: none; }
.sc__f:hover .sc__lbl, .sc__f:focus-visible .sc__lbl { color: var(--wk-copper); }
.sc__lbl { font-family: var(--wk-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease; }
.sc__f .wk-red i { height: 9px; }
.sc__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.sc__col b { font-size: 21px; font-weight: 600; }
.sc__col ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.sc__col li::marker { font-family: var(--wk-serif); font-weight: 600; color: var(--wk-copper); }
@media (max-width: 560px) {
  .sc__back { flex-direction: column; }
  .sc__f { grid-template-columns: 92px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sc__face { transition: none; } }