/* United States Treasury security lesson. All rules scoped under .tsec-* */

.tsec-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tsec-sc > svg { display: block; width: 100%; height: auto; max-height: 46vh; overflow: visible; }
.tsec-hero { width: min(90%, 360px); }
.tsec-hero img { width: 100%; display: block; }
.tsec-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the real certificates */
.tsec-photo { width: min(100%, 380px); display: flex; flex-direction: column; align-items: center; }
.tsec-photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.tsec-face { max-height: 29vh; object-fit: contain; }
.tsec-coupons { margin-top: 3px; max-height: 13vh; object-fit: contain; outline: 2px dashed var(--gold); outline-offset: 2px; animation: tsec-drop .5s ease-out; }
@keyframes tsec-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* the note machine */
.tsec-top { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tsec-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--violet-bright); background: linear-gradient(160deg, #2A2548, #17142C); transition: opacity .4s, border-color .4s; }
.tsec-card small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.tsec-card b { font: 800 22px var(--serif); color: var(--text); }
.tsec-card span { font-size: 13px; font-weight: 700; color: var(--dim); }
.tsec-card.paid { border-color: var(--gold); opacity: .5; }
.tsec-grid { width: 100%; max-width: 380px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.tsec-cp { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 6px; background: #EFE9D8; border: 1.5px dashed #9C937A; color: #2B2A28; transition: transform .35s, opacity .35s, background .35s; }
.tsec-cp b { font: 800 14px var(--serif); }
.tsec-cp span { font-size: 12px; font-weight: 700; color: #5B5646; }
.tsec-cp.cut { transform: translateY(6px) rotate(-6deg) scale(.9); opacity: .35; background: var(--gold); border-style: solid; }
.tsec-wallet { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tsec-wallet span { font-size: 13px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.tsec-wallet b { font: 800 22px var(--serif); color: var(--gold); }

/* the bill: pay less now, get more later */
.tsec-flow { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 6px; }
.tsec-flow > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tsec-flow .pay, .tsec-flow .get { padding: 14px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.tsec-flow small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tsec-flow b { font: 800 20px var(--serif); color: var(--text); }
.tsec-flow .get b { color: var(--mint); }
.tsec-flow .mid i { display: block; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--violet-bright), var(--mint)); transform-origin: left; transform: scaleX(0); transition: transform .8s ease-out; }
.tsec-flow.on .mid i { transform: scaleX(1); }
.tsec-flow .mid span { font-size: 13px; font-weight: 700; color: var(--dim); }

/* four kinds */
.tsec-bar { width: 100%; max-width: 380px; height: 18px; display: flex; gap: 2px; border-radius: 9px; overflow: hidden; }
.tsec-bar i { flex: 1 1 0; transition: flex-grow .9s ease-out; }
.tsec-bar .k-bill, .tsec-kind.k-bill em { background: var(--mint); }
.tsec-bar .k-note, .tsec-kind.k-note em { background: var(--violet-bright); }
.tsec-bar .k-bond, .tsec-kind.k-bond em { background: var(--gold); }
.tsec-bar .k-tips, .tsec-kind.k-tips em { background: #FF9F5A; }
.tsec-bar .k-frn { background: var(--line-strong); }
.tsec-kinds { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tsec-kind { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 6px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tsec-kind b { font-size: 16px; color: var(--text); }
.tsec-kind em { font-style: normal; font-size: 13px; font-weight: 800; color: #17142C; padding: 1px 7px; border-radius: 8px; }
.tsec-kind span { grid-column: 1 / 3; font-size: 13px; color: var(--dim); line-height: 1.3; }

/* last puzzle */
.tsec-ios { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tsec-io { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.tsec-io > b { font: 800 18px var(--serif); color: var(--text); }
.tsec-io span { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.tsec-io small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tsec-io em { font: 800 22px var(--serif); font-style: normal; color: var(--gold); min-height: 1.2em; }
.tsec-ios.on .tsec-io { border-color: var(--gold); }

@media (max-height: 700px) {
  .tsec-hero { width: min(72%, 270px); }
  .tsec-face { max-height: 28vh; }
  .tsec-coupons { max-height: 11vh; }
  .tsec-cp { padding: 3px 2px; }
  .tsec-sc > svg { max-height: 36vh; }
  .tsec-kind { padding: 7px 10px; }
}