/* ========================================================================== AJ's Points Earning Calendar White ground, always. No dark mode — AJ's call: "keep the background white not black". Do not re-add a prefers-color-scheme block. The accent colour is driven by ONE token, --theme, set from the data-choice attribute app.js puts on : qantas -> red #E00034 (sampled from AJ's Qantas flow chart) velocity -> purple #5E35B1 (sampled from AJ's Velocity flow chart) both -> pink #E843DE (sampled from AJ's checkout page) Pink #E843DE is also the fixed "action" colour: Use today, Generate. Plain CSS on purpose — Tailwind's Play CDN is documented development-only. ========================================================================== */ :root{ /* ---- surfaces: white, always ---- */ --ground:#FFFFFF; --ground-2:#F1F3F7; --surface:#FFFFFF; --surface-sunk:#F7F8FB; --line:#E2E5EC; --text:#1C1F26; --text-soft:#5B6270; /* How strong a selected box's fill is. One percentage does NOT work across the three themes: at 16% the red reads as a clear pink, the purple is almost grey and the pink is almost white. Measured per theme so all three land at the same apparent strength. Don't collapse these back into one. */ --fill-mix:16%; /* ---- theme: AJ Isaac brand navy until question 1 is answered ---- */ --theme:#0C447C; --theme-dark:#093561; --theme-soft:#E8F0F9; --theme-line:#AFC6DE; /* ---- fixed action pink ---- */ --pink:#E843DE; --pink-dark:#C426BA; --pink-soft:#FDEBFC; --ok:#15803D; --ok-bg:#E4F6EE; --warn:#B4541F; --warn-bg:#FBF0E7; --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(28,31,38,.05),0 6px 20px rgba(28,31,38,.06); --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; --body:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif; } :root[data-choice="qantas"]{ --theme:#E00034; --theme-dark:#B0002A; --theme-soft:#FDEAEE; --theme-line:#F4B3C2; } :root[data-choice="velocity"]{ --theme:#5E35B1; --theme-dark:#48268C; --theme-soft:#F0EAFA; --theme-line:#C7B4E8; --fill-mix:24%; /* purple is the least saturated of the three */ } :root[data-choice="both"]{ --theme:#E843DE; --theme-dark:#C426BA; --theme-soft:#FDEBFC; --theme-line:#F3B6EF; --fill-mix:22%; /* pink sits very close to white */ } *{box-sizing:border-box} html,body{margin:0;padding:0;background:#FFFFFF} body{ font-family:var(--body); color:var(--text); background:var(--ground); line-height:1.55; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; } .hidden{display:none !important} .wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:20px} /* ---------- top bar ---------- */ .topbar{background:var(--theme);color:#FFFFFF;transition:background .25s ease} .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px} .brand{display:flex;align-items:center;gap:10px;min-width:0} .brand-mark{ display:grid;place-items:center;width:32px;height:32px;flex:none; background:#FFFFFF;color:var(--theme); border-radius:8px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em; } .brand-name{font-family:var(--display);font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-right{display:flex;align-items:center;gap:12px;flex:none} .chip{ background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45); padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap; } /* ---------- tabs ---------- */ .tabs{background:#FFFFFF;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .tabs-inner{display:flex;gap:4px} .tab{ appearance:none;background:none;border:0;border-bottom:2px solid transparent; font:inherit;font-family:var(--display);font-weight:600;font-size:14px;color:var(--text-soft); padding:13px 16px;cursor:pointer;display:flex;align-items:center;gap:7px; } .tab:hover{color:var(--theme)} .tab.is-active{color:var(--theme);border-bottom-color:var(--theme)} .tab-emoji{font-size:15px;line-height:1} /* ---------- generic ---------- */ main{padding-block:28px 56px} .hero{margin-bottom:22px;text-align:center} .hero h1{font-family:var(--display);font-size:29px;line-height:1.15;margin:0 0 6px;color:var(--theme);letter-spacing:-.015em;text-wrap:balance} .hero p{margin:0 auto;color:var(--text-soft);max-width:62ch} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px;margin-bottom:16px;box-shadow:var(--shadow); transition:opacity .18s ease; } .card h2{font-family:var(--display);font-size:17px;margin:0 0 4px;display:flex;align-items:center;gap:10px} .card.is-locked{opacity:.42;pointer-events:none} .step-num{ display:grid;place-items:center;width:24px;height:24px;flex:none; background:var(--theme-soft);color:var(--theme);border-radius:50%; font-size:12px;font-weight:700; } .help{margin:2px 0 14px 34px;color:var(--text-soft);font-size:14px;max-width:62ch} @media (max-width:560px){.help{margin-left:0}} /* ---------- choices ---------- */ .choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .choice-grid-2{grid-template-columns:repeat(2,1fr)} @media (max-width:700px){.choice-grid,.choice-grid-2{grid-template-columns:1fr}} /* the one-line answer echo under question 5 */ .cardline{ margin:12px 0 0 34px;font-size:14px;font-weight:600;color:var(--theme); background:var(--theme-soft);border-radius:var(--radius-sm);padding:9px 12px;max-width:72ch; } @media (max-width:560px){.cardline{margin-left:0}} /* the "not financial advice" note under question 5 — deliberately plain and unmissable. Don't shrink it below 13px or tuck it into a collapsed panel. */ .disclaimer{ margin:14px 0 0 34px;font-size:13px;line-height:1.5;color:var(--text-soft); background:var(--warn-bg);border-left:3px solid var(--warn); padding:11px 13px;border-radius:0 8px 8px 0;max-width:72ch; } .disclaimer strong{color:var(--warn)} @media (max-width:560px){.disclaimer{margin-left:0}} .choice{ appearance:none;text-align:left;cursor:pointer;font:inherit; background:#FFFFFF;border:2px solid var(--line);border-radius:var(--radius-sm); padding:16px 16px;display:flex;flex-direction:column;gap:3px;color:var(--text); transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .1s ease; } .choice:hover{border-color:var(--theme-line);background:var(--surface-sunk)} .choice:active{transform:translateY(1px)} .choice-title{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.25} .choice-sub{font-size:13px;color:var(--text-soft)} .choice-meta{font-size:12px;font-weight:600;margin-top:3px;min-height:1em;color:var(--text-soft)} .choice-emoji{font-size:20px;line-height:1;margin-bottom:2px} /* Question 1 paints each box in its OWN colour before anything is picked, so the member sees red / purple / pink up front. These come FIRST — the .is-on rules below have to outrank them, and equal specificity means the later rule wins. Don't reorder this block. */ .choice[data-choice="qantas"],.choice[data-hue="qantas"]{--theme:#E00034;--theme-line:#F4B3C2} .choice[data-choice="velocity"],.choice[data-hue="velocity"]{--theme:#5E35B1;--theme-line:#C7B4E8} .choice[data-choice="both"],.choice[data-hue="both"]{--theme:#E843DE;--theme-line:#F3B6EF} .choice[data-choice],.choice[data-hue]{border-color:var(--theme-line)} .choice[data-choice] .choice-title,.choice[data-hue] .choice-title{color:var(--theme)} .choice[data-choice]:hover,.choice[data-hue]:hover{border-color:var(--theme);background:var(--theme-soft)} /* Selected: a SOFT tint of the theme colour, not a solid block. The strong colour stays on the outline and the title. Solid fills were too loud. */ .choice.is-on, .choice[data-choice].is-on{ border-color:var(--theme); background:color-mix(in srgb, var(--theme) var(--fill-mix), #FFFFFF); box-shadow:0 2px 10px color-mix(in srgb, var(--theme) 18%, transparent); } .choice.is-on .choice-title, .choice[data-choice].is-on .choice-title{color:var(--theme)} .choice.is-on .choice-sub{color:var(--text-soft)} .choice.is-on .choice-meta{color:var(--theme);font-weight:700} /* ---------- fields ---------- */ .row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-left:34px} @media (max-width:560px){.row{margin-left:0}} .field{display:flex;flex-direction:column;gap:5px} .field-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)} input[type="date"]{ font:inherit;font-family:var(--body);font-size:15px;padding:9px 11px;border:1.5px solid var(--line); border-radius:var(--radius-sm);background:#FFFFFF;color:var(--text);min-width:180px; color-scheme:light; } input[type="date"]:focus-visible{outline:2px solid var(--theme);outline-offset:1px;border-color:var(--theme)} .already-list{display:grid;gap:8px;margin-left:34px} @media (max-width:560px){.already-list{margin-left:0}} .already{ display:flex;gap:11px;align-items:flex-start;padding:11px 13px;cursor:pointer; border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#FFFFFF; transition:border-color .15s ease,background .15s ease; } .already:hover{border-color:var(--theme-line)} /* ticked "already done" rows follow the question-1 colour, same soft fill as every other selected box. Not green — green is reserved for tasks you've actually completed in the calendar. */ .already.is-on{ border-color:var(--theme); background:color-mix(in srgb, var(--theme) var(--fill-mix), #FFFFFF); } .already input{margin:3px 0 0;flex:none;width:17px;height:17px;accent-color:var(--theme)} .already-text strong{display:block;font-size:14px} .already-text span{font-size:13px;color:var(--text-soft)} /* ---------- buttons ---------- */ .btn{ appearance:none;font:inherit;font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer; border-radius:var(--radius-sm);padding:13px 24px;border:2px solid transparent; transition:background .15s ease,transform .1s ease; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--pink);color:#FFFFFF;border-color:var(--pink)} .btn-primary:hover:not(:disabled){background:var(--pink-dark);border-color:var(--pink-dark)} .btn-primary:disabled{background:#EDEFF4;border-color:#EDEFF4;color:#9AA1AE;cursor:not-allowed} .btn-ghost{background:#FFFFFF;border-color:var(--theme);color:var(--theme)} .btn-ghost:hover{background:var(--theme-soft)} .linkbtn{ appearance:none;background:none;border:0;font:inherit;font-size:13px;font-weight:700; color:var(--theme);cursor:pointer;padding:6px 2px;text-decoration:underline; text-underline-offset:3px; } /* AJ: "question 3 use today should be in pink" */ #todayBtn{color:var(--pink)} #todayBtn:hover{color:var(--pink-dark)} .topbar .linkbtn{color:#FFFFFF} :focus-visible{outline:2px solid var(--theme);outline-offset:2px;border-radius:4px} .cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px} .cta-note{margin:0;font-size:13px;color:var(--text-soft)} /* ========================================================================== TASK TONES One colour per ongoing task, fixed regardless of the Qantas/Velocity theme, so the calendar stays readable at a glance. Adding a task = adding a tone here plus a `tone` on the task in app.js. Keep them clear of the theme reds and purples, and clear of --ok green, which means "done". ========================================================================== */ /* Three families, one hue each. Within a family the INK stays the same (so every one passes 4.5:1 on white) and the FILL steps lighter — that reads as "different shades of the same colour" without inventing hues that collide with the red/purple/pink theme or with the green that means "done". */ .tone-deals-1,.tone-deals-2 { --tone:#B45309 } /* amber */ .tone-plan-1,.tone-plan-2,.tone-plan-3 { --tone:#0F766E } /* teal */ .tone-money-1,.tone-money-2,.tone-money-3 { --tone:#1D4ED8 } /* blue */ /* Amber reads strongly at a low mix; teal and blue need far more to register at all — AJ's call, and he's right, they were invisible at 13% and 7%. */ .tone-deals-1 { --tone-mix:22% } .tone-deals-2 { --tone-mix:13% } .tone-plan-1,.tone-money-1 { --tone-mix:30% } .tone-plan-2,.tone-money-2 { --tone-mix:22% } .tone-plan-3,.tone-money-3 { --tone-mix:17% } [class*="tone-deals-"],[class*="tone-plan-"],[class*="tone-money-"]{ --tone-soft: color-mix(in srgb, var(--tone) var(--tone-mix,14%), #FFFFFF); } /* ---------- step 6: the routine picker ---------- */ .routine{display:grid;gap:12px;margin-left:34px} .rt-family{ margin:10px 0 -2px;font-size:11px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--text-soft); } .rt-family:first-child{margin-top:0} .rt-when{display:flex;gap:5px;align-items:center} .rt-date{ font:inherit;font-size:14px;padding:7px 10px;border:1.5px solid var(--tone); border-radius:9px;color:var(--tone);font-weight:600; background:color-mix(in srgb, var(--tone) 8%, #FFFFFF);color-scheme:light; } .rt-manage{ appearance:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer; padding:8px 15px;border-radius:999px;border:1.5px solid var(--tone); background:#FFFFFF;color:var(--tone);margin-left:auto; } .rt-manage:hover{background:var(--tone-soft)} @media (max-width:560px){.routine{margin-left:0}} .rt{ border:1.5px solid var(--tone,var(--line));border-radius:var(--radius); background:var(--tone-soft,#FFFFFF);overflow:hidden; } .rt-head{display:flex;align-items:flex-start;gap:11px;padding:13px 15px 11px} .rt-name{margin:0;font-family:var(--display);font-weight:700;font-size:15px;color:var(--tone)} .rt-hint{margin:2px 0 0;font-size:13px;color:var(--text-soft)} .rt-body{ background:#FFFFFF;border-top:1px solid color-mix(in srgb, var(--tone) 22%, #FFFFFF); padding:13px 15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .rt-freq{display:flex;gap:6px} .rt-chip{ appearance:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer; padding:7px 13px;border-radius:999px;border:1.5px solid var(--line); background:#FFFFFF;color:var(--text-soft); } .rt-chip:hover{border-color:var(--tone);color:var(--tone)} .rt-chip.is-on{ border-color:var(--tone);color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, #FFFFFF); } .rt-days{display:flex;gap:5px;margin-left:4px} .rt-day{ appearance:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer; width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line); background:#FFFFFF;color:var(--text-soft); } .rt-day:hover{border-color:var(--tone);color:var(--tone)} .rt-day.is-on{ border-color:var(--tone);color:var(--tone); background:color-mix(in srgb, var(--tone) 16%, #FFFFFF); } .rt-sum{margin:0;font-size:13px;font-weight:700;color:var(--tone)} @media (max-width:640px){ .rt-body{gap:12px} .rt-freq,.rt-days{width:100%} .rt-days{margin-left:0;justify-content:space-between} .rt-day{flex:1;max-width:40px} } /* ---------- the tick box on a routine row ---------- */ .rt-head{cursor:pointer} .rt-tick{ width:19px;height:19px;flex:none;margin:2px 0 0;cursor:pointer; accent-color:var(--tone); } .rt.is-off{opacity:.55} .rt.is-off .rt-body{opacity:.5;pointer-events:none} .rt.is-off .rt-sum{color:var(--text-soft);font-weight:600} /* ---------- reminder panel on the calendar ---------- */ .reminders{margin-top:22px} .rem-row{display:flex;flex-wrap:wrap;gap:10px;margin-left:34px} @media (max-width:560px){.rem-row{margin-left:0}} .rem{ display:inline-flex;align-items:center;gap:9px;cursor:pointer; border:1.5px solid var(--tone);border-radius:999px; background:var(--tone-soft);padding:8px 15px 8px 12px; font-size:14px;font-weight:700;color:var(--tone); } .rem input{width:17px;height:17px;flex:none;cursor:pointer;accent-color:var(--tone)} .rem-n{ font-family:var(--display);font-weight:800;font-size:15px; min-width:1.6em;text-align:right; } .rem.is-off{ border-color:var(--line);background:#FFFFFF;color:var(--text-soft); } .rem.is-off .rem-name{text-decoration:line-through;text-decoration-thickness:1.5px} /* nudge for the step the dialog sent them back to */ .is-flash{animation:flash 1.2s ease} @keyframes flash{ 0%,100%{box-shadow:var(--shadow)} 30%,70%{box-shadow:0 0 0 3px var(--theme), var(--shadow)} } /* ---------- in-page confirm ---------- */ .ask{display:flex;gap:12px;flex-wrap:wrap} .ask .btn{flex:1 1 200px} /* ---------- subscriptions modal ---------- */ .modal-wide{max-width:720px} .subs{padding:16px 20px 22px} .subs-intro{margin:0 0 14px;font-size:14px;color:var(--text-soft)} .subs-count{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm); font-size:14px;font-weight:600;margin-bottom:14px; } .stepper{display:flex;align-items:center;gap:6px} .stepper button{ appearance:none;width:34px;height:34px;border-radius:9px;cursor:pointer; border:1.5px solid var(--line);background:#FFFFFF;font:inherit;font-size:19px; line-height:1;color:var(--theme); } .stepper button:hover:not(:disabled){border-color:var(--theme);background:var(--theme-soft)} .stepper button:disabled{opacity:.35;cursor:not-allowed} .stepper span{min-width:2.2em;text-align:center;font-weight:700;font-size:17px} .subs-list{display:grid;gap:9px} .sub-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .sub-n{ width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%; background:var(--theme-soft);color:var(--theme);font-size:12px;font-weight:700; } .sub-name{ flex:1 1 180px;min-width:0;font:inherit;font-size:14px;padding:9px 11px; border:1.5px solid var(--line);border-radius:9px;background:#FFFFFF;color:var(--text); } .sub-date{ font:inherit;font-size:14px;padding:8px 10px;border:1.5px solid var(--line); border-radius:9px;background:#FFFFFF;color:var(--text);color-scheme:light; } .sub-name:focus-visible,.sub-date:focus-visible{outline:2px solid var(--theme);outline-offset:1px} .sub-freq{display:flex;gap:5px} .sub-freq button{ appearance:none;font:inherit;font-size:12px;font-weight:700;cursor:pointer; padding:7px 11px;border-radius:999px;border:1.5px solid var(--line); background:#FFFFFF;color:var(--text-soft); } .sub-freq button:hover{border-color:var(--theme);color:var(--theme)} .sub-freq button.is-on{ border-color:var(--theme);color:var(--theme); background:color-mix(in srgb, var(--theme) 14%, #FFFFFF); } .subs-note{margin:14px 0 16px;font-size:13px;color:var(--text-soft)} @media (max-width:560px){ .sub-row{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px} .sub-name{flex:1 1 100%} } /* ---------- start from scratch ---------- */ .startover{ margin-top:26px;padding-top:20px;border-top:1px solid var(--line); display:flex;align-items:center;gap:16px;flex-wrap:wrap; } .startover p{margin:0;font-size:13px;color:var(--text-soft);max-width:48ch} .startover .btn{padding:10px 18px;font-size:14px} /* ---------- weekend nudge ---------- */ .nudge{ display:flex;align-items:flex-start;gap:12px; background:var(--warn-bg);border:1.5px solid var(--warn); border-radius:var(--radius);padding:13px 16px;margin-bottom:18px; } .nudge-icon{font-size:18px;line-height:1.4;flex:none} .nudge p{margin:0;font-size:14px;font-weight:600;color:var(--warn)} /* ---------- unlock banner ---------- */ .unlock{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--pink-soft);border:1.5px solid var(--pink); border-radius:var(--radius);padding:14px 16px;margin-bottom:18px; } .unlock p{margin:0;font-size:14px;font-weight:600} .unlock .btn{padding:9px 18px;font-size:14px} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px} .stat{ background:#FFFFFF;border:1px solid var(--line);border-radius:var(--radius); padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px; } .stat-wide{grid-column:1/-1;justify-content:center} .stat-num{font-family:var(--display);font-size:27px;font-weight:700;color:var(--theme);line-height:1.15;letter-spacing:-.02em} .stat-label{font-size:12px;color:var(--text-soft);font-weight:600} .bar{height:9px;background:var(--ground-2);border-radius:999px;overflow:hidden;margin-bottom:7px} .bar-fill{height:100%;width:0;background:var(--theme);border-radius:999px;transition:width .35s ease} @media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}} /* ---------- calendar ---------- */ .cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .cal-head h2{font-family:var(--display);margin:0;font-size:19px;color:var(--theme);min-width:190px} .navbtn{ appearance:none;background:#FFFFFF;border:1.5px solid var(--line);cursor:pointer; width:34px;height:34px;border-radius:50%;font-size:19px;line-height:1;color:var(--theme); } .navbtn:hover{border-color:var(--theme);background:var(--theme-soft)} .cal{ display:grid;grid-template-columns:repeat(7,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow); } .cal-dow{ background:var(--theme);color:#FFFFFF;text-align:center;padding:8px 2px; font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; } .cal-cell{background:#FFFFFF;min-height:92px;padding:6px;display:flex;flex-direction:column;gap:4px} .cal-cell.is-out{background:var(--surface-sunk)} .cal-cell.has-task{cursor:pointer} .cal-cell.has-task:hover{background:var(--theme-soft)} .cal-cell.is-today{box-shadow:inset 0 0 0 2px var(--theme)} .cal-date{font-size:12px;font-weight:700;color:var(--text-soft)} .is-out .cal-date{opacity:.38} .is-today .cal-date{color:var(--theme)} .pill{ font-size:11px;line-height:1.3;padding:4px 6px;border-radius:6px; background:var(--theme-soft);color:var(--theme-dark);font-weight:600; overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .pill.is-recurring{background:var(--warn-bg);color:var(--warn)} .pill[class*="tone-"]{background:var(--tone-soft);color:var(--tone)} .pill.is-done{background:var(--ok-bg);color:var(--ok);text-decoration:line-through;opacity:.85} @media (max-width:640px){ .cal-cell{min-height:66px;padding:4px} .pill{font-size:0;padding:0;height:7px;border-radius:99px;-webkit-line-clamp:1} .pill.is-done{text-decoration:none} } /* ---------- legend ---------- */ .legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--text-soft);font-weight:600} .legend span{display:flex;align-items:center;gap:6px} .dot{width:10px;height:10px;border-radius:3px;display:inline-block} .dot-setup{background:var(--theme)} .dot-recurring{background:var(--warn)} .dot-done{background:var(--ok)} .dot[class*="tone-"]{background:var(--tone)} /* ---------- up next ---------- */ .upnext{margin-top:22px} .upnext h2{margin-bottom:12px} .un-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)} .un-item:first-child{border-top:0} .un-when{font-size:12px;font-weight:700;color:var(--tone,var(--theme));min-width:86px;flex:none;padding-top:2px} .un-title{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px} .un-dot{width:9px;height:9px;border-radius:3px;flex:none;background:var(--tone,var(--theme))} .un-sub{font-size:13px;color:var(--text-soft);margin:2px 0 0} .un-empty{color:var(--text-soft);font-size:14px;margin:0} .export-row{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* ---------- modals ---------- */ .modal-back{ position:fixed;inset:0;background:rgba(28,31,38,.45);z-index:50; display:flex;align-items:flex-end;justify-content:center;padding:0; } @media (min-width:640px){.modal-back{align-items:center;padding:24px}} /* display:flex above beats the `hidden` attribute, which would leave an invisible full-screen overlay swallowing every click. Never remove this. */ .modal-back[hidden],[hidden]{display:none !important} .modal{ background:#FFFFFF;width:100%;max-width:580px;max-height:88vh;overflow-y:auto; border-radius:var(--radius) var(--radius) 0 0; padding-bottom:env(safe-area-inset-bottom,0px); } @media (min-width:640px){.modal{border-radius:var(--radius)}} .modal-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:14px; padding:18px 20px;border-bottom:1px solid var(--line); background:#FFFFFF;position:sticky;top:0; } .modal-day{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-soft)} .modal-head h3{font-family:var(--display);margin:1px 0 0;font-size:22px;color:var(--theme);letter-spacing:-.01em} .modal-prog{margin:3px 0 0;font-size:13px;color:var(--text-soft)} .closebtn{ appearance:none;background:#FFFFFF;border:1.5px solid var(--line);cursor:pointer; width:32px;height:32px;border-radius:50%;font-size:21px;line-height:1;color:var(--text-soft);flex:none; } .closebtn:hover{border-color:var(--theme);color:var(--theme)} .modal-body{padding:16px 20px 22px;display:grid;gap:12px} /* the "which program first?" picker */ .picker{padding:20px 20px 24px} .picker h3{font-family:var(--display);margin:0 0 4px;font-size:20px} .picker p{margin:0 0 16px;font-size:14px;color:var(--text-soft)} .picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .picker-grid-3{grid-template-columns:repeat(3,1fr)} @media (max-width:520px){.picker-grid,.picker-grid-3{grid-template-columns:1fr}} .task{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:#FFFFFF} .task.is-done{border-color:var(--ok);background:var(--ok-bg)} .task-top{display:flex;gap:11px;align-items:flex-start} .task-top input{margin:2px 0 0;flex:none;width:19px;height:19px;accent-color:var(--theme);cursor:pointer} .task-badge{ display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em; padding:3px 8px;border-radius:999px;background:var(--theme);color:#FFFFFF;margin-bottom:5px; } .task-badge.recurring{background:var(--warn)} .task[class*="tone-"]{border-color:var(--tone)} .task[class*="tone-"] .task-badge{background:var(--tone)} .task[class*="tone-"] .task-tip{background:var(--tone-soft);border-left-color:var(--tone)} /* a task you've ticked off is green whatever its tone — done outranks type */ .task.is-done{border-color:var(--ok) !important;background:var(--ok-bg)} .task-name{font-family:var(--display);font-weight:700;font-size:15px;margin:0} .task-do{margin:7px 0 0;font-size:14px} .task-tip{ margin:9px 0 0;font-size:13px;background:var(--theme-soft);border-left:3px solid var(--theme); padding:8px 11px;border-radius:0 6px 6px 0; } .task-earn{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--ok)} .task-note{margin:9px 0 0;font-size:12px;color:var(--warn);font-style:italic} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line);background:#FFFFFF;padding-block:20px;margin-top:20px} .foot p{margin:0;font-size:12px;color:var(--text-soft);max-width:78ch} .foot-dim{margin-top:6px !important;opacity:.75} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }