/*
 * tfs-learn.css — shared styling for the TFS Learn V2 engine (tfs-learn.js).
 * Every tool that mounts a Learn pack loads this file. Tool-specific host
 * chrome (page padding, rail gutters) stays in that tool's own stylesheet.
 */
.tfs-learn { --tfsl-green:#2D8A5E; --tfsl-green-dark:#236B4A; --tfsl-green-soft:#D6F0E0; --tfsl-ink:#0A0A0A; --tfsl-muted:#6B7280; --tfsl-line:#E5E7EB; --tfsl-amber:#FFFBEB; --tfsl-amber-ink:#78350F; max-width:1120px; margin:0 auto; padding:32px 24px 72px; color:var(--tfsl-ink); font-family:Inter,system-ui,sans-serif; }
.tfs-learn *, .tfs-learn *::before, .tfs-learn *::after { box-sizing:border-box; }
.tfs-learn__top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.tfs-learn__eyebrow, .tfs-learn__step, .tfs-learn__label { color:var(--tfsl-green-dark); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tfs-learn__title { margin:5px 0 0; font-family:'Space Grotesk',sans-serif; font-size:28px; line-height:1.1; letter-spacing:-.03em; }
.tfs-learn__context { flex:0 0 auto; border:1px solid var(--tfsl-line); border-radius:999px; color:#4B5563; font-size:12px; font-weight:600; padding:8px 12px; white-space:nowrap; }
.tfs-learn__jurisdiction { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--tfsl-line); border-radius:999px; background:#fff; vertical-align:middle; }.tfs-learn__jurisdiction button { border:0; border-radius:999px; padding:5px 8px; background:transparent; color:#6B7280; font:600 11px Inter,sans-serif; cursor:pointer; }.tfs-learn__jurisdiction button.is-active { background:var(--tfsl-green-soft); color:var(--tfsl-green-dark); }
.tfs-learn__layout { display:grid; grid-template-columns:238px minmax(0,1fr); gap:22px; align-items:start; }
.tfs-learn__rail { background:#fff; border:1px solid var(--tfsl-line); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); overflow:hidden; }
.tfs-learn__progress { height:4px; background:#E5E7EB; }.tfs-learn__progress > i { display:block; height:100%; background:var(--tfsl-green); transition:width .25s ease; }
.tfs-learn__rail-list { list-style:none; padding:8px; margin:0; }
.tfs-learn__rail-button { display:flex; width:100%; gap:9px; align-items:flex-start; text-align:left; padding:10px; border:0; background:transparent; border-radius:9px; color:#6B7280; font:inherit; cursor:pointer; }
.tfs-learn__rail-button:hover { background:#F9FAFB; color:var(--tfsl-ink); }.tfs-learn__rail-button.is-active { color:var(--tfsl-ink); background:var(--tfsl-green-soft); }.tfs-learn__rail-button.is-locked { cursor:not-allowed; opacity:.45; }
.tfs-learn__rail-number { width:20px; height:20px; flex:0 0 auto; border:1px solid #D1D5DB; border-radius:50%; font-size:11px; display:grid; place-items:center; font-weight:700; }.is-complete .tfs-learn__rail-number { border-color:var(--tfsl-green); background:var(--tfsl-green); color:#fff; }.is-active .tfs-learn__rail-number { border-color:var(--tfsl-green); color:var(--tfsl-green-dark); }
.tfs-learn__rail-copy strong { display:block; font-size:12px; line-height:1.25; }.tfs-learn__rail-copy small { display:block; margin-top:2px; font-size:10px; color:#9CA3AF; }
.tfs-learn__panel { min-width:0; background:#fff; border:1px solid var(--tfsl-line); border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.05); overflow:hidden; }
.tfs-learn__panel-head { padding:25px 27px 18px; border-bottom:1px solid #F3F4F6; }.tfs-learn__panel-head h2 { margin:5px 0 0; font-family:'Space Grotesk',sans-serif; font-size:24px; line-height:1.15; letter-spacing:-.025em; }
.tfs-learn__phases { display:flex; gap:4px; padding:12px 27px 0; background:#fff; }.tfs-learn__phase { appearance:none; border:0; background:transparent; padding:9px 13px 11px; color:#9CA3AF; font:600 12px Inter,sans-serif; border-bottom:2px solid transparent; cursor:pointer; }.tfs-learn__phase.is-active { color:var(--tfsl-green-dark); border-bottom-color:var(--tfsl-green); }.tfs-learn__phase.is-locked { cursor:not-allowed; opacity:.5; }
.tfs-learn__body { padding:26px 27px 28px; }.tfs-learn__lede { font-family:'Space Grotesk',sans-serif; font-size:20px; line-height:1.28; letter-spacing:-.02em; margin:0 0 11px; }.tfs-learn__copy { color:#4B5563; font-size:14px; line-height:1.7; max-width:710px; }.tfs-learn__copy p { margin:0 0 12px; }
.tfs-learn__visual { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0; }.tfs-learn__stat { border:1px solid var(--tfsl-line); border-radius:10px; padding:14px; background:#FAFAFA; }.tfs-learn__stat b { display:block; margin-top:4px; font-family:'Space Grotesk',sans-serif; font-size:18px; }.tfs-learn__formula { margin:16px 0; padding:13px 15px; background:#F0F7F3; border-left:3px solid var(--tfsl-green); border-radius:7px; color:#264335; font:600 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.tfs-learn__insight { margin-top:17px; padding:13px 15px; border:1px solid #FDE5A7; border-radius:10px; background:var(--tfsl-amber); color:var(--tfsl-amber-ink); font-size:13px; line-height:1.6; }.tfs-learn__insight b { font-weight:700; }
.tfs-learn__actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; }.tfs-learn__button { appearance:none; border:1px solid var(--tfsl-green); border-radius:8px; padding:10px 14px; background:var(--tfsl-green); color:#fff; font:600 13px Inter,sans-serif; cursor:pointer; }.tfs-learn__button:hover { background:var(--tfsl-green-dark); }.tfs-learn__button--quiet { background:#fff; color:#4B5563; border-color:#D1D5DB; }.tfs-learn__button--quiet:hover { background:#F9FAFB; color:var(--tfsl-ink); }.tfs-learn__button[disabled] { cursor:not-allowed; opacity:.45; }
.tfs-learn__sandbox { margin-top:4px; padding:18px; border:1.5px solid var(--tfsl-line); border-radius:12px; background:#fff; }.tfs-learn__sandbox-head h3 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:16px; }.tfs-learn__sandbox-head p { margin:5px 0 16px; color:var(--tfsl-muted); font-size:12px; line-height:1.5; }.tfs-learn__controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.tfs-learn__field { display:block; color:#6B7280; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.tfs-learn__field input, .tfs-learn__field select { display:block; width:100%; margin-top:6px; border:1.5px solid #D1D5DB; border-radius:8px; padding:9px 10px; background:#fff; color:var(--tfsl-ink); font:600 14px Inter,sans-serif; appearance:none; -webkit-appearance:none; }.tfs-learn__field select { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }.tfs-learn__field input:focus, .tfs-learn__field select:focus { outline:0; border-color:var(--tfsl-green); box-shadow:0 0 0 3px rgba(45,138,94,.11); }
.tfs-learn__result { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:15px; }.tfs-learn__result > div { border-radius:8px; background:#F9FAFB; padding:11px; color:#6B7280; font-size:11px; }.tfs-learn__result b { display:block; margin-top:3px; color:var(--tfsl-ink); font-family:'Space Grotesk',sans-serif; font-size:16px; }
.tfs-learn__result-note { grid-column:1/-1; color:#4B5563; font-size:13px; line-height:1.6; }
.tfs-learn__case { border:1px solid #D8EADF; border-radius:12px; background:#F8FCF9; padding:20px; }.tfs-learn__case-tag { color:var(--tfsl-green-dark); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.tfs-learn__case h3 { margin:7px 0 8px; font-family:'Space Grotesk',sans-serif; font-size:19px; line-height:1.25; }.tfs-learn__case p { margin:0; color:#4B5563; font-size:14px; line-height:1.65; }.tfs-learn__choices { display:grid; gap:9px; margin-top:17px; }.tfs-learn__choice { width:100%; text-align:left; appearance:none; border:1px solid #CDE5D6; border-radius:9px; padding:12px 13px; background:#fff; color:#1F2937; font:500 13px/1.5 Inter,sans-serif; cursor:pointer; }.tfs-learn__choice:hover { border-color:var(--tfsl-green); }.tfs-learn__choice.is-chosen { border-color:var(--tfsl-green); background:var(--tfsl-green-soft); }.tfs-learn__feedback { margin-top:14px; padding:12px 13px; border-radius:8px; background:var(--tfsl-amber); color:var(--tfsl-amber-ink); font-size:13px; line-height:1.6; }
.tfs-learn__summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }.tfs-learn__summary div { padding:13px; border:1px solid var(--tfsl-line); border-radius:9px; font-size:12px; color:#6B7280; }.tfs-learn__summary b { display:block; color:var(--tfsl-ink); margin-top:3px; font-size:14px; }
.tfs-learn__complete { text-align:center; padding:16px 0 0; }.tfs-learn__complete h3 { font-family:'Space Grotesk',sans-serif; font-size:21px; }.tfs-learn__complete p { max-width:590px; margin:8px auto 0; color:#4B5563; line-height:1.65; font-size:14px; }.tfs-learn__handoff { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
.tfs-learn__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:800px) { .tfs-learn { padding:23px 16px 54px; }.tfs-learn__layout { grid-template-columns:1fr; }.tfs-learn__rail-list { display:flex; overflow:auto; gap:4px; }.tfs-learn__rail-button { min-width:158px; }.tfs-learn__top { display:block; }.tfs-learn__context,.tfs-learn__jurisdiction { display:inline-block; margin-top:12px; }.tfs-learn__panel-head,.tfs-learn__body { padding-left:18px; padding-right:18px; }.tfs-learn__phases { padding-left:18px; }.tfs-learn__title { font-size:25px; } }
@media (max-width:500px) { .tfs-learn__visual,.tfs-learn__controls,.tfs-learn__result,.tfs-learn__summary { grid-template-columns:1fr; }.tfs-learn__phases { overflow:auto; }.tfs-learn__phase { white-space:nowrap; }.tfs-learn__actions { align-items:stretch; flex-direction:column-reverse; }.tfs-learn__button { width:100%; }.tfs-learn__panel-head h2 { font-size:21px; } }