/* Months -- Manna / Present family look: warm monochrome shell, Inter + Mulish, white cards with a soft lift. */
:root { --bg:#fcfcfb; --card:#fff; --card-hover:#f7f6f3; --line:rgba(20,20,22,.09); --edge:rgba(20,20,22,.17); --text:#15151a; --dim:#63625f; --faint:#8b8983; --accent:#15151a;
  --past:#1f2a5c; --now:#f26b1d; --future:rgba(20,20,22,.16); --gold:#e0a21a; --soft:rgba(20,20,22,.05);
  --shadow:0 1px 2px rgba(20,20,22,.045), 0 7px 20px -8px rgba(20,20,22,.14); --ease:cubic-bezier(.4,0,.2,1);
  --body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --inter:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
:root[data-theme="dark"] { --bg:#0c0c10; --card:#17171d; --card-hover:#1d1d25; --line:rgba(255,255,255,.09); --edge:rgba(255,255,255,.2); --text:#f3f3f6; --dim:#a4a6b3; --faint:#7b7e8d; --accent:#f3f3f6;
  --past:#8fa2ff; --now:#ff8a3d; --future:rgba(255,255,255,.17); --gold:#f2c14e; --soft:rgba(255,255,255,.06); --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.65); }
* { box-sizing:border-box; margin:0; padding:0; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; padding-bottom:calc(30px + env(safe-area-inset-bottom)); line-height:1.5; }
button, input, textarea { font:inherit; color:inherit; } a { color:inherit; }
.top, .main, .foot { max-width:880px; margin:0 auto; padding-left:16px; padding-right:16px; }
.top { padding-top:calc(14px + env(safe-area-inset-top)); padding-bottom:4px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:clamp(46px,8vw,58px); height:clamp(46px,8vw,58px); border-radius:14px; }
h1 { font:1000 clamp(36px,8vw,54px)/1 var(--inter); letter-spacing:-.03em; } .tag { font:600 12px/1.2 var(--inter); letter-spacing:.08em; text-transform:uppercase; color:var(--now); margin-top:4px; }
.tbtn { margin-left:auto; width:44px; height:44px; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tbtn img { width:36px; height:36px; display:block; pointer-events:none; object-fit:contain; } .tbtn:active { transform:translateY(1px); }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:20px 18px; margin:14px 0; }
h3 { font:800 20px/1.2 var(--inter); letter-spacing:-.01em; margin-bottom:6px; } h4 { font:800 14px/1.3 var(--inter); letter-spacing:.02em; margin:18px 0 6px; text-transform:uppercase; color:var(--dim); }
.sub { color:var(--dim); font-size:15px; } .note, .hint { color:var(--dim); font-size:13.5px; margin-top:10px; } .hint { font-style:italic; }
.kick { font:700 12px/1 var(--inter); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.big { font:900 clamp(30px,7vw,46px)/1.05 var(--inter); letter-spacing:-.03em; margin:8px 0 8px; } .big b { color:var(--now); }
.setrow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 6px; } @media (max-width:560px) { .setrow { grid-template-columns:1fr; } }
label { display:block; font:700 12px/1.2 var(--inter); letter-spacing:.04em; color:var(--dim); } label input:not([type=range]):not([type=checkbox]) { display:block; width:100%; margin-top:6px; font:600 16px/1 var(--body); color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 12px; }
input[type=range] { width:100%; margin-top:10px; accent-color:var(--now); } output { color:var(--text); font-weight:800; }
.math { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; } .math span { display:flex; flex-direction:column; align-items:center; justify-content:center; width:92px; height:92px; border-radius:50%; background:var(--soft); }
.math span.o { background:var(--now); color:#fff; width:104px; height:104px; } .math b { font:900 28px/1 var(--inter); } .math i { font:600 11px/1.2 var(--inter); font-style:normal; text-transform:uppercase; letter-spacing:.06em; opacity:.8; margin-top:2px; } .math em { font:400 26px var(--inter); font-style:normal; color:var(--faint); }
.jump { display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; position:sticky; top:0; z-index:5; background:linear-gradient(var(--bg) 70%, transparent); padding-top:calc(6px + env(safe-area-inset-top)); } .jump::-webkit-scrollbar { display:none; }
.jump a { flex:none; text-decoration:none; font:700 13px/1 var(--inter); padding:10px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.shead { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.seg { display:inline-flex; background:var(--soft); border-radius:999px; padding:3px; } .seg button { border:0; background:none; font:700 12.5px/1 var(--inter); padding:8px 12px; border-radius:999px; cursor:pointer; color:var(--dim); } .seg button[aria-pressed=true] { background:var(--card); color:var(--text); box-shadow:var(--shadow); }
.chk { display:flex; align-items:center; gap:8px; margin:12px 0 6px; font:600 13.5px/1 var(--body); letter-spacing:0; color:var(--dim); } .chk input { width:18px; height:18px; accent-color:var(--now); }
.cal { display:grid; gap:2px; margin:10px auto 6px; max-width:560px; --cols:12; grid-template-columns:30px repeat(var(--cols), 1fr); } .cal.wide { max-width:100%; --cols:40; grid-template-columns:repeat(var(--cols), 1fr); gap:1.5px; }
.cal .yl { font:700 10px/1 var(--inter); color:var(--faint); text-align:right; padding-right:6px; align-self:center; }
.sq { aspect-ratio:1; border-radius:2px; background:transparent; border:1px solid var(--future); cursor:pointer; padding:0; }
.cal.wide .sq { border-radius:1.5px; } .sq.p { background:var(--c, var(--past)); border-color:transparent; } .sq.f { border-color:var(--cf, var(--future)); }
.sq.n { background:var(--now); border-color:var(--now); transform:scale(1.35); z-index:2; box-shadow:0 0 0 2px color-mix(in srgb, var(--now) 35%, transparent); animation:pulse 1.8s ease-in-out infinite; } .sq.sel { outline:2px solid var(--text); outline-offset:1px; z-index:3; }
@keyframes pulse { 50% { box-shadow:0 0 0 5px color-mix(in srgb, var(--now) 15%, transparent); } } @media (prefers-reduced-motion:reduce) { .sq.n { animation:none; } html { scroll-behavior:auto; } }
.legend { display:flex; gap:14px; flex-wrap:wrap; font:600 12.5px/1 var(--body); color:var(--dim); justify-content:center; margin-top:8px; } .legend i { display:inline-block; width:11px; height:11px; border-radius:2px; vertical-align:-1px; margin-right:6px; border:1px solid var(--future); }
.pick { text-align:center; min-height:22px; margin-top:8px; font:600 14px/1.4 var(--body); color:var(--dim); }
.bar { height:14px; border-radius:99px; background:var(--soft); overflow:hidden; margin-top:12px; } .barfill { height:100%; width:0; background:linear-gradient(90deg, var(--past), var(--now)); border-radius:99px; transition:width .6s var(--ease); } .barcap { font:700 13px/1.3 var(--inter); color:var(--dim); margin-top:6px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px; } .stat { background:var(--soft); border-radius:14px; padding:12px; } .stat b { display:block; font:900 24px/1.1 var(--inter); letter-spacing:-.02em; } .stat span { font:600 12px/1.3 var(--inter); color:var(--dim); }
.tbl { margin-top:10px; } .tr { display:grid; grid-template-columns:44px 1fr 62px 48px; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); font:600 14px/1 var(--body); } .tr.h { font:800 11px/1 var(--inter); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.tr.me { background:color-mix(in srgb, var(--now) 12%, transparent); border-radius:10px; border-color:transparent; } .tr .pb { height:8px; background:var(--soft); border-radius:99px; overflow:hidden; } .tr .pb i { display:block; height:100%; background:var(--past); border-radius:99px; } .tr .r { text-align:right; color:var(--dim); }
.stages { display:flex; border-radius:12px; overflow:hidden; margin-top:8px; } .stage { padding:12px 8px; font:700 12px/1.25 var(--inter); color:#fff; min-width:0; position:relative; } .stage small { display:block; font-weight:600; opacity:.85; margin-top:3px; } .stage.cur::after { content:"you are here"; position:absolute; left:0; right:0; bottom:-18px; text-align:center; color:var(--now); font:800 10px/1 var(--inter); letter-spacing:.04em; text-transform:uppercase; } .stages { margin-bottom:22px; overflow:visible; } .stage:first-child { border-radius:12px 0 0 12px; } .stage:last-child { border-radius:0 12px 12px 0; }
.opps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px; } .opp { background:var(--soft); border-radius:14px; padding:12px; position:relative; } .opp b { display:block; font:900 28px/1 var(--inter); letter-spacing:-.02em; color:var(--now); } .opp span { display:block; font:700 13px/1.3 var(--inter); margin-top:4px; } .opp label { margin-top:8px; display:flex; align-items:center; gap:6px; font-weight:600; } .opp label input { width:64px !important; margin:0 !important; padding:7px 8px !important; font-size:15px !important; } .opp .x { position:absolute; right:6px; top:4px; border:0; background:none; font-size:18px; color:var(--faint); cursor:pointer; padding:4px 8px; }
.addopp { display:flex; gap:8px; margin-top:12px; } .addopp input[type=text] { flex:1; min-width:0; font:600 16px/1 var(--body); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; } .addopp input[type=number] { width:76px; font:600 16px/1 var(--body); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 8px; }
.btn { border:0; border-radius:12px; background:var(--accent); color:var(--bg); font:800 14px/1 var(--inter); padding:12px 18px; cursor:pointer; } .btn:active { transform:translateY(1px); }
.clocks { display:grid; gap:10px; margin-top:12px; } @media (min-width:700px) { .clocks { grid-template-columns:repeat(3,1fr); } } .clock { background:var(--soft); border-radius:14px; padding:14px; } .clock p { color:var(--dim); font-size:13.5px; margin:2px 0 8px; } .clock b { display:block; font:800 16px/1.3 var(--inter); margin-top:10px; } .clock .two { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; } .clock label input { padding:9px 8px !important; font-size:15px !important; }
.warn { margin-top:14px; border-radius:14px; padding:14px; background:color-mix(in srgb, var(--gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); } .warn h4 { margin-top:0; color:var(--text); } .warn p { font-size:14px; color:var(--dim); margin-top:6px; } .warn p b { color:var(--text); }
.flip { display:grid; gap:10px; margin:10px 0 12px; } @media (min-width:600px) { .flip { grid-template-columns:1fr 1fr; } } .flip div { border-radius:14px; padding:14px; font:700 18px/1.3 var(--inter); } .flip small { display:block; font:800 11px/1 var(--inter); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; } .no { background:color-mix(in srgb, #e5484d 14%, transparent); } .no small { color:#e5484d; } .yes { background:color-mix(in srgb, #2fa866 16%, transparent); } .yes small { color:#2fa866; }
textarea { width:100%; margin-top:8px; font:500 16px/1.4 var(--body); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; resize:vertical; } .saved { min-height:18px; font:600 12px/1.4 var(--inter); color:var(--faint); margin-top:4px; }
.pastn { border-top:1px solid var(--line); padding:10px 0; font-size:14px; } .pastn b { display:block; font:800 12px/1.3 var(--inter); color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.act5 { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px; } .act5 div { background:var(--soft); border-radius:14px; padding:12px; } .act5 b { display:block; font:800 13px/1.2 var(--inter); text-transform:uppercase; letter-spacing:.04em; color:var(--now); margin-bottom:4px; } .act5 span { font-size:13.5px; color:var(--dim); }
blockquote { margin:18px 0 6px; padding:12px 14px; border-left:3px solid var(--now); font:italic 600 16px/1.4 var(--body); } .close { text-align:center; margin-top:18px; color:var(--dim); } .close b { color:var(--text); font:800 18px/1.3 var(--inter); display:block; margin-top:6px; }
.foot { text-align:center; color:var(--faint); font:600 12px/1.4 var(--inter); padding-top:8px; }
body.hasupd #nm-update { }
.card[id] { scroll-margin-top:64px; }

/* collapsible sections (same three-bar switch as Present: all bars = open, one bar = folded to its title) */
.card[data-fold] { position:relative; } .card[data-fold] > h3, .card[data-fold] > .shead { padding-right:46px; cursor:pointer; }
.fold { position:absolute; top:14px; right:12px; z-index:3; width:36px; height:24px; border:0; border-radius:12px; background:color-mix(in srgb,var(--text) 7%, transparent); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; }
.fold b { display:block; width:16px; height:3px; border-radius:2px; background:var(--faint); opacity:.35; transition:opacity .15s, background .15s; }
.fold.l2 b, .fold.l0 b:first-child { opacity:1; background:var(--text); } .fold.lmix b:nth-child(odd) { opacity:1; background:var(--text); }
@media (hover:hover) { .fold:hover { background:color-mix(in srgb,var(--text) 14%, transparent); } } .fold:focus-visible { outline:2px solid var(--text); outline-offset:1px; }
.jump .gfold { position:relative; top:auto; right:auto; flex:none; align-self:center; width:40px; height:34px; border-radius:17px; margin-right:2px; }
.card.folded > :not(h3):not(.shead):not(.fold) { display:none !important; } .card.folded > .shead > :not(h3) { display:none; } .card.folded { padding-bottom:16px; } .card.folded > h3, .card.folded > .shead > h3 { margin-bottom:0; }

/* six 20-year stage sections (Red 0-19 ... Blue 80-99, Purple 100-119) inside the calendar */
.cal { display:block !important; max-width:620px; } .cal.wide { max-width:100%; }
.sec { margin:12px 0 4px; border-radius:14px; border:1px solid color-mix(in srgb, var(--sc) 40%, transparent); background:color-mix(in srgb, var(--sc) 6%, transparent); padding:10px 10px 12px; }
.sech { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; padding-right:44px; } .sech b { font:800 14px/1.2 var(--inter); color:var(--sc); } .sech em { font:700 13px/1.2 var(--inter); font-style:normal; } .sech small { flex-basis:100%; font:600 12px/1.3 var(--body); color:var(--dim); }
.sdot { width:10px; height:10px; border-radius:3px; background:var(--sc); align-self:center; }
.sech .fold { top:0; right:0; } .sec.sfolded { padding-bottom:10px; }
.grid { display:grid; grid-template-columns:30px repeat(var(--cols), 1fr); gap:2px; margin-top:10px; } .cal.wide .grid { grid-template-columns:repeat(var(--cols), 1fr); gap:1.5px; }
.sq.bey { opacity:.45; border-style:dashed; }

.big .alt { display:block; font-size:.62em; font-weight:800; letter-spacing:-.02em; color:var(--dim); margin-top:4px; }