/* Scripture First classroom stories – all rules are scoped to #tl-app so the theme is not affected */ #tl-app,#tl-app *{box-sizing:border-box} #tl-app h2,#tl-app h3,#tl-app h4{color:inherit;font-family:inherit;text-transform:none;letter-spacing:normal} #tl-app blockquote{border:0;padding:0;background:none;font-style:normal;quotes:none;box-shadow:none} #tl-app blockquote::before,#tl-app blockquote::after{content:none} #tl-app img{max-width:100%} #tl-app{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#17263b} #tl-app *{box-sizing:border-box} #tl-app{margin:0} #tl-app{max-width:1150px;margin:auto;padding:16px} #tl-app .head{background:#14243b;color:white;padding:22px;border-radius:18px} #tl-app .eyebrow{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#efd59a;font-weight:700} #tl-app .head h2{margin:8px 0;font-size:clamp(24px,4vw,38px)} #tl-app .toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0} #tl-app select,#tl-app button{font:inherit} #tl-app select{padding:12px;max-width:100%;border-radius:10px;border:1px solid #aeb8c6;flex:1;min-width:220px} #tl-app button{border:0;border-radius:10px;padding:12px 18px;cursor:pointer;background:#244e91;color:white;font-weight:650} #tl-app button.secondary{background:#e6ebf2;color:#17263b} #tl-app button:disabled{opacity:.45;cursor:not-allowed} #tl-app .art{display:block;width:100%;height:auto;max-height:67vh;object-fit:contain;background:#13243b;border-radius:14px} #tl-app .panel{background:white;padding:clamp(18px,3vw,32px);border-radius:16px;margin-top:14px;box-shadow:0 2px 14px #17263b0a} #tl-app .panel h3{font-size:clamp(24px,3vw,34px);margin:8px 0 18px} #tl-app .story{font-size:clamp(19px,2.5vw,25px);line-height:1.65;max-width:80ch} #tl-app .scripture{background:#14243b;color:white;padding:22px;border-radius:14px;margin-top:22px} #tl-app .scripture strong{color:#efd59a;display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase} #tl-app .scripture blockquote{font-size:clamp(23px,3vw,33px);line-height:1.35;margin:14px 0 4px} #tl-app .scripture small{color:#dce5f3} #tl-app .nav{display:flex;justify-content:space-between;gap:12px;margin:16px 0} #tl-app .values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0} #tl-app .values button{min-height:65px} #tl-app .valueinfo{background:var(--vc,#244e91);color:#fff;padding:18px;border-radius:12px} #tl-app .valueinfo h4{margin-top:0;font-size:1.3em} #tl-app .note{font-size:13px;color:#59677b} #tl-app .foot{margin:30px 0;font-size:12px;color:#5b6778} #tl-app details[hidden]{display:none} #tl-app details{background:white;border-radius:12px;padding:14px;margin-top:14px} #tl-app summary{cursor:pointer;font-weight:700} #tl-app #tl-sceneCount{color:#dce5f3} #tl-app .lead{font-size:clamp(18px,2.3vw,22px);color:#34445c} #tl-app .artnote{font-size:12px;color:#667386;margin-top:5px} @media(max-width:540px){#tl-app .values{grid-template-columns:repeat(2,minmax(0,1fr))} #tl-app .art{max-height:50vh}} #tl-app .jlist{padding-left:1.2em;margin:0 0 8px} #tl-app .jlist li{margin-bottom:.45em} #tl-app button.sel{outline:3px solid #15243b;outline-offset:2px} #tl-app button:focus-visible,#tl-app select:focus-visible,#tl-app summary:focus-visible{outline:3px solid #efd59a;outline-offset:2px;box-shadow:0 0 0 5px #14243b} #tl-app .storyex{background:rgba(0,0,0,.24);border-left:4px solid #fff;padding:10px 14px;border-radius:8px} /* Hide image panel until a valid WordPress image URL is configured */ #tl-app img[hidden]{display:none!important} #tl-app .values svg{display:block;margin:0 auto 8px;width:42px;height:42px;color:#fff} /* Project Touchline brand refresh */ body{margin:0;background:#061e2b;color:#f7fbff;font-family:system-ui,-apple-system,Segoe UI,sans-serif} #tl-app{max-width:1180px;padding:clamp(18px,3vw,38px);color:#102638} #tl-app .head{background:linear-gradient(120deg,#082234,#0b3041);border:1px solid #164358;border-radius:22px;padding:clamp(24px,4vw,44px);box-shadow:0 12px 36px #0003} #tl-app .head .eyebrow{color:#8ad11a;letter-spacing:.22em} #tl-app .head h2{font-size:clamp(32px,5vw,55px);line-height:1.1;font-weight:800} #tl-app .toolbar{color:white;gap:16px;margin:24px 0} #tl-app .toolbar label{color:#f5f9fd;font-weight:750} #tl-app select{background:#f6fbff;color:#082234;border:2px solid #1589ed;padding:15px;border-radius:12px} #tl-app button{background:#087bea;color:white;border-radius:12px;padding:14px 21px;transition:filter .15s,transform .15s} #tl-app button:hover{filter:brightness(1.12);transform:translateY(-1px)} #tl-app button.secondary{background:#16394b;color:white;border:1px solid #2878ae} #tl-app .art{background:#0a283a;border:1px solid #23506a;border-radius:20px;max-height:64vh} #tl-app .panel{background:#f8fbff;color:#102638;border-radius:20px;padding:clamp(22px,4vw,45px);box-shadow:0 12px 30px #0002} #tl-app .panel h3{color:#082234} #tl-app .scripture{background:#09283b;border-left:5px solid #83cc1d;border-radius:14px} #tl-app .scripture strong{color:#a7df49} #tl-app .values button{background:#0c3046!important;border:1px solid #1488ee;min-height:108px;box-shadow:inset 0 0 0 1px #0d5275} #tl-app .values button:hover,#tl-app .values button.sel{background:#14527b!important} #tl-app .valueinfo{background:#0c3046;color:white;border-left:5px solid #83cc1d} #tl-app .foot{color:#aec0cb} #tl-app details{color:#102638} #tl-app .nav{margin:25px 0} #tl-app button:focus-visible,#tl-app select:focus-visible{outline:3px solid #94d823;outline-offset:3px} @media(max-width:650px){#tl-app .toolbar{align-items:stretch;flex-direction:column}#tl-app .toolbar>*{width:100%}#tl-app .values{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Widescreen classroom presentation: illustration and teaching text together */ @media (min-width: 850px) { #tl-app {max-width:none; width:100%; padding:12px 22px;} #tl-app .head {padding:12px 20px; border-radius:13px;} #tl-app .head h2 {font-size:clamp(24px,2.3vw,36px);margin:3px 0;} #tl-app .toolbar {margin:9px 0;gap:12px;} #tl-app select {padding:8px 12px;} #tl-app button {padding:9px 15px;} #tl-app .classroom-stage {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:stretch;min-height:0;} #tl-app .art {width:100%;height:100%;max-height:calc(100vh - 230px);min-height:340px;object-fit:contain;align-self:stretch;} #tl-app .panel {margin:0;padding:clamp(16px,2vw,28px);max-height:calc(100vh - 230px);min-height:340px;overflow:auto;overscroll-behavior:contain;} #tl-app .panel h3 {font-size:clamp(22px,2.3vw,30px);margin:7px 0 12px;} #tl-app .story {font-size:clamp(17px,1.55vw,22px);line-height:1.42;} #tl-app .scripture {padding:14px;margin-top:12px;} #tl-app .scripture blockquote {font-size:clamp(19px,2vw,27px);margin:8px 0 3px;} #tl-app .nav {margin:10px 0;} #tl-app .foot {margin:9px 0;font-size:10px;} #tl-app .values {gap:6px;margin:10px 0;} #tl-app .values button {min-height:72px;} #tl-app .values svg {width:27px;height:27px;} } @media (min-width:850px) and (max-height:700px) { #tl-app .head {padding:8px 16px;} #tl-app .toolbar {margin:6px 0;} #tl-app .art,#tl-app .panel {max-height:calc(100vh - 195px);min-height:250px;} } /* Scripture First journey redesign — preserves original artwork and content */ #tl-app{box-sizing:border-box} #tl-app *,#tl-app *::before,#tl-app *::after{box-sizing:border-box} #tl-app .journey{margin:14px 0 10px;padding:16px 20px;background:#0b3043;border:1px solid #22536a;border-radius:16px;color:#fff} #tl-app .journey-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.1em;color:#bcd0dd;margin-bottom:14px} #tl-app .journey-top strong{color:#a5df42;letter-spacing:0;font-size:13px} #tl-app .journey-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #tl-app .journey-step{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;color:#a7bac9;font-weight:700;font-size:clamp(11px,1.1vw,15px);line-height:1.2;border:1px solid transparent} #tl-app .journey-step small{font-size:10px;font-weight:500;display:block;opacity:.8} #tl-app .journey-dot{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:2px solid #58778b;font-weight:800} #tl-app .journey-step.done{color:#e6f4d3} #tl-app .journey-step.done .journey-dot{background:#8ed22c;border-color:#8ed22c;color:#08283b} #tl-app .journey-step.current{background:#114d70;border-color:#258fe5;color:#fff} #tl-app .journey-step.current .journey-dot{background:#168af1;border-color:#168af1;color:white} #tl-app .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0b3043;border:1px solid #20516a;border-radius:16px;padding:13px 17px!important;margin:14px 0!important} #tl-app .next-block{display:flex;align-items:center;gap:18px;margin-left:auto} #tl-app .next-hint{color:#b9d8e9;font-weight:700;font-size:13px;max-width:230px;text-align:right} #tl-app #tl-next{background:#087bea;color:#fff;font-weight:800;font-size:clamp(15px,1.4vw,19px);padding:16px 24px;box-shadow:0 5px 0 #07569e} #tl-app #tl-prev{font-weight:700} #tl-app .finish{text-align:center;padding:10px 0} #tl-app .finish-mark{background:#a0d82c;color:#0b3043;border-radius:50%;height:70px;width:70px;margin:0 auto 14px;display:grid;place-items:center;font-size:42px;font-weight:900} #tl-app .finish-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0;text-align:left} #tl-app .finish-list div{padding:13px;background:#e7f2f7;border-radius:12px;font-weight:700} #tl-app .finish-question{font-weight:800;font-size:clamp(18px,2vw,25px);color:#0a3852} #tl-app .panel{overflow:visible!important;height:auto!important;max-height:none!important;min-height:0!important} #tl-app .classroom-stage{align-items:stretch!important} #tl-app .art{max-height:none!important;min-height:0!important;align-self:stretch} #tl-app .values button{min-height:78px} #tl-app .panel .eyebrow{letter-spacing:.14em} #tl-app .panel h3{font-size:clamp(25px,2.5vw,34px)} @media(min-width:850px){#tl-app .classroom-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}#tl-app .classroom-stage>#tl-art{height:min(70vh,700px)!important;min-height:420px!important;object-fit:cover}#tl-app .classroom-stage>#tl-content{height:auto!important;min-height:420px!important;overflow:visible!important}} @media(max-width:849px){#tl-app .journey-step{flex-direction:column;text-align:center;font-size:10px;gap:5px}#tl-app .journey-dot{flex-basis:26px;width:26px;height:26px}#tl-app .journey-step small{display:none}#tl-app .next-block{flex-direction:column;align-items:stretch;gap:5px}#tl-app .next-hint{text-align:center;max-width:none}#tl-app .nav{align-items:stretch}#tl-app #tl-next{padding:13px}#tl-app .finish-list{grid-template-columns:1fr 1fr}} @media(max-width:550px){#tl-app .journey{padding:10px 7px}#tl-app .journey-steps{gap:2px}#tl-app .journey-step{padding:4px 1px;font-size:9px}#tl-app .nav{flex-direction:column-reverse}#tl-app .next-block{margin:0}#tl-app #tl-prev{align-self:flex-start}#tl-app .finish-list{grid-template-columns:1fr}} /* CLASSROOM FIT v2 — one-screen widescreen layout, no nested scrolling */ @media screen and (min-width: 850px) { html,body {margin:0;min-height:100%;} #tl-app {width:100%!important;max-width:none!important;padding:8px 14px!important;display:flex;flex-direction:column;gap:7px;height:100vh;height:100dvh;overflow:hidden;} #tl-app .head {flex:0 0 auto;padding:5px 15px!important;border-radius:10px;display:flex;align-items:center;gap:14px;min-height:43px;box-shadow:none;} #tl-app .head .eyebrow {font-size:10px;letter-spacing:.13em;white-space:nowrap} #tl-app .head h2 {font-size:clamp(19px,2vw,27px)!important;line-height:1.1;margin:0!important;} #tl-app .head>div:last-child {font-size:12px;margin-left:auto;white-space:nowrap} #tl-app .journey {flex:0 0 auto;margin:0!important;padding:6px 12px;border-radius:10px} #tl-app .journey-top {margin-bottom:3px;font-size:10px} #tl-app .journey-top strong {font-size:11px} #tl-app .journey-steps {gap:5px} #tl-app .journey-step {padding:3px 6px;gap:5px;font-size:clamp(10px,1vw,13px)} #tl-app .journey-dot {width:22px;height:22px;flex-basis:22px;font-size:11px} #tl-app .journey-step small {font-size:9px} #tl-app .toolbar {flex:0 0 auto;margin:0!important;gap:8px;font-size:13px} #tl-app select {padding:4px 9px!important;border-radius:7px;min-height:30px} #tl-app .toolbar button {padding:5px 12px!important} #tl-app .classroom-stage {display:grid!important;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr)!important;gap:10px!important;flex:1 1 auto;min-height:0!important;overflow:hidden;align-items:stretch!important} #tl-app .classroom-stage > #tl-art {height:100%!important;min-height:0!important;max-height:none!important;width:100%;object-fit:contain!important;background:#09283b;border-radius:12px} #tl-app .classroom-stage > #tl-content {height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;padding:clamp(12px,1.5vw,22px)!important;border-radius:12px;display:flex;flex-direction:column;justify-content:center} #tl-app .panel h3 {font-size:clamp(19px,2vw,29px)!important;line-height:1.12;margin:5px 0 10px} #tl-app .panel .lead,#tl-app .panel .story {font-size:clamp(14px,1.25vw,19px);line-height:1.3} #tl-app .panel p {margin:7px 0} #tl-app .scripture {padding:10px 12px;margin:7px 0} #tl-app .scripture blockquote {font-size:clamp(17px,1.65vw,23px);margin:4px 0} #tl-app .scripture strong {font-size:11px} #tl-app .nav {flex:0 0 auto;margin:0!important;padding:6px 11px!important;min-height:48px;border-radius:10px} #tl-app .nav button {padding:7px 12px!important} #tl-app #tl-next {padding:8px 16px!important;font-size:clamp(13px,1.2vw,17px)} #tl-app .next-hint {font-size:11px} #tl-app .foot {flex:0 0 auto;margin:0!important;font-size:9px;line-height:1.2} #tl-app #tl-tdet:not([hidden]) {position:fixed;z-index:10;left:5vw;right:5vw;top:12vh;bottom:12vh;overflow:auto;box-shadow:0 0 0 100vmax #001a;} /* v7: values must retain the image column */ #tl-app .classroom-stage:has(#tl-valueArea .value-layout) .lead {display:none} #tl-app .classroom-stage:has(#tl-valueArea .value-layout) h3 {font-size:clamp(18px,1.8vw,26px)!important;margin:4px 0} #tl-app .classroom-stage:has(#tl-valueArea .value-layout) #tl-reveal {align-self:flex-start;padding:5px 10px;font-size:12px} #tl-app .classroom-stage:has(#tl-valueArea .value-layout) #tl-valueArea {flex:1;min-height:0;display:flex;flex-direction:column} #tl-app .classroom-stage:has(#tl-valueArea .value-layout) #tl-valueArea > .note {font-size:11px;margin:4px 0} #tl-app .value-layout {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;flex:1;min-height:0} #tl-app .value-layout .values {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;margin:0;min-height:0;order:2} #tl-app .value-layout .values button {min-height:0!important;padding:4px!important;font-size:clamp(11px,1.2vw,16px);display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:9px} #tl-app .value-layout .values svg {width:clamp(18px,2.5vh,30px);height:clamp(18px,2.5vh,30px);margin:0 auto 3px} #tl-app #tl-valueDetail {min-width:0;min-height:0;display:flex;align-items:stretch;order:1} #tl-app #tl-valueDetail:empty::after {content:"Choose one of the nine values to see its connection to the story here.";display:flex;align-items:center;justify-content:center;text-align:center;background:#e9f1f5;color:#304d5d;border-radius:12px;padding:24px;font-size:clamp(16px,1.5vw,21px);width:100%;font-weight:700} #tl-app .valueinfo {width:100%;height:100%;padding:clamp(9px,1.2vw,16px);display:flex;flex-direction:column;justify-content:center;gap:5px} #tl-app .valueinfo h4 {font-size:clamp(16px,1.7vw,23px);margin:0;display:flex;align-items:center;gap:8px} #tl-app .valueinfo h4 svg {width:27px;height:27px} #tl-app .valueinfo p {font-size:clamp(12px,1.1vw,16px);line-height:1.3;margin:2px 0!important} #tl-app .valueinfo .storyex {padding:7px 9px} #tl-app .finish-list {margin:8px 0} #tl-app .finish-list div {padding:8px} } @media screen and (min-width:850px) and (max-height:620px) { #tl-app .head {min-height:34px;padding:3px 10px!important} #tl-app .journey {padding:3px 8px} #tl-app .journey-top {margin-bottom:1px} #tl-app .panel p {margin:4px 0} #tl-app .valueinfo p {font-size:12px} } /* PICTURE-FIRST CLASSROOM v3: large artwork and values beside it */ @media screen and (min-width: 1000px) { #tl-app {padding:6px 9px!important;gap:5px!important;} #tl-app .head {min-height:38px!important;} #tl-app .journey {padding:4px 10px!important;} #tl-app .journey-top {margin-bottom:2px!important;} #tl-app .classroom-stage {grid-template-columns:minmax(0, 2fr) minmax(390px, 1fr)!important;gap:8px!important;} #tl-app .classroom-stage > #tl-art {display:block!important;object-fit:cover!important;object-position:center center!important;background:#08293b;} #tl-app .classroom-stage > #tl-content {padding:clamp(15px,1.65vw,27px)!important;justify-content:center!important;} #tl-app .panel .story {font-size:clamp(16px,1.35vw,20px)!important;line-height:1.4;} #tl-app .panel h3 {font-size:clamp(23px,2vw,32px)!important;} #tl-app.values-screen .classroom-stage {grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;} #tl-app.values-screen .classroom-stage > #tl-art {display:block!important;object-fit:cover!important;} #tl-app.values-screen .classroom-stage > #tl-content {padding:10px 13px!important;justify-content:flex-start!important;} #tl-app.values-screen .panel h3 {font-size:clamp(17px,1.45vw,24px)!important;line-height:1.15;margin:4px 0 8px!important;} #tl-app.values-screen .panel .lead {display:none!important;} #tl-app.values-screen #tl-reveal {align-self:flex-start;padding:4px 10px!important;font-size:12px!important;margin:0 0 5px!important;} #tl-app.values-screen #tl-valueArea {display:flex;flex-direction:column;flex:1;min-height:0;} #tl-app.values-screen #tl-valueArea>.note {font-size:11px!important;line-height:1.2;margin:2px 0 5px!important;} #tl-app.values-screen .value-layout {display:grid!important;grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr)!important;gap:7px!important;flex:1;min-height:0;} #tl-app.values-screen .value-layout .values {order:1!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;gap:4px!important;} #tl-app.values-screen .value-layout .values button {font-size:clamp(10px,.82vw,13px)!important;padding:2px!important;line-height:1.05!important;} #tl-app.values-screen .value-layout .values svg {height:clamp(15px,2vh,23px)!important;width:clamp(15px,2vh,23px)!important;margin:0!important;} #tl-app.values-screen #tl-valueDetail {order:2!important;} #tl-app.values-screen .valueinfo {padding:8px!important;gap:2px!important;} #tl-app.values-screen .valueinfo h4 {font-size:clamp(15px,1.3vw,20px)!important;} #tl-app.values-screen .valueinfo h4 svg {height:23px!important;width:23px!important;} #tl-app.values-screen .valueinfo p {font-size:clamp(11px,.95vw,15px)!important;line-height:1.25!important;margin:2px 0!important;} #tl-app.values-screen .valueinfo .storyex {padding:6px!important;} } @media screen and (min-width:1000px) and (max-height:730px) { #tl-app.values-screen .valueinfo p {font-size:11px!important;} #tl-app.values-screen .panel h3 {font-size:18px!important;} #tl-app.values-screen .value-layout .values svg {height:16px!important;width:16px!important;} } /* v4: Original supplied scene photographs and picture-first values mock-up */ @media screen and (min-width:1000px) { #tl-app.values-screen .classroom-stage {grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)!important;} #tl-app.values-screen .classroom-stage > #tl-art {object-fit:cover!important;object-position:center center!important;} #tl-app.values-screen .value-layout .values button {background:#082f46!important;border:1px solid #1688ed!important;color:white!important;border-radius:10px!important;} #tl-app.values-screen .value-layout .values button.sel {background:#087bf5!important;border-color:#fff!important;box-shadow:0 0 0 2px #078cff!important;} #tl-app.values-screen .valueinfo {background:#e8f3ff!important;color:#09283d!important;border-left:5px solid #91d723!important;border-radius:12px!important;} #tl-app.values-screen .valueinfo .storyex {background:#082e44!important;color:#fff!important;border-radius:9px!important;} #tl-app.values-screen .valueinfo h4 {color:#08283e!important;} } /* v6: Values page rebuilt to match approved picture-first mock-up. */ @media screen and (min-width:1000px) { #tl-app.values-screen .classroom-stage {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;} #tl-app.values-screen .classroom-stage > #tl-art {display:block!important;object-fit:cover!important;object-position:center!important;} #tl-app.values-screen .classroom-stage > #tl-content {display:flex;flex-direction:column;justify-content:flex-start!important;padding:clamp(12px,1.5vw,22px)!important;} #tl-app.values-screen .panel .eyebrow {font-size:clamp(10px,.8vw,13px);margin-bottom:3px;} #tl-app.values-screen .panel h3 {font-size:clamp(19px,1.75vw,29px)!important;line-height:1.14;margin:4px 0 7px!important;} #tl-app.values-screen #tl-reveal {margin:0 0 5px!important;padding:4px 10px!important;font-size:11px!important;} #tl-app.values-screen #tl-valueArea {display:flex;flex:1;min-height:0;flex-direction:column;} #tl-app.values-screen .value-layout {display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:9px!important;flex:1;min-height:0;} #tl-app.values-screen .value-layout .values {order:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;gap:5px!important;margin:0!important;min-height:0;} #tl-app.values-screen .value-layout .values button {display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0!important;padding:3px!important;background:#082f46!important;color:white!important;border:1px solid #1688ed!important;border-radius:9px!important;font-size:clamp(11px,1vw,16px)!important;line-height:1.1!important;} #tl-app.values-screen .value-layout .values button:last-child {grid-column:1/-1;} #tl-app.values-screen .value-layout .values button.sel {background:#087bf5!important;border-color:#fff!important;box-shadow:inset 0 0 0 2px #1688ed!important;} #tl-app.values-screen .value-layout .values svg {width:clamp(20px,2.8vh,33px)!important;height:clamp(20px,2.8vh,33px)!important;margin:0 auto 3px!important;} #tl-app.values-screen #tl-valueDetail {order:2!important;display:flex;min-width:0;min-height:0;align-items:stretch;} #tl-app.values-screen #tl-valueDetail:empty::after {display:none!important;} #tl-app.values-screen .valueinfo,#tl-app.values-screen .value-placeholder {height:100%;width:100%;min-width:0;display:flex;flex-direction:column;justify-content:center;background:#e8f3ff!important;color:#09283d!important;border-left:5px solid #91d723;border-radius:12px;padding:clamp(10px,1vw,18px)!important;gap:clamp(4px,.7vh,10px)!important;} #tl-app.values-screen .valueinfo h4,#tl-app.values-screen .value-placeholder h4 {font-size:clamp(18px,1.6vw,25px)!important;color:#08283e!important;margin:0!important;} #tl-app.values-screen .valueinfo p,#tl-app.values-screen .value-placeholder p {font-size:clamp(12px,1.06vw,17px)!important;line-height:1.32!important;margin:0!important;} #tl-app.values-screen .valueinfo .storyex {background:#082e44!important;color:#fff!important;border-radius:9px!important;padding:clamp(7px,.8vw,13px)!important;} #tl-app.values-screen .value-placeholder span {font-size:34px;color:#087bf5;} } @media screen and (min-width:1000px) and (max-height:740px){ #tl-app.values-screen .valueinfo p {font-size:clamp(11px,.92vw,14px)!important;} #tl-app.values-screen .valueinfo {gap:3px!important;} #tl-app.values-screen .value-layout .values svg {height:20px!important;width:20px!important;} } /* Rainbow Values — approved visual direction, October 2026. Scoped overrides preserve every other journey screen. */ #tl-app.values-screen .value-layout .values{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:7px!important;} #tl-app.values-screen .value-layout .values button:last-child{grid-column:auto!important;} #tl-app.values-screen .value-layout .values button{background:var(--rainbow)!important;border:3px solid transparent!important;color:#fff!important;border-radius:13px!important;box-shadow:0 3px 0 #082c4533!important;font-weight:850!important;font-size:clamp(10px,.95vw,16px)!important;text-shadow:0 1px 1px #0005!important;transition:transform .15s,box-shadow .15s!important;} #tl-app.values-screen .value-layout .values button[data-value="Peace"],#tl-app.values-screen .value-layout .values button[data-value="Patience"],#tl-app.values-screen .value-layout .values button[data-value="Goodness"]{color:#08283e!important;text-shadow:none!important;} #tl-app.values-screen .value-layout .values button.sel{background:var(--rainbow)!important;border-color:#fff!important;box-shadow:0 0 0 3px var(--rainbow),0 4px 12px #001a3344!important;transform:scale(.97)!important;} #tl-app.values-screen .value-layout .values svg{height:clamp(23px,3.6vh,40px)!important;width:clamp(23px,3.6vh,40px)!important;margin:0 auto 5px!important;} #tl-app.values-screen .valueinfo{border-left:6px solid var(--vc)!important;background:#effaf4!important;} #tl-app.values-screen .value-placeholder{border-left:6px solid #178df6!important;background:#eaf5ff!important;} #tl-app.values-screen .detective-intro{font-size:clamp(12px,1.1vw,17px)!important;line-height:1.3;margin:0 0 5px!important;color:#175578;font-weight:500;} #tl-app.values-screen #tl-reveal{background:#087bea!important;border-radius:30px!important;font-size:11px!important;font-weight:750!important;} #tl-app.values-screen .value-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;} #tl-app.values-screen .panel h3{font-size:clamp(19px,1.85vw,30px)!important;} #tl-app .journey-step.current{box-shadow:inset 0 0 0 1px #62b7ff;} #tl-app #tl-next{background:#087bfa!important;box-shadow:0 5px 0 #064f9e!important;} @media(max-width:849px){#tl-app.values-screen .value-layout{grid-template-columns:1fr!important;}#tl-app.values-screen .value-layout .values{grid-template-rows:repeat(3,minmax(74px,auto))!important;}#tl-app.values-screen .value-layout .values button{min-height:74px!important;}#tl-app.values-screen .classroom-stage{grid-template-columns:1fr!important;}} /* v9: fewer on-screen instructions, more space for artwork and Scripture */ #tl-app .next-hint{display:none!important} #tl-app .panel{justify-content:center!important} #tl-app .panel .note{display:none!important} #tl-app .panel .story{line-height:1.5!important} #tl-app .panel .scripture{margin-top:clamp(12px,2vh,24px)!important} #tl-app.values-screen .detective-intro{margin:3px 0 9px!important;font-size:clamp(13px,1vw,17px)!important} #tl-app.values-screen .valueinfo p{line-height:1.45!important} #tl-app.values-screen .valueinfo p:last-child{margin-top:12px!important} #tl-app .finish-question{font-size:clamp(19px,2vw,32px)!important} /* v10 — original-artwork Scripture overlay, bottom-left only. */ #tl-app .classroom-stage>.art-frame{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:16px;background:#09283b;align-self:stretch} #tl-app .classroom-stage>.art-frame>#tl-art{display:block!important;width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:0!important;background:transparent!important} @media(min-width:850px){#tl-app .classroom-stage{grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr)!important}#tl-app .classroom-stage>.art-frame{height:min(70vh,700px)!important;min-height:420px!important}#tl-app .classroom-stage>#tl-content{min-height:420px!important}} @media(max-width:849px){#tl-app .classroom-stage>.art-frame{height:clamp(330px,58vw,590px)}} @media(max-width:550px){#tl-app .classroom-stage>.art-frame{height:clamp(300px,80vw,450px)}} /* Story-led five-stage prototype: original artwork and uncluttered narrative */ #tl-app .journey-question{font-size:clamp(1.25rem,2.1vw,2rem);font-weight:850;color:#102c43;line-height:1.22;margin:1rem 0} #tl-app .values-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 0} #tl-app .values-compact button{border:2px solid transparent;border-radius:10px;padding:10px 5px;font-size:clamp(.8rem,1.05vw,1.08rem);font-weight:850;color:#15283d;cursor:pointer} #tl-app .values-compact button.sel{border-color:#11273f;box-shadow:0 0 0 2px #fff inset} #tl-app .values-stage h4{margin:7px 0;font-size:1.05rem} #tl-app .values-stage .valueinfo{padding:10px 12px;border-radius:10px;border-left:6px solid var(--vc);background:#f4f8fc;font-size:.93rem;line-height:1.35} #tl-app .values-stage .valueinfo p{margin:5px 0} #tl-app .live-places{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0} #tl-app .live-places div{border-radius:14px;background:#edf5f8;padding:16px 8px;text-align:center;display:grid;gap:8px} #tl-app .live-places strong{font-size:1.25rem} #tl-app .live-places span{font-size:.85rem} #tl-app.values-screen .art-frame{display:block!important;visibility:visible!important} #tl-app.values-screen .classroom-stage{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important} #tl-app.values-screen .art{display:block!important;opacity:1!important} #tl-app .panel .passage-link{font-size:.8rem} @media(max-width:800px){#tl-app.values-screen .classroom-stage{grid-template-columns:1fr!important}} /* v12: story-led right panel interactions */ .story-choices{display:grid;gap:9px;margin:12px 0}.story-choices button{background:#f3f7ff;border:2px solid #c7d8ee;border-radius:12px;color:#14243b;padding:12px 15px;text-align:left;font:inherit;font-weight:700;cursor:pointer}.story-choices button:hover,.story-choices button:focus-visible{border-color:#2367b2;background:#e7f1ff}.story-choices button.selected{border-color:#17599f;background:#d9eafb}.answer-feedback:not(:empty){margin:10px 0;padding:10px 12px;border-left:4px solid #176d7c;background:#e8f6f5;font-weight:700;color:#183a43}.choice-guidance{font-size:.93rem;color:#344b62}.story-teaser{margin-top:14px;font-weight:700;color:#193b62}.panel .story{line-height:1.55} /* v13 — Jairus story-engine refinement */ #tl-app .story-lead{font-size:clamp(1.05rem,1.55vw,1.32rem);font-weight:750;color:#173653;line-height:1.38;margin:8px 0 10px} #tl-app .story-trail{list-style:none;counter-reset:journey;padding:0;margin:12px 0 20px;display:grid;gap:8px} #tl-app .story-trail li{counter-increment:journey;position:relative;padding:10px 12px 10px 48px;border-radius:12px;background:#eff5fc;border:1px solid #d6e4f2;display:grid;gap:2px} #tl-app .story-trail li:before{content:counter(journey);position:absolute;left:11px;top:11px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#1765aa;color:white;font-weight:800} #tl-app .story-trail li span{font-size:.91rem;line-height:1.3;color:#39536d} #tl-app .reflection-prompts{display:flex;gap:8px;flex-wrap:wrap} #tl-app .reflection-prompts button,#tl-app .live-choices button{border:2px solid #c7d8ee;background:#f3f7ff;border-radius:12px;padding:10px 13px;color:#153553;font:inherit;font-weight:700;cursor:pointer} #tl-app .reflection-prompts button[aria-pressed=true],#tl-app .live-choices button[aria-pressed=true]{border-color:#1662aa;background:#dbeeff} #tl-app .live-choices{display:grid;grid-template-columns:1fr;gap:10px} #tl-app .live-choices button{text-align:left;display:grid;gap:5px} #tl-app .live-choices button span{font-weight:400} #tl-app .story-screen .classroom-stage>#tl-content{overflow-y:auto;align-content:start} @media(min-width:850px){#tl-app .classroom-stage{grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr)!important}} /* v14: unmistakable, accessible answer feedback */ #tl-app .story-choices button.selected.answer-correct{background:#d6f5df;border:3px solid #16803d;color:#124b27;box-shadow:inset 0 0 0 1px #fff} #tl-app .story-choices button.selected.answer-incorrect{background:#ffe0e0;border:3px solid #bb3030;color:#762020;box-shadow:inset 0 0 0 1px #fff} #tl-app .story-choices button.selected.answer-correct::before{content:"✓ ";font-weight:900} #tl-app .story-choices button.selected.answer-incorrect::before{content:"✕ ";font-weight:900} #tl-app .answer-feedback.feedback-correct:not(:empty){background:#d6f5df;border:2px solid #16803d;border-left:6px solid #16803d;color:#124b27;border-radius:10px;padding:12px 14px} #tl-app .answer-feedback.feedback-incorrect:not(:empty){background:#ffe0e0;border:2px solid #bb3030;border-left:6px solid #bb3030;color:#762020;border-radius:10px;padding:12px 14px} /* v15: identify Jairus using the user's original mosaic close-up */ #tl-app .jairus-intro{display:grid;grid-template-columns:minmax(100px,32%) minmax(0,1fr);gap:14px;align-items:start;margin:12px 0 16px;padding:12px;background:#edf5fb;border:1px solid #cbdfea;border-radius:14px} #tl-app .jairus-intro img{display:block;width:100%;max-height:240px;object-fit:cover;object-position:top;border-radius:10px} #tl-app .jairus-intro strong{display:block;color:#123d62;font-size:1.12rem;margin-bottom:6px} #tl-app .jairus-intro p{margin:0 0 9px;line-height:1.45;font-size:.95rem} @media(max-width:430px){#tl-app .jairus-intro{grid-template-columns:100px minmax(0,1fr);gap:10px;padding:9px}#tl-app .jairus-intro p{font-size:.87rem}} /* v16: readable soft-rainbow value details; never clip stage 3 content. */ #tl-app.values-screen .classroom-stage > #tl-content { overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain; justify-content:flex-start!important;min-height:0!important;scrollbar-gutter:stable; } #tl-app.values-screen .values-compact { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important;margin:12px 0!important;flex-shrink:0; } #tl-app.values-screen .values-compact button { min-width:0;min-height:54px;white-space:normal;overflow-wrap:anywhere; line-height:1.15;padding:10px 6px!important; } #tl-app.values-screen #tl-valueDetail {display:block!important;min-height:0!important;flex:none!important;padding-bottom:14px;} #tl-app.values-screen #tl-valueDetail .valueinfo { height:auto!important;min-height:0!important;display:block!important; background:var(--vc-soft,#f7f4ef)!important;color:#142e43!important; border:2px solid var(--vc)!important;border-left:7px solid var(--vc)!important; border-radius:15px!important;padding:clamp(15px,1.5vw,23px)!important; box-shadow:0 4px 14px #0b2b4010; } #tl-app.values-screen #tl-valueDetail .valueinfo h4 {color:#142e43!important;font-size:clamp(21px,1.7vw,28px)!important;margin:0 0 10px!important;} #tl-app.values-screen #tl-valueDetail .valueinfo p {color:#142e43!important;font-size:clamp(15px,1.1vw,19px)!important;line-height:1.45!important;margin:0 0 12px!important;} #tl-app.values-screen #tl-valueDetail .valueinfo p:last-child {margin-bottom:0!important;} #tl-app.values-screen .panel .journey-question {font-size:clamp(22px,2.15vw,33px)!important;line-height:1.2!important;} @media(max-width:849px){ #tl-app.values-screen .classroom-stage {overflow-y:auto!important;display:block!important;} #tl-app.values-screen .classroom-stage > #tl-content {height:auto!important;max-height:none!important;overflow:visible!important;} #tl-app.values-screen .classroom-stage > .art-frame {height:clamp(260px,50vw,440px)!important;margin-bottom:10px;} } @media(max-width:430px){#tl-app.values-screen .values-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;}} /* v17 — approved bright Live It panel. The original mosaic image is unchanged. */ #tl-app.story-screen:has([data-place]) .classroom-stage > #tl-content { background:#ffffff!important;color:#10294a!important;overflow-y:auto!important; padding:clamp(18px,2.1vw,32px)!important;align-content:start!important; } #tl-app .live-choices{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin:16px 0!important;} #tl-app .live-choices button{display:flex!important;align-items:center!important;gap:20px!important; min-height:82px!important;padding:14px 20px!important;border-radius:14px!important; color:#0c2750!important;text-align:left!important;box-shadow:0 2px 8px #15375a12!important; transition:transform .12s ease,box-shadow .12s ease!important;} #tl-app .live-choices button:hover{transform:translateY(-1px);box-shadow:0 4px 14px #15375a20!important;} #tl-app .live-choices button[data-place=home]{background:#fff0ef!important;border:2px solid #e94753!important;} #tl-app .live-choices button[data-place=school]{background:#e7f4ff!important;border:2px solid #2582e9!important;} #tl-app .live-choices button[data-place=church]{background:#eaf8ef!important;border:2px solid #2ba65a!important;} #tl-app .live-choices button[aria-pressed=true]{outline:3px solid #122e54!important;outline-offset:2px!important;} #tl-app .live-choices button .place-icon{display:block;flex:0 0 72px;text-align:center;font-size:44px;line-height:1.2;} #tl-app .live-choices button .place-copy{display:grid;gap:4px;min-width:0;} #tl-app .live-choices button .place-copy strong{font-size:clamp(20px,1.6vw,28px)!important;line-height:1.15!important;} #tl-app .live-choices button .place-copy span{font-size:clamp(15px,1.05vw,19px)!important;line-height:1.3!important;font-weight:500!important;} #tl-app .live-action-prompt{display:flex;align-items:center;gap:14px;padding:15px 18px; background:#fff8e2;border:2px solid #f2cf70;border-radius:13px;color:#10294a;font-size:clamp(15px,1.1vw,19px);line-height:1.4;} #tl-app .live-action-prompt > span{font-size:28px;flex-shrink:0;} #tl-app .live-choices + .live-action-prompt + .story-teaser{color:#133b6a;font-size:clamp(15px,1.1vw,19px);} @media(max-width:600px){#tl-app .live-choices button{gap:12px!important;padding:12px!important;min-height:74px!important;}#tl-app .live-choices button .place-icon{flex-basis:48px;font-size:33px;}} /* v18: Values aligned to artwork; focused story, value and action. */ #tl-app.values-screen .classroom-stage>#tl-content{justify-content:flex-start!important;align-content:start!important;align-items:stretch!important;padding-top:clamp(18px,2vw,30px)!important;scroll-behavior:smooth;} #tl-app.values-screen .panel h3{font-size:clamp(23px,2.2vw,34px)!important;margin:4px 0 9px!important;} #tl-app.values-screen .panel .story-lead{font-size:clamp(16px,1.25vw,20px)!important;line-height:1.4!important;margin:4px 0 12px!important;} #tl-app.values-screen .panel .journey-question{font-size:clamp(20px,1.7vw,27px)!important;line-height:1.22!important;margin:10px 0 4px!important;} #tl-app.values-screen .choice-guidance{margin:0 0 6px!important;} #tl-app.values-screen .values-compact{margin:6px 0 10px!important;gap:7px!important;} #tl-app.values-screen .values-compact button{min-height:46px!important;padding:8px 5px!important;} #tl-app.values-screen #tl-valueDetail .valueinfo{padding:clamp(12px,1.2vw,18px)!important;} #tl-app.values-screen #tl-valueDetail .valueinfo p{margin:0 0 9px!important;} #tl-app.values-screen #tl-valueDetail .valueinfo .value-action{border-top:1px solid #142e4326;padding-top:9px;margin-top:9px!important;} #tl-app.values-screen #tl-valueDetail{padding-bottom:6px!important;scroll-margin-top:12px;} /* v19: values detail always appears ABOVE the rainbow choices, without jumping to a hidden section. */ #tl-app.values-screen #tl-valueArea{display:flex;flex-direction:column;gap:10px} #tl-app.values-screen #tl-valueDetail{order:0;padding:0!important} #tl-app.values-screen .values-compact{order:1;margin:0 0 8px!important} #tl-app.values-screen .value-empty{background:#eaf3fb;border:2px dashed #87aac8;border-radius:14px;color:#173b59;padding:14px 18px;font-weight:650;line-height:1.4} #tl-app.values-screen .classroom-stage>#tl-content{scroll-behavior:auto!important} #tl-app.values-screen .values-compact button:focus-visible{outline:3px solid #153c60;outline-offset:3px} @media(min-width:850px){#tl-app.values-screen .classroom-stage{align-items:stretch}} /* v20 · The Living Story: five purposeful stage colours, one connected visual language. */ #tl-app{--stage-color:#D94763;--stage-deep:#A62B47;--ink:#112943;--paper:#fff;} #tl-app .head{background:#112943!important;border-color:#314e68!important;box-shadow:0 9px 28px #00152236!important;} #tl-app .head .eyebrow{color:#d4e9f8!important;} #tl-app .journey{background:#112943!important;border:1px solid #39536b!important;border-radius:18px!important;padding:13px!important;} #tl-app .journey-top{color:#cce0ee!important;} #tl-app .journey-step{border-radius:11px!important;border:2px solid transparent!important;transition:background .2s,border-color .2s,transform .2s!important;} #tl-app .journey-step .journey-dot{background:var(--step-color)!important;color:white!important;border:0!important;font-weight:850!important;} #tl-app .journey-step.current{background:var(--stage-color)!important;border-color:#ffffff8c!important;color:#fff!important;box-shadow:0 3px 14px #001c3555!important;} #tl-app .journey-step.current .journey-dot{background:#ffffff!important;color:var(--stage-deep)!important;} #tl-app .journey-step.done{border-color:#ffffff25!important;} #tl-app .classroom-stage > #tl-content{background:#fff!important;color:var(--ink)!important;border-top:7px solid var(--stage-color)!important;box-shadow:0 12px 32px #00192e24!important;} #tl-app .panel .eyebrow{color:var(--stage-deep)!important;letter-spacing:.14em!important;font-size:clamp(12px,.9vw,15px)!important;} #tl-app .panel h3{color:var(--ink)!important;} #tl-app .panel .journey-question{color:var(--ink)!important;} #tl-app .panel .story-lead{color:#193a57!important;} #tl-app .story-teaser{border-left:5px solid var(--stage-color)!important;background:#f3f7fb!important;color:#17334b!important;border-radius:8px!important;padding:12px 16px!important;} #tl-app .nav{background:#112943!important;border-radius:16px!important;padding:10px!important;} #tl-app #tl-next{background:var(--stage-deep)!important;color:#fff!important;border:2px solid #ffffff40!important;box-shadow:0 3px 10px #0003!important;font-weight:800!important;} #tl-app #tl-next:hover{filter:brightness(1.13)!important;} #tl-app .scripture{border-left:5px solid var(--stage-color)!important;} #tl-app .story-choices button:focus-visible,#tl-app .reflection-prompts button:focus-visible,#tl-app .live-choices button:focus-visible{outline:4px solid var(--stage-deep)!important;outline-offset:3px!important;} #tl-app .values-compact button{font-weight:800!important;} #tl-app .valueinfo{box-shadow:0 4px 16px #10243b15!important;} #tl-app[data-stage="5"] .live-action-prompt{background:#f3efff!important;border-color:#9b8add!important;} @media(prefers-reduced-motion:reduce){#tl-app *,#tl-app *::before,#tl-app *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}} /* v21: Answer and reflection choices follow the current story-stage colour. Correct/incorrect selections intentionally retain green/red feedback. */ #tl-app .story-choices button:not(.answer-correct):not(.answer-incorrect), #tl-app .reflection-prompts button { background:var(--stage-color)!important; border:2px solid var(--stage-deep)!important; color:#fff!important; box-shadow:0 2px 6px #11294322!important; transition:filter .15s,box-shadow .15s,transform .15s!important; } #tl-app .story-choices button:not(.answer-correct):not(.answer-incorrect):hover, #tl-app .reflection-prompts button:hover { filter:brightness(.92)!important; transform:translateY(-1px); } #tl-app .reflection-prompts button[aria-pressed=true]{ background:var(--stage-deep)!important; border-color:var(--stage-color)!important; color:#fff!important; box-shadow:0 0 0 3px #11294325!important; } /* Amber is light enough that navy lettering is clearer on a classroom display. */ #tl-app[data-stage="2"] .story-choices button:not(.answer-correct):not(.answer-incorrect){color:#112943!important;} /* v22: stage-linked Scripture and connected learning */ #tl-app .living-connection{margin:14px 0 18px;padding:16px 18px;border-left:5px solid var(--stage-color,#34A47D);border-radius:12px;background:#f0f6fa;color:#102b42;line-height:1.5} #tl-app .living-connection .connection-kicker{color:var(--stage-deep,#176E53);font-weight:800;font-size:.78em;letter-spacing:.08em;margin-bottom:6px} #tl-app .living-connection p{margin:8px 0 0} #tl-app .living-connection .connection-action{padding-top:10px;border-top:1px solid #ccdce7} /* v23 — story selector belongs to the artwork; larger five-colour journey */ #tl-app .picture-story-picker { position:absolute;z-index:8;top:14px;left:14px;right:14px; display:flex;align-items:center;gap:12px; padding:10px 13px;border-radius:14px; background:rgba(10,32,52,.94);border:1px solid rgba(255,255,255,.38); box-shadow:0 5px 18px rgba(0,0,0,.28); } #tl-app .picture-story-picker label { flex:0 0 auto;color:#fff;font-size:clamp(14px,1.2vw,17px);font-weight:800; } #tl-app .picture-story-picker select { flex:1 1 auto;min-width:0;width:100%;margin:0; padding:11px 34px 11px 12px;background:#fff;color:#112943; border:2px solid var(--stage-color,#D94763);border-radius:10px; font-size:clamp(15px,1.15vw,18px);font-weight:750; } #tl-app .toolbar {justify-content:flex-end;margin:8px 0 12px!important;} #tl-app .journey {padding:17px!important;} #tl-app .journey-step { min-height:90px!important;padding:15px 12px!important; font-size:clamp(15px,1.35vw,19px)!important;font-weight:800!important; } #tl-app .journey-step .journey-dot { width:43px!important;height:43px!important;min-width:43px!important; font-size:19px!important; } #tl-app .journey-step.current { box-shadow:0 6px 20px #001c355c, inset 0 0 0 2px #ffffff6b!important; } @media(max-width:849px){ #tl-app .journey-step {min-height:74px!important;padding:10px 7px!important;font-size:14px!important;} #tl-app .journey-step .journey-dot{width:34px!important;height:34px!important;min-width:34px!important;} } @media(max-width:550px){ #tl-app .picture-story-picker {left:9px;right:9px;top:9px;gap:6px;padding:8px;flex-wrap:wrap;} #tl-app .picture-story-picker label {font-size:13px;} #tl-app .picture-story-picker select {padding:9px;font-size:14px;} } /* v24: one aligned, usable content area below the larger journey bar. The picture and text start together; content is never vertically centred and clipped. */ @media(min-width:850px){ #tl-app {min-height:100dvh!important;height:100dvh!important;overflow:hidden!important;} #tl-app .classroom-stage { flex:1 1 auto!important;min-height:0!important;overflow:hidden!important; display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important; gap:10px!important;align-items:stretch!important; } #tl-app .classroom-stage>.art-frame { height:100%!important;min-height:0!important;max-height:none!important; align-self:stretch!important;position:relative!important;overflow:hidden!important; } #tl-app .classroom-stage>.art-frame>#tl-art {height:100%!important;min-height:0!important;max-height:none!important;} #tl-app .classroom-stage>#tl-content, #tl-app.values-screen .classroom-stage>#tl-content, #tl-app.story-screen .classroom-stage>#tl-content { height:100%!important;max-height:none!important;min-height:0!important; overflow-y:auto!important;overflow-x:hidden!important; display:block!important;justify-content:flex-start!important; align-content:start!important;align-items:stretch!important; padding:clamp(16px,1.55vw,26px)!important; scroll-padding-top:14px;overscroll-behavior:contain; } #tl-app .classroom-stage>#tl-content> :first-child {margin-top:0!important;} #tl-app .nav {flex:0 0 auto!important;position:relative!important;z-index:2!important;margin:0!important;} } /* Allow full-page scrolling on compact screens instead of hiding story text. */ @media(max-width:849px){ #tl-app {height:auto!important;min-height:100dvh!important;overflow:visible!important;} #tl-app .classroom-stage {display:flex!important;flex-direction:column!important;overflow:visible!important;min-height:0!important;} #tl-app .classroom-stage>.art-frame {flex:none!important;} #tl-app .classroom-stage>#tl-content {height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;display:block!important;justify-content:flex-start!important;} #tl-app .nav {position:relative!important;} } /* Make the opening story's introduction fit naturally at the top of the panel. */ #tl-app .jairus-intro {margin-top:8px!important;} #tl-app .jairus-intro img {max-height:clamp(145px,22vh,210px)!important;} #tl-app .story-choices button {min-height:44px;} /* v25: teacher-view toolbar removed to give the story more vertical room. */ #tl-app .classroom-stage{margin-top:0!important;} /* v26 — Strong Scripture First masthead; compact Jairus introduction; next-stage CTA. */ #tl-app .head .eyebrow { font-size:clamp(17px,1.55vw,24px)!important; letter-spacing:.075em!important; font-weight:900!important; color:#ffffff!important; white-space:nowrap; } #tl-app .head {min-height:54px!important;padding:8px 18px!important;gap:17px!important;} #tl-app .head h2 {font-size:clamp(18px,1.75vw,27px)!important;} #tl-app .jairus-intro { grid-template-columns:clamp(104px,20%,158px) minmax(0,1fr)!important; gap:14px!important;align-items:start!important; padding:12px!important;margin:8px 0 13px!important; } #tl-app .jairus-intro img { width:100%!important;height:clamp(118px,16vh,155px)!important; max-height:155px!important;object-fit:cover!important;object-position:center 20%!important; } #tl-app .jairus-intro strong {font-size:clamp(17px,1.35vw,21px)!important;margin-bottom:4px!important;} #tl-app .jairus-intro p {font-size:clamp(14px,1.04vw,17px)!important;line-height:1.38!important;margin-bottom:6px!important;} #tl-app #tl-next { min-height:56px!important; min-width:clamp(205px,19vw,300px)!important; padding:12px 26px!important; font-size:clamp(18px,1.45vw,22px)!important; font-weight:900!important; border:2px solid #ffffff9c!important; border-radius:13px!important; box-shadow:0 4px 0 #081b2c66,0 4px 18px #0003!important; } /* On each page the forward action previews the NEXT stage's colour. */ #tl-app[data-stage="1"] #tl-next {background:#D79A29!important;color:#14283e!important;border-color:#f7cf7a!important;} #tl-app[data-stage="2"] #tl-next {background:#3389C7!important;color:white!important;} #tl-app[data-stage="3"] #tl-next {background:#34A47D!important;color:#092b22!important;} #tl-app[data-stage="4"] #tl-next {background:#7764C9!important;color:white!important;} #tl-app[data-stage="5"] #tl-next {background:#D94763!important;color:white!important;} #tl-app #tl-next:focus-visible{outline:4px solid #fff!important;outline-offset:3px!important;} @media(max-width:849px){ #tl-app .head{flex-wrap:wrap!important;gap:5px 12px!important;} #tl-app .head>div:last-child{margin-left:0!important;} #tl-app .jairus-intro{grid-template-columns:clamp(90px,25%,130px) minmax(0,1fr)!important;} #tl-app #tl-next{min-width:0!important;width:100%!important;} } /* v27: white lettering on the golden-amber Meet Jesus button. */ #tl-app[data-stage="1"] #tl-next {color:#ffffff!important;text-shadow:0 1px 2px #50360c66!important;} /* v29 — coordinated nine-value palette, clear and consistent across stories. */ #tl-app .values-compact button { color:#fff!important; border:2px solid #ffffff55!important; border-radius:12px!important; font-weight:800!important; line-height:1.25!important; text-shadow:0 1px 1px #11294333; box-shadow:0 3px 9px #11294324!important; transition:box-shadow .15s ease,transform .15s ease; } #tl-app .values-compact button.sel, #tl-app .values-compact button[aria-pressed="true"] { outline:3px solid #112943!important; outline-offset:2px!important; box-shadow:0 0 0 5px #ffffff,0 5px 13px #11294355!important; } #tl-app .values-compact button:focus-visible { outline:4px solid #112943!important; outline-offset:4px!important; } #tl-app #tl-valueDetail .valueinfo { background:var(--vc-soft,#F2F6FA)!important; border:2px solid var(--vc,#4264B4)!important; border-left-width:6px!important; color:#112943!important; border-radius:14px!important; } #tl-app #tl-valueDetail .valueinfo h4 {color:#112943!important;} #tl-app #tl-valueDetail .valueinfo p {color:#112943!important;} @media(prefers-reduced-motion:reduce) { #tl-app .values-compact button {transition:none!important;} } /* v30: clear labels, stable values and tighter use of classroom display space. */ #tl-app .journey-step.done{color:#fff!important} #tl-app .journey-step.done .journey-dot{background:var(--step-color)!important;color:#fff!important} #tl-app #tl-prev{font-weight:850!important;color:#fff!important;background:#24506a!important;border:1px solid #83a9bc!important;min-height:48px} #tl-app #tl-prev:disabled{opacity:.55!important} #tl-app[data-stage="3"] #tl-next{color:#fff!important} #tl-app .journey-step{line-height:1.14!important} #tl-app.values-screen #tl-valueArea{display:flex!important;flex-direction:column!important;gap:8px!important} #tl-app.values-screen #tl-valueDetail{order:2!important;box-sizing:border-box!important;height:clamp(138px,21vh,210px)!important;min-height:138px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0!important;margin:0!important} #tl-app.values-screen #tl-valueDetail .value-empty{min-height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:16px!important;box-sizing:border-box!important;border-radius:14px!important;background:#eaf2f8!important;color:#25445e!important;font-weight:750!important} #tl-app.values-screen #tl-valueDetail .valueinfo{height:100%!important;min-height:0!important;box-sizing:border-box!important;overflow-y:auto!important} #tl-app.values-screen .values-compact{order:1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin:0!important} #tl-app.values-screen .values-compact button{min-height:clamp(54px,7.2vh,78px)!important;font-size:clamp(15px,1.25vw,19px)!important;padding:10px 7px!important} @media(min-width:850px){ #tl-app .head{min-height:46px!important;padding:6px 16px!important} #tl-app .journey{padding:8px 12px!important} #tl-app .journey-step{min-height:65px!important;padding:8px!important;font-size:clamp(13px,1.18vw,17px)!important} #tl-app .journey-step .journey-dot{width:34px!important;height:34px!important;min-width:34px!important;font-size:16px!important} #tl-app .nav{padding:5px 10px!important} #tl-app #tl-next{min-height:50px!important;padding:8px 20px!important} #tl-app .classroom-stage>#tl-content{padding:clamp(11px,1.1vw,18px)!important;scrollbar-gutter:stable!important} #tl-app .panel h3{margin:3px 0 7px!important;font-size:clamp(21px,1.8vw,28px)!important} #tl-app .panel p{margin:4px 0!important;line-height:1.3!important} #tl-app .panel .journey-question{margin:7px 0 5px!important;font-size:clamp(18px,1.55vw,24px)!important} #tl-app[data-stage="4"] .story-trail{margin:6px 0!important;gap:4px!important} #tl-app[data-stage="4"] .story-trail li{padding:5px 9px 5px 38px!important;gap:0!important;border-radius:8px!important} #tl-app[data-stage="4"] .story-trail li:before{width:23px!important;height:23px!important;left:8px!important;top:8px!important;font-size:13px!important} #tl-app[data-stage="4"] .story-trail li span{font-size:clamp(12px,.88vw,14px)!important;line-height:1.16!important} #tl-app[data-stage="4"] .living-connection{margin:6px 0!important;padding:8px 10px!important} #tl-app[data-stage="4"] .reflection-prompts{gap:5px!important} #tl-app[data-stage="4"] .reflection-prompts button{padding:6px 9px!important;font-size:13px!important} #tl-app[data-stage="5"] .living-connection{margin:6px 0!important;padding:8px 10px!important} #tl-app[data-stage="5"] .live-places{margin:8px 0!important;gap:8px!important} #tl-app[data-stage="5"] .live-choices button{padding:9px 6px!important;min-height:82px!important} #tl-app[data-stage="5"] .live-action-prompt{padding:9px 12px!important;gap:8px!important} #tl-app[data-stage="5"] .story-teaser{margin:5px 0!important} #tl-app[data-stage="5"] .passage-link{margin:5px 0!important} } @media(max-width:849px){#tl-app.values-screen #tl-valueDetail{height:auto!important;min-height:160px!important;max-height:none!important;overflow:visible!important}#tl-app.values-screen #tl-valueDetail .valueinfo{height:auto!important;overflow:visible!important}} /* v32: circled stage numbers on both lower navigation buttons. */ #tl-app .nav #tl-prev,#tl-app .nav #tl-next { display:inline-flex!important;align-items:center!important;justify-content:center!important; gap:10px!important;white-space:normal!important;text-align:center!important; } #tl-app .nav .nav-number { display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;min-width:32px;min-height:32px; border-radius:50%;border:2px solid currentColor; background:rgba(255,255,255,.15);color:inherit; font-size:17px;font-weight:900;line-height:1; } #tl-app .nav .nav-label {font:inherit;line-height:1.15;} #tl-app .nav .nav-arrow {font-size:1.25em;line-height:1;font-weight:900;} @media(max-width:580px) { #tl-app .nav #tl-prev,#tl-app .nav #tl-next {gap:6px!important;padding:8px!important;} #tl-app .nav .nav-number {width:27px;height:27px;min-width:27px;min-height:27px;font-size:15px;} } /* v33 — uniform destination-colour navigation, filled circular numbers, distinct brand. */ #tl-app .nav {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;align-items:stretch!important;} #tl-app .nav .next-block {display:contents!important;} #tl-app .nav .next-hint {display:none!important;} #tl-app .nav #tl-prev,#tl-app .nav #tl-next { width:100%!important;min-width:0!important;max-width:none!important; min-height:70px!important;padding:12px 18px!important;margin:0!important; border-radius:15px!important;box-shadow:none!important; display:flex!important;align-items:center!important;justify-content:center!important; gap:16px!important;line-height:1.1!important; font-size:clamp(17px,1.85vw,26px)!important;font-weight:850!important; color:#fff!important;border:0!important;text-align:left!important; } #tl-app .nav #tl-prev[hidden] {display:none!important;} #tl-app .nav:has(#tl-prev[hidden]) #tl-next {grid-column:2!important;} #tl-app .nav .nav-number { flex:0 0 48px!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; background:#fff!important;border:0!important;border-radius:50%!important; font-size:clamp(21px,2vw,27px)!important;font-weight:900!important;text-shadow:none!important; } #tl-app .nav .nav-label {font-size:inherit!important;font-weight:inherit!important;flex:0 1 auto;} #tl-app .nav .nav-arrow {font-size:1.15em!important;font-weight:900!important;flex:0 0 auto!important;} #tl-app[data-stage="1"] #tl-next,#tl-app[data-stage="3"] #tl-prev {background:#D79A29!important;} #tl-app[data-stage="2"] #tl-next,#tl-app[data-stage="4"] #tl-prev {background:#3389C7!important;} #tl-app[data-stage="3"] #tl-next,#tl-app[data-stage="5"] #tl-prev {background:#34A47D!important;} #tl-app[data-stage="4"] #tl-next {background:#7764C9!important;} #tl-app[data-stage="5"] #tl-next,#tl-app[data-stage="2"] #tl-prev {background:#D94763!important;} #tl-app[data-stage="1"] #tl-prev {background:#D94763!important;} #tl-app[data-stage="1"] #tl-next .nav-number,#tl-app[data-stage="3"] #tl-prev .nav-number {color:#99610C!important;} #tl-app[data-stage="2"] #tl-next .nav-number,#tl-app[data-stage="4"] #tl-prev .nav-number {color:#246B9F!important;} #tl-app[data-stage="3"] #tl-next .nav-number,#tl-app[data-stage="5"] #tl-prev .nav-number {color:#1E7658!important;} #tl-app[data-stage="4"] #tl-next .nav-number {color:#6653B4!important;} #tl-app[data-stage="5"] #tl-next .nav-number,#tl-app[data-stage="2"] #tl-prev .nav-number {color:#B82F4D!important;} #tl-app .picture-story-picker select {border:3px solid #34A47D!important;outline-color:#34A47D!important;} #tl-app .picture-story-picker select:focus-visible {box-shadow:0 0 0 4px #34A47D55!important;} #tl-app .journey-top {justify-content:flex-end!important;margin-bottom:5px!important;} #tl-app .head .scripture-brand {display:inline-flex;align-items:center;gap:9px;white-space:nowrap;line-height:1;} #tl-app .head .brand-mark {display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border:2px solid #e6c16e;border-radius:10px;background:#f5e9c9;color:#17334c;box-shadow:inset 0 -4px 0 #e0bf73;} #tl-app .head .brand-book {font-size:24px;line-height:1;} #tl-app .head .brand-wordmark {font-size:clamp(18px,1.7vw,25px);letter-spacing:.035em;font-weight:850;color:#fff;} #tl-app .head .brand-wordmark strong {color:#f2d48a;font-weight:950;} @media(max-width:849px) { #tl-app .nav {gap:9px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;} #tl-app .nav #tl-prev,#tl-app .nav #tl-next {min-height:61px!important;padding:9px!important;gap:7px!important;font-size:clamp(12px,2.5vw,19px)!important;} #tl-app .nav .nav-number {flex-basis:34px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;font-size:18px!important;} } @media(max-width:480px) { #tl-app .nav {gap:6px!important;} #tl-app .nav #tl-prev,#tl-app .nav #tl-next {font-size:12px!important;gap:5px!important;} #tl-app .nav .nav-number {flex-basis:29px!important;width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;font-size:16px!important;} } /* v34 — approved Lightboat illuminated artwork, without changing story interactions */ #tl-app .lightboat-identity{background:#063057;border:1px solid #22516f;border-radius:15px;overflow:hidden;margin:0 0 9px;line-height:0;text-align:center;} #tl-app .lightboat-banner{display:block;width:100%;height:auto;max-height:clamp(105px,15vw,205px);object-fit:contain;margin:0 auto;} #tl-app .head{padding:10px 18px!important;} #tl-app .head h2{margin:2px 0 4px!important;font-size:clamp(22px,2.4vw,34px)!important;} @media(max-width:600px){#tl-app .lightboat-banner{max-height:none;}#tl-app .head{padding:10px 13px!important;}#tl-app .head h2{font-size:22px!important;}} /* v35 — optional Lightboat explanation; journey remains the focus */ #tl-app .lightboat-intro{margin:0 0 9px;text-align:center;} #tl-app .lightboat-purpose{margin:0 0 7px;color:#143d5e;font-size:clamp(13px,1.15vw,16px);font-weight:700;line-height:1.35;} #tl-app .lightboat-about{border:1px solid #c8dce9;border-radius:10px;background:#f5f9fc;color:#153a56;text-align:left;overflow:hidden;} #tl-app .lightboat-about summary{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 14px;font-weight:750;font-size:14px;list-style:none;} #tl-app .lightboat-about summary::-webkit-details-marker{display:none;} #tl-app .lightboat-about summary:focus-visible{outline:3px solid #3389c7;outline-offset:-3px;} #tl-app .lightboat-about summary>span:first-child{color:#d79a29;} #tl-app .lightboat-summary-arrow{transition:transform .2s;} #tl-app .lightboat-about[open] .lightboat-summary-arrow{transform:rotate(180deg);} #tl-app .lightboat-about-body{padding:13px clamp(14px,3vw,25px) 17px;border-top:1px solid #d9e6ef;line-height:1.5;font-size:14px;} #tl-app .lightboat-about-body h3{font-size:19px;color:#0b2942;margin:0 0 8px;} #tl-app .lightboat-about-body h4{font-size:15px;color:#0b2942;margin:12px 0 5px;} #tl-app .lightboat-about-body p{margin:0 0 9px;} #tl-app .lightboat-invitation{font-weight:800;color:#0b527e;} #tl-app .lightboat-steps{margin:0 0 11px;padding-left:23px;} #tl-app .lightboat-steps li{padding:2px 0;} #tl-app .lightboat-source-note{border-left:3px solid #d79a29;padding:6px 11px;background:#fff9e9;margin-bottom:0!important;} @media(max-width:600px){#tl-app .lightboat-purpose{padding:0 8px;}#tl-app .lightboat-about summary{font-size:13px;}} @media(prefers-reduced-motion:reduce){#tl-app .lightboat-summary-arrow{transition:none;}} /* v36 — compact Lightboat introduction, story selector carries the reference, smaller navigation */ #tl-app .lightboat-welcome-row{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:16px;align-items:center;margin:0 0 8px;} #tl-app .lightboat-welcome-row .lightboat-identity{margin:0!important;align-self:stretch;display:flex;align-items:center;justify-content:center;} #tl-app .lightboat-welcome-row .lightboat-banner{width:100%;height:auto;max-height:175px;object-fit:contain;} #tl-app .lightboat-welcome-row .lightboat-intro{margin:0!important;text-align:left;min-width:0;} #tl-app .lightboat-welcome-row .lightboat-purpose{font-size:clamp(16px,1.65vw,22px);color:#0b2942;margin:0 0 5px;font-weight:850;} #tl-app .lightboat-description{font-size:clamp(12px,1.03vw,15px);line-height:1.38;color:#244760;margin:0 0 8px;} #tl-app .lightboat-welcome-row .lightboat-about summary{justify-content:flex-start;padding:6px 11px;font-size:13px;} /* Keep the title/reference nodes available to the script, but avoid duplicating the dropdown. */ #tl-app .head{display:none!important;} /* Buttons each take approximately a quarter of the navigation width; height ~2/3 of v35. */ #tl-app .nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:5px 10px!important;margin:7px 0!important;align-items:center!important;} #tl-app .nav #tl-prev{grid-column:1!important;} #tl-app .nav #tl-next{grid-column:4!important;} #tl-app .nav:has(#tl-prev[hidden]) #tl-next{grid-column:4!important;} #tl-app .nav #tl-prev,#tl-app .nav #tl-next{min-height:46px!important;padding:6px 8px!important;border-radius:10px!important;gap:6px!important;font-size:clamp(11px,1.05vw,15px)!important;} #tl-app .nav .nav-number{flex:0 0 27px!important;width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;font-size:15px!important;} #tl-app .nav .nav-arrow{font-size:1em!important;} @media(max-width:850px){ #tl-app .lightboat-welcome-row{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:10px;} #tl-app .lightboat-welcome-row .lightboat-banner{max-height:150px;} #tl-app .lightboat-description{font-size:12px;} #tl-app .nav #tl-prev,#tl-app .nav #tl-next{font-size:11px!important;} } @media(max-width:650px){ #tl-app .lightboat-welcome-row{grid-template-columns:1fr;gap:7px;} #tl-app .lightboat-welcome-row .lightboat-identity{max-height:150px;} #tl-app .lightboat-welcome-row .lightboat-banner{max-height:150px;} #tl-app .lightboat-welcome-row .lightboat-intro{padding:0 3px;} #tl-app .nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;} #tl-app .nav #tl-prev{grid-column:1!important;} #tl-app .nav #tl-next,#tl-app .nav:has(#tl-prev[hidden]) #tl-next{grid-column:2!important;} #tl-app .nav #tl-prev,#tl-app .nav #tl-next{min-height:44px!important;font-size:12px!important;} } /* v37: light, top-aligned welcome, reduced vertical footprint and clear stage-one label */ #tl-app .lightboat-welcome-row{ grid-template-columns:minmax(0,34%) minmax(0,1fr)!important; align-items:start!important;gap:clamp(12px,2vw,24px)!important; padding:10px 12px!important;margin-bottom:7px!important; background:#f6faff!important;border:1px solid #d9e7f0;border-radius:15px; } #tl-app .lightboat-welcome-row .lightboat-identity{ align-self:start!important;background:#0b2942!important;border-color:#d6e3eb!important; border-radius:10px!important;min-height:0!important; } #tl-app .lightboat-welcome-row .lightboat-banner{max-height:124px!important;object-fit:contain!important;} #tl-app .lightboat-welcome-row .lightboat-intro{align-self:start!important;padding:2px 0!important;} #tl-app .lightboat-welcome-row .lightboat-purpose{ color:#0b2942!important;font-size:clamp(18px,1.7vw,23px)!important; font-weight:850!important;line-height:1.2!important;margin:0 0 7px!important; } #tl-app .lightboat-welcome-row .lightboat-description{ color:#173a55!important;font-size:clamp(13px,1.1vw,16px)!important; line-height:1.48!important;font-weight:500!important;margin:0 0 9px!important; max-width:78ch; } #tl-app .lightboat-welcome-row .lightboat-about{background:#fff!important;border-color:#c6dbe8!important;} #tl-app .lightboat-welcome-row .lightboat-about summary{color:#12456b!important;} #tl-app .nav .nav-left{grid-column:1!important;display:flex;min-width:0;} #tl-app .nav .nav-left #tl-prev{width:100%!important;} #tl-app .nav .current-stage-label{ display:flex;align-items:center;gap:7px;min-height:46px; width:100%;padding:6px 9px;border-radius:10px; background:#D94763;color:white;font-weight:800;font-size:clamp(11px,1.05vw,15px); } #tl-app .nav .current-stage-label[hidden]{display:none!important;} #tl-app .nav .current-stage-label .nav-number{ display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px; border-radius:50%;background:white;color:#B82F4D;font-size:15px;font-weight:900; } #tl-app .nav .next-block{grid-column:4!important;} @media(max-width:650px){ #tl-app .lightboat-welcome-row{grid-template-columns:1fr!important;gap:8px!important;padding:9px!important;} #tl-app .lightboat-welcome-row .lightboat-identity{width:100%;max-height:125px!important;} #tl-app .lightboat-welcome-row .lightboat-banner{max-height:125px!important;} #tl-app .lightboat-welcome-row .lightboat-intro{padding:0 3px!important;} #tl-app .nav .next-block{grid-column:2!important;} } /* v38 — logo-only header, matching the image's navy edge; tighter, uniform five-step tray */ #tl-app{padding-top:4px!important;} #tl-app .lightboat-logo-strip{background:#033356;border:0;border-radius:10px;overflow:hidden;line-height:0;margin:0 0 5px;padding:0;display:flex;align-items:center;justify-content:center;} #tl-app .lightboat-logo-strip .lightboat-banner{display:block;width:100%;height:auto;max-height:145px;object-fit:contain;object-position:center;background:#033356;margin:0;} #tl-app .head{margin-top:0!important;} #tl-app .journey{margin:6px 0 7px!important;padding:8px!important;border-radius:12px!important;} #tl-app .journey-top{margin-bottom:4px!important;} #tl-app .journey-steps{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;align-items:stretch!important;} #tl-app .journey-step{height:100%!important;min-height:54px!important;padding:6px!important;border-radius:9px!important;align-items:center!important;} #tl-app .journey-step .journey-dot{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important;font-size:13px!important;} @media(max-width:650px){#tl-app .lightboat-logo-strip .lightboat-banner{max-height:110px;}#tl-app .journey{padding:6px 4px!important;}#tl-app .journey-steps{gap:3px!important;}#tl-app .journey-step{min-height:52px!important;padding:4px 2px!important;font-size:10px!important;flex-direction:column!important;text-align:center!important;}#tl-app .journey-step .journey-dot{width:23px!important;height:23px!important;min-width:23px!important;flex-basis:23px!important;font-size:11px!important;}} /* v39 — pull five-stage tray closer to logo and learning panels; no button resizing */ #tl-app .lightboat-logo-strip{margin-bottom:0!important;} #tl-app .journey{margin-top:1px!important;margin-bottom:3px!important;} #tl-app .journey-top{margin-bottom:2px!important;} /* v40 — actual section-to-section spacing fix (not merely the tray's own margin). The flex container gap previously kept the logo and journey apart. */ #tl-app{row-gap:0!important;gap:0!important;} #tl-app .lightboat-logo-strip{margin-top:0!important;margin-bottom:0!important;flex-shrink:0;} #tl-app .journey{margin-top:0!important;margin-bottom:2px!important;flex-shrink:0;} #tl-app .classroom-stage{margin-top:0!important;} /* The artwork has its own dark backdrop; retain its original proportions. */ /* v41 — remove the separate progress row: place step count at far right, centred. Equal padding all around the five stage tiles; no phantom top gap. */ #tl-app .journey{ display:flex!important;align-items:center!important;gap:10px!important; padding:9px!important;margin:0 0 3px!important;min-height:0!important; } #tl-app .journey-steps{order:1;flex:1 1 auto;min-width:0;align-items:stretch!important;} #tl-app .journey-top{ order:2;flex:0 0 105px;display:flex!important;align-items:center!important; justify-content:flex-end!important;align-self:stretch!important; margin:0!important;padding:0 2px 0 0!important; line-height:1.2!important;text-align:right!important; } #tl-app .journey-top strong{font-size:12px!important;white-space:nowrap!important;} #tl-app .journey-step{min-height:54px!important;} @media(max-width:650px){ #tl-app .journey{gap:5px!important;padding:6px!important;} #tl-app .journey-top{flex-basis:56px!important;} #tl-app .journey-top strong{font-size:9px!important;white-space:normal!important;} } /* v42 — compact top-left brand, prominent story selection alongside */ #tl-app .lightboat-logo-strip{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:clamp(12px,2vw,24px)!important;padding:7px 12px!important;margin:0!important;min-height:0!important;background:#033356!important;} #tl-app .lightboat-logo-strip .lightboat-banner{flex:0 0 auto!important;width:clamp(145px,23vw,260px)!important;max-width:34%!important;height:auto!important;max-height:78px!important;object-fit:contain!important;object-position:left center!important;margin:0!important;} #tl-app .lightboat-logo-strip .picture-story-picker{position:static!important;display:flex!important;flex:1 1 auto!important;min-width:0!important;align-items:center!important;gap:12px!important;margin:0!important;padding:9px 12px!important;background:#f1f7fb!important;border:2px solid #d1e5f2!important;border-radius:12px!important;box-shadow:none!important;} #tl-app .lightboat-logo-strip .picture-story-picker label{color:#103a59!important;font-size:clamp(16px,1.5vw,21px)!important;font-weight:850!important;white-space:nowrap!important;} #tl-app .lightboat-logo-strip .picture-story-picker select{flex:1 1 auto!important;min-width:0!important;width:100%!important;min-height:51px!important;padding:10px 38px 10px 14px!important;font-size:clamp(16px,1.5vw,21px)!important;font-weight:800!important;border:3px solid #34a47d!important;background:#fff!important;color:#102b42!important;} @media(max-width:720px){#tl-app .lightboat-logo-strip{gap:8px!important;padding:6px!important;}#tl-app .lightboat-logo-strip .lightboat-banner{width:clamp(90px,25vw,150px)!important;max-width:30%!important;max-height:72px!important;}#tl-app .lightboat-logo-strip .picture-story-picker{flex-direction:column!important;align-items:stretch!important;gap:3px!important;padding:5px 7px!important;}#tl-app .lightboat-logo-strip .picture-story-picker label{font-size:13px!important;}#tl-app .lightboat-logo-strip .picture-story-picker select{min-height:42px!important;font-size:14px!important;padding:7px 25px 7px 8px!important;}} /* v43 — Lightboat palette, legible cropped original artwork and compact navigation */ #tl-app{--lightboat-navy:#062b4c;--lightboat-blue:#1976b4;--lightboat-sky:#e9f5ff;--lightboat-gold:#e6b34c;--lightboat-cream:#fffaf0;} #tl-app .lightboat-logo-strip{background:#033356!important;border:1px solid #2b6389!important;border-bottom:2px solid #e6b34c!important;padding:5px 12px!important;gap:clamp(12px,2vw,24px)!important;} #tl-app .lightboat-logo-strip .lightboat-banner{width:clamp(175px,27vw,325px)!important;max-width:36%!important;max-height:94px!important;object-fit:contain!important;object-position:left center!important;} #tl-app .lightboat-logo-strip .picture-story-picker{background:#eaf5fd!important;border:1px solid #80b6d6!important;} #tl-app .lightboat-logo-strip .picture-story-picker label{color:#07385c!important;} #tl-app .lightboat-logo-strip .picture-story-picker select{border:2px solid #d5a13a!important;box-shadow:0 0 0 2px #fff4d6!important;color:#082e4c!important;} #tl-app .journey{background:#102d4b!important;border:1px solid #3c6381!important;box-shadow:inset 0 1px 0 #ffffff20!important;} #tl-app .journey-step.current{outline:2px solid #e6b34c!important;outline-offset:-2px!important;} #tl-app .classroom-stage{gap:10px!important;} #tl-app .classroom-stage>.art-frame{border:2px solid #5c9fc9!important;box-shadow:0 2px 10px #002c4a26!important;} #tl-app .learning-column{min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px;} #tl-app .learning-column>#tl-content{flex:1 1 auto;min-height:0;max-height:none;margin:0!important;border:1px solid #c3dfef!important;border-top:5px solid var(--stage-color,#d9a640)!important;background:#f9fcff!important;box-shadow:0 4px 16px #062b4c1a!important;} #tl-app .learning-column>.nav{flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:6px!important;margin:0!important;background:#102d4b!important;border:1px solid #3b6583!important;border-radius:11px!important;} #tl-app .learning-column>.nav .nav-left,#tl-app .learning-column>.nav .next-block{display:flex!important;flex:1 1 0!important;min-width:0!important;grid-column:auto!important;align-items:center!important;margin:0!important;} #tl-app .learning-column>.nav .next-block{justify-content:flex-end!important;} #tl-app .learning-column>.nav #tl-prev,#tl-app .learning-column>.nav #tl-next{width:100%!important;min-height:40px!important;padding:5px 8px!important;font-size:clamp(11px,1vw,14px)!important;} #tl-app .learning-column>.nav .current-stage-label,#tl-app .learning-column>.nav .next-hint{display:none!important;} #tl-app .learning-column>.nav .nav-left:has(#tl-prev[hidden]){display:none!important;} #tl-app .learning-column>.nav .next-block:only-child{max-width:52%!important;} @media(min-width:850px){ #tl-app .classroom-stage{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr)!important;align-items:stretch!important;min-height:0!important;overflow:hidden!important;} #tl-app .classroom-stage>.art-frame{height:100%!important;min-height:0!important;max-height:none!important;} #tl-app .classroom-stage>.learning-column{height:100%!important;overflow:hidden!important;} #tl-app .learning-column>#tl-content{height:auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:clamp(12px,1.4vw,22px)!important;} } @media(max-width:849px){ #tl-app .classroom-stage{display:flex!important;flex-direction:column!important;overflow:visible!important;} #tl-app .learning-column{height:auto!important;overflow:visible!important;} #tl-app .learning-column>#tl-content{height:auto!important;overflow:visible!important;} } @media(max-width:720px){ #tl-app .lightboat-logo-strip .lightboat-banner{width:clamp(115px,30vw,175px)!important;max-width:34%!important;max-height:85px!important;} #tl-app .learning-column>.nav{gap:6px!important;} #tl-app .learning-column>.nav #tl-prev,#tl-app .learning-column>.nav #tl-next{min-height:44px!important;font-size:12px!important;} } /* v44 — candlelight Scripture and deep-blue previous/next navigation */ #tl-app .scripture small{color:#604e31!important;} #tl-app .learning-column>.nav #tl-prev, #tl-app .learning-column>.nav #tl-next{ background:#063356!important; color:#fff!important; border:1px solid #b78a34!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important; } #tl-app .learning-column>.nav #tl-prev .nav-number, #tl-app .learning-column>.nav #tl-next .nav-number{ background:#fff!important; color:#063356!important; } #tl-app .learning-column>.nav #tl-prev:hover, #tl-app .learning-column>.nav #tl-next:hover{background:#104a76!important;} /* v45 — restore stage-colour typography and join lesson/navigation into one card */ #tl-app .lightboat-logo-strip{align-items:center!important;} #tl-app .lightboat-logo-strip .lightboat-banner{ align-self:center!important; transform:translateY(-5px); object-position:left center!important; } /* Keep the five stages' distinctive colours reflected in their lesson headings. */ #tl-app .learning-column .panel h3, #tl-app .learning-column .panel .stage-heading{ color:var(--stage-deep,#a62b47)!important; } /* One unified card: eliminate the visible seam, double borders and empty gutter. */ #tl-app .classroom-stage>.learning-column{ gap:0!important; border:1px solid #c3dfef!important; border-top:5px solid var(--stage-color,#d94763)!important; border-radius:17px!important; overflow:hidden!important; background:#f9fcff!important; box-shadow:0 4px 16px #062b4c1a!important; } #tl-app .learning-column>#tl-content{ border:0!important; border-radius:0!important; box-shadow:none!important; padding-bottom:8px!important; } #tl-app .learning-column>.nav{ border:0!important; border-top:1px solid #b6cddd!important; border-radius:0!important; box-shadow:none!important; margin:0!important; padding:7px 10px!important; background:#102d4b!important; } #tl-app .learning-column .passage-link{margin-bottom:3px!important;} @media(max-width:849px){ #tl-app .classroom-stage>.learning-column{height:auto!important;overflow:hidden!important;} } /* v46 — consistent alignment, balanced use of lesson space, stronger story focus */ #tl-app .lightboat-logo-strip .picture-story-picker{ border:3px solid #dfb34d!important; background:#f0f7fd!important; box-shadow:inset 0 0 0 2px #123d61!important; padding:10px 13px!important; } #tl-app .lightboat-logo-strip .picture-story-picker label{ font-weight:900!important;letter-spacing:.005em!important; } #tl-app .lightboat-logo-strip .picture-story-picker select{ border:3px solid #1b5d89!important; box-shadow:0 0 0 2px #f6df9c!important; background:#fff!important; } #tl-app .journey-step.done .journey-dot{ background:#35b978!important;border-color:#35b978!important;color:#072e2b!important; } #tl-app .journey-step.done{color:#e9fff2!important;} #tl-app .journey-step.current .journey-dot{ background:var(--step-color,#3389c7)!important; border-color:#f0c66e!important;color:white!important; } @media(min-width:850px){ #tl-app .learning-column>#tl-content{ display:flex!important;flex-direction:column!important; justify-content:space-between!important;align-items:stretch!important; gap:clamp(4px,.6vh,10px)!important; } #tl-app .learning-column>#tl-content .story-trail{ display:flex!important;flex-direction:column!important; justify-content:space-evenly!important;flex:1 1 auto!important; min-height:0!important; } #tl-app .learning-column>#tl-content .story-trail li{flex:1 1 auto!important;min-height:0!important;} #tl-app .learning-column>#tl-content > p:last-child:has(a[href*="biblegateway"]){ margin-top:auto!important;padding-top:6px!important; } } @media(max-width:720px){ #tl-app .lightboat-logo-strip .picture-story-picker{padding:6px 8px!important;} #tl-app .learning-column>#tl-content{justify-content:flex-start!important;} } /* v47 — The Lightboat: connected ocean-blue journey, moving candlelight focus, harmonious typography. */ #tl-app{--lightboat-navy:#102d4b;--lightboat-ocean:#276a89;--lightboat-gold:#d8a84d;--lightboat-cream:#fff2ce;} #tl-app .journey{background:#102d4b!important;border:1px solid #4d7190!important;padding:7px!important;gap:10px!important;} #tl-app .journey-steps{gap:2px!important;background:#315673!important;border-radius:9px!important;overflow:hidden!important;} #tl-app .journey-step{border-radius:4px!important;background:var(--step-color,#276a89)!important;border:1px solid #ffffff24!important;outline:0!important;min-width:0!important;transition:background-color .2s ease,box-shadow .2s ease!important;} #tl-app .journey-step.current{background:linear-gradient(135deg,#f6d77d,#d69b34)!important;box-shadow:inset 0 0 0 2px #fff0c0,0 0 12px #f0bd5470!important;color:#18344b!important;border-color:#fce7aa!important;z-index:1!important;} #tl-app .journey-step.current .journey-dot{background:#fff8e7!important;border:2px solid #a87625!important;color:#18344b!important;} #tl-app .journey-step.done .journey-dot{background:#2fba79!important;border-color:#b7f1cf!important;color:#092e25!important;} #tl-app .journey-step.done{background:#1d5872!important;color:#fff!important;} #tl-app .journey-top strong{color:#f2ce77!important;} /* Major headings echo the classical Lightboat wordmark; passages and controls remain legible sans-serif. */ #tl-app .learning-column .panel h3,#tl-app .learning-column .panel .stage-heading, #tl-app .head h2{font-family:Georgia,"Times New Roman",serif!important;letter-spacing:-.018em!important;font-weight:700!important;} #tl-app .learning-column .panel h3,#tl-app .learning-column .panel .stage-heading{color:var(--stage-deep,#123c5b)!important;} #tl-app .learning-column .panel .eyebrow{color:#a87524!important;letter-spacing:.09em!important;font-weight:800!important;} #tl-app .picture-story-picker label{font-family:Georgia,"Times New Roman",serif!important;color:#173d5c!important;font-size:clamp(17px,1.55vw,23px)!important;} #tl-app .learning-column{border-top-color:#d8a84d!important;} @media(max-width:720px){#tl-app .journey-steps{gap:1px!important;}#tl-app .journey-step{padding:5px 2px!important;}#tl-app .journey{gap:5px!important;}} @media(prefers-reduced-motion:reduce){#tl-app .journey-step{transition:none!important;}} /* v48: a single compact forward action inside the learning panel. */ #tl-app .learning-column>.nav{display:flex!important;justify-content:flex-end!important;align-items:center!important;padding:8px 12px!important;min-height:0!important;} #tl-app .learning-column>.nav .nav-left{display:none!important;} #tl-app .learning-column>.nav .next-block{display:flex!important;flex:0 0 auto!important;width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;} #tl-app .learning-column>.nav #tl-next{width:auto!important;min-width:125px!important;max-width:220px!important;min-height:42px!important;padding:7px 13px!important;border:2px solid #dcb15a!important;border-radius:9px!important;background:#173e60!important;color:#fff!important;box-shadow:none!important;font-size:13px!important;font-weight:700!important;gap:7px!important;} #tl-app .learning-column>.nav #tl-next .nav-number{width:24px!important;height:24px!important;min-width:24px!important;font-size:12px!important;background:#f5e5b5!important;color:#173e60!important;} #tl-app .learning-column>.nav #tl-next:hover{background:#245a80!important;} #tl-app .learning-column>.nav .next-hint{display:none!important;} @media(max-width:650px){#tl-app .learning-column>.nav{padding:7px 9px!important;}#tl-app .learning-column>.nav #tl-next{min-height:40px!important;padding:6px 10px!important;font-size:12px!important;}} /* v49 — single continuous white learning card and compact Next Page control. Override the legacy full-width navy footer without altering lesson layout. */ #tl-app .classroom-stage>.learning-column{background:#fff!important;} #tl-app .learning-column>#tl-content{background:#fff!important;padding-bottom:3px!important;} #tl-app .learning-column>.nav{ background:#fff!important; border:0!important; border-top:0!important; box-shadow:none!important; margin:0!important; padding:2px 13px 12px!important; min-height:0!important; justify-content:flex-end!important; align-items:flex-start!important; flex:0 0 auto!important; } #tl-app .learning-column>.nav .next-block{ flex:0 0 auto!important;width:auto!important;max-width:100%!important; background:transparent!important;border:0!important;box-shadow:none!important; padding:0!important;margin:0!important; } #tl-app .learning-column>.nav #tl-next{ width:auto!important; min-width:115px!important; max-width:210px!important; min-height:38px!important; padding:5px 12px!important; background:#173e60!important;color:#fff!important; border:2px solid #dcb15a!important;border-radius:9px!important; box-shadow:none!important; } @media(max-width:650px){ #tl-app .learning-column>.nav{padding:2px 9px 9px!important;} #tl-app .learning-column>.nav #tl-next{min-height:38px!important;} } /* v50: a quiet moment of emotional reflection before the Gospel choice. */ #tl-app .story-tension { background:#fff7e7; border-left:4px solid #c59a4b; border-radius:8px; padding:10px 13px; color:#243c52; line-height:1.5; margin:10px 0; } /* v51 — Peace & Clarity */ #tl-app{--peace-blue:#235c83;--peace-navy:#163b59;--peace-gold:#d6aa58;--peace-ink:#233a4d} #tl-app .classroom-stage>.art-frame,#tl-app .classroom-stage>.learning-column{border:3px solid var(--peace-blue)!important;border-radius:16px!important;box-shadow:0 3px 15px rgba(18,48,73,.08)!important} #tl-app .classroom-stage>.learning-column{border-top:3px solid var(--peace-blue)!important;background:#fff!important} #tl-app .learning-column>.panel{padding:clamp(17px,1.7vw,27px)!important;color:var(--peace-ink)!important;line-height:1.62!important} #tl-app .learning-column .panel h3{font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(24px,2.1vw,32px)!important;line-height:1.22!important;letter-spacing:-.018em!important;margin:5px 0 16px!important;color:var(--peace-navy)!important} #tl-app .learning-column .panel p,#tl-app .learning-column .panel li{line-height:1.62!important} #tl-app .learning-column .panel .eyebrow{color:#946d2d!important;letter-spacing:.065em!important;font-weight:700!important} #tl-app .learning-column .panel .journey-question{line-height:1.4!important;color:var(--peace-navy)!important} #tl-app .learning-column .panel .story-lead{line-height:1.55!important;color:#29465c!important} #tl-app .learning-column .panel .story-choices,#tl-app .learning-column .panel .reflection-prompts,#tl-app .learning-column .panel .live-choices{gap:9px!important} #tl-app .learning-column>.nav{padding:8px 19px 17px!important;background:#fff!important} #tl-app .learning-column>.nav #tl-next{min-height:42px!important;background:var(--peace-navy)!important;border:2px solid var(--peace-gold)!important} #tl-app .journey-step.current.done{background:linear-gradient(135deg,#f6d77d,#d69b34)!important;color:#18344b!important} #tl-app .journey-step.current.done .journey-dot{background:#2fba79!important;color:#092e25!important;border:2px solid #d7f5df!important} #tl-app .journey-completion{margin:20px 0 8px;padding:16px 18px;border-radius:12px;background:#f2f7f9;border:1px solid #d8e5eb} #tl-app .complete-journey{font:inherit;font-weight:700;font-size:15px;color:#fff;background:#235c83;border:2px solid #d6aa58;border-radius:9px;padding:10px 15px;cursor:pointer;max-width:100%} #tl-app .complete-journey[aria-pressed="true"]{background:#21654d;border-color:#89c4a3} #tl-app .completion-note{margin:9px 0 0!important;font-size:14px;color:#435b6c;line-height:1.5!important} #tl-app button:focus-visible,#tl-app select:focus-visible{outline:3px solid #bd8e36!important;outline-offset:3px!important} @media(max-width:849px){#tl-app .classroom-stage>.art-frame,#tl-app .classroom-stage>.learning-column{border-width:2px!important}#tl-app .learning-column>.panel{padding:18px!important}} /* v52 — Quiet Blue: consistent, fine outlines and more efficient stage screens. */ #tl-app{--peace-blue:#235c83;--peace-gold:#cba65c;} #tl-app .learning-column>.nav #tl-next, #tl-app .complete-journey{ border:1px solid #447c9d!important; background:#173e60!important; box-shadow:none!important; } #tl-app .picture-story-picker, #tl-app .picture-story-picker select{ border-color:#28658c!important; box-shadow:none!important; } #tl-app .story-tension{border-left:3px solid #4d86a6!important;background:#f2f7fa!important;} #tl-app .journey-step.current{ border:1px solid #caa359!important; box-shadow:inset 0 0 0 1px #f6e7c5!important; } #tl-app .journey-step.current .journey-dot{border:1px solid #bc984d!important;} #tl-app .journey-completion{margin:9px 0 4px!important;padding:9px 12px!important;} #tl-app .completion-note{margin-top:5px!important;} #tl-app .learning-column>.panel{padding:clamp(12px,1.25vw,19px)!important;line-height:1.48!important;} #tl-app .learning-column .panel h3{font-size:clamp(21px,1.75vw,27px)!important;margin:2px 0 9px!important;} #tl-app .learning-column .panel p,#tl-app .learning-column .panel li{line-height:1.48!important;} #tl-app .learning-column>.nav{padding:3px 12px 8px!important;} #tl-app .learning-column>.nav #tl-next{min-height:36px!important;padding:5px 10px!important;} #tl-app .journey{padding:5px!important;gap:5px!important;} @media(min-width:1000px) and (min-height:690px){ #tl-app .learning-column>#tl-content{gap:5px!important;} #tl-app .learning-column .panel .story-trail{gap:5px!important;} } @media(max-width:849px){ #tl-app .learning-column>.panel{padding:15px!important;} #tl-app .learning-column .panel p,#tl-app .learning-column .panel li{line-height:1.55!important;} } /* v53: calm, compact learning stages. */ #tl-app .living-connection{display:none!important} #tl-app .learning-column .panel{padding:clamp(12px,1.15vw,18px)!important;line-height:1.46!important} #tl-app .learning-column .panel h3{font-size:clamp(22px,1.85vw,29px)!important;margin:2px 0 9px!important;line-height:1.18!important} #tl-app .learning-column .panel p{margin-top:6px!important;margin-bottom:8px!important;line-height:1.48!important} #tl-app .learning-column .panel .story-choices{gap:8px!important} #tl-app .learning-column .panel .story-choices button{padding:9px 12px!important;line-height:1.35!important} #tl-app .learning-column .panel .story-trail{margin:7px 0!important} #tl-app .learning-column .panel .story-trail li{padding-top:4px!important;padding-bottom:4px!important} #tl-app .journey-completion{margin:10px 0 2px!important;padding:10px 12px!important} #tl-app .learning-column>.nav{padding:5px 14px 11px!important} #tl-app .learning-column .panel .story-tension{margin:6px 0!important;padding:9px 12px!important} #tl-app .learning-column .panel .jairus-intro{margin:6px 0!important} @media(max-width:849px){#tl-app .learning-column .panel{padding:13px!important}} /* v54: focused, compact learning stages */ #tl-app .answer-feedback[hidden],#tl-app .story-teaser:empty,#tl-app .living-connection:empty,#tl-app .live-action-prompt:empty{display:none!important} #tl-app .answer-instruction{margin:3px 0 6px!important;font-size:14px!important;font-weight:650;color:#41627b!important} #tl-app .story-choices button{display:flex!important;align-items:center;gap:10px;text-align:left!important} #tl-app .answer-letter{display:inline-flex;flex:0 0 27px;align-items:center;justify-content:center;width:27px;height:27px;border:1.5px solid #4b7e9d;border-radius:7px;background:#f1f7fb;color:#18496a;font-weight:800;font-size:14px} #tl-app .story-trail{list-style:none!important;padding-left:0!important;counter-reset:none!important} #tl-app .story-trail li{padding:6px 9px!important;margin:0!important;border-bottom:1px solid #e4edf3!important} #tl-app .story-trail li strong{display:flex!important;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap} #tl-app .story-trail li strong small{font-size:12px!important;color:#356687!important;font-weight:650;white-space:nowrap} #tl-app .story-trail li span{font-size:14px!important;line-height:1.32!important} #tl-app[data-stage="4"] .reflection-prompts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;margin:8px 0!important} #tl-app[data-stage="4"] .reflection-prompts button{font-size:16px!important;font-weight:750!important;min-height:49px!important;padding:10px 8px!important;border:2px solid #4d7899!important;border-radius:10px!important;background:linear-gradient(145deg,#f6fbfe,#dcebf5)!important;color:#214b6c!important;box-shadow:inset 0 1px 0 #fff,0 2px 4px #193b5412!important} #tl-app[data-stage="4"] .reflection-prompts button[aria-pressed="true"]{background:linear-gradient(145deg,#e2f1fa,#bad6e8)!important;border-color:#235c83!important} #tl-app[data-stage="5"] .learning-column .panel{padding-top:10px!important;padding-bottom:5px!important} #tl-app[data-stage="5"] .journey-completion{margin:5px 0 0!important;padding:5px 8px!important;background:transparent!important;border:0!important} #tl-app[data-stage="5"] .live-action-prompt{margin:5px 0!important;padding:7px 10px!important} #tl-app[data-stage="5"] .live-places{margin:5px 0!important;gap:7px!important} #tl-app[data-stage="5"] .live-places button{padding:8px 10px!important} #tl-app[data-stage="5"] .story-lead,#tl-app[data-stage="5"] .journey-question{margin:5px 0!important} #tl-app[data-stage="5"] .learning-column>.nav{padding-top:1px!important;padding-bottom:6px!important} @media(max-width:600px){#tl-app[data-stage="4"] .reflection-prompts{grid-template-columns:1fr!important}#tl-app .story-trail li strong small{font-size:11px!important}} /* v55 — quiet typography, short Scripture excerpts and an obvious final action */ #tl-app .learning-column .panel h3{font-family:Georgia,"Times New Roman",serif!important;font-weight:700!important;font-size:clamp(23px,1.8vw,29px)!important;line-height:1.22!important;letter-spacing:-.012em!important} #tl-app .learning-column .panel p{font-size:clamp(15px,1.08vw,17px)!important;line-height:1.48!important} #tl-app .story-teaser{display:none!important} #tl-app .learning-column .panel .journey-question{font-size:clamp(17px,1.4vw,21px)!important;line-height:1.3!important;margin:6px 0!important;font-weight:650!important} #tl-app[data-stage="3"] .choice-guidance{margin:4px 0 8px!important} #tl-app[data-stage="4"] .story-trail{gap:5px!important} #tl-app[data-stage="4"] .story-trail li{padding:7px 11px!important;background:#f6f9fc!important;border:1px solid #d8e5ef!important;border-left:3px solid #5a82a2!important;border-radius:9px!important} #tl-app[data-stage="4"] .story-trail li strong{font-size:clamp(14px,1.04vw,16px)!important;line-height:1.2!important} #tl-app[data-stage="4"] .story-trail li span{font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(13px,.98vw,15px)!important;line-height:1.3!important;color:#25465f!important} #tl-app[data-stage="4"] .story-trail li strong small{font-family:Arial,sans-serif!important;font-size:12px!important;color:#396581!important} #tl-app[data-stage="4"] .reflection-prompts{margin:7px 0!important} #tl-app[data-stage="5"] .live-action-prompt[hidden]{display:none!important} #tl-app[data-stage="5"] .live-action-prompt{background:#f1f6f9!important;border:1px solid #dce9f0!important;border-left:3px solid #4d7a9b!important;color:#24455f!important;border-radius:9px!important} #tl-app[data-stage="5"] .journey-completion{margin:7px 0 0!important;padding:0!important;background:transparent!important;border:0!important} #tl-app[data-stage="5"] .complete-journey{background:#276d52!important;border:2px solid #6ba88d!important;color:white!important;font-weight:750!important;font-size:clamp(14px,1vw,16px)!important;line-height:1.3!important;padding:10px 13px!important;width:100%!important} #tl-app[data-stage="5"] .complete-journey[aria-pressed="true"]{background:#1b5d43!important;border-color:#1b5d43!important} #tl-app[data-stage="5"] .live-places{margin:7px 0!important} #tl-app[data-stage="5"] .passage-link{margin:5px 0!important} /* v57 — the Gospel story unfolds through the first three stages */ #tl-app .learning-column .story-lead,#tl-app .learning-column .story{line-height:1.52!important;margin-block:8px!important;} #tl-app .learning-column .story small,#tl-app .learning-column .story-lead small{font-size:.79em;color:#536e80;white-space:nowrap;} #tl-app #tl-valueDetail:empty{display:none!important;} #tl-app .learning-column .choice-guidance{margin:8px 0 10px!important;} /* v58: clear journey labels, roomy verse boxes, calm green selection */ #tl-app .story-trail{counter-reset:journey;display:grid;gap:10px;padding-left:0!important;list-style:none!important;} #tl-app .story-trail li{position:relative;padding:13px 18px 13px 62px!important;min-height:80px;list-style:none!important;line-height:1.45!important;} #tl-app .story-trail li::before{position:absolute!important;left:14px!important;top:16px!important;transform:none!important;} #tl-app .story-trail li strong{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px;} #tl-app .story-trail li strong small{font-family:Arial,sans-serif;font-size:.75em;font-weight:700;white-space:nowrap;} #tl-app .story-trail li span{display:block;font-family:Arial,sans-serif!important;font-size:clamp(14px,1.05vw,17px)!important;line-height:1.5!important;} #tl-app .reflection-prompts button.selected-green,#tl-app .reflection-prompts button[aria-pressed="true"]{background:#237553!important;color:#fff!important;border:2px solid #237553!important;box-shadow:0 0 0 3px #d6eee2!important;} #tl-app #tl-reflection[hidden]{display:none!important;} #tl-app .live-reflection{margin:12px 0 5px!important;} #tl-app .live-places.live-choices{margin-bottom:12px!important;} @media(max-width:800px){#tl-app .story-trail li{padding-left:52px!important;}#tl-app .story-trail li strong{gap:3px;}} /* Stage 3 is now the complete story; override legacy stage-4 layout rules. */ #tl-app[data-stage="3"] .story-trail{display:grid!important;gap:10px!important;counter-reset:journey!important;margin:12px 0!important;} #tl-app[data-stage="3"] .story-trail li{position:relative!important;padding:12px 16px 12px 64px!important;min-height:82px!important;border:1px solid #d6e5ef!important;border-left:4px solid #5a82a2!important;border-radius:12px!important;background:#f5f9fc!important;} #tl-app[data-stage="3"] .story-trail li::before{left:12px!important;top:14px!important;transform:none!important;} #tl-app[data-stage="3"] .story-trail li strong{font-family:Arial,sans-serif!important;font-size:17px!important;line-height:1.3!important;} #tl-app[data-stage="3"] .story-trail li span{font-family:Arial,sans-serif!important;font-size:15px!important;line-height:1.45!important;} #tl-app[data-stage="3"] .reflection-prompts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;margin:12px 0!important;} #tl-app[data-stage="3"] .reflection-prompts button{font-size:17px!important;font-weight:700!important;min-height:52px!important;padding:12px!important;border:2px solid #4d7899!important;border-radius:12px!important;} #tl-app[data-stage="3"] .reflection-prompts button[aria-pressed="true"]{background:#237553!important;color:#fff!important;border-color:#237553!important;} @media(max-width:650px){#tl-app[data-stage="3"] .reflection-prompts{grid-template-columns:1fr!important;}} /* v59: one calm light-blue story selector, dropdown to the far right. */ #tl-app .lightboat-logo-strip .picture-story-picker{ background:#e8f3fa!important; border:1px solid #a8c8da!important; border-radius:12px!important; box-shadow:none!important; gap:clamp(12px,2vw,28px)!important; padding:10px 14px!important; flex-direction:row!important; align-items:center!important; } #tl-app .lightboat-logo-strip .picture-story-picker label{ flex:1 1 auto!important; min-width:0!important; color:#123d5c!important; font-size:clamp(17px,1.7vw,26px)!important; font-family:Georgia,"Times New Roman",serif!important; font-weight:700!important; white-space:normal!important; } #tl-app .lightboat-logo-strip .picture-story-picker select{ flex:0 1 58%!important; width:58%!important; min-width:0!important; margin-left:auto!important; min-height:54px!important; padding:8px 42px 8px 14px!important; border:2px solid #36749c!important; border-radius:10px!important; outline:0!important; box-shadow:none!important; background:#fafdff!important; color:#123b5b!important; font-size:clamp(15px,1.55vw,23px)!important; font-weight:700!important; } #tl-app .lightboat-logo-strip .picture-story-picker select:focus-visible{ outline:3px solid #679cc0!important; outline-offset:2px!important; box-shadow:none!important; } /* Remove the stacked gold / blue rings; retain a single fine blue line. */ #tl-app .lightboat-logo-strip{ border:0!important; border-bottom:1px solid #5d8ead!important; box-shadow:none!important; } /* Scripture over the mosaics: readable peaceful blue, not yellow or green. */ @media(max-width:720px){ #tl-app .lightboat-logo-strip .picture-story-picker{gap:8px!important;padding:8px!important;} #tl-app .lightboat-logo-strip .picture-story-picker label{font-size:clamp(12px,2.4vw,17px)!important;} #tl-app .lightboat-logo-strip .picture-story-picker select{width:60%!important;flex-basis:60%!important;min-height:43px!important;font-size:clamp(12px,2.3vw,15px)!important;padding:7px 28px 7px 8px!important;} } /* v60 — candlelight, clarity and a visible response to each choice */ #tl-app{--amber:#c78e30;--candle:#f1c46d;--gold-ink:#714a16;} /* Remove unused air above the first two questions; bring the choice group together. */ #tl-app[data-stage="1"] .answer-instruction,#tl-app[data-stage="2"] .answer-instruction{margin:5px 0 7px!important;font-size:clamp(14px,1.15vw,17px)!important;line-height:1.35!important;} #tl-app[data-stage="1"] .story-choices,#tl-app[data-stage="2"] .story-choices{gap:8px!important;margin:4px 0 8px!important;} #tl-app[data-stage="1"] .story-choices button,#tl-app[data-stage="2"] .story-choices button{min-height:53px!important;padding:10px 12px!important;box-shadow:none!important;line-height:1.3!important;} #tl-app[data-stage="1"] .journey-question,#tl-app[data-stage="2"] .journey-question{margin:9px 0 4px!important;font-size:clamp(19px,1.7vw,25px)!important;line-height:1.25!important;} #tl-app[data-stage="1"] .story-lead,#tl-app[data-stage="2"] .story-lead{margin:6px 0!important;} #tl-app[data-stage="1"] .story,#tl-app[data-stage="2"] .story{margin:5px 0!important;} #tl-app[data-stage="1"] .answer-feedback[hidden],#tl-app[data-stage="2"] .answer-feedback[hidden]{display:none!important;} #tl-app[data-stage="1"] .story-choices button.selected,#tl-app[data-stage="2"] .story-choices button.selected{background:#fce7b8!important;border-color:#bc8229!important;color:#392b1b!important;box-shadow:inset 0 0 0 1px #d6a04c!important;} #tl-app[data-stage="1"] .story-choices button.answer-correct,#tl-app[data-stage="2"] .story-choices button.answer-correct{background:#f4d18c!important;border-color:#ae751e!important;} #tl-app[data-stage="1"] .story-choices button.answer-correct .answer-letter,#tl-app[data-stage="2"] .story-choices button.answer-correct .answer-letter{background:#21694b!important;color:white!important;} /* Scripture over mosaics: amber-gold for a prominent, warm reading moment. */ /* Stage 3: identical numbered boxes, a consistent vertical rhythm. */ #tl-app[data-stage="3"] .story-trail{grid-template-rows:repeat(5,minmax(0,1fr))!important;gap:8px!important;margin:8px 0 12px!important;} #tl-app[data-stage="3"] .story-trail li{min-height:90px!important;padding:10px 15px 10px 62px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;} #tl-app[data-stage="3"] .story-trail li::before{left:14px!important;top:50%!important;transform:translateY(-50%)!important;} #tl-app[data-stage="3"] .story-trail li strong{margin:0!important;line-height:1.25!important;} #tl-app[data-stage="3"] .story-trail li span{line-height:1.4!important;} #tl-app[data-stage="3"] .reflection-prompts button[aria-pressed="true"]{background:linear-gradient(145deg,#f9df9e,#d8a246)!important;color:#3a2b19!important;border-color:#aa752a!important;box-shadow:0 0 0 3px #f9e9c7!important;} #tl-app[data-stage="3"] #tl-reflection:not([hidden]){background:#fff2d4!important;border:2px solid #c59037!important;border-radius:11px!important;padding:10px 13px!important;color:#42311e!important;} /* Stage 4: clear amber selection, immediate gold explanation. */ #tl-app[data-stage="4"] .choice-guidance{font-weight:750!important;color:#25445c!important;margin:6px 0!important;} #tl-app[data-stage="4"] .values-compact{gap:8px!important;} #tl-app[data-stage="4"] .values-compact button{transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease!important;border:2px solid #92b2c5!important;background:#eaf3f9!important;color:#193d59!important;min-height:43px!important;} #tl-app[data-stage="4"] .values-compact button:hover{background:#f9e7bf!important;border-color:#c28d3b!important;} #tl-app[data-stage="4"] .values-compact button.sel,#tl-app[data-stage="4"] .values-compact button[aria-pressed="true"]{background:linear-gradient(145deg,#fbe7b8,#e7b451)!important;border:3px solid #a87525!important;color:#3e2c16!important;box-shadow:0 0 0 3px #fff1d5!important;} #tl-app[data-stage="4"] .values-stage .valueinfo{background:#fff5df!important;border:2px solid #d3a251!important;border-left:5px solid #b67f2d!important;color:#283f50!important;} #tl-app[data-stage="4"] .values-stage .valueinfo h4{color:#83541a!important;font-weight:800!important;} /* Stage 5: tight, connected reflection and a gold completion control. */ #tl-app[data-stage="5"] .live-reflection{margin:5px 0 2px!important;font-size:clamp(16px,1.4vw,21px)!important;line-height:1.35!important;} #tl-app[data-stage="5"] .live-places.live-choices{margin:5px 0 8px!important;gap:8px!important;} #tl-app[data-stage="5"] .passage-link{margin:3px 0!important;line-height:1.25!important;} #tl-app[data-stage="5"] .journey-completion{margin:5px 0 0!important;} #tl-app[data-stage="5"] .complete-journey{background:linear-gradient(135deg,#f8d78d,#d6a045)!important;border:3px solid #a87529!important;color:#342919!important;font-size:clamp(15px,1.2vw,18px)!important;font-weight:850!important;min-height:52px!important;box-shadow:0 2px 6px rgba(88,58,18,.12)!important;} #tl-app[data-stage="5"] .complete-journey:hover{background:#f8e2ae!important;} #tl-app[data-stage="5"] .complete-journey[aria-pressed="true"]{background:#23754f!important;border-color:#23754f!important;color:white!important;box-shadow:0 0 0 3px #ccebd8!important;} #tl-app button:focus-visible{outline:3px solid #a46b18!important;outline-offset:3px!important;} @media(max-width:850px){#tl-app[data-stage="3"] .story-trail li{min-height:80px!important;}} /* v61 verified fixes — override conflicting legacy declarations with targeted rules */ #tl-app[data-stage="1"] #tl-content .answer-instruction, #tl-app[data-stage="2"] #tl-content .answer-instruction {margin:3px 0 6px!important;font-size:15px!important;line-height:1.3!important;} #tl-app[data-stage="1"] #tl-content .story-choices, #tl-app[data-stage="2"] #tl-content .story-choices {display:grid!important;gap:7px!important;margin:5px 0 8px!important;} #tl-app[data-stage="1"] #tl-content .story-choices button, #tl-app[data-stage="2"] #tl-content .story-choices button {min-height:48px!important;padding:9px 13px!important;box-shadow:none!important;font-size:clamp(14px,1.25vw,18px)!important;} #tl-app[data-stage="1"] #tl-content .journey-question, #tl-app[data-stage="2"] #tl-content .journey-question {margin:8px 0 4px!important;font-size:clamp(19px,1.7vw,24px)!important;} #tl-app[data-stage="1"] #tl-content .answer-feedback[hidden], #tl-app[data-stage="2"] #tl-content .answer-feedback[hidden] {display:none!important;} #tl-app[data-stage="1"] #tl-content .story-choices button.selected, #tl-app[data-stage="2"] #tl-content .story-choices button.selected {background:#f4d28e!important;border:3px solid #ad7929!important;color:#233b4d!important;box-shadow:0 0 0 2px #f9e7bf!important;} #tl-app[data-stage="1"] #tl-content .story-choices button.selected .answer-letter, #tl-app[data-stage="2"] #tl-content .story-choices button.selected .answer-letter {background:#226c50!important;color:#fff!important;} #tl-app[data-stage="3"] #tl-content .story-trail {display:grid!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;gap:7px!important;margin:9px 0!important;} #tl-app[data-stage="3"] #tl-content .story-trail li {display:flex!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;min-height:80px!important;padding:10px 14px 10px 57px!important;} #tl-app[data-stage="3"] #tl-content .story-trail li::before {left:14px!important;top:50%!important;transform:translateY(-50%)!important;} #tl-app[data-stage="3"] #tl-content .story-trail li strong {font-family:Arial,sans-serif!important;font-size:16px!important;} #tl-app[data-stage="3"] #tl-content .story-trail li span {font-family:Arial,sans-serif!important;font-size:14px!important;line-height:1.4!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button[aria-pressed="true"] {background:#edbf69!important;border:3px solid #a97725!important;color:#263747!important;box-shadow:0 0 0 3px #fff0cb!important;} #tl-app[data-stage="3"] #tl-content #tl-reflection:not([hidden]) {background:#fff0c9!important;border:2px solid #bc8a36!important;color:#2c4052!important;} #tl-app[data-stage="4"] #tl-content .values-compact button {background:#e9f2f8!important;color:#173c56!important;border:2px solid #6e98b3!important;box-shadow:none!important;transition:background .16s,border-color .16s,box-shadow .16s!important;} #tl-app[data-stage="4"] #tl-content .values-compact button.sel, #tl-app[data-stage="4"] #tl-content .values-compact button[aria-pressed="true"] {background:#f1c774!important;border:3px solid #a46d1d!important;color:#2c3440!important;box-shadow:0 0 0 4px #fff0cc!important;font-weight:900!important;} #tl-app[data-stage="4"] #tl-content .valueinfo {background:#fff2d5!important;border:2px solid #bd8a34!important;border-left:6px solid #ae7524!important;} #tl-app[data-stage="5"] #tl-content .live-reflection {margin:5px 0!important;line-height:1.3!important;} #tl-app[data-stage="5"] #tl-content .live-places {margin:4px 0 7px!important;} #tl-app[data-stage="5"] #tl-content .journey-completion {margin:8px 0 4px!important;padding:10px!important;background:#fff8e9!important;border:1px solid #dfbd78!important;} #tl-app[data-stage="5"] #tl-content .finish-instruction {font-size:14px!important;font-weight:700!important;color:#6b4b18!important;margin:0 0 7px!important;} #tl-app[data-stage="5"] #tl-content .complete-journey {width:100%!important;min-height:54px!important;background:#e8b654!important;border:3px solid #9d6c20!important;color:#243849!important;font-size:clamp(16px,1.3vw,20px)!important;font-weight:900!important;box-shadow:0 2px 9px #8b6a2926!important;} #tl-app[data-stage="5"] #tl-content .complete-journey[aria-pressed="true"] {background:#20744e!important;border-color:#20744e!important;color:white!important;box-shadow:0 0 0 3px #d1eddd!important;} #tl-app[data-stage="5"] #tl-content .passage-link {margin:4px 0!important;} @media(max-width:700px){#tl-app[data-stage="3"] #tl-content .story-trail li{min-height:75px!important;}} /* v62: shared full five-stage story treatment; prevent navigation overlap */ #tl-app .learning-column {display:flex!important;flex-direction:column!important;min-height:0!important;} #tl-app .learning-column>.panel {flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding-bottom:22px!important;} #tl-app .learning-column>.nav {position:relative!important;inset:auto!important;flex:0 0 auto!important;z-index:1!important;background:#fff!important;padding:10px 16px 14px!important;} #tl-app .journey-timeline li {min-height:0!important;padding:10px 15px 10px 44px!important;} #tl-app .journey-timeline li strong {display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;} #tl-app .journey-timeline li strong small {font-size:.76em;font-weight:600;color:#38617a;} #tl-app .values-compact button {overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;font-size:clamp(12px,1.2vw,16px)!important;} #tl-app .story-choices button {min-height:50px!important;} #tl-app .journey-timeline li span {font-family:inherit!important;font-size:clamp(14px,1.25vw,17px)!important;line-height:1.35!important;} #tl-app .answer-feedback[hidden],#tl-app .live-action-prompt[hidden] {display:none!important;} @media(max-width:600px){#tl-app .values-compact {grid-template-columns:repeat(2,minmax(0,1fr))!important;}#tl-app .learning-column>.panel{overflow-y:visible!important;} } /* v63 — PEACEFUL READING SYSTEM. One coordinated visual hierarchy. */ #tl-app{--reading-paper:#edf4f6;--reading-ink:#213b4e;--reading-muted:#526b7a;--reading-line:#c8dbe4;--reading-amber:#d7a54e;--reading-amber-light:#f5e8ca;} #tl-app .classroom-stage>.learning-column{background:var(--reading-paper)!important;border:2px solid #56809b!important;box-shadow:0 5px 18px #082b4310!important;overflow:hidden!important;} #tl-app .learning-column>#tl-content, #tl-app .learning-column>.panel, #tl-app #tl-content{background:var(--reading-paper)!important;color:var(--reading-ink)!important;box-shadow:none!important;border:none!important;border-top:0!important;border-radius:0!important;padding:clamp(16px,1.5vw,24px)!important;} #tl-app .learning-column>.nav{background:var(--reading-paper)!important;border:0!important;border-top:1px solid var(--reading-line)!important;border-radius:0!important;box-shadow:none!important;padding:9px 16px 12px!important;} #tl-app .learning-column .panel .eyebrow, #tl-app #tl-content .eyebrow{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-size:clamp(12px,1.05vw,15px)!important;line-height:1.35!important;font-weight:750!important;letter-spacing:.07em!important;color:#856329!important;margin:0 0 7px!important;} #tl-app .learning-column .panel h3, #tl-app #tl-content h3{font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(23px,1.95vw,30px)!important;font-weight:700!important;line-height:1.22!important;letter-spacing:-.015em!important;color:#173b56!important;margin:0 0 13px!important;} #tl-app #tl-content p,#tl-app #tl-content li,#tl-app #tl-content .story, #tl-app #tl-content .story-lead{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;color:var(--reading-ink)!important;font-size:clamp(15px,1.16vw,17px)!important;line-height:1.52!important;letter-spacing:0!important;} #tl-app #tl-content .story-lead{font-weight:550!important;margin:0 0 12px!important;} #tl-app #tl-content .story{font-weight:450!important;margin:6px 0 12px!important;} #tl-app #tl-content .journey-question{font-family:Georgia,"Times New Roman",serif!important;font-weight:700!important;color:#173b56!important;font-size:clamp(19px,1.65vw,25px)!important;line-height:1.3!important;margin:14px 0 7px!important;} #tl-app #tl-content .answer-instruction,#tl-app #tl-content .choice-guidance{color:var(--reading-muted)!important;font-size:14px!important;font-weight:600!important;line-height:1.4!important;margin:4px 0 9px!important;} #tl-app #tl-content .story-choices{gap:9px!important;margin:8px 0 12px!important;} #tl-app #tl-content .story-choices button, #tl-app #tl-content .live-places.live-choices button{background:#f5f9fa!important;color:#203c50!important;border:1.5px solid #bdd3df!important;box-shadow:none!important;border-radius:11px!important;font-weight:650!important;line-height:1.35!important;padding:12px 14px!important;transition:background-color .18s,border-color .18s,box-shadow .18s!important;} #tl-app #tl-content .story-choices button:hover, #tl-app #tl-content .live-places.live-choices button:hover{background:#e6f0f3!important;border-color:#789fb5!important;} #tl-app #tl-content .story-choices button.selected, #tl-app #tl-content .story-choices button[aria-pressed="true"], #tl-app #tl-content .live-places.live-choices button[aria-pressed="true"]{background:#f5e5bf!important;border:2px solid #b7812c!important;box-shadow:0 0 0 2px #f8efd9!important;} #tl-app #tl-content .answer-feedback:not([hidden]), #tl-app #tl-content .valueinfo, #tl-app #tl-content #tl-reflection:not([hidden]), #tl-app #tl-content .live-action-prompt:not([hidden]){background:#f4e9d0!important;color:#284253!important;border:1.5px solid #c69c54!important;border-left:4px solid #c3913a!important;box-shadow:none!important;border-radius:10px!important;padding:12px 14px!important;line-height:1.48!important;} #tl-app #tl-content .values-compact{gap:9px!important;margin:10px 0!important;} #tl-app #tl-content .values-compact button, #tl-app #tl-content .reflection-prompts button{background:#e3eef2!important;color:#1d4059!important;border:1.5px solid #abc8d6!important;border-radius:10px!important;box-shadow:none!important;font-weight:700!important;padding:11px 7px!important;transition:background-color .18s,border-color .18s,box-shadow .18s!important;} #tl-app #tl-content .values-compact button.sel, #tl-app #tl-content .values-compact button[aria-pressed="true"], #tl-app #tl-content .reflection-prompts button[aria-pressed="true"]{background:#efcb7e!important;border:2px solid #a87527!important;color:#253c4b!important;box-shadow:0 0 0 2px #f8ebcf!important;font-weight:800!important;} #tl-app #tl-content .story-trail li, #tl-app #tl-content .journey-timeline li{background:#e3edf1!important;border:1px solid #c3d8e2!important;box-shadow:none!important;border-radius:10px!important;} #tl-app #tl-content .story-trail li strong, #tl-app #tl-content .journey-timeline li strong{color:#1c435d!important;} #tl-app #tl-content .story-trail li span, #tl-app #tl-content .journey-timeline li span{color:#38596d!important;} #tl-app #tl-content .scripture{background:#f2e6c9!important;border:1px solid #d5b87d!important;border-radius:10px!important;box-shadow:none!important;padding:12px 14px!important;margin:11px 0!important;} #tl-app #tl-content .scripture blockquote{color:#274257!important;font-weight:550!important;line-height:1.5!important;} #tl-app #tl-content .passage-link{margin:9px 0 3px!important;line-height:1.4!important;} #tl-app #tl-content .passage-link a{color:#245c7c!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important;} #tl-app #tl-content .journey-completion{background:#e5eef0!important;border:1px solid #bed4db!important;box-shadow:none!important;border-radius:12px!important;margin:12px 0 3px!important;padding:12px!important;} #tl-app #tl-content .complete-journey{background:#d9aa54!important;border:2px solid #a77c34!important;color:#203a4d!important;border-radius:10px!important;box-shadow:none!important;} #tl-app #tl-content .complete-journey[aria-pressed="true"]{background:#267652!important;color:white!important;border-color:#267652!important;box-shadow:none!important;} #tl-app .learning-column>.nav #tl-next{background:#173e5b!important;border:1.5px solid #b88d48!important;color:#fff!important;box-shadow:none!important;min-height:43px!important;} #tl-app #tl-content button:focus-visible{outline:3px solid #9e762c!important;outline-offset:3px!important;} @media(max-width:700px){#tl-app #tl-content{padding:16px!important;}#tl-app #tl-content .values-compact button{font-size:13px!important;}#tl-app #tl-content .story-lead{line-height:1.5!important;}} /* v65 — calmer classroom hierarchy, sapphire Scripture, distinct next-story flow */ #tl-app{--reading-paper:#dce9ed;--reading-ink:#18394d;--reading-muted:#355c71;--reading-line:#b4cbd5!important;background:#d4e4eb!important;} #tl-app .learning-column,#tl-app .learning-column>.panel,#tl-app #tl-content,#tl-app .learning-column>.nav{background:#dce9ed!important;} #tl-app .picture-story-picker{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;background:#c4dce9!important;border:1px solid #9bbdce!important;padding:10px 16px!important;border-radius:11px!important;} #tl-app .picture-story-picker label{font-weight:750!important;color:#153f5d!important;white-space:nowrap!important;} #tl-app .picture-story-picker select,#tl-app #tl-pick{width:min(49%,420px)!important;max-width:420px!important;min-width:240px!important;flex:0 1 420px!important;margin-left:auto!important;background:#e4f0f5!important;color:#153e57!important;border:1.5px solid #628ca7!important;border-radius:9px!important;} #tl-app .learning-column>.nav #tl-next:not(:disabled){background:#24734d!important;color:white!important;border:2px solid #185c3c!important;border-radius:11px!important;} #tl-app .learning-column>.nav #tl-next .nav-number{background:#ffffff!important;color:#206745!important;border-radius:50%!important;font-weight:900!important;} #tl-app .learning-column>.nav #tl-next:disabled{opacity:.52!important;cursor:not-allowed!important;} #tl-app #tl-content .choice-guidance,#tl-app #tl-content .answer-instruction,#tl-app #tl-content .place-instruction{font-size:clamp(15px,1.25vw,17px)!important;line-height:1.45!important;color:#1a4b69!important;font-weight:750!important;margin:10px 0 11px!important;} #tl-app #tl-content .reflection-prompts{margin-top:7px!important;} #tl-app #tl-content .values-compact button{background:var(--rainbow,#dce9f3)!important;color:#173c55!important;border:2px solid #96b7c7!important;} #tl-app #tl-content .values-compact button.sel,#tl-app #tl-content .values-compact button[aria-pressed=true]{background:#d9b469!important;border:3px solid #8a662e!important;color:#183747!important;} #tl-app #tl-content .valueinfo{background:#d1e6ef!important;border:2px solid #83aec5!important;border-left:5px solid #316f96!important;color:#1b4259!important;} #tl-app[data-stage="5"] #tl-content .journey-completion{background:#d1e4e9!important;border:1px solid #a6c6d2!important;} #tl-app[data-stage="5"] #tl-content .finish-instruction{color:#2b5268!important;} #tl-app[data-stage="5"] #tl-content .complete-journey:not([aria-pressed=true]){background:#2b688f!important;border:2px solid #1d5172!important;color:white!important;} #tl-app #tl-content .live-places.live-choices button{background:#c7e1ee!important;border:2px solid #699bb7!important;color:#143e59!important;font-weight:750!important;} #tl-app #tl-content .live-places.live-choices button[aria-pressed=true]{background:#b3d8ea!important;border:3px solid #25658c!important;box-shadow:0 0 0 2px #e0f0f7!important;} #tl-app #tl-content .live-reflection{color:#1c455c!important;} @media(max-width:620px){#tl-app .picture-story-picker{flex-wrap:wrap!important;gap:7px!important;}#tl-app .picture-story-picker select,#tl-app #tl-pick{width:100%!important;max-width:100%!important;flex:1 1 100%!important;}} /* v65 navy-background refinement — ONLY page surround and story selector. */ html, body {background:#062b4c!important;min-height:100%;} #tl-app {background:#062b4c!important;} #tl-app .lightboat-logo-strip {background:#062b4c!important;justify-content:space-between!important;gap:18px!important;} #tl-app .lightboat-logo-strip .picture-story-picker { flex:0 1 auto!important; width:auto!important; max-width:100%!important; margin-left:auto!important; padding:7px 10px!important; gap:12px!important; justify-content:flex-end!important; background:#d9eaf3!important; border:1px solid #9cbfd4!important; border-radius:10px!important; flex-direction:row!important; } #tl-app .lightboat-logo-strip .picture-story-picker label { flex:0 0 auto!important; width:auto!important; font-size:clamp(14px,1.35vw,18px)!important; white-space:nowrap!important; } #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick { flex:0 1 285px!important; width:285px!important; max-width:285px!important; min-width:0!important; margin:0!important; min-height:44px!important; font-size:clamp(13px,1.15vw,16px)!important; } #tl-app .foot {color:#d6e5f0!important;} @media(max-width:700px){ #tl-app .lightboat-logo-strip {gap:8px!important;} #tl-app .lightboat-logo-strip .picture-story-picker {gap:6px!important;padding:6px!important;flex-wrap:wrap!important;} #tl-app .lightboat-logo-strip .picture-story-picker label {font-size:12px!important;white-space:normal!important;} #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick {width:100%!important;max-width:100%!important;flex:1 1 100%!important;min-height:40px!important;font-size:13px!important;} } /* v65 refinement 2: amber-gold selector, clearly green/red quiz feedback. */ #tl-app .lightboat-logo-strip .picture-story-picker { background:#e6b75e!important; border:1.5px solid #f2ce83!important; } #tl-app .lightboat-logo-strip .picture-story-picker label {color:#183c58!important;} #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick { background:#f5d48e!important; color:#183b55!important; border:1.5px solid #a77326!important; box-shadow:none!important; } #tl-app #tl-content .story-choices button.answer-correct, #tl-app #tl-content .story-choices button.answer-correct.selected, #tl-app #tl-content .story-choices button.answer-correct[aria-pressed="true"] { background:#cceecf!important;color:#174d2b!important; border:2px solid #369354!important;box-shadow:0 0 0 2px #e3f7e4!important; } #tl-app #tl-content .story-choices button.answer-incorrect, #tl-app #tl-content .story-choices button.answer-incorrect.selected, #tl-app #tl-content .story-choices button.answer-incorrect[aria-pressed="true"] { background:#f9d9d8!important;color:#762c31!important; border:2px solid #c85b60!important;box-shadow:0 0 0 2px #fbe9e9!important; } #tl-app #tl-content .answer-feedback.feedback-correct:not([hidden]) { background:#dcf4de!important;color:#1b512f!important; border:1.5px solid #62ab73!important;border-left:4px solid #338b4c!important; } #tl-app #tl-content .answer-feedback.feedback-incorrect:not([hidden]) { background:#fbe3e1!important;color:#782e33!important; border:1.5px solid #d68b8b!important;border-left:4px solid #bd555a!important; } /* v65 selector refinement: keep position and amber colours; show complete titles. */ @media (min-width: 1050px) { #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick { width: min(47vw, 550px)!important; max-width: 550px!important; flex: 0 1 550px!important; min-width: 420px!important; font-size: clamp(14px, 1.28vw, 18px)!important; padding-right: 35px!important; } #tl-app .lightboat-logo-strip .picture-story-picker {gap: 12px!important;} } @media (min-width: 701px) and (max-width: 1049px) { #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick { width: min(50vw, 490px)!important; max-width: 490px!important; flex: 1 1 390px!important; min-width: 0!important; font-size: clamp(13px, 1.55vw, 16px)!important; } } /* v65 refinement: richer outer gold, softer inner gold, seamless navy logo surround. */ html, body, #tl-app {background-color:#002f58!important;} #tl-app .lightboat-logo-strip { background-color:#002f58!important; border-color:#002f58!important; } #tl-app .lightboat-logo-strip .lightboat-banner { background:transparent!important; mix-blend-mode:lighten; } #tl-app .lightboat-logo-strip .picture-story-picker { background:#d5a044!important; border:2px solid #f0c56e!important; box-shadow:inset 0 1px 0 rgba(255,238,185,.48)!important; } #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick { background:#f9e5b8!important; border:2px solid #916422!important; color:#163a58!important; box-shadow:0 0 0 2px rgba(255,246,221,.28)!important; } /* v65 gold refinement: unframed rich-gold story selector. */ #tl-app .lightboat-logo-strip .picture-story-picker { background:#d5a044!important; border:0!important; outline:0!important; box-shadow:none!important; } /* v65 refinement: remove blue outer ring from Scripture story dropdown. */ #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick { border: 1px solid #916422!important; outline: none!important; box-shadow: none!important; background: #f9e5b8!important; } #tl-app .lightboat-logo-strip .picture-story-picker select:focus-visible, #tl-app .lightboat-logo-strip #tl-pick:focus-visible { outline: 3px solid #fff0c5!important; outline-offset: 2px!important; box-shadow: none!important; } /* v65 refinement: story dropdown uses regular-weight lettering. */ #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick, #tl-app .lightboat-logo-strip .picture-story-picker select option, #tl-app .lightboat-logo-strip #tl-pick option { font-weight:400!important; } /* Slightly lighter story title lettering without sacrificing legibility. */ #tl-app .lightboat-logo-strip .picture-story-picker select, #tl-app .lightboat-logo-strip #tl-pick, #tl-app .lightboat-logo-strip .picture-story-picker select option, #tl-app .lightboat-logo-strip #tl-pick option { font-weight: 300 !important; } /* Interactive journey stages: calm hover, accessible focus and safe navigation */ #tl-app .journey-steps .journey-step{appearance:none;cursor:pointer;font:inherit;text-align:center;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease;} #tl-app .journey-steps .journey-step:not(:disabled):hover{background:#e8bb64!important;color:#143750!important;box-shadow:0 2px 10px rgba(8,29,49,.20)!important;transform:translateY(-1px);} #tl-app .journey-steps .journey-step:not(:disabled):hover .journey-dot{background:#173f5b!important;color:#fff!important;} #tl-app .journey-steps .journey-step:focus-visible{outline:3px solid #f1c873!important;outline-offset:3px!important;} #tl-app .journey-steps .journey-step:disabled{cursor:default;opacity:.78;} #tl-app .journey-steps .journey-step.current{cursor:default;} @media(prefers-reduced-motion:reduce){#tl-app .journey-steps .journey-step{transition:none!important;}#tl-app .journey-steps .journey-step:hover{transform:none!important;}} /* v67 — Stage 3: natural-height scripture cards, no stacking, three distinct values */ #tl-app[data-stage="3"] #tl-content .story-trail, #tl-app[data-stage="3"] #tl-content .journey-timeline { display:flex!important;flex-direction:column!important;grid-template-rows:none!important; gap:9px!important;height:auto!important;max-height:none!important;overflow:visible!important; margin:14px 0 18px!important;padding:0!important; } #tl-app[data-stage="3"] #tl-content .story-trail li, #tl-app[data-stage="3"] #tl-content .journey-timeline li { flex:none!important;display:block!important;position:relative!important; height:auto!important;min-height:0!important;max-height:none!important; margin:0!important;padding:12px 15px 12px 58px!important; border-radius:12px!important;overflow:visible!important; background:#e9f2f6!important;border:1px solid #b8d2df!important; } #tl-app[data-stage="3"] #tl-content .story-trail li::before { position:absolute!important;top:14px!important;left:14px!important;transform:none!important; width:32px!important;height:32px!important;line-height:32px!important; } #tl-app[data-stage="3"] #tl-content .story-trail li strong, #tl-app[data-stage="3"] #tl-content .journey-timeline li strong { display:flex!important;justify-content:space-between!important;align-items:baseline!important; flex-wrap:wrap!important;gap:5px 12px!important;margin:0 0 4px!important; font-size:16px!important;line-height:1.3!important; } #tl-app[data-stage="3"] #tl-content .story-trail li span, #tl-app[data-stage="3"] #tl-content .journey-timeline li span { display:block!important;font-size:15px!important;line-height:1.42!important; white-space:normal!important;overflow:visible!important; } #tl-app[data-stage="3"] #tl-content .reflection-instruction, #tl-app[data-stage="3"] #tl-content .choice-guidance {margin:13px 0 12px!important;line-height:1.4!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important;margin:12px 0 16px!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts button { min-width:0!important;min-height:62px!important;border-radius:13px!important; font-size:clamp(15px,1.6vw,20px)!important;font-weight:750!important; transition:filter .15s ease,transform .15s ease,box-shadow .15s ease!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts button:nth-child(1) {background:#bde7d2!important;border:2px solid #358365!important;color:#154d3a!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button:nth-child(2) {background:#bedef9!important;border:2px solid #347cb4!important;color:#174d79!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button:nth-child(3) {background:#f3d79a!important;border:2px solid #af7b2d!important;color:#65440f!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button:hover {filter:saturate(1.15) brightness(.96)!important;transform:translateY(-2px)!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button[aria-pressed="true"] {box-shadow:0 0 0 4px #ffffff,0 0 0 7px #2e637e!important;filter:saturate(1.25)!important;} #tl-app[data-stage="3"] #tl-content #tl-reflection:not([hidden]) {display:block!important;margin:14px 0!important;padding:14px 18px!important;line-height:1.45!important;} #tl-app[data-stage="3"] .learning-column>.panel {overflow-y:auto!important;min-height:0!important;scrollbar-gutter:stable!important;padding-bottom:25px!important;} #tl-app[data-stage="3"] .learning-column>.nav {position:relative!important;flex:0 0 auto!important;z-index:2!important;} @media(max-width:560px){#tl-app[data-stage="3"] #tl-content .reflection-prompts {gap:7px!important;}#tl-app[data-stage="3"] #tl-content .reflection-prompts button{font-size:13px!important;min-height:52px!important;padding:8px 3px!important;}} /* v68 — five harmonious, individually coloured Gospel journey cards */ #tl-app[data-stage="3"] #tl-content .story-trail li, #tl-app[data-stage="3"] #tl-content .journey-timeline li { box-shadow:none!important; border-width:1.5px!important; border-style:solid!important; transition:background-color .18s ease!important; } #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 1), #tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 1) {background:#e0eefb!important;border-color:#a8cce9!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 2), #tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 2) {background:#e2f3e9!important;border-color:#abd5bc!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 3), #tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 3) {background:#fff0d8!important;border-color:#e8ca91!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 4), #tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 4) {background:#ece6f8!important;border-color:#c8b7e2!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 5), #tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 5) {background:#f9e8e4!important;border-color:#e5c1b7!important;} #tl-app[data-stage="3"] #tl-content .story-trail li strong, #tl-app[data-stage="3"] #tl-content .story-trail li span, #tl-app[data-stage="3"] #tl-content .journey-timeline li strong, #tl-app[data-stage="3"] #tl-content .journey-timeline li span {color:#193e59!important;} /* v69 — gentle five-colour palette for A/B answers; readable correct/try-again states */ #tl-app[data-stage="1"] #tl-content .story-choices button:nth-child(1), #tl-app[data-stage="2"] #tl-content .story-choices button:nth-child(1){ background:#e0eefb!important;border:2px solid #a8cce9!important;color:#193e59!important; } #tl-app[data-stage="1"] #tl-content .story-choices button:nth-child(2), #tl-app[data-stage="2"] #tl-content .story-choices button:nth-child(2){ background:#ece6f8!important;border:2px solid #c8b7e2!important;color:#193e59!important; } #tl-app[data-stage="1"] #tl-content .story-choices button:hover:not(.selected), #tl-app[data-stage="2"] #tl-content .story-choices button:hover:not(.selected){ filter:saturate(1.2) brightness(.98)!important;box-shadow:0 0 0 2px #b8d9e8!important; } #tl-app #tl-content .story-choices button.answer-correct, #tl-app #tl-content .story-choices button.answer-correct.selected{ background:#d9f1df!important;border:2px solid #4a9b68!important;color:#164b34!important;box-shadow:0 0 0 2px #bce4c8!important; } #tl-app #tl-content .story-choices button.answer-incorrect, #tl-app #tl-content .story-choices button.answer-incorrect.selected{ background:#f9e8e4!important;border:2px solid #c8786d!important;color:#69332e!important;box-shadow:0 0 0 2px #f2d0ca!important; } /* v69 — Stage 5 compact, ordered and legible, without overlays or hidden controls */ #tl-app[data-stage="5"] .learning-column>#tl-content{ justify-content:flex-start!important;align-content:start!important; padding:clamp(11px,1.05vw,16px)!important;overflow-y:auto!important;overflow-x:hidden!important; } #tl-app[data-stage="5"] #tl-content .eyebrow{margin:0 0 2px!important;font-size:clamp(12px,1vw,15px)!important;} #tl-app[data-stage="5"] #tl-content h3{margin:0 0 6px!important;font-size:clamp(25px,2.1vw,34px)!important;line-height:1.12!important;} #tl-app[data-stage="5"] #tl-content .place-instruction{font-size:clamp(13px,1.05vw,16px)!important;line-height:1.3!important;margin:2px 0 7px!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin:3px 0 8px!important; } #tl-app[data-stage="5"] #tl-content .live-places.live-choices button{ min-width:0!important;min-height:74px!important;padding:8px 5px!important; display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important; line-height:1.15!important;border-radius:11px!important; } #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(1){background:#e0eefb!important;border:2px solid #a8cce9!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(2){background:#e2f3e9!important;border:2px solid #abd5bc!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(3){background:#ece6f8!important;border:2px solid #c8b7e2!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button[aria-pressed="true"]{ background:#c7efd4!important;border:3px solid #358365!important;box-shadow:0 0 0 2px #e3f6e9!important; } #tl-app[data-stage="5"] #tl-content .live-places .place-icon{font-size:20px!important;line-height:1!important;} #tl-app[data-stage="5"] #tl-content .live-places .place-copy{display:flex!important;flex-direction:column!important;gap:2px!important;align-items:center!important;} #tl-app[data-stage="5"] #tl-content .live-places .place-copy strong{font-size:clamp(14px,1.2vw,17px)!important;} #tl-app[data-stage="5"] #tl-content .live-places .place-copy span{font-size:clamp(11px,.9vw,13px)!important;line-height:1.2!important;} #tl-app[data-stage="5"] #tl-content .live-reflection{font-size:clamp(14px,1.15vw,17px)!important;line-height:1.28!important;margin:4px 0!important;} #tl-app[data-stage="5"] #tl-content .live-action-prompt:not([hidden]){padding:8px 10px!important;margin:5px 0!important;font-size:14px!important;line-height:1.3!important;background:#d9f1df!important;border:1px solid #77ae8c!important;} #tl-app[data-stage="5"] #tl-content .journey-completion{margin:6px 0 4px!important;padding:8px 10px!important;border-radius:10px!important;} #tl-app[data-stage="5"] #tl-content .finish-instruction{margin:0 0 5px!important;font-size:clamp(12px,1vw,14px)!important;line-height:1.25!important;} #tl-app[data-stage="5"] #tl-content .complete-journey{min-height:42px!important;padding:7px 10px!important;font-size:clamp(14px,1.2vw,17px)!important;} #tl-app[data-stage="5"] #tl-content .passage-link{font-size:clamp(12px,1vw,14px)!important;margin:4px 0 0!important;line-height:1.2!important;} @media(max-width:600px){ #tl-app[data-stage="5"] #tl-content .live-places.live-choices{grid-template-columns:repeat(3,minmax(0,1fr))!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button{min-height:80px!important;} } /* v70: distinct Home/School/Church hues, small icon+label headers, prominent action answer */ #tl-app[data-stage="5"] #tl-content .live-places.live-choices button{ min-height:94px!important;max-height:none!important;padding:10px!important; display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important; align-content:center!important;justify-items:center!important;gap:6px!important; box-shadow:none!important;outline:none!important; } #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(1){background:#dbeafc!important;border:2px solid #8db7e4!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(2){background:#fff0ce!important;border:2px solid #e0ba6e!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(3){background:#f0e1f7!important;border:2px solid #c7a3d8!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button[aria-pressed="true"]{ border:3px solid #23764f!important;box-shadow:inset 0 0 0 2px #f5fff7!important; } #tl-app[data-stage="5"] #tl-content .live-places .place-icon{font-size:20px!important;line-height:1!important;} #tl-app[data-stage="5"] #tl-content .live-places .place-copy{display:contents!important;} #tl-app[data-stage="5"] #tl-content .live-places .place-copy strong{ display:block!important;font-size:clamp(15px,1.25vw,18px)!important;line-height:1.15!important; } #tl-app[data-stage="5"] #tl-content .live-places .place-copy span{display:none!important;} #tl-app[data-stage="5"] #tl-content .live-action-prompt:not([hidden]){ display:flex!important;flex-direction:column!important;gap:5px!important; padding:14px 18px!important;margin:10px 0 8px!important; background:#d9f1df!important;border:2px solid #5d9f76!important;border-radius:13px!important; color:#174631!important;box-shadow:none!important; } #tl-app[data-stage="5"] #tl-content .live-action-prompt .answer-kicker{ font-size:clamp(12px,1vw,15px)!important;text-transform:uppercase!important;letter-spacing:.06em!important; font-weight:700!important;color:#316f4b!important; } #tl-app[data-stage="5"] #tl-content .live-action-prompt strong{ display:block!important;font-size:clamp(18px,1.55vw,23px)!important;line-height:1.3!important; font-weight:800!important;color:#174631!important; } #tl-app[data-stage="5"] #tl-content .passage-link{ position:static!important;margin:9px 0 0!important;align-self:auto!important; } #tl-app[data-stage="5"] #tl-content{justify-content:flex-start!important;} /* v71 — Official Lightboat brand palette from supplied guidelines poster */ :root{--lb-navy:#0B2942;--lb-boat:#168BC7;--lb-gold:#E9A635;--lb-ivory:#FFF1D2;--lb-wave:#5FB3E6;} /* Journey moments: five distinct brand-only tints */ #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 1),#tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 1){background:#e1f2fc!important;border-color:#5FB3E6!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 2),#tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 2){background:#d4eefa!important;border-color:#168BC7!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 3),#tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 3){background:#fff1d2!important;border-color:#E9A635!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 4),#tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 4){background:#edf7fd!important;border-color:#5FB3E6!important;} #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(5n + 5),#tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(5n + 5){background:#fdf4df!important;border-color:#E9A635!important;} /* A/B choices: gold for both, blue variations for clarity; retain semantic green/red feedback */ #tl-app[data-stage="1"] #tl-content .story-choices button:nth-child(1),#tl-app[data-stage="2"] #tl-content .story-choices button:nth-child(1){background:#FFF1D2!important;border:2px solid #E9A635!important;color:#0B2942!important;} #tl-app[data-stage="1"] #tl-content .story-choices button:nth-child(2),#tl-app[data-stage="2"] #tl-content .story-choices button:nth-child(2){background:#f7e1b4!important;border:2px solid #E9A635!important;color:#0B2942!important;} #tl-app #tl-content .story-choices button.answer-correct,#tl-app #tl-content .story-choices button.answer-correct.selected{background:#d9f1df!important;border-color:#4a9b68!important;color:#164b34!important;} #tl-app #tl-content .story-choices button.answer-incorrect,#tl-app #tl-content .story-choices button.answer-incorrect.selected{background:#f9e8e4!important;border-color:#c8786d!important;color:#69332e!important;} /* Values: nine combinations from the five official colours, no rainbow hues */ #tl-app[data-stage="4"] #tl-content .values-compact button{color:#0B2942!important;border:2px solid #168BC7!important;box-shadow:none!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5n + 1){background:#FFF1D2!important;border-color:#E9A635!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5n + 2){background:#d7effd!important;border-color:#168BC7!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5n + 3){background:#e5f5ff!important;border-color:#5FB3E6!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5n + 4){background:#f5dfb0!important;border-color:#E9A635!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5n + 5){background:#c7e9fa!important;border-color:#168BC7!important;} #tl-app[data-stage="4"] #tl-content .values-compact button.sel,#tl-app[data-stage="4"] #tl-content .values-compact button[aria-pressed="true"]{background:#E9A635!important;border:3px solid #0B2942!important;color:#0B2942!important;box-shadow:0 0 0 2px #FFF1D2!important;} #tl-app[data-stage="4"] #tl-content .valueinfo{background:#FFF1D2!important;border:2px solid #E9A635!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content .valueinfo *{color:#0B2942!important;} /* Three place cards: distinctly gold, boat blue, wave blue */ #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(1){background:#FFF1D2!important;border-color:#E9A635!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(2){background:#d8effb!important;border-color:#168BC7!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button:nth-child(3){background:#eaf7fe!important;border-color:#5FB3E6!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button[aria-pressed="true"]{border:3px solid #0B2942!important;box-shadow:inset 0 0 0 2px #FFF1D2!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button:nth-child(1){background:#FFF1D2!important;border-color:#E9A635!important;color:#0B2942!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button:nth-child(2){background:#d8effb!important;border-color:#168BC7!important;color:#0B2942!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button:nth-child(3){background:#eaf7fe!important;border-color:#5FB3E6!important;color:#0B2942!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button[aria-pressed="true"]{background:#E9A635!important;border-color:#0B2942!important;box-shadow:0 0 0 2px #FFF1D2!important;} #tl-app[data-stage="3"] #tl-content #tl-reflection:not([hidden]){background:#FFF1D2!important;border:2px solid #E9A635!important;color:#0B2942!important;} /* v72: Scripture passage link is positioned with the mosaic, not the learning text. */ #tl-app .art-frame{position:relative!important;} #tl-app .art-frame>.art-passage-link{ position:absolute!important;z-index:8!important;bottom:12px!important;left:12px!important;right:12px!important; margin:0!important;padding:9px 12px!important;background:rgba(11,41,66,.94)!important; border:1px solid rgba(95,179,230,.8)!important;border-radius:10px!important; font-size:clamp(12px,.98vw,15px)!important;line-height:1.25!important; box-shadow:0 3px 12px #041b2b45!important; } #tl-app .art-frame>.art-passage-link a{color:#FFF1D2!important;font-weight:650!important;text-decoration:underline!important;} #tl-app .art-frame>.art-passage-link a:focus-visible{outline:3px solid #E9A635!important;outline-offset:3px!important;} /* First two stages: less decorative space, same full-size readable wording. */ #tl-app[data-stage="1"] #tl-content,#tl-app[data-stage="2"] #tl-content{ padding:clamp(11px,1.05vw,16px)!important;justify-content:flex-start!important; gap:0!important; } #tl-app[data-stage="1"] #tl-content .eyebrow,#tl-app[data-stage="2"] #tl-content .eyebrow{margin:0 0 3px!important;} #tl-app[data-stage="1"] #tl-content h3,#tl-app[data-stage="2"] #tl-content h3{ font-size:clamp(24px,2.15vw,32px)!important;line-height:1.13!important;margin:0 0 8px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro{padding:10px!important;margin:2px 0 8px!important;min-height:0!important;gap:12px!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro img{width:clamp(65px,7vw,100px)!important;height:clamp(78px,9vw,120px)!important;object-fit:cover!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro p{margin:3px 0!important;line-height:1.25!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro strong{font-size:clamp(16px,1.35vw,19px)!important;} #tl-app[data-stage="1"] #tl-content .story,#tl-app[data-stage="2"] #tl-content .story, #tl-app[data-stage="1"] #tl-content .story-lead,#tl-app[data-stage="2"] #tl-content .story-lead{ margin:4px 0 7px!important;line-height:1.32!important;font-size:clamp(15px,1.2vw,18px)!important; } #tl-app[data-stage="1"] #tl-content .journey-question,#tl-app[data-stage="2"] #tl-content .journey-question{ font-size:clamp(21px,1.7vw,26px)!important;line-height:1.18!important;margin:7px 0 4px!important; } #tl-app[data-stage="1"] #tl-content .answer-instruction,#tl-app[data-stage="2"] #tl-content .answer-instruction{ font-size:clamp(13px,1vw,15px)!important;line-height:1.25!important;margin:3px 0 6px!important; } #tl-app[data-stage="1"] #tl-content .story-choices,#tl-app[data-stage="2"] #tl-content .story-choices{ gap:7px!important;margin:4px 0 7px!important; } #tl-app[data-stage="1"] #tl-content .story-choices button,#tl-app[data-stage="2"] #tl-content .story-choices button{ min-height:43px!important;padding:7px 12px!important;font-size:clamp(15px,1.25vw,18px)!important;line-height:1.2!important; } #tl-app[data-stage="1"] #tl-content .answer-feedback:not([hidden]),#tl-app[data-stage="2"] #tl-content .answer-feedback:not([hidden]){ padding:9px 12px!important;margin:6px 0!important;line-height:1.25!important;font-size:clamp(14px,1.15vw,17px)!important; } @media(max-width:700px){#tl-app .art-frame>.art-passage-link{bottom:8px!important;left:8px!important;right:8px!important;}} /* v73: Scripture quotation and full-passage link are adjacent, never layered. */ #tl-app .art-frame>.art-passage-link{ left:auto!important; right:clamp(10px,1.5vw,18px)!important; bottom:clamp(10px,1.5vw,18px)!important; top:auto!important; width:calc(36% - 16px)!important; max-width:none!important; box-sizing:border-box!important; transform:none!important; display:block!important; padding:12px!important; line-height:1.4!important; font-size:clamp(12px,1.05vw,16px)!important; overflow-wrap:break-word!important; } #tl-app .art-frame>.art-passage-link a{display:block!important;line-height:1.35!important;} /* When the image becomes narrow, keep the link above and to the right of the quotation. */ @media(max-width:700px){ #tl-app .art-frame>.art-passage-link{ left:auto!important;right:10px!important;top:10px!important;bottom:auto!important; width:calc(40% - 12px)!important;padding:8px!important;font-size:12px!important; } } /* No Scripture overlay on some stages: link remains visible at lower-right. */ /* v74 — FIX: stage 3 must be a normal document flow, not a height-distributed flex screen. Prevent the fifth Scripture card from covering the question and answer buttons. */ #tl-app[data-stage="3"] .learning-column>#tl-content { display:block!important;justify-content:initial!important;align-content:initial!important; height:auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important; padding:16px 20px 26px!important;scrollbar-gutter:stable!important; } #tl-app[data-stage="3"] #tl-content .story-trail, #tl-app[data-stage="3"] #tl-content .journey-timeline { display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:max-content!important; flex:none!important;align-content:start!important;justify-content:initial!important; position:static!important;float:none!important;gap:10px!important; height:auto!important;min-height:0!important;max-height:none!important; margin:14px 0 18px!important;padding:0!important;overflow:visible!important; } #tl-app[data-stage="3"] #tl-content .story-trail>li, #tl-app[data-stage="3"] #tl-content .journey-timeline>li { position:relative!important;display:block!important;float:none!important;flex:none!important; height:auto!important;min-height:0!important;max-height:none!important; margin:0!important;padding:12px 15px 12px 62px!important; transform:none!important;overflow:visible!important;box-sizing:border-box!important; } #tl-app[data-stage="3"] #tl-content .story-trail>li strong, #tl-app[data-stage="3"] #tl-content .journey-timeline>li strong { display:flex!important;align-items:baseline!important;justify-content:space-between!important; gap:5px 12px!important;margin-bottom:5px!important;line-height:1.3!important; } #tl-app[data-stage="3"] #tl-content .story-trail>li span, #tl-app[data-stage="3"] #tl-content .journey-timeline>li span { display:block!important;line-height:1.45!important;white-space:normal!important; } #tl-app[data-stage="3"] #tl-content .reflection-instruction, #tl-app[data-stage="3"] #tl-content .choice-guidance { position:static!important;clear:both!important;display:block!important; margin:18px 0 10px!important;padding:0!important;line-height:1.45!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts { position:static!important;clear:both!important;display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important; margin:10px 0 14px!important;height:auto!important;min-height:0!important; } #tl-app[data-stage="3"] #tl-content #tl-reflection:not([hidden]){ position:static!important;clear:both!important;margin:12px 0!important; } #tl-app[data-stage="3"] .learning-column>.nav{position:relative!important;flex:0 0 auto!important;} @media(max-width:550px){ #tl-app[data-stage="3"] .learning-column>#tl-content{padding:12px!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts{gap:6px!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button{font-size:13px!important;padding:7px 2px!important;} } /* v75 — remove redundant stage-three introduction and reclaim vertical space */ #tl-app[data-stage="3"] #tl-content .eyebrow {margin:0 0 3px!important;} #tl-app[data-stage="3"] #tl-content h3 {margin:0 0 7px!important;} #tl-app[data-stage="3"] #tl-content .story-trail, #tl-app[data-stage="3"] #tl-content .journey-timeline {margin-top:5px!important;} /* v76 — Stage 3: stage label left, title right, on one compact row */ #tl-app[data-stage="3"] #tl-content .stage-three-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;flex-wrap:nowrap!important;margin:0 0 12px!important;padding:0!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading .eyebrow{margin:0!important;flex:0 0 auto!important;white-space:nowrap!important;font-size:clamp(13px,1.3vw,19px)!important;line-height:1.15!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading h3{margin:0!important;flex:0 1 auto!important;text-align:right!important;font-size:clamp(23px,2.5vw,42px)!important;line-height:1.12!important;} @media(max-width:550px){#tl-app[data-stage="3"] #tl-content .stage-three-heading{gap:9px!important;}#tl-app[data-stage="3"] #tl-content .stage-three-heading .eyebrow{font-size:11px!important;}#tl-app[data-stage="3"] #tl-content .stage-three-heading h3{font-size:clamp(17px,4vw,24px)!important;}} /* v77 — corrected compact stage-three heading and readable five-moment flow */ #tl-app[data-stage="3"] #tl-content .stage-three-heading{ display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important; align-items:center!important;column-gap:12px!important;margin:0 0 9px!important; min-height:0!important; } #tl-app[data-stage="3"] #tl-content .stage-three-heading .eyebrow{ font-size:clamp(12px,1vw,16px)!important;line-height:1.15!important;letter-spacing:.045em!important; } #tl-app[data-stage="3"] #tl-content .stage-three-heading h3{ font-size:clamp(18px,1.65vw,28px)!important;line-height:1.12!important; text-align:right!important;white-space:nowrap!important;overflow:visible!important; font-weight:700!important;letter-spacing:-.02em!important; } #tl-app[data-stage="3"] .learning-column>#tl-content{padding:10px 17px 14px!important;} #tl-app[data-stage="3"] #tl-content .story-trail, #tl-app[data-stage="3"] #tl-content .journey-timeline{gap:6px!important;margin:6px 0 9px!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li, #tl-app[data-stage="3"] #tl-content .journey-timeline>li{ padding:7px 12px 7px 52px!important;min-height:0!important; } #tl-app[data-stage="3"] #tl-content .story-trail>li strong, #tl-app[data-stage="3"] #tl-content .journey-timeline>li strong{ margin-bottom:1px!important;line-height:1.17!important;font-size:clamp(13px,1.05vw,17px)!important; } #tl-app[data-stage="3"] #tl-content .story-trail>li span, #tl-app[data-stage="3"] #tl-content .journey-timeline>li span{ line-height:1.28!important;font-size:clamp(12px,1vw,16px)!important; } #tl-app[data-stage="3"] #tl-content .story-trail>li::before, #tl-app[data-stage="3"] #tl-content .journey-timeline>li::before{ width:30px!important;height:30px!important;line-height:30px!important;font-size:17px!important; left:10px!important;top:50%!important;transform:translateY(-50%)!important; } #tl-app[data-stage="3"] #tl-content .reflection-instruction, #tl-app[data-stage="3"] #tl-content .choice-guidance{ margin:8px 0 6px!important;line-height:1.25!important;font-size:clamp(13px,1.05vw,17px)!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts{gap:8px!important;margin:6px 0 7px!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button{ min-height:42px!important;padding:6px 8px!important;font-size:clamp(13px,1.05vw,17px)!important; } #tl-app[data-stage="3"] #tl-content #tl-reflection:not([hidden]){ padding:8px 12px!important;margin:7px 0!important;font-size:clamp(13px,1.05vw,17px)!important; } @media(max-width:630px){ #tl-app[data-stage="3"] #tl-content .stage-three-heading{column-gap:7px!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading .eyebrow{font-size:10px!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading h3{font-size:clamp(15px,3.5vw,21px)!important;} } /* v78 — Stage 4: stable layout with reserved answer area and nine distinct rainbow tones */ #tl-app[data-stage="4"] .learning-column>#tl-content{display:block!important;padding:14px 18px 16px!important;overflow-y:auto!important;} #tl-app[data-stage="4"] #tl-content .eyebrow{margin:0 0 5px!important;font-size:clamp(13px,1vw,16px)!important;} #tl-app[data-stage="4"] #tl-content h3{margin:0 0 8px!important;font-size:clamp(27px,2.2vw,37px)!important;line-height:1.14!important;} #tl-app[data-stage="4"] #tl-content .story-lead{margin:4px 0 10px!important;font-size:clamp(15px,1.17vw,19px)!important;line-height:1.38!important;} #tl-app[data-stage="4"] #tl-content .choice-guidance{margin:7px 0 8px!important;font-size:clamp(15px,1.18vw,19px)!important;line-height:1.28!important;} #tl-app[data-stage="4"] #tl-content .values-stage,#tl-app[data-stage="4"] #tl-content #tl-valueArea{display:block!important;min-height:0!important;} #tl-app[data-stage="4"] #tl-content .values-compact{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:8px 0 12px!important;order:0!important;} #tl-app[data-stage="4"] #tl-content .values-compact button{min-height:51px!important;padding:8px 6px!important;border-radius:11px!important;font-size:clamp(14px,1.25vw,19px)!important;font-weight:750!important;color:#0B2942!important;box-shadow:none!important;outline-offset:2px!important;word-break:normal!important;hyphens:none!important;} /* Distinct soft rainbow colours: red, orange, yellow, green, teal, sky, blue, indigo, violet */ #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(1){background:#FADBDD!important;border-color:#DA8A94!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(2){background:#FFE2C8!important;border-color:#E6A365!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(3){background:#FFF0B6!important;border-color:#D6B64B!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(4){background:#E3F0C9!important;border-color:#9DBB69!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5){background:#D3F1E7!important;border-color:#6BB9A2!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(6){background:#DDF3FB!important;border-color:#74BED9!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(7){background:#DCEBFF!important;border-color:#84AEE1!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(8){background:#E4E3FA!important;border-color:#A4A1D5!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(9){background:#F1E1F6!important;border-color:#C7A0D6!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:hover:not(.sel){filter:saturate(1.25) brightness(.97)!important;transform:translateY(-1px)!important;} #tl-app[data-stage="4"] #tl-content .values-compact button.sel,#tl-app[data-stage="4"] #tl-content .values-compact button[aria-pressed="true"]{background:#E9A635!important;border:3px solid #0B2942!important;box-shadow:inset 0 0 0 2px #FFF1D2!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail{display:block!important;order:1!important;min-height:174px!important;margin:0!important;padding:0!important;flex:none!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .value-placeholder{min-height:174px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;background:#FFF1D2!important;border:2px dashed #E9A635!important;border-radius:14px!important;padding:18px!important;color:#0B2942!important;font-weight:650!important;font-size:clamp(15px,1.1vw,18px)!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo{box-sizing:border-box!important;min-height:174px!important;padding:14px 18px!important;margin:0!important;border:2px solid #E9A635!important;border-radius:14px!important;background:#FFF1D2!important;box-shadow:none!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo h4{margin:0 0 7px!important;font-size:clamp(19px,1.5vw,25px)!important;line-height:1.2!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo p{margin:5px 0!important;font-size:clamp(14px,1.05vw,18px)!important;line-height:1.35!important;} #tl-app[data-stage="4"] #tl-content .passage-link{position:static!important;margin:8px 0 0!important;} @media(max-width:600px){#tl-app[data-stage="4"] #tl-content .values-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;}#tl-app[data-stage="4"] #tl-content #tl-valueDetail{min-height:0!important;}} /* v79: luminous, mixed-depth glossy rainbow value buttons; accessible labels. */ #tl-app[data-stage="4"] #tl-content .values-compact button { position:relative!important;isolation:isolate!important;overflow:hidden!important; border-width:2px!important;border-style:solid!important; background-image:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.19) 40%,rgba(255,255,255,0) 52%,rgba(0,20,50,.13) 100%)!important; background-blend-mode:screen!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.68),inset 0 -2px 2px rgba(0,24,48,.12),0 3px 7px rgba(11,41,66,.15)!important; text-shadow:none!important;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important; } #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(1):not(.sel):not([aria-pressed="true"]){background-color:#F4B8C4!important;border-color:#AF3658!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(2):not(.sel):not([aria-pressed="true"]){background-color:#D87920!important;border-color:#9A4E0B!important;color:#FFFFFF!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(3):not(.sel):not([aria-pressed="true"]){background-color:#FFE27A!important;border-color:#D4A123!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(4):not(.sel):not([aria-pressed="true"]){background-color:#37865A!important;border-color:#215F3E!important;color:#FFFFFF!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(5):not(.sel):not([aria-pressed="true"]){background-color:#A8E6D5!important;border-color:#43A992!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(6):not(.sel):not([aria-pressed="true"]){background-color:#147AA8!important;border-color:#0C557A!important;color:#FFFFFF!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(7):not(.sel):not([aria-pressed="true"]){background-color:#9DD9FA!important;border-color:#4A9DD3!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(8):not(.sel):not([aria-pressed="true"]){background-color:#4855A4!important;border-color:#303C83!important;color:#FFFFFF!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:nth-child(9):not(.sel):not([aria-pressed="true"]){background-color:#DCC3F0!important;border-color:#9D71BE!important;color:#0B2942!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:hover:not(.sel):not([aria-pressed="true"]){ transform:translateY(-2px)!important;filter:brightness(1.06) saturate(1.13)!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.75),inset 0 -2px 2px rgba(0,24,48,.12),0 5px 11px rgba(11,41,66,.22)!important; } #tl-app[data-stage="4"] #tl-content .values-compact button.sel, #tl-app[data-stage="4"] #tl-content .values-compact button[aria-pressed="true"]{ background-color:#E9A635!important;background-image:linear-gradient(180deg,#FFE6A0 0%,#E9A635 55%,#C78618 100%)!important; border:3px solid #0B2942!important;color:#0B2942!important; box-shadow:inset 0 2px 1px rgba(255,255,255,.72),0 0 0 2px #FFF1D2,0 4px 9px rgba(11,41,66,.2)!important; } #tl-app[data-stage="4"] #tl-content .values-compact button:focus-visible{ outline:3px solid #0B2942!important;outline-offset:3px!important; } @media(prefers-reduced-motion:reduce){ #tl-app[data-stage="4"] #tl-content .values-compact button{transition:none!important;} #tl-app[data-stage="4"] #tl-content .values-compact button:hover{transform:none!important;} } /* v80: value answer belongs INSIDE Stage 4, immediately after nine buttons. */ #tl-app[data-stage="4"] #tl-content .values-stage {display:flex!important;flex-direction:column!important;gap:10px!important;} #tl-app[data-stage="4"] #tl-content #tl-valueArea{order:0!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail{order:1!important;position:static!important;float:none!important;display:block!important;width:100%!important;min-height:140px!important;max-height:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .value-placeholder, #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo{min-height:140px!important;height:auto!important;width:100%!important;box-sizing:border-box!important;} #tl-app[data-stage="4"] #tl-content .values-compact{margin-bottom:0!important;} /* v82 — Jairus scene one: a small top-left Scripture card; artwork reveals more of the disciples. */ #tl-app[data-stage="1"] .classroom-stage>.art-frame>#tl-art{ object-position:90% center!important; } /* v83: The illustrated Bible itself is the link, with a short two-line instruction. */ #tl-app .art-frame>.art-passage-link{ width:clamp(132px,24%,218px)!important; min-height:125px!important; padding:8px!important; bottom:12px!important;right:12px!important;left:auto!important;top:auto!important; border-radius:16px!important; background:rgba(11,41,66,.90)!important; border:1px solid #5FB3E6!important; } #tl-app .art-frame>.art-passage-link a{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; gap:2px!important;text-decoration:none!important; min-height:112px!important;text-align:center!important; } #tl-app .art-frame>.art-passage-link .passage-bible-icon{ display:block!important;width:88px!important;height:85px!important; max-width:100%!important;object-fit:contain!important; } #tl-app .art-frame>.art-passage-link .passage-button-words{ display:block!important;font-size:14px!important;line-height:1.18!important; font-weight:750!important;color:#FFF1D2!important; } #tl-app .art-frame>.art-passage-link:hover{background:#14517e!important;box-shadow:0 0 0 3px #E9A63599!important;} #tl-app .art-frame>.art-passage-link:focus-within{outline:3px solid #E9A635!important;outline-offset:2px!important;} @media(max-width:700px){ #tl-app .art-frame>.art-passage-link{width:124px!important;min-height:105px!important;right:8px!important;bottom:8px!important;top:auto!important;} #tl-app .art-frame>.art-passage-link a{min-height:96px!important;} #tl-app .art-frame>.art-passage-link .passage-bible-icon{width:70px!important;height:65px!important;} #tl-app .art-frame>.art-passage-link .passage-button-words{font-size:12px!important;} } /* v84: Mark 5:40 quotation reaches both edges of the photograph, inset only for breathing room. */ /* v85: original glossy value art, with labels in the illustrations */ #tl-app[data-stage="4"] .values-compact{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(5px,.8vw,12px)!important;align-items:stretch!important;} #tl-app[data-stage="4"] .values-compact button[data-value]{position:relative!important;display:block!important;height:clamp(100px,12vw,158px)!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;border:2px solid transparent!important;border-radius:12px!important;background:white!important;box-shadow:0 3px 8px #0b29421c!important;transform:none!important;isolation:isolate!important;font-size:0!important;color:transparent!important;} #tl-app[data-stage="4"] .values-compact button[data-value] .value-art{width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;pointer-events:none!important;} #tl-app[data-stage="4"] .values-compact button[data-value]:hover{border-color:#168BC7!important;box-shadow:0 0 0 2px #5FB3E6,0 5px 12px #0b29422c!important;filter:brightness(1.04)!important;} #tl-app[data-stage="4"] .values-compact button[data-value][aria-pressed="true"]{border:3px solid #E9A635!important;box-shadow:0 0 0 2px #0B2942,0 5px 12px #0b29422c!important;} #tl-app[data-stage="4"] .values-compact button[data-value][aria-pressed="true"]:after{content:"✓"!important;position:absolute!important;top:5px!important;right:6px!important;background:#0B2942!important;color:white!important;border-radius:50%!important;width:24px!important;height:24px!important;display:grid!important;place-items:center!important;font-size:16px!important;font-weight:800!important;} #tl-app[data-stage="4"] .values-compact button[data-value]:focus-visible{outline:3px solid #E9A635!important;outline-offset:3px!important;} @media(max-width:650px){#tl-app[data-stage="4"] .values-compact{gap:4px!important;}#tl-app[data-stage="4"] .values-compact button[data-value]{height:clamp(84px,27vw,130px)!important;}} /* v86: equal, aligned icon cards; prevent stretched labels and artwork bleed. */ #tl-app[data-stage="4"] .values-compact button[data-value]{height:auto!important;aspect-ratio:450/350!important;max-height:178px!important;background:#fff!important;} #tl-app[data-stage="4"] .values-compact button[data-value] .value-art{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;} @media(max-width:650px){#tl-app[data-stage="4"] .values-compact button[data-value]{height:auto!important;max-height:none!important;aspect-ratio:450/350!important;}} /* v88 — compact Bible passage button, preserving readable two-line label. */ #tl-app .art-frame>.art-passage-link{ width:clamp(100px,16%,144px)!important;min-height:0!important; padding:5px 7px!important;border-radius:12px!important; bottom:10px!important;right:10px!important; } #tl-app .art-frame>.art-passage-link a{min-height:0!important;gap:0!important;} #tl-app .art-frame>.art-passage-link .passage-bible-icon{ width:58px!important;height:57px!important; } #tl-app .art-frame>.art-passage-link .passage-button-words{ font-size:12px!important;line-height:1.16!important; } @media(max-width:700px){ #tl-app .art-frame>.art-passage-link{width:100px!important;padding:4px!important;right:7px!important;bottom:7px!important;} #tl-app .art-frame>.art-passage-link .passage-bible-icon{width:46px!important;height:46px!important;} #tl-app .art-frame>.art-passage-link .passage-button-words{font-size:11px!important;} } /* v89: a larger, more welcoming portrait of Jairus while retaining compact stage 1 rhythm. */ #tl-app[data-stage="1"] #tl-content .jairus-intro{ grid-template-columns:clamp(145px,22%,215px) minmax(0,1fr)!important; align-items:center!important;gap:clamp(14px,1.6vw,24px)!important; padding:clamp(12px,1.25vw,18px)!important; margin:3px 0 9px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro img{ width:100%!important;height:clamp(165px,19vh,215px)!important; max-height:none!important;object-fit:cover!important;object-position:center top!important; border-radius:13px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro strong{ font-size:clamp(23px,2vw,31px)!important;line-height:1.15!important;margin-bottom:12px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro p{ font-size:clamp(17px,1.4vw,23px)!important;line-height:1.34!important;margin:0 0 8px!important; } @media(max-width:650px){ #tl-app[data-stage="1"] #tl-content .jairus-intro{grid-template-columns:clamp(105px,30%,145px) minmax(0,1fr)!important;gap:11px!important;padding:10px!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro img{height:clamp(140px,31vw,175px)!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro strong{font-size:clamp(18px,4.3vw,23px)!important;margin-bottom:6px!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro p{font-size:clamp(14px,3.3vw,18px)!important;} } /* v90: Meet Jesus mirrors the Jairus portrait card on Stage 1. */ #tl-app[data-stage="2"] #tl-content .jesus-intro{ display:grid!important;grid-template-columns:clamp(145px,22%,215px) minmax(0,1fr)!important; align-items:center!important;gap:clamp(14px,1.6vw,24px)!important; padding:clamp(12px,1.25vw,18px)!important;margin:3px 0 9px!important; background:#edf6fc!important;border:1px solid #c7e1f0!important;border-radius:18px!important; } #tl-app[data-stage="2"] #tl-content .jesus-intro img{ width:100%!important;height:clamp(165px,19vh,215px)!important;max-height:none!important; object-fit:cover!important;object-position:center top!important;border-radius:13px!important; } #tl-app[data-stage="2"] #tl-content .jesus-intro strong{ display:block!important;font-size:clamp(23px,2vw,31px)!important;line-height:1.15!important; margin-bottom:12px!important;color:#0B2942!important; } #tl-app[data-stage="2"] #tl-content .jesus-intro p{ font-size:clamp(17px,1.4vw,23px)!important;line-height:1.34!important;margin:0 0 8px!important; } @media(max-width:650px){ #tl-app[data-stage="2"] #tl-content .jesus-intro{grid-template-columns:clamp(105px,30%,145px) minmax(0,1fr)!important;gap:11px!important;padding:10px!important;} #tl-app[data-stage="2"] #tl-content .jesus-intro img{height:clamp(140px,31vw,175px)!important;} #tl-app[data-stage="2"] #tl-content .jesus-intro strong{font-size:clamp(18px,4.3vw,23px)!important;margin-bottom:6px!important;} #tl-app[data-stage="2"] #tl-content .jesus-intro p{font-size:clamp(14px,3.3vw,18px)!important;} } /* v91: matching pale-blue narrative card beneath the Meet Jesus portrait. */ #tl-app[data-stage="2"] .jesus-story-card{ background:#edf6fc!important;border:1px solid #c7e1f0!important; border-radius:18px!important;padding:clamp(13px,1.4vw,20px)!important; margin:8px 0 12px!important;box-shadow:none!important; } #tl-app[data-stage="2"] .jesus-story-card p{ margin:0!important;color:#153e59!important;font-size:clamp(17px,1.4vw,23px)!important; line-height:1.4!important;font-weight:500!important; } #tl-app[data-stage="2"] .jesus-story-card small{ display:inline!important;font-size:.78em!important;color:#42687f!important;white-space:nowrap!important; } /* v92 — wide, clear, single-line Next Page control. */ #tl-app .learning-column>.nav #tl-next{ width:max-content!important;max-width:100%!important;min-width:260px!important; min-height:66px!important;padding:9px 19px!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; gap:13px!important;white-space:nowrap!important;flex-wrap:nowrap!important; font-size:clamp(19px,1.65vw,24px)!important;font-weight:800!important;line-height:1.1!important; background:#24734d!important;border:2px solid #185c3c!important;border-radius:16px!important;color:#fff!important; } #tl-app .learning-column>.nav #tl-next .nav-label{ display:inline-block!important;white-space:nowrap!important;flex:0 0 auto!important; font-size:inherit!important;line-height:1!important; } #tl-app .learning-column>.nav #tl-next .nav-number{ width:44px!important;height:44px!important;min-width:44px!important; font-size:22px!important;flex:0 0 44px!important; } #tl-app .learning-column>.nav #tl-next .nav-arrow{font-size:25px!important;flex:0 0 auto!important;} @media(max-width:520px){ #tl-app .learning-column>.nav #tl-next{min-width:0!important;min-height:56px!important;padding:7px 10px!important;gap:7px!important;font-size:clamp(14px,4vw,19px)!important;} #tl-app .learning-column>.nav #tl-next .nav-number{width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important;font-size:17px!important;} #tl-app .learning-column>.nav #tl-next .nav-arrow{font-size:19px!important;} } /* v93: Stage 1 narrative matches the photograph-free Stage 2 story card. */ #tl-app[data-stage="1"] #tl-content .jairus-story-card{ background:#edf6fc!important;border:1px solid #c7e1f0!important; border-radius:18px!important;padding:clamp(12px,1.25vw,18px)!important; margin:7px 0 10px!important;box-shadow:none!important; } #tl-app[data-stage="1"] #tl-content .jairus-story-card p{ margin:0!important;color:#153e59!important; font-size:clamp(17px,1.4vw,23px)!important;line-height:1.35!important;font-weight:500!important; } #tl-app[data-stage="1"] #tl-content .jairus-story-card small{ display:inline!important;font-size:.78em!important;color:#42687f!important;white-space:nowrap!important; } /* v94: Stage 1 and 2 share an identical rhythm; the longer Stage 2 story fits without expanding the card. */ #tl-app[data-stage="1"] #tl-content .jairus-intro, #tl-app[data-stage="2"] #tl-content .jesus-intro{ display:grid!important;grid-template-columns:clamp(105px,18%,155px) minmax(0,1fr)!important; align-items:center!important;gap:13px!important;padding:10px 12px!important; margin:2px 0 7px!important;min-height:150px!important;box-sizing:border-box!important; background:#edf6fc!important;border:1px solid #c7e1f0!important;border-radius:18px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro img, #tl-app[data-stage="2"] #tl-content .jesus-intro img{ width:100%!important;height:128px!important;max-height:128px!important;object-fit:cover!important; object-position:center top!important;border-radius:12px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro strong, #tl-app[data-stage="2"] #tl-content .jesus-intro strong{ display:block!important;font-size:clamp(19px,1.7vw,25px)!important;line-height:1.12!important;margin:0 0 6px!important; } #tl-app[data-stage="1"] #tl-content .jairus-intro p, #tl-app[data-stage="2"] #tl-content .jesus-intro p{ font-size:clamp(15px,1.22vw,19px)!important;line-height:1.25!important;margin:3px 0!important; } #tl-app[data-stage="1"] #tl-content .jairus-story-card, #tl-app[data-stage="2"] #tl-content .jesus-story-card{ box-sizing:border-box!important;min-height:118px!important; display:flex!important;align-items:center!important;padding:11px 16px!important; margin:5px 0 8px!important;border:1px solid #c7e1f0!important; border-radius:18px!important;background:#edf6fc!important;box-shadow:none!important; } #tl-app[data-stage="1"] #tl-content .jairus-story-card p, #tl-app[data-stage="2"] #tl-content .jesus-story-card p{ margin:0!important;font-size:clamp(16px,1.25vw,19px)!important;line-height:1.32!important;font-weight:500!important; } #tl-app[data-stage="1"] #tl-content .story-lead, #tl-app[data-stage="2"] #tl-content .story-lead{margin:3px 0 5px!important;} #tl-app[data-stage="1"] #tl-content .journey-question, #tl-app[data-stage="2"] #tl-content .journey-question{margin:5px 0 3px!important;} #tl-app[data-stage="1"] #tl-content .answer-instruction, #tl-app[data-stage="2"] #tl-content .answer-instruction{margin:2px 0 4px!important;} #tl-app[data-stage="1"] #tl-content .story-choices, #tl-app[data-stage="2"] #tl-content .story-choices{margin:3px 0 5px!important;gap:6px!important;} @media(max-width:700px){ #tl-app[data-stage="1"] #tl-content .jairus-intro, #tl-app[data-stage="2"] #tl-content .jesus-intro{grid-template-columns:105px minmax(0,1fr)!important;min-height:136px!important;padding:8px!important;gap:9px!important;} #tl-app[data-stage="1"] #tl-content .jairus-intro img, #tl-app[data-stage="2"] #tl-content .jesus-intro img{height:118px!important;max-height:118px!important;} #tl-app[data-stage="1"] #tl-content .jairus-story-card, #tl-app[data-stage="2"] #tl-content .jesus-story-card{min-height:0!important;padding:10px 12px!important;} } /* v95: Stage 2 mosaic quotation and Bible button match Stage 1 exactly. */ /* The Bible link remains in the same lower-right corner, at the same size on both stages. */ #tl-app[data-stage="2"] .art-frame>.art-passage-link{ top:auto!important;left:auto!important;right:12px!important;bottom:12px!important; width:112px!important;min-height:0!important;padding:5px!important; } #tl-app[data-stage="2"] .art-frame>.art-passage-link .passage-bible-icon{ width:54px!important;height:54px!important; } #tl-app[data-stage="2"] .art-frame>.art-passage-link .passage-button-words{ font-size:12px!important;line-height:1.16!important; } @media(max-width:700px){ #tl-app[data-stage="2"] .art-frame>.art-passage-link{ right:7px!important;bottom:7px!important;width:100px!important;padding:4px!important; } #tl-app[data-stage="2"] .art-frame>.art-passage-link .passage-bible-icon{width:46px!important;height:46px!important;} #tl-app[data-stage="2"] .art-frame>.art-passage-link .passage-button-words{font-size:11px!important;} } /* v96: consistent compact Scripture ribbon, compact Bible button, single blue button family. */ #tl-app .art-frame>.art-passage-link{ position:absolute!important;left:auto!important;top:auto!important;right:10px!important;bottom:10px!important; width:112px!important;min-height:0!important;padding:5px!important;box-sizing:border-box!important; } #tl-app .art-frame>.art-passage-link .passage-bible-icon{width:54px!important;height:54px!important;object-fit:contain!important;} #tl-app .art-frame>.art-passage-link .passage-button-words{font-size:12px!important;line-height:1.15!important;} /* All unselected action/value buttons share the same calm boat-blue palette. */ #tl-app .reflection-prompts button:not([aria-pressed="true"]), #tl-app .values-grid button:not([aria-pressed="true"]), #tl-app .value-grid button:not([aria-pressed="true"]), #tl-app .live-choices button:not([aria-pressed="true"]){ background:#d8eefb!important;color:#123c59!important;border-color:#58a9db!important; } @media(max-width:700px){ #tl-app .art-frame>.art-passage-link{right:7px!important;bottom:7px!important;width:100px!important;padding:4px!important;} #tl-app .art-frame>.art-passage-link .passage-bible-icon{width:46px!important;height:46px!important;} #tl-app .art-frame>.art-passage-link .passage-button-words{font-size:11px!important;} } /* v97 — Stage 3 Scripture matches the exact top-ribbon footprint of Stages 1 and 2. The longer verse is fitted inside the same box, without cropping any words. */ /* v98 — Stage 3: five identical Boat Blue cards and Candle Gold value buttons. */ #tl-app[data-stage="3"] #tl-content .story-trail > li, #tl-app[data-stage="3"] #tl-content .journey-timeline > li { background:#d4eefa!important; border-color:#168BC7!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts button, #tl-app[data-stage="3"] #tl-content .reflection-prompts button:not([aria-pressed="true"]) { background:#E9A635!important; border:2px solid #b97a16!important; color:#0B2942!important; box-shadow:inset 0 2px 0 rgba(255,255,255,.42)!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts button:hover { background:#f6bf56!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts button[aria-pressed="true"] { background:#E9A635!important; border-color:#0B2942!important; box-shadow:0 0 0 3px #0B2942,inset 0 2px 0 rgba(255,255,255,.45)!important; } /* v99 FIX: override the older, more-specific per-card colour rules. All five timeline cards must exactly match card 2. */ #tl-app[data-stage="3"] #tl-content .story-trail li:nth-child(n), #tl-app[data-stage="3"] #tl-content .journey-timeline li:nth-child(n){ background:#d4eefa!important; border-color:#168BC7!important; } /* v100 — Stage 4 matches the compact Scripture ribbon from Stages 1–3. */ /* Three tidy rows of illustrated values, leaving room for the selected explanation. */ #tl-app[data-stage="4"] #tl-content .values-compact{gap:6px!important;margin:5px 0 7px!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{ height:clamp(84px,10.3vh,116px)!important;max-height:116px!important; min-height:0!important;aspect-ratio:auto!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value] .value-art{ width:100%!important;height:100%!important;object-fit:contain!important; } #tl-app[data-stage="4"] #tl-content .values-stage{gap:6px!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail{min-height:105px!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo, #tl-app[data-stage="4"] #tl-content #tl-valueDetail .value-placeholder{ min-height:105px!important;padding:9px 13px!important; } #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo h4{font-size:clamp(17px,1.3vw,22px)!important;margin-bottom:3px!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo p{font-size:clamp(13px,1vw,17px)!important;margin:3px 0!important;line-height:1.22!important;} #tl-app[data-stage="4"] #tl-content .story-lead{margin:5px 0!important;line-height:1.23!important;} #tl-app[data-stage="4"] #tl-content .choice-guidance{margin:5px 0!important;} @media(max-width:700px){ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{height:clamp(80px,17vw,108px)!important;} } /* v101: value answer panel takes the colour of its selected illustrated icon. */ #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo { background:var(--vc-soft,#D6EAF8)!important; color:#0B2942!important; border:3px solid var(--vc,#168BC7)!important; border-left:9px solid var(--vc,#168BC7)!important; border-radius:16px!important; box-shadow:0 4px 15px rgba(11,41,66,.13), inset 0 1px 0 rgba(255,255,255,.75)!important; padding:12px 17px!important; min-height:128px!important; height:auto!important; gap:5px!important; } #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo h4 { font-size:clamp(22px,2.0vw,30px)!important; line-height:1.14!important;color:#0B2942!important; margin:0 0 4px!important; } #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo p { font-size:clamp(17px,1.4vw,22px)!important; line-height:1.3!important;color:#0B2942!important; margin:3px 0!important; } #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo .value-action { border-top:1px solid rgba(11,41,66,.24)!important; padding-top:5px!important;font-weight:600!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value] { height:clamp(75px,9.2vh,103px)!important;max-height:103px!important; } @media(max-width:700px){ #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo h4{font-size:21px!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo p{font-size:17px!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{height:clamp(72px,17vw,100px)!important;} } /* v102 — Stage 4: move the Scripture to the foot of the mosaic; remove stark white icon tiles. */ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{background:#e6f3fa!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value] .value-art{ mix-blend-mode:multiply!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Love"]{background:#f6dbe5!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Joy"]{background:#ffebd5!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Peace"]{background:#fff1be!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Patience"]{background:#d7efe0!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Kindness"]{background:#d4f2ea!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Goodness"]{background:#d5eaf8!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Faithfulness"]{background:#d8effb!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Gentleness"]{background:#e3dff8!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Self-control"]{background:#eee0f6!important;} /* v103 — new illustrated value and place badges; bright interactive selection. */ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{ background:transparent!important;border:2px solid transparent!important;box-shadow:none!important; padding:1px!important;overflow:visible!important;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value] .value-art{ mix-blend-mode:normal!important;object-fit:contain!important;border-radius:12px!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]:hover, #tl-app[data-stage="4"] #tl-content .values-compact button[data-value].sel{ filter:brightness(1.16) saturate(1.24)!important;transform:translateY(-2px) scale(1.025)!important; box-shadow:0 0 0 3px #092942,0 0 18px rgba(255,194,52,.65)!important; } #tl-app[data-stage="5"] .live-places.live-choices{gap:10px!important;} #tl-app[data-stage="5"] .live-places.live-choices button[data-place]{ display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; padding:4px!important;min-width:0!important;background:transparent!important; border:2px solid transparent!important;box-shadow:none!important;overflow:visible!important; transition:filter .16s ease,transform .16s ease,box-shadow .16s ease!important; } #tl-app[data-stage="5"] .live-places .place-badge{ display:block!important;width:100%!important;height:clamp(95px,15vh,165px)!important; object-fit:contain!important;border-radius:12px!important; } #tl-app[data-stage="5"] .live-places .place-copy{display:none!important;} #tl-app[data-stage="5"] .live-places button[data-place]:hover, #tl-app[data-stage="5"] .live-places button[data-place][aria-pressed="true"]{ filter:brightness(1.19) saturate(1.3)!important;transform:translateY(-2px) scale(1.025)!important; box-shadow:0 0 0 3px #092942,0 0 20px rgba(255,193,55,.75)!important; } @media(prefers-reduced-motion:reduce){#tl-app .live-places button,#tl-app .values-compact button{transition:none!important;transform:none!important;}} /* v104 — simplified text-only values and places; matched Scripture rectangles. */ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{ display:flex!important;align-items:center!important;justify-content:center!important; height:clamp(58px,7.5vh,82px)!important;padding:8px 10px!important; border:2px solid #2588bc!important;border-radius:14px!important; background:#d8eefb!important;color:#103b58!important; box-shadow:0 2px 4px rgba(9,41,66,.10)!important; filter:none!important;transform:none!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value] .value-text{ display:block!important;font-weight:800!important;font-size:clamp(16px,1.55vw,23px)!important; line-height:1.12!important;text-align:center!important;overflow-wrap:normal!important;word-break:normal!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]:hover, #tl-app[data-stage="4"] #tl-content .values-compact button[data-value].sel{ background:#efa635!important;border-color:#b87812!important;color:#092942!important; box-shadow:0 0 0 3px #103b58,0 4px 12px rgba(9,41,66,.22)!important; filter:brightness(1.08)!important;transform:none!important; } #tl-app[data-stage="5"] .live-places.live-choices button[data-place]{ background:#d8eefb!important;border:2px solid #2588bc!important; border-radius:15px!important;min-height:90px!important;padding:12px!important; box-shadow:0 2px 5px rgba(9,41,66,.12)!important;transform:none!important; } #tl-app[data-stage="5"] .live-places .place-copy{display:flex!important;flex-direction:column!important;gap:5px!important;align-items:center!important;text-align:center!important;} #tl-app[data-stage="5"] .live-places .place-copy strong{font-size:clamp(19px,1.8vw,27px)!important;color:#103b58!important;} #tl-app[data-stage="5"] .live-places .place-copy span{font-size:clamp(13px,1vw,17px)!important;color:#103b58!important;} #tl-app[data-stage="5"] .live-places button[data-place]:hover, #tl-app[data-stage="5"] .live-places button[data-place][aria-pressed="true"]{ background:#efa635!important;border-color:#b87812!important;filter:brightness(1.08)!important; box-shadow:0 0 0 3px #103b58,0 4px 12px rgba(9,41,66,.2)!important;transform:none!important; } /* One consistent compact, top-left Scripture panel for every stage except Stage 4. */ /* ======================================================================== LIGHTBOAT SCRIPTURE CARD — CANONICAL COMPONENT (v105) All stages and stories use the same .scripture-card component. Stage 4 only changes its vertical position via data-scripture-position. To update every Scripture panel, edit this section alone. ======================================================================== */ #tl-app .art-frame {position:relative;} #tl-app .art-frame > .scripture-overlay[hidden] {display:none;} #tl-app .art-frame > .scripture-overlay:not([hidden]) { position:absolute;z-index:5;top:12px;bottom:auto;left:12px;right:auto; width:min(88%,620px);max-width:calc(100% - 24px); margin:0;padding:0;background:transparent;border:0;box-shadow:none; display:block;pointer-events:none; } #tl-app[data-scripture-position="bottom"] .art-frame > .scripture-overlay:not([hidden]) { top:auto;bottom:12px; } #tl-app .art-frame > .scripture-overlay .scripture.scripture-card { display:block;width:100%;height:auto;min-height:0;max-height:none; margin:0;padding:12px 16px; border:3px solid #c08a2f;border-radius:15px; background:#fff0ce;color:#173b58; box-shadow:0 2px 7px rgba(9,32,66,.12); overflow-wrap:break-word; } #tl-app .art-frame > .scripture-overlay .scripture.scripture-card strong { display:block;margin:0 0 5px;color:#89591b; font-family:system-ui,sans-serif;font-size:clamp(12px,1.1vw,17px); line-height:1.2;letter-spacing:.04em; } #tl-app .art-frame > .scripture-overlay .scripture.scripture-card blockquote { margin:0;color:#173b58;font-family:Georgia,serif;font-weight:700; font-size:clamp(17px,1.55vw,25px);line-height:1.16; } @media(max-width:700px) { #tl-app .art-frame > .scripture-overlay:not([hidden]) { left:7px;width:calc(100% - 14px);max-width:none; } #tl-app .art-frame > .scripture-overlay .scripture.scripture-card {padding:8px 10px;} #tl-app .art-frame > .scripture-overlay .scripture.scripture-card blockquote {font-size:clamp(13px,3.1vw,18px);} } /* v107: compact, consistent stage 3 template. One authoritative ruleset. */ #tl-app[data-stage="3"] #tl-content .stage-three-heading {display:block!important;margin:0 0 13px!important;padding:0!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading .eyebrow {display:block!important;margin:0 0 4px!important;text-align:left!important;color:#896122!important;font-size:clamp(14px,1.35vw,19px)!important;line-height:1.15!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading h3 {display:block!important;margin:0!important;text-align:left!important;color:#173e59!important;font-family:Georgia,serif!important;font-size:clamp(28px,3vw,46px)!important;line-height:1.06!important;} #tl-app[data-stage="3"] #tl-content .story-trail, #tl-app[data-stage="3"] #tl-content .journey-timeline {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;margin:0 0 11px!important;padding:0!important;list-style:none!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li:nth-child(n), #tl-app[data-stage="3"] #tl-content .journey-timeline>li:nth-child(n) {position:relative!important;display:grid!important;align-content:center!important;min-height:0!important;margin:0!important;padding:8px 13px 8px 52px!important;border:1.5px solid #bedff1!important;border-radius:14px!important;background:#ebf5fb!important;box-shadow:none!important;color:#173e59!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li::before, #tl-app[data-stage="3"] #tl-content .journey-timeline>li::before {left:11px!important;top:50%!important;transform:translateY(-50%)!important;width:29px!important;height:29px!important;border-radius:50%!important;background:#1765aa!important;color:#fff!important;font-size:16px!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li strong, #tl-app[data-stage="3"] #tl-content .journey-timeline>li strong {display:flex!important;justify-content:space-between!important;align-items:baseline!important;gap:8px!important;margin:0 0 2px!important;color:#173e59!important;font-size:clamp(15px,1.35vw,20px)!important;line-height:1.1!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li strong small, #tl-app[data-stage="3"] #tl-content .journey-timeline>li strong small {flex-shrink:0!important;color:#356687!important;font-size:clamp(10px,1vw,14px)!important;font-weight:650!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li span, #tl-app[data-stage="3"] #tl-content .journey-timeline>li span {color:#173e59!important;font-size:clamp(13px,1.2vw,18px)!important;line-height:1.18!important;} #tl-app[data-stage="3"] #tl-content .reflection-instruction, #tl-app[data-stage="3"] #tl-content .choice-guidance {margin:0 0 7px!important;color:#174967!important;font-size:clamp(14px,1.2vw,18px)!important;line-height:1.2!important;font-weight:650!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0 0 8px!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button {min-height:43px!important;padding:7px 5px!important;border:2px solid #b97a16!important;border-radius:12px!important;background:#e9a635!important;color:#0b2942!important;font-size:clamp(14px,1.2vw,18px)!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button[aria-pressed="true"] {outline:3px solid #0b2942!important;outline-offset:1px!important;} @media(max-width:600px){#tl-app[data-stage="3"] #tl-content .story-trail>li:nth-child(n),#tl-app[data-stage="3"] #tl-content .journey-timeline>li:nth-child(n){padding:7px 8px 7px 43px!important;}#tl-app[data-stage="3"] #tl-content .story-trail>li::before,#tl-app[data-stage="3"] #tl-content .journey-timeline>li::before{left:7px!important;width:26px!important;height:26px!important;}#tl-app[data-stage="3"] #tl-content .story-trail>li strong,#tl-app[data-stage="3"] #tl-content .journey-timeline>li strong{flex-wrap:wrap!important;}#tl-app[data-stage="3"] #tl-content .reflection-prompts{gap:4px!important;}#tl-app[data-stage="3"] #tl-content .reflection-prompts button{font-size:12px!important;}} /* v108 — Stage 3 heading matches the compact Stage 1/2 hierarchy. */ #tl-app[data-stage="3"] #tl-content .stage-three-heading{display:block!important;margin:0 0 9px!important;padding:0!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading .eyebrow{display:block!important;margin:0 0 3px!important;font-size:clamp(12px,1.05vw,15px)!important;line-height:1.35!important;letter-spacing:.07em!important;font-weight:750!important;text-align:left!important;} #tl-app[data-stage="3"] #tl-content .stage-three-heading h3{display:block!important;margin:0!important;font-size:clamp(24px,2.15vw,32px)!important;line-height:1.13!important;letter-spacing:-.015em!important;font-weight:700!important;text-align:left!important;} /* v109 — Stage 3 only: preserve the design, reserve space for the selected answer. */ #tl-app[data-stage="3"] #tl-content .stage-three-heading{margin-bottom:6px!important;} #tl-app[data-stage="3"] #tl-content .story-trail, #tl-app[data-stage="3"] #tl-content .journey-timeline{gap:5px!important;margin-bottom:8px!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li:nth-child(n), #tl-app[data-stage="3"] #tl-content .journey-timeline>li:nth-child(n){padding-top:5px!important;padding-bottom:5px!important;border-radius:11px!important;} #tl-app[data-stage="3"] #tl-content .story-trail>li strong, #tl-app[data-stage="3"] #tl-content .journey-timeline>li strong{margin-bottom:1px!important;} #tl-app[data-stage="3"] #tl-content .reflection-instruction, #tl-app[data-stage="3"] #tl-content .choice-guidance{margin-bottom:5px!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts{gap:7px!important;margin-bottom:5px!important;} #tl-app[data-stage="3"] #tl-content .reflection-prompts button{min-height:38px!important;padding:5px!important;} #tl-app[data-stage="3"] #tl-content #tl-reflection:not([hidden]){margin:4px 0 0!important;padding:8px 12px!important;min-height:0!important;font-size:clamp(14px,1.2vw,18px)!important;line-height:1.22!important;border-radius:11px!important;} #tl-app[data-stage="3"] #tl-content #tl-reflection strong{font-weight:800!important;} /* v110: Stage 3 value controls — light Boat Blue, fine green outline. */ #tl-app[data-stage="3"] #tl-content .reflection-prompts button { background:#d9eef9!important; border:2px solid #2b855e!important; color:#123b56!important; box-shadow:none!important; border-radius:10px!important; } #tl-app[data-stage="3"] #tl-content .reflection-prompts button[aria-pressed="true"] { background:#b7e4d1!important; border-color:#176b48!important; outline:2px solid #176b48!important; outline-offset:0!important; } /* v111 — Stage 4: matching value/answer colours, no black selection outline. Each button's border, selected state, and answer panel share one palette. */ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Love"]{--value-border:#b93560;--value-fill:#f4bbc9;--value-selected:#e95b87;--value-ink:#092942;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Joy"]{--value-border:#a9540d;--value-fill:#eaa04e;--value-selected:#f78d18;--value-ink:#fff;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Peace"]{--value-border:#d3a01c;--value-fill:#ffe180;--value-selected:#ffca35;--value-ink:#092942;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Patience"]{--value-border:#2b7855;--value-fill:#b5e5d0;--value-selected:#48bd83;--value-ink:#092942;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Kindness"]{--value-border:#38a996;--value-fill:#a8e4d9;--value-selected:#50d4be;--value-ink:#092942;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Goodness"]{--value-border:#075e88;--value-fill:#a9d9ed;--value-selected:#2499c9;--value-ink:#fff;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Faithfulness"]{--value-border:#368dcb;--value-fill:#a7daf4;--value-selected:#57b7ee;--value-ink:#092942;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Gentleness"]{--value-border:#373e91;--value-fill:#d2cff2;--value-selected:#8178d7;--value-ink:#fff;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Self-control"]{--value-border:#945bb2;--value-fill:#dfc5ef;--value-selected:#bc82dd;--value-ink:#092942;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]{ background:var(--value-fill)!important;border:2px solid var(--value-border)!important; color:#092942!important;box-shadow:0 2px 5px #09294218!important;filter:none!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]:hover, #tl-app[data-stage="4"] #tl-content .values-compact button[data-value].sel, #tl-app[data-stage="4"] #tl-content .values-compact button[data-value][aria-pressed="true"]{ background:var(--value-selected)!important;border:3px solid var(--value-border)!important; color:var(--value-ink)!important;box-shadow:0 0 0 2px var(--value-border),0 3px 9px #09294222!important; filter:brightness(1.06)!important;transform:none!important;outline:none!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value].sel .value-text{color:var(--value-ink)!important;} #tl-app[data-stage="4"] #tl-content .values-compact button[data-value][aria-pressed="true"]:after{ background:var(--value-border)!important;color:#fff!important; } #tl-app[data-stage="4"] #tl-content .values-compact button[data-value]:focus-visible{outline:3px solid var(--value-border)!important;outline-offset:3px!important;} #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo{ background:var(--vc-soft)!important;border:3px solid var(--vc)!important; box-shadow:0 3px 10px #09294212!important;color:#092942!important; } #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo h4, #tl-app[data-stage="4"] #tl-content #tl-valueDetail .valueinfo p{color:#092942!important;} /* v112: restrained brand symbol beneath the completed Stage 5 message. */ #tl-app[data-stage="5"] #tl-finish-symbol[hidden]{display:none!important;} #tl-app[data-stage="5"] #tl-finish-symbol{display:flex;align-items:center;justify-content:center;margin:7px auto 1px;padding:0;background:transparent;border:0;} #tl-app[data-stage="5"] #tl-finish-symbol img{display:block;width:116px;max-width:25%;height:auto;object-fit:contain;border-radius:4px;} /* v113 — Stage 5 matches the restrained type scale and rhythm of Stages 1–4. */ #tl-app[data-stage="5"] #tl-content .eyebrow{font-size:clamp(12px,1.05vw,15px)!important;line-height:1.25!important;letter-spacing:.07em!important;margin:0 0 4px!important;} #tl-app[data-stage="5"] #tl-content h3{font-family:Georgia,serif!important;font-size:clamp(24px,2.15vw,32px)!important;line-height:1.13!important;margin:0 0 10px!important;} #tl-app[data-stage="5"] #tl-content .place-instruction{font-size:clamp(15px,1.2vw,19px)!important;line-height:1.25!important;font-weight:650!important;margin:0 0 9px!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices{gap:10px!important;margin:0 0 11px!important;} #tl-app[data-stage="5"] #tl-content .live-places.live-choices button[data-place]{min-height:88px!important;padding:12px 8px!important;border-radius:13px!important;} #tl-app[data-stage="5"] #tl-content .live-places .place-copy strong{font-size:clamp(24px,2.45vw,36px)!important;line-height:1.1!important;font-weight:800!important;} #tl-app[data-stage="5"] #tl-content .live-reflection{font-family:inherit!important;font-size:clamp(17px,1.45vw,22px)!important;font-weight:650!important;line-height:1.24!important;margin:6px 0!important;} #tl-app[data-stage="5"] #tl-content .journey-completion{margin:10px 0 0!important;padding:10px 12px!important;border-radius:12px!important;background:#e9f5fb!important;border:1.5px solid #bedff1!important;} #tl-app[data-stage="5"] #tl-content .finish-instruction{font-size:clamp(14px,1.15vw,18px)!important;line-height:1.25!important;margin:0 0 7px!important;} #tl-app[data-stage="5"] #tl-finish-symbol{display:none!important;} @media(max-height:760px){#tl-app[data-stage="5"] #tl-content .live-places.live-choices button[data-place]{min-height:70px!important;}#tl-app[data-stage="5"] #tl-content .journey-completion{padding:7px 10px!important;}#tl-app[data-stage="5"] #tl-content .live-places.live-choices{margin-bottom:6px!important;}} /* v121: Emmaus Scripture outside artwork so faces remain unobstructed. */ #tl-app.emmaus-reading .learning-column > .scripture-overlay[hidden]{display:none!important} #tl-app.emmaus-reading .learning-column > .scripture-overlay:not([hidden]){ position:static!important;display:block!important;width:100%!important;max-width:none!important; margin:0 0 12px!important;padding:0!important;pointer-events:auto!important; background:transparent!important;border:0!important;box-shadow:none!important; } #tl-app.emmaus-reading .learning-column > .scripture-overlay .scripture-card{ display:block!important;width:100%!important;max-width:none!important; margin:0!important;padding:12px 16px!important;border:2px solid #a67728!important; border-radius:14px!important;background:#fff0ce!important;color:#173b58!important; box-shadow:0 2px 7px rgba(9,32,66,.12)!important; } #tl-app.emmaus-reading .learning-column > .scripture-overlay strong{ display:block!important;margin-bottom:5px!important;color:#754a16!important;font-size:clamp(14px,1.1vw,17px)!important; } #tl-app.emmaus-reading .learning-column > .scripture-overlay blockquote{ color:#173b58!important;font-size:clamp(17px,1.55vw,23px)!important;line-height:1.3!important; } /* v123 — targeted Stage 4 selected-value readability. Preserve layout, artwork, sizing and all unselected button styles. Use dark ink on bright selected fills that previously used white text. */ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Joy"], #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Goodness"], #tl-app[data-stage="4"] #tl-content .values-compact button[data-value="Gentleness"]{ --value-ink:#092942; } /* Keep selected labels legible without relying on colour alone. */ #tl-app[data-stage="4"] #tl-content .values-compact button[data-value].sel .value-text, #tl-app[data-stage="4"] #tl-content .values-compact button[data-value][aria-pressed="true"] .value-text{ color:var(--value-ink)!important; } /* v124: small-screen readability without changing desktop master layout. */ @media (max-width:700px){ #tl-app #tl-content .reflection-prompts button{ font-size:14px!important; line-height:1.35!important; } #tl-app .art-frame>.art-passage-link .passage-button-words{ font-size:13px!important; line-height:1.3!important; } #tl-app .next-hint,#tl-app .current-stage-label{ font-size:13px!important; line-height:1.35!important; } } /* v131: Emmaus Scripture card follows the same art-frame component as other stories, anchored at bottom left instead of above the learning content. */ #tl-app.emmaus-reading .art-frame > .scripture-overlay:not([hidden]){ top:auto!important;bottom:12px!important;left:12px!important;right:auto!important; width:min(65%,460px)!important;max-width:calc(100% - 24px)!important; } #tl-app.emmaus-reading .art-frame > .scripture-overlay .scripture.scripture-card{ padding:9px 12px!important; } #tl-app.emmaus-reading .art-frame > .scripture-overlay .scripture.scripture-card blockquote{ font-size:clamp(14px,1.2vw,19px)!important;line-height:1.22!important; } @media(max-width:700px){ #tl-app.emmaus-reading .art-frame > .scripture-overlay:not([hidden]){ left:7px!important;bottom:7px!important;width:min(72%,360px)!important; } #tl-app.emmaus-reading .art-frame > .scripture-overlay .scripture.scripture-card blockquote{font-size:13px!important;} }