/* ============================================================
   Life Map  (life.html → #tool-map)   owned by js/life-map.js
   Every class is .lm- prefixed. White card, 2px #d4e1ee, radius 16,
   navy/gold accents, chips like the rest of the site.
   ============================================================ */

.lm-wrap {
  background:#fff; border:2px solid #d4e1ee; border-radius:16px;
  padding:1.3rem 1.3rem 1.4rem; box-shadow:0 8px 24px rgba(13,45,74,.07);
  scroll-margin-top:90px;
}
.lm-kicker { display:block; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:800; color:var(--gold-ink); margin-bottom:.2rem; }
.lm-title { margin:0 0 .3rem; font-size:1.35rem; line-height:1.15; color:var(--navy); }
.lm-sub { margin:0; font-size:.92rem; color:#555; line-height:1.5; max-width:62ch; }

/* header + age stepper */
.lm-head { display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:flex-start; justify-content:space-between; }
.lm-age { display:inline-flex; align-items:center; gap:.4rem; background:#f4f8fb; border:2px solid #c9d7e5; border-radius:999px; padding:.3rem .5rem .3rem .9rem; flex:0 0 auto; }
.lm-age-lbl { font-size:.88rem; font-weight:700; color:var(--navy); }
.lm-age-btn { width:2rem; height:2rem; border-radius:999px; border:2px solid #c9d7e5; background:#fff; color:var(--navy); font:inherit; font-weight:800; font-size:1.1rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s, color .15s; }
.lm-age-btn:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.lm-age-in { width:3.2rem; text-align:center; font:inherit; font-weight:800; font-size:1.15rem; color:var(--navy); border:0; background:transparent; padding:.1rem 0; -moz-appearance:textfield; }
.lm-age-in::-webkit-outer-spin-button, .lm-age-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.lm-age-in:focus { outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* sticker tray */
.lm-tray { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem; }
.lm-stk {
  display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-size:.86rem; font-weight:700; color:var(--navy);
  background:#f4f8fb; border:2px solid #c9d7e5; border-radius:999px;
  padding:.38rem .8rem .38rem .55rem; cursor:grab; line-height:1.15;
  transition:background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  touch-action:manipulation;
}
.lm-stk:hover { border-color:var(--navy); transform:translateY(-1px); }
.lm-stk:active { cursor:grabbing; }
.lm-stk-ic { font-size:1.15rem; line-height:1; }
.lm-stk-yr { font-size:.72rem; font-weight:800; background:var(--gold); color:var(--navy-dark); border-radius:999px; padding:.05rem .45rem; margin-left:.1rem; }
.lm-stk.is-placed { border-color:#9fb6cc; background:#fff; }
.lm-stk.is-placed .lm-stk-nm { color:#3d5a78; }
.lm-stk.is-armed, .lm-stk[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 0 0 3px rgba(227,167,45,.45); }
.lm-stk.is-armed .lm-stk-nm { color:#fff; }
.lm-stk:focus-visible, .lm-chip:focus-visible, .lm-yr:focus-visible, .lm-age-btn:focus-visible, .lm-link:focus-visible, .lm-mini:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

/* instruction bar */
.lm-hint { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; margin:.9rem 0 .7rem; padding:.6rem .85rem; border-radius:12px; background:#f7fafd; border:1.5px dashed #c9d7e5; font-size:.88rem; color:#444; line-height:1.4; min-height:2.6rem; }
.lm-hint b { color:var(--navy); }
.lm-hint.is-armed { background:#fff7e6; border:1.5px solid rgba(227,167,45,.8); border-left:5px solid var(--gold); }
.lm-hint-ic { font-size:1.3rem; line-height:1; }
.lm-mini { font:inherit; font-size:.78rem; font-weight:800; color:var(--navy); background:#fff; border:2px solid #c9d7e5; border-radius:999px; padding:.22rem .7rem; cursor:pointer; line-height:1.2; margin-left:auto; }
.lm-mini + .lm-mini { margin-left:0; }
.lm-mini:hover { border-color:var(--navy); }

/* chart: fixed y-axis + horizontally scrolling track */
.lm-chart { display:flex; align-items:flex-start; gap:0; border:1px solid #e3ecf4; border-radius:14px; background:linear-gradient(180deg,#fbfdff 0%,#fff 100%); padding:.5rem .2rem .3rem 0; }
.lm-yaxis { position:relative; flex:0 0 58px; height:210px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; }
.lm-yband, .lm-ytick { position:absolute; right:.4rem; transform:translateY(-50%); white-space:nowrap; }
.lm-ytick { text-transform:none; letter-spacing:0; font-size:.72rem; color:var(--navy); }
.lm-scroll { flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.lm-track { position:relative; }
.lm-svg { display:block; overflow:visible; }

/* curve */
.lm-grid { stroke:#e3ecf4; stroke-width:1; stroke-dasharray:4 4; }
.lm-axis { stroke:#c9d7e5; stroke-width:1.5; }
.lm-guide { stroke:rgba(13,45,74,.35); stroke-width:1; stroke-dasharray:3 3; }
.lm-area-p { fill:rgba(13,45,74,.16); }
.lm-area-g { fill:rgba(227,167,45,.28); }
.lm-line-p { fill:none; stroke:var(--navy); stroke-width:2.5; stroke-linejoin:round; }
.lm-line-t { fill:none; stroke:var(--gold-dark); stroke-width:1.5; stroke-dasharray:5 3; }
.lm-line-f { fill:none; stroke:#8a1c1c; stroke-width:1.2; stroke-dasharray:2 3; opacity:.7; }
.lm-lbl { font-family:var(--font); font-size:11px; font-weight:800; }
.lm-lbl-peak { fill:#fff; }
.lm-lbl-bg { fill:var(--navy); }
.lm-lbl-floor { fill:#8a1c1c; font-size:10.5px; }
.lm-lbl-g { fill:var(--gold-ink); font-size:10.5px; }
.lm-peak-brk { stroke:var(--navy); stroke-width:2; }

/* the year buttons: a real button per year, roving tabindex */
.lm-years { display:flex; height:46px; position:relative; }
.lm-yr { position:relative; flex:0 0 auto; height:46px; border:0; background:transparent; padding:0; cursor:pointer; font:inherit; color:var(--navy); border-radius:6px; }
.lm-tick { position:absolute; left:50%; top:0; width:1px; height:6px; background:#c9d7e5; transform:translateX(-50%); }
.lm-yr.is-major .lm-tick { height:10px; background:var(--navy); width:2px; }
.lm-yr-age { position:absolute; left:50%; top:12px; transform:translateX(-50%); font-size:.78rem; font-weight:800; line-height:1; }
.lm-yr-yr { position:absolute; left:50%; top:28px; transform:translateX(-50%); font-size:.62rem; font-weight:600; color:#6b7280; line-height:1; }
.lm-yr.is-first .lm-yr-age, .lm-yr.is-first .lm-yr-yr { left:2px; transform:none; }
.lm-yr.is-last .lm-yr-age, .lm-yr.is-last .lm-yr-yr { left:auto; right:2px; transform:none; }
.lm-yr:hover { background:rgba(227,167,45,.18); }
.lm-track.is-armed .lm-yr { background:rgba(227,167,45,.07); }
.lm-track.is-armed .lm-yr:hover { background:rgba(227,167,45,.35); }
.lm-track.is-armed .lm-yr.is-focus, .lm-yr.is-focus:focus { background:rgba(227,167,45,.45); }
.lm-track.is-armed .lm-yr.is-focus::after { content:"▼"; position:absolute; left:50%; top:-14px; transform:translateX(-50%); font-size:.72rem; color:var(--gold-ink); }
.lm-track.is-armed .lm-years { cursor:copy; }

/* placed stickers lane */
.lm-placed { position:relative; height:0; }
.lm-chip { position:absolute; width:34px; height:34px; border-radius:999px; border:2px solid var(--navy); background:#fff; font-size:1.05rem; line-height:1; cursor:grab; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(13,45,74,.15); transition:transform .15s, box-shadow .15s; padding:0; }
.lm-chip::before { content:""; position:absolute; left:50%; top:-8px; width:2px; height:8px; background:var(--navy); transform:translateX(-50%); }
.lm-chip:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(13,45,74,.22); }
.lm-chip.is-armed { background:var(--navy); box-shadow:0 0 0 3px rgba(227,167,45,.5); }

/* legend + rough numbers */
.lm-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-top:.7rem; font-size:.78rem; font-weight:700; color:#555; }
.lm-lg { display:inline-flex; align-items:center; gap:.35rem; }
.lm-lg::before { content:""; width:14px; height:10px; border-radius:3px; display:inline-block; }
.lm-lg-p::before { background:rgba(13,45,74,.16); border:2px solid var(--navy); }
.lm-lg-g::before { background:rgba(227,167,45,.28); border:1.5px dashed var(--gold-dark); }
.lm-lg-f::before { background:transparent; border-top:2px dotted #8a1c1c; height:0; border-radius:0; }
.lm-nums-toggle { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; color:var(--navy); }
.lm-nums-toggle input { width:16px; height:16px; accent-color:var(--navy); }
.lm-nums { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem; margin-top:.7rem; padding:.7rem .9rem; background:#fff7e6; border:1.5px solid rgba(227,167,45,.7); border-left:5px solid var(--gold); border-radius:12px; font-size:.82rem; font-weight:700; color:var(--navy); }
.lm-nums label { display:flex; flex-direction:column; gap:.25rem; }
.lm-in { display:inline-flex; align-items:center; background:#fff; border:2px solid #c9d7e5; border-radius:10px; padding:0 .55rem; }
.lm-in b { color:#6b7280; margin-right:.2rem; }
.lm-in input { width:8.5rem; border:0; background:transparent; font:inherit; font-weight:700; font-size:.95rem; color:var(--navy); padding:.4rem 0; }
.lm-in input:focus { outline:none; }
.lm-in:focus-within { border-color:var(--navy); }
.lm-nums[hidden] { display:none; }
.lm-nums-note { font-weight:600; color:#6b5300; flex-basis:100%; }

/* actions */
.lm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; margin-top:1rem; }
.lm-link { background:none; border:0; color:var(--navy); font:inherit; font-weight:800; font-size:.86rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.3rem .2rem; }
.lm-link:hover { color:var(--gold-ink); }
.lm-toast { font-size:.82rem; font-weight:700; color:#1c7a4e; opacity:0; transition:opacity .2s; }
.lm-toast.is-on { opacity:1; }

/* result card */
.lm-result { display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:1.2rem 1.6rem; margin-top:1.3rem; padding:1.2rem 1.25rem 1.3rem; border:2px solid var(--navy); border-radius:16px; background:#f7fafd; scroll-margin-top:90px; }
.lm-result[hidden] { display:none; }
.lm-res-map { min-width:0; }
.lm-svg-mini { display:block; width:100%; height:auto; background:#fff; border:1px solid #d4e1ee; border-radius:12px; }
.lm-res-cap { margin:.5rem 0 0; font-size:.78rem; font-weight:700; color:#555; }
.lm-res-fine { margin:.4rem 0 0; font-size:.74rem; color:#6b7280; line-height:1.4; }
.lm-res-body { min-width:0; }
.lm-res-read { margin:.2rem 0 .9rem; font-size:1rem; line-height:1.55; color:#333; }
.lm-res-pick { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; padding:.85rem 1rem; background:#fff; border:2px solid #d4e1ee; border-left:6px solid var(--gold); border-radius:12px; }
.lm-res-tag { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-ink); }
.lm-res-pick strong { font-size:1.15rem; color:var(--navy); }
.lm-res-why { flex-basis:100%; font-size:.88rem; color:#555; line-height:1.45; }
.lm-res-also { margin:.8rem 0 0; font-size:.86rem; color:#555; }
.lm-res-also b { color:var(--navy); }
.lm-res-cta { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:1rem; }

/* mobile */
@media (max-width:640px) {
  .lm-wrap { padding:1rem .9rem 1.1rem; }
  .lm-title { font-size:1.15rem; }
  .lm-age { padding-left:.7rem; }
  .lm-stk { font-size:.8rem; padding:.36rem .7rem .36rem .5rem; }
  .lm-yaxis { flex-basis:50px; font-size:.6rem; }
  .lm-result { grid-template-columns:1fr; padding:1rem .9rem 1.1rem; }
  .lm-nums-toggle { margin-left:0; flex-basis:100%; }
  .lm-res-cta .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .lm-stk, .lm-chip, .lm-toast, .lm-age-btn { transition:none; }
  .lm-stk:hover, .lm-chip:hover { transform:none; }
}