/* Strike Trade Balance Techniques: per-slide layout. Shared look comes from ../assets/deck.css and kit.css. */
.slide { padding: 54px 90px 60px; justify-content: flex-start; }
.slide.center { justify-content: center; }
.slide h2.sm { font-size: 44px; margin-bottom: 18px; }
.slide .kicker { font-size: 24px; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.small { font-size: 20px !important; }
.out { font-size: 22px !important; line-height: 1.38 !important; min-height: 4.2em; margin: 14px 0 0; }
.row.wrap { flex-wrap: wrap; gap: 10px; }
canvas.demo { background: transparent; border: 0; cursor: default; }
kbd { font-family: Jost, sans-serif; font-size: 13px; opacity: .6; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* the three techniques' colours, used on buttons, labels and cards */
b.ar, th.ar { color: #8fd3ff; } b.sa, th.sa { color: #ffb547; } b.im, th.im { color: #c79bff; }
.btn.m-ar.on { background: #8fd3ff; border-color: #8fd3ff; color: #071a3d; }
.btn.m-sa.on { background: #ffb547; border-color: #ffb547; color: #071a3d; }
.btn.m-im.on { background: #c79bff; border-color: #c79bff; color: #071a3d; }
.btn.yes { box-shadow: 0 0 0 3px var(--good); }
.btn.no { box-shadow: 0 0 0 3px var(--bad); opacity: .8; }

/* title */
.tri { display: flex; gap: 30px; justify-content: center; margin-top: 10px; }
.tri-c { width: 270px; display: grid; justify-items: center; gap: 6px; padding: 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.tri-c img { height: 80px; width: auto; }
.tri-c b { font-family: var(--display); font-size: 24px; text-transform: uppercase; }
.tri-c span { font-size: 21px; color: var(--muted); }
.tri-c.ar b { color: #8fd3ff; } .tri-c.sa b { color: #ffb547; } .tri-c.im b { color: #c79bff; }

/* the playable trade */
.tr-grid { display: grid; grid-template-columns: 840px 1fr; gap: 34px; }
.tr-canvas { width: 840px; height: 600px; }
.tr-side h4 { font-family: var(--display); font-size: 16px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.tr-side h4 + .row { margin-bottom: 16px; }
.tr-side .btn { font-size: 18px; padding: 8px 14px; }
.tr-opts .btn { font-size: 16px; padding: 6px 12px; }
.tr-out { font-size: 20px !important; }
table.tr-cmp { border-collapse: separate; border-spacing: 0 4px; width: 100%; font-size: 17px; margin-top: 4px; }
table.tr-cmp th { text-align: left; font-weight: 500; color: var(--muted); padding: 2px 8px; font-size: 14px; }
table.tr-cmp tr[data-m] { cursor: pointer; }
table.tr-cmp tr[data-m] th { color: var(--c); font-size: 17px; font-weight: 600; border-left: 4px solid var(--c); }
table.tr-cmp td { padding: 5px 8px; background: rgba(255,255,255,.04); }
table.tr-cmp tr.cur td, table.tr-cmp tr.cur th { background: rgba(255,255,255,.12); }
table.tr-cmp tr[data-m]:hover td { background: rgba(255,255,255,.09); }
.w-atk { color: #ff8b7b; } .w-you { color: var(--good); } .w-trade { color: #ffd27a; }

/* outcome grid */
.gr-row { align-items: flex-start; gap: 40px; }
table.gr { border-collapse: separate; border-spacing: 6px; font-size: 20px; }
table.gr th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 10px; white-space: nowrap; }
table.gr tr:first-child th { text-align: center; color: var(--text); font-weight: 500; }
table.gr td { background: var(--c); color: #0b1830; border-radius: 8px; padding: 10px 14px; min-width: 190px; cursor: pointer; transition: transform .15s; }
table.gr td:hover { transform: scale(1.04); }
table.gr td b { display: block; font-size: 20px; }
table.gr td span { font-size: 15px; opacity: .8; }
.gr-side { flex: 1; }
.gr-key p { font-size: 22px; margin: 0 0 14px; }

/* which would you use */
.pk-grid { display: grid; grid-template-columns: 760px 1fr; gap: 36px; }
.spine-box { background: #9a9a9a; border-radius: 16px; height: 470px; overflow: hidden; }
.pk-shows { font-size: 19px !important; line-height: 1.35 !important; margin: 10px 0 0; min-height: 2.7em; }
.atk { color: #ff7b8a; } .def { color: var(--accent-2); }
.pk-cases { margin-top: 14px; }
.pk-cases .btn, .pk-ans .btn { font-size: 18px; padding: 8px 14px; }
.pk-q { font-size: 28px !important; min-height: 4em; margin: 0 0 18px; }
.pk-ans { gap: 14px; }
.pk-ans .btn { font-size: 22px; padding: 12px 20px; }

/* summary */
.sum3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 10px; }
.sum3 .sum-c { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 10px; font-size: 22px; align-content: start; }
.sum3 .sum-c img { height: 70px; width: auto; }
.sum3 .sum-c b { font-family: var(--display); font-size: 26px; text-transform: uppercase; }
.sum3 .sum-c i { font-style: normal; color: var(--text); font-weight: 600; }
.sum3 .sum-c.ar b { color: #8fd3ff; } .sum3 .sum-c.sa b { color: #ffb547; } .sum3 .sum-c.im b { color: #c79bff; }

/* parchment slides: the technique colours are pastel for navy, so text in them is mixed toward the deck's ink */
.slide:not(.center) :is(b.ar, th.ar) { color: #2a72b8; }
.slide:not(.center) :is(b.sa, th.sa) { color: #a8650a; }
.slide:not(.center) :is(b.im, th.im) { color: #7a48c4; }
.slide:not(.center) table.tr-cmp tr[data-m] th { color: color-mix(in srgb, var(--c) 45%, #1b2050); }
.slide:not(.center) table.tr-cmp td { background: rgba(38,44,106,.04); }
.slide:not(.center) table.tr-cmp tr.cur td, .slide:not(.center) table.tr-cmp tr.cur th { background: rgba(38,44,106,.1); }
.slide:not(.center) .w-atk { color: #c8323c; } .slide:not(.center) .w-trade { color: #a8650a; }
.slide:not(.center) .sum3 .sum-c.ar b { color: #2a72b8; } .slide:not(.center) .sum3 .sum-c.sa b { color: #a8650a; } .slide:not(.center) .sum3 .sum-c.im b { color: #7a48c4; }
.slide:not(.center) .atk { color: #c8323c; }