/* yourlinefit.css - see the Sept 20 polish pass. Loaded on every page after style.css. */

/* ===========================================================================
   YOUR LINE, READ AS CARDS (Sept 20)
   =========================================================================== */
.yl-results > * + *{ margin-top: 16px; }
.yl-results .yl-sub{ margin: 0 0 12px !important; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important; line-height: 1 !important; color: var(--ink) !important; letter-spacing: .01em !important; }
.yl-range, .yl-signal2, .yl-stand2, .yl-read2{ padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }

/* the range */
.yl-range__figs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.yl-range__fig{ display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: var(--surface-2); border-top: 4px solid var(--line); }
.yl-range__fig b{ font-family: var(--display-big); font-weight: 900; font-size: 2.4rem; line-height: .9; color: var(--ink); }
.yl-range__fig span{ font-weight: 900; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.yl-range__fig.is-now{ border-top-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.yl-range__fig.is-now b{ color: var(--accent-hot); font-size: 2.9rem; }
.yl-range__fig.is-low, .yl-range__fig.is-high{ border-top-color: #b494ff; }
.yl-range__bar{ position: relative; height: 30px; margin: 44px 6px 30px; border-radius: 999px; background: rgba(0,0,0,.28); }
.yl-range__band{ position: absolute; top: 0; bottom: 0; border-radius: 999px; background: rgba(180,148,255,.28); border: 2px solid #b494ff; overflow: visible; }
.yl-range__bandLabel{ position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #d3c0ff; white-space: nowrap; }
.yl-range__dot{ position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 14px var(--accent); }
.yl-range__tick{ position: absolute; bottom: -24px; transform: translateX(-50%); font-family: var(--display-big); font-weight: 900; font-size: .95rem; color: var(--ink-soft); }
.yl-range__foot{ font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

/* what is real yet */
.yl-signal2__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.yl-sig{ display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border-left: 5px solid #F2C14E; }
.yl-sig.is-ready{ border-left-color: #46e58a; }
.yl-sig__label{ font-family: var(--display-big); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; color: var(--ink); }
.yl-sig__track{ height: 10px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; }
.yl-sig__track i{ display: block; height: 100%; border-radius: 999px; background: #F2C14E; }
.yl-sig.is-ready .yl-sig__track i{ background: #46e58a; }
.yl-sig__state{ font-weight: 900; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; color: #F2C14E; }
.yl-sig.is-ready .yl-sig__state{ color: #46e58a; }

/* against the level */
.yl-stand2__key{ display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 900; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.yl-stand2__key .is-down{ color: #ff8a7d; } .yl-stand2__key .is-up{ color: #46e58a; }
.yl-stand2__row{ display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
@media (max-width: 640px){ .yl-stand2__row{ grid-template-columns: 1fr; gap: 4px; } }
.yl-stand2__label{ font-family: var(--display-big); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; color: var(--ink); }
.yl-stand2__track{ position: relative; height: 16px; border-radius: 999px; background: rgba(0,0,0,.28); }
.yl-stand2__mid{ position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--ink-soft); }
.yl-stand2__bar{ position: absolute; top: 2px; bottom: 2px; border-radius: 999px; }
.yl-stand2__bar.is-up{ background: #46e58a; } .yl-stand2__bar.is-down{ background: #ff6f5f; }
.yl-stand2__word{ justify-self: start; font-weight: 900; font-size: .92rem; padding: 4px 10px; border-radius: 999px; }
.yl-stand2__word.is-up{ background: rgba(70,229,138,.18); color: #46e58a; } .yl-stand2__word.is-down{ background: rgba(255,111,95,.18); color: #ff8a7d; }

/* the read */
.yl-read2__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.yl-read2__card{ --c: var(--accent); display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--surface-2)), var(--surface-2) 60%); border-top: 4px solid var(--c); }
.yl-read2__top{ display: flex; align-items: center; gap: 8px; }
.yl-read2__top b{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #16121C; font-family: var(--display-big); font-weight: 900; font-size: 1.1rem; }
.yl-read2__top span{ font-family: var(--display-big); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; color: var(--c); }
.yl-read2 .yl-read2__text{ margin: 0; font-weight: 800 !important; font-size: 1.06rem !important; line-height: 1.38; color: var(--ink) !important; }

/* who hits like this */
.yl-compare{ padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.yl-compare .yl-compare__hint{ font-weight: 900 !important; font-size: .98rem !important; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft) !important; }
.yl-matches{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.yl-match{ display: grid; gap: 8px; padding: 14px 16px !important; border-radius: 16px !important; background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-top: 5px solid var(--line) !important; }
.yl-match.is-best{ border-top-color: #F2C14E !important; background: linear-gradient(160deg, rgba(242,193,78,.14), var(--surface-2) 60%) !important; }
.yl-match__badge{ justify-self: start; font-weight: 900; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; background: #F2C14E; color: #16121C; }
.yl-match__name{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.6rem !important; text-transform: uppercase; line-height: 1; }
.yl-match__season{ font-weight: 800; font-size: 1rem; color: var(--ink-soft); }
.yl-match__stats{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.yl-match__stat{ display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: var(--surface); }
.yl-match__statvalue{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.4rem !important; color: var(--ink) !important; }
.yl-match__statlabel{ font-weight: 900 !important; font-size: .82rem !important; text-transform: uppercase; color: var(--ink-soft) !important; }
.yl-match__link{ justify-self: start; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink) !important; text-decoration: none; font-family: var(--display-big); font-weight: 900; text-transform: uppercase; }
.yl-match__link::after{ content: " \2192"; }

/* the clinic */
.yl-clinic__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; line-height: 1 !important; }
.yl-clinic .yl-clinic__blurb{ font-weight: 900 !important; font-size: 1rem !important; text-transform: uppercase; letter-spacing: .04em; color: var(--accent) !important; }
.yl-strugglelist{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.yl-struggle{ border-radius: 16px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; overflow: hidden; }
.yl-struggle.is-open{ grid-column: 1 / -1; border-color: var(--accent) !important; }
.yl-struggle__head{ display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; width: 100%; text-align: left; padding: 14px 16px !important; cursor: pointer; background: none; border: 0; color: var(--ink); }
.yl-struggle__name{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.35rem !important; text-transform: uppercase; line-height: 1.05; }
.yl-struggle__area{ justify-self: end; font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); }
.yl-struggle__peek{ grid-column: 1 / -1; font-weight: 700; font-size: .98rem; line-height: 1.3; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yl-struggle__open{ grid-column: 1 / -1; justify-self: start; font-weight: 900; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.yl-three{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 860px){ .yl-three{ grid-template-columns: 1fr; } }
.yl-three .yl-block{ padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border-top: 4px solid var(--accent); }
.yl-three .yl-block:nth-child(2){ border-top-color: #ff8a7d; }
.yl-three .yl-block:nth-child(3){ border-top-color: #46e58a; }
.yl-three .yl-struggle__sub{ margin: 0 0 6px !important; font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.15rem !important; text-transform: uppercase; }
.yl-three .yl-block__item{ font-weight: 700 !important; font-size: 1.02rem !important; color: var(--ink) !important; }
.yl-drill{ border-radius: 16px !important; }
.yl-drill__name{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.35rem !important; text-transform: uppercase; }
.yl-step__label{ font-weight: 900 !important; text-transform: uppercase; letter-spacing: .04em; }
.yl-step__text{ font-weight: 700 !important; font-size: 1.02rem !important; color: var(--ink) !important; }
/* Sept 21: standing words as centered, Title Case pills in their own column */
.yl-stand2 .yl-stand2__row{ grid-template-columns: 170px minmax(0, 1fr) 190px; }
@media (max-width: 640px){ .yl-stand2 .yl-stand2__row{ grid-template-columns: 1fr; } }
.yl-stand2 .yl-stand2__word.yl-pill{ justify-self: stretch; text-align: center; display: block; padding: 7px 10px; border-radius: 999px; font-family: var(--body) !important; font-weight: 900 !important; font-size: .9rem !important; letter-spacing: .03em; text-transform: none; }
.yl-pill.is-t5{ background: #46e58a; color: #06210f !important; }
.yl-pill.is-t4{ background: rgba(70,229,138,.2); color: #46e58a !important; border: 1px solid rgba(70,229,138,.5); }
.yl-pill.is-t3{ background: rgba(255,255,255,.08); color: var(--ink) !important; border: 1px solid var(--line); }
.yl-pill.is-t2{ background: rgba(255,159,67,.18); color: #ffb366 !important; border: 1px solid rgba(255,159,67,.5); }
.yl-pill.is-t1{ background: #ff6b6b; color: #2a0707 !important; }
.yl-stand2 .yl-stand2__label{ align-self: center; }

/* Drill steps as four cards (Sept 21) */
.yl-steps{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; gap: 10px !important; }
.yl-step{ grid-template-columns: 1fr !important; align-content: start !important; gap: 8px !important; padding: 14px 16px !important; border-top: none !important; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--accent-3) !important; }
.yl-step::before{ font-family: var(--display-big, var(--display)) !important; font-size: 1.8rem !important; line-height: 1; }
.yl-step__label{ grid-column: 1 !important; font-family: var(--display-big, var(--display)) !important; font-size: 1.15rem !important; color: var(--accent-3) !important; letter-spacing: .01em !important; }
.yl-step__text{ grid-column: 1 !important; font-size: 1.02rem !important; font-weight: 600; line-height: 1.45; }
.yl-step.is-mistake{ border-top-color: var(--neg) !important; }
.yl-step.is-mistake .yl-step__label{ color: var(--neg) !important; }