/* Traumatic bonding lesson. All rules scoped under .tbd-* */

.tbd-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; --cold: #4A5578; --cruel: #D85555; --kind: #FCC050; --jess: #F29BC0; --rob: #7CC0EE; }
.tbd-note { font-size: 12px; color: var(--faint); text-align: center; }
.tbd-q { font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; }

/* the two ingredients */
.tbd-ing { display: flex; justify-content: center; gap: 8px; }
.tbd-ing span { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--faint); border: 1px solid var(--line); }
.tbd-ing .tbd-lit.tbd-i1 { color: #1A1206; background: var(--kind); border-color: var(--kind); }
.tbd-ing .tbd-lit.tbd-i2 { color: #06121A; background: var(--rob); border-color: var(--rob); }
.tbd-two { display: flex; flex-direction: column; gap: 10px; }
.tbd-two div { padding: 14px 16px; border-radius: 16px; background: var(--surface); border-left: 6px solid var(--kind); }
.tbd-two .tbd-i2 { border-left-color: var(--rob); }
.tbd-two b { font-size: 17px; color: var(--kind); }
.tbd-two .tbd-i2 b { color: var(--rob); }
.tbd-two p { margin: 4px 0 0; font: 600 16px/1.3 var(--serif); }

/* the week */
.tbd-week { position: relative; width: 100%; }
.tbd-wsvg { display: block; width: 100%; height: auto; overflow: visible; }
.tbd-ax { font: 700 12px var(--sans); fill: var(--faint); }
.tbd-day { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.tbd-base { stroke: var(--line); stroke-width: 1; }
.tbd-line { fill: none; stroke: var(--jess); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tbd-dot { fill: var(--jess); stroke: var(--bg); stroke-width: 2; }
.tbd-dot.tbd-worst { fill: var(--cruel); }
.tbd-drop { stroke: var(--kind); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }
.tbd-fl { fill: #3A2A10; stroke: var(--kind); stroke-width: 2; }
.tbd-bloom ellipse { fill: #F58FB8; }
.tbd-bloom circle { fill: var(--kind); }
.tbd-rb { fill: var(--kind); opacity: .28; }
.tbd-rb.tbd-rbest { opacity: .95; }
.tbd-rb.tbd-rpick:not(.tbd-rbest) { opacity: .6; fill: #F58FB8; }
.tbd-week { touch-action: none; cursor: ew-resize; }
.tbd-grab { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }

/* the cold spells */
.tbd-spells { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--surface); }
.tbd-srow { display: flex; align-items: center; gap: 8px; }
.tbd-sn { flex: 0 0 52px; font-size: 12px; color: var(--dim); text-align: right; }
.tbd-srow:nth-child(5) .tbd-sn { color: var(--text); }
.tbd-tiles { display: flex; flex-wrap: wrap; gap: 3px; }
.tbd-tiles i, .tbd-key i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-style: normal; }
.tbd-cold { background: var(--cold); }
.tbd-kind { background: #3A2A10; box-shadow: inset 0 0 0 2px var(--kind); }
.tbd-kind svg { width: 18px; height: 18px; }
.tbd-next { background: transparent; box-shadow: inset 0 0 0 2px var(--dim); color: var(--dim); font-size: 13px; font-weight: 800; }
.tbd-next.tbd-hope { box-shadow: inset 0 0 0 2px var(--kind); color: var(--kind); }
.tbd-key { display: flex; justify-content: center; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--dim); }
.tbd-key span { display: flex; align-items: center; gap: 5px; }
.tbd-key i { width: 14px; height: 14px; border-radius: 4px; }

/* the seesaw */
.tbd-saw { display: block; width: 100%; height: auto; overflow: visible; }
.tbd-fulc { fill: var(--raised); stroke: var(--line-strong); }
.tbd-ground { stroke: var(--line); }
.tbd-plank { fill: #8A7A5E; }
.tbd-rob { fill: var(--rob); }
.tbd-jess { fill: var(--jess); }
.tbd-init { font: 800 15px var(--sans); fill: #0A0E1A; text-anchor: middle; }
.tbd-who { font: 800 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.tbd-wt { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.tbd-g .gt i { background: var(--jess); }
#controls .btn.tbd-load { transition: opacity .3s; }
#controls .btn.tbd-load.tbd-gone { opacity: .25; }

/* after leaving */
.tbd-bars { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); }
.tbd-brow { position: relative; display: flex; flex-direction: column; gap: 4px; }
.tbd-brow span { font-size: 13px; font-weight: 700; color: var(--dim); }
.tbd-brow div { height: 22px; border-radius: 8px; background: var(--raised); overflow: hidden; }
.tbd-brow b { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--jess); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.tbd-drop27 { position: absolute; right: 0; top: 0; font: 800 13px var(--sans); font-style: normal; color: var(--kind); }

@media (max-height: 700px) {
  .tbd-wsvg { max-height: 200px; }
  .tbd-saw { max-height: 150px; }
  .tbd-tiles i { width: 18px; height: 18px; }
}