/* BrightHaven: "The Month After" (life.html tool), all classes prefixed .lr- */

.lr-wrap { background:#fff; border:2px solid #d4e1ee; border-radius:16px; padding:1.6rem 1.4rem 1.8rem; box-shadow:0 8px 24px rgba(13,45,74,.07); }
.lr-head h3 { font-size:clamp(1.25rem,2.4vw,1.6rem); margin:.25rem 0 .4rem; color:var(--navy); }
.lr-head p { color:#555; max-width:64ch; margin:0 0 1.2rem; font-size:.96rem; }
.lr-eyebrow { display:block; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:800; color:var(--gold-ink); }

/* ---- layout ---- */
.lr-grid { display:grid; grid-template-columns:1fr; gap:1.4rem; }
.lr-stage { order:-1; }
@media (min-width:920px) {
  .lr-grid { grid-template-columns:minmax(300px,.85fr) 1.25fr; gap:1.8rem; align-items:start; }
  .lr-stage { order:0; position:sticky; top:96px; }
}

/* ---- controls ---- */
.lr-controls { display:flex; flex-direction:column; gap:1.05rem; }
.lr-field[hidden] { display:none; }
.lr-label, .lr-slider label { display:block; font-size:.9rem; font-weight:800; color:var(--navy); }
.lr-slider-head { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.lr-val { font-weight:800; color:var(--gold-ink); font-size:.98rem; font-variant-numeric:tabular-nums; }
.lr-hint { display:block; font-size:.78rem; color:#6b7280; margin-top:.15rem; }
.lr-slider input[type=range] { width:100%; margin:.45rem 0 .1rem; accent-color:var(--navy); height:28px; cursor:pointer; }
.lr-slider input[type=range]:focus-visible { outline:3px solid rgba(227,167,45,.6); outline-offset:2px; border-radius:6px; }
.lr-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.4rem; }
.lr-chip { font:inherit; font-size:.86rem; font-weight:700; color:var(--navy); background:#f4f8fb; border:2px solid #c9d7e5; border-radius:999px; padding:.42rem .85rem; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.lr-chip:hover { border-color:var(--gold); }
.lr-chip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.lr-chip:focus-visible, .lr-pchip:focus-visible, .lr-link:focus-visible { outline:3px solid rgba(227,167,45,.7); outline-offset:2px; }

/* ---- stage / sky ---- */
.lr-sky { position:relative; overflow:hidden; border-radius:16px; padding:1.3rem 1.2rem 1.2rem; color:#fff;
  background:radial-gradient(120% 90% at 100% 0%, rgba(227,167,45,.28), transparent 55%), linear-gradient(160deg, #123a5e 0%, var(--navy-dark) 60%, #071b2c 100%);
  transition:background .8s ease; }
.lr-sky.lr-mood-hot { background:radial-gradient(120% 90% at 100% 0%, rgba(214,74,52,.38), transparent 55%), linear-gradient(160deg, #1b2f48 0%, var(--navy-dark) 60%, #120f1c 100%); }
.lr-sky.lr-mood-thin { background:radial-gradient(120% 90% at 100% 0%, rgba(227,167,45,.42), transparent 55%), linear-gradient(160deg, #143a5a 0%, var(--navy-dark) 60%, #0a1a2a 100%); }
.lr-sky.lr-mood-ok { background:radial-gradient(120% 90% at 100% 0%, rgba(43,168,110,.38), transparent 55%), linear-gradient(160deg, #0f4160 0%, var(--navy-dark) 60%, #06202f 100%); }
.lr-sky::before { content:""; position:absolute; inset:auto -10% -35% -10%; height:60%; background:radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.08), transparent 70%); pointer-events:none; }

.lr-top { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.1rem; }
@media (min-width:640px) { .lr-top { grid-template-columns:1fr 1fr; align-items:end; } }
.lr-big-lab, .lr-need-lab { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:rgba(255,255,255,.7); }
.lr-big-n { display:block; font-size:clamp(2.1rem,5.2vw,3.2rem); font-weight:900; line-height:1.05; color:var(--gold); letter-spacing:-.01em; margin:.15rem 0 .2rem; text-shadow:0 2px 18px rgba(227,167,45,.35); }
.lr-big-sub, .lr-need-sub { display:block; font-size:.8rem; color:rgba(255,255,255,.75); line-height:1.4; }
.lr-need { border-left:2px solid rgba(255,255,255,.18); padding-left:1rem; }
@media (max-width:639px) { .lr-need { border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:.8rem; } }
.lr-need-n { display:block; font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:900; color:#fff; line-height:1.1; margin:.15rem 0 .2rem; }

/* ---- timeline ---- */
.lr-timeline { position:relative; }
.lr-tiles { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.35rem; }
@media (max-width:560px) { .lr-tiles { grid-template-columns:repeat(6,minmax(0,1fr)); gap:.4rem; } }
.lr-tile { position:relative; aspect-ratio:1/1.15; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem;
  font-weight:800; font-size:.78rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.75);
  transition:background .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease, transform .5s ease; }
.lr-tile-n { font-size:.72rem; opacity:.85; }
.lr-tile-l { font-size:.9rem; line-height:1; }
.lr-tile.is-ok { background:linear-gradient(180deg,#2fb27a,#1c8a5c); border-color:#57d59e; color:#fff; box-shadow:0 0 0 1px rgba(87,213,158,.25), 0 6px 16px rgba(28,138,92,.35); }
.lr-tile.is-thin { background:linear-gradient(180deg,#e9b23a,#c98a12); border-color:#ffd579; color:#1e1600; box-shadow:0 6px 16px rgba(227,167,45,.35); }
.lr-tile.is-na { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.7); }
.lr-year.is-na { background:rgba(255,255,255,.14); }
.lr-tile.is-out { background:linear-gradient(180deg,rgba(214,74,52,.55),rgba(150,38,30,.55)); border-color:rgba(255,120,100,.5); color:rgba(255,255,255,.85); }
.lr-tile.lr-anim { animation:lr-land .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
@keyframes lr-land { from { transform:translateY(8px) scale(.94); opacity:.35; } to { transform:none; opacity:1; } }

.lr-years-lab { display:flex; justify-content:space-between; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:rgba(255,255,255,.55); margin:.85rem 0 .25rem; }
.lr-years { display:grid; grid-template-columns:repeat(19,minmax(0,1fr)); gap:2px; height:22px; border-radius:6px; overflow:hidden; }
.lr-year { position:relative; background:rgba(255,255,255,.08); transition:background .5s ease; }
.lr-year span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:.6rem; font-weight:800; color:rgba(255,255,255,.85); }
.lr-year.is-ok { background:#1f9c69; }
.lr-year.is-thin { background:#d9a12b; }
.lr-year.is-out { background:rgba(214,74,52,.35); }
.lr-marker { position:absolute; bottom:-1.25rem; transform:translateX(-50%); font-size:.62rem; font-weight:800; color:var(--gold); white-space:nowrap; letter-spacing:.04em; }
.lr-marker::before { content:"▲"; display:block; text-align:center; font-size:.55rem; line-height:1; margin-bottom:.05rem; }
.lr-marker[hidden] { display:none; }
@media (max-width:560px) { .lr-year span { display:none; } }

.lr-captions { list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.lr-captions li { display:flex; gap:.7rem; align-items:baseline; font-size:.88rem; line-height:1.4; color:rgba(255,255,255,.9); }
.lr-cap-m { flex:0 0 auto; min-width:3.1rem; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }

.lr-extend { display:flex; align-items:center; gap:.65rem; margin-top:1.1rem; font-size:.86rem; font-weight:700; color:#fff; cursor:pointer; }
.lr-extend[hidden] { display:none; }
.lr-extend input { position:absolute; opacity:0; width:1px; height:1px; }
.lr-switch { flex:0 0 auto; width:42px; height:24px; border-radius:999px; background:rgba(255,255,255,.22); position:relative; transition:background .25s; }
.lr-switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s; }
.lr-extend input:checked + .lr-switch { background:#2fb27a; }
.lr-extend input:checked + .lr-switch::after { transform:translateX(18px); }
.lr-extend input:focus-visible + .lr-switch { outline:3px solid rgba(227,167,45,.7); outline-offset:2px; }

/* ---- math disclosure ---- */
.lr-math { margin-top:.9rem; border:1px dashed #c9d7e5; border-radius:12px; padding:.7rem 1rem; background:#f8fbfd; }
.lr-math summary { cursor:pointer; font-weight:800; color:var(--navy); font-size:.9rem; }
.lr-math p { font-size:.85rem; color:#444; margin:.6rem 0 0; line-height:1.5; }
.lr-math b { color:var(--navy); }
.lr-fine { color:#6b7280; font-size:.8rem; }

/* ---- purposes ---- */
.lr-purpose { margin-top:2rem; padding-top:1.6rem; border-top:1px solid #e5edf4; }
.lr-purpose h3 { font-size:1.15rem; margin:.25rem 0 .8rem; }
.lr-pchips { display:flex; flex-wrap:wrap; gap:.55rem; }
.lr-pchip { text-align:left; font:inherit; font-size:.92rem; font-weight:700; color:var(--navy); background:#f4f8fb; border:2px solid #c9d7e5; border-radius:999px; padding:.6rem 1rem .6rem .8rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:background .15s, border-color .15s, color .15s, transform .15s; }
.lr-pchip:hover { border-color:var(--gold); transform:translateY(-1px); }
.lr-pchip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.lr-pic { font-size:1.1rem; line-height:1; }

/* ---- recommendation ---- */
.lr-rec { margin-top:1.6rem; }
.lr-rec-card { border:2px solid var(--gold); border-radius:16px; padding:1.4rem 1.4rem 1.3rem; background:linear-gradient(180deg,#fffdf7,#fff); box-shadow:0 8px 24px rgba(13,45,74,.07); }
.lr-rec-tag { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-dark); background:rgba(227,167,45,.22); border-radius:999px; padding:.25rem .7rem; margin-bottom:.5rem; }
.lr-rec-card h3 { font-size:1.45rem; margin:0 0 .4rem; }
.lr-rec-why { color:#444; font-size:.97rem; margin:0 0 .6rem; }
.lr-rec-need { font-size:.92rem; color:#444; margin:0 0 .3rem; }
.lr-rec-need strong { color:var(--navy); font-size:1.05rem; }
.lr-rec-need em { color:#6b7280; font-style:normal; font-size:.82rem; }
.lr-rec-runner { font-size:.86rem; color:#6b7280; margin:0 0 .9rem; }
.lr-rec-runner:empty { display:none; }
.lr-rec-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.2rem; }
.lr-link { font:inherit; font-size:.9rem; font-weight:700; color:var(--navy); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.2rem 0; }
.lr-link:hover { color:var(--gold-ink); }
.lr-take { margin-top:1.1rem; padding-top:.9rem; border-top:1px dashed #e0e7ee; font-size:.86rem; color:#555; }
.lr-take > span:first-child { font-weight:700; color:var(--navy); margin-right:.4rem; }
.lr-copied { margin-left:.5rem; font-weight:700; color:#1c7a4e; }
.lr-summary { display:block; width:100%; margin-top:.55rem; font:inherit; font-size:.82rem; color:#444; line-height:1.45; background:#f8fbfd; border:1px solid #d4e1ee; border-radius:10px; padding:.6rem .75rem; resize:vertical; }

/* ---- small screens ---- */
@media (max-width:480px) {
  .lr-wrap { padding:1.2rem 1rem 1.4rem; border-radius:14px; }
  .lr-sky { padding:1.1rem .95rem 1rem; }
  .lr-rec-card { padding:1.15rem 1rem; }
  .lr-rec-actions .btn { width:100%; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce) {
  .lr-tile, .lr-year, .lr-sky, .lr-switch, .lr-switch::after, .lr-chip, .lr-pchip { transition:none !important; animation:none !important; }
  .lr-tile.lr-anim { animation:none !important; }
  .lr-pchip:hover { transform:none; }
}