/* Unit 2, Lesson 3: build your 1040, sort the mail game. */
.split-msg[data-tone="good"], .fd-why[data-tone="good"] { border-color: var(--good); }
.split-msg[data-tone="warn"], .fd-why[data-tone="warn"] { border-color: var(--wants); }
.md-card { background: var(--card); border-radius: 24px; padding: clamp(18px, 3.5vw, 30px); box-shadow: 0 1px 0 var(--line), 0 24px 50px -30px rgba(60, 50, 30, .25); margin-top: 20px; }
.md-card .split-msg { margin: 16px 0 0; font-size: 17px; line-height: 1.55; padding-left: 14px; border-left: 4px solid var(--line); }
.md-lab { display: block; font-size: 15px; color: var(--ink-2); margin: 0 0 8px; }
.md-lab b { color: var(--ink); }
.fd { margin-top: 28px; background: var(--card); border-radius: 24px; padding: clamp(16px, 3vw, 28px); box-shadow: 0 1px 0 var(--line), 0 24px 50px -30px rgba(60, 50, 30, .25); }
.fd-top { display: flex; justify-content: space-between; gap: 16px 24px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fd-top small, .pg-score small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fd-top > div > b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35; }
.pg-score { text-align: right; flex: none; }
.pg-score b { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--good); font-variant-numeric: tabular-nums; }
.fd-opt { font: inherit; font-size: 16px; text-align: left; color: var(--ink); background: var(--paper-2); border: 1.5px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.fd-opt:hover:not(:disabled) { border-color: var(--ink-3); }
.fd-opt:disabled { cursor: default; }
.fd-opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--card)); }
.fd-opt.wrong { border-color: var(--wants); background: color-mix(in srgb, var(--wants) 10%, var(--card)); }
.fd-opt.alt { border-color: color-mix(in srgb, var(--good) 50%, transparent); border-style: dashed; }
.fd-opt:disabled:not(.right):not(.wrong):not(.alt) { opacity: .55; }
.fd-why { margin-top: 16px; font-size: 16px; line-height: 1.55; padding-left: 14px; border-left: 4px solid var(--line); }
.fd-next { margin-top: 16px; width: 100%; justify-content: center; }
.fd-next:disabled { opacity: .5; cursor: default; }
@media (max-width: 760px) {
  .fd-top { flex-direction: column; }
  .pg-score { text-align: left; }
}
.rr-wide .fd-why, .rr-wide .fd-next { max-width: 720px; }
@keyframes fd-in { from { opacity: 0; transform: translateY(8px); } }
.ps-lines { margin-top: 14px; display: grid; }
.ps-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ps-row span small { display: block; font-size: 13px; color: var(--ink-3); }
.ps-row > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-row.tax > b { color: var(--wants); }
.ps-row.save > b { color: var(--savings); }
.ps-row.net { border-top: 2px solid var(--ink); }
.ps-row.net > b { color: var(--good); font-family: var(--serif); font-size: 24px; font-weight: 500; }
#sm-result { margin-top: 8px; }
.ps-row.owe > b { color: var(--wants); font-family: var(--serif); font-size: 24px; font-weight: 500; }
.ps-row.owe { border-top: 2px solid var(--ink); }
.ft-env { animation: ft-bob 4s ease-in-out infinite; }
.ft-env:nth-child(2) { animation-delay: -1.3s; }
.ft-env:nth-child(3) { animation-delay: -2.6s; }
@keyframes ft-bob { 50% { translate: 0 -6px; } }
.ft-ring { animation: ft-ring 2.6s ease-in-out infinite; }
@keyframes ft-ring { 50% { opacity: .45; } }
/* Income or not */
.ft-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; max-width: 820px; }
.ft-two > div { background: var(--card); border-radius: 18px; padding: 18px 20px; box-shadow: 0 1px 0 var(--line); border-top: 4px solid var(--good); }
.ft-two > .ft-no { border-top-color: var(--ink-3); }
.ft-two b { font-family: var(--serif); font-weight: 500; font-size: 20px; }
.ft-two ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
/* Build your 1040 */
.ft-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ft-doc { font: inherit; text-align: left; color: var(--ink); background: var(--paper); border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.ft-doc:hover { border-color: var(--ink-3); }
.ft-doc.on { border-style: solid; border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--card)); transform: translateY(-2px); }
.ft-doc b { display: block; font-size: 15px; }
.ft-doc small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
/* Sort the mail */
.sm-card { display: flex; gap: 18px; align-items: center; margin: 20px 0 16px; max-width: 720px; background: var(--paper); border-radius: 18px; padding: 18px 20px; animation: fd-in .4s var(--ease); transition: box-shadow .3s; }
.sm-card.in-pile { box-shadow: inset 0 0 0 2px var(--good); }
.sm-card p { margin: 0; font-size: 18px; line-height: 1.5; }
.sm-ico { flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--card); display: grid; place-items: center; font-family: var(--serif); font-size: 18px; color: var(--ink-2); box-shadow: 0 1px 0 var(--line); }
.sm-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 720px; }
.sm-bin b { display: block; }
.sm-bin small { display: block; font-size: 13px; color: var(--ink-3); }
@media (max-width: 560px) {
  .ft-two, .sm-bins { grid-template-columns: 1fr; }
  .sm-card p { font-size: 16px; }
  .sm-ico { width: 52px; height: 52px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ft-env, .ft-ring { animation: none; } }