/* =========================================================
Focus Planner — themeable design system
No emoji anywhere. All icons are hand-drawn inline SVG
injected by app.js via [data-icon] attributes.
Themes are switched at runtime by setting
(see app.js). Each theme only
re-paints CSS custom properties below — structure never
changes — so the layout stays stable while the look
transforms. Reward/motion intensity is controlled by
.
Design choices are grounded in ADHD research:
- user control over color + stimulation is itself
supportive (customization),
- small frequent reward feedback aids task completion,
- excess ambient motion overstimulates, so motion is
purposeful (fires on a win) and always respects
prefers-reduced-motion.
========================================================= */
:root{
/* ---- Structural tokens (shared by every theme) ---- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: var(--font);
--display-spacing: normal;
/* ---- Themeable surface/shape tokens (defaults = Focus) ---- */
--bg-image: none;
--header-bg: var(--surface);
--header-image: none;
--header-fg: var(--text);
--nav-active-bg: transparent;
--card-radius: var(--radius-md);
--card-border-width: 1px;
--card-shadow: var(--shadow-sm);
--btn-radius: var(--radius-md);
--accent-image: var(--primary); /* primary buttons / fab fill */
--check-fill: var(--success); /* completed checkbox fill */
--pill-radius: 999px;
/* ---- Default theme = Focus (high-contrast indigo) ---- */
--bg: #f7f7fb;
--surface: #ffffff;
--surface-2: #eef0f9;
--border: #e2e4f0;
--text: #14161f;
--text-muted: #565a70;
--text-faint: #6b7090;
--primary: #5b4cf5;
--primary-ink: #ffffff;
--primary-soft: #ece8fd;
--success: #16a34a;
--warning: #d97706;
--danger: #ef4444;
--danger-strong: #dc2626;
--cat-work: #2563eb;
--cat-personal: #9333ea;
--cat-health: #108a4a;
--cat-home: #c2570f;
--cat-errand: #0b7d76;
--cat-creative: #db2777;
--cat-none: #6b7280;
--shadow-sm: 0 1px 2px rgba(30,34,51,.06), 0 1px 1px rgba(30,34,51,.04);
--shadow-md: 0 8px 24px rgba(30,34,51,.10);
}
html[data-mode="dark"]{
--bg: #0d0e14;
--surface: #15161f;
--surface-2: #1d1f2d;
--border: #2a2c3d;
--text: #f5f5fa;
--text-muted: #aeb2c8;
--text-faint: #7a7ea0;
--primary: #6566f5;
--primary-soft: #100e1c;
}
/* =========================================================
THEME: Focus (explicit — same as default{ /* inherits defaults above */ }
/* =========================================================
THEME: Candy-pop — bright multi-color gradients, big
bubbly cards, gradient header + buttons. High energy.
========================================================= */
html[data-theme="candy"]{
--bg: #fff5fb;
--bg-image: radial-gradient(1200px 600px at 0% -10%, #ffe1f3 0%, rgba(255,225,243,0) 55%),
radial-gradient(1000px 600px at 100% 0%, #e3f0ff 0%, rgba(227,240,255,0) 55%);
--surface: #fffbfd;
--surface-2: #fdeaf6;
--border: #f6d6ea;
--text: #2a1430;
--text-muted: #7a4d75;
--text-faint: #a877a0;
--primary: #e0359b;
--primary-ink: #fff4fa;
--primary-soft: #ffe3f4;
--success: #0fa36b;
--header-image: linear-gradient(100deg, #ff5fb0 0%, #b14cf5 50%, #5b8bff 100%);
--header-bg: #ff5fb0;
--header-fg: #fff4fa;
--accent-image: linear-gradient(100deg, #ff4fa8 0%, #a24bf6 100%);
--check-fill: linear-gradient(135deg, #ff4fa8, #a24bf6);
--nav-active-bg: #ffe3f4;
--card-radius: 20px;
--card-shadow: 0 10px 26px rgba(225,53,155,.14);
--shadow-md: 0 16px 40px rgba(150,40,170,.22);
--btn-radius: 999px;
--font-display: "Trebuchet MS", "Segoe UI", var(--font);
--cat-work: #2f6bff;
--cat-personal: #b14cf5;
--cat-health: #11b07a;
--cat-home: #ff7a2f;
--cat-errand: #00b3c4;
--cat-creative: #ff3d8b;
--cat-none: #b69ac0;
}
html[data-theme="candy"][data-dark="1"],
html[data-mode="dark"][data-theme="candy"]{
--bg: #1a0f1d;
--bg-image: radial-gradient(1000px 600px at 0% -10%, #3a1533 0%, rgba(58,21,51,0) 55%),
radial-gradient(900px 600px at 100% 0%, #161a3a 0%, rgba(22,26,58,0) 55%);
--surface: #241228;
--surface-2: #2e1733;
--border: #45264a;
--text: #ffe9f7;
--text-muted: #d9a6cf;
--text-faint: #a778a0;
--primary: #ff6fbd;
--primary-soft: #3a1533;
}
/* =========================================================
THEME: Warm friendly — soft peach / coral / teal.
Cheerful, rounded{
--bg: #fcf6ef;
--bg-image: none;
--surface: #fffdfa;
--surface-2: #f6ece1;
--border: #ecdccb;
--text: #2c2620;
--text-muted: #6f5f4f;
--text-faint: #97836f;
--primary: #e2683f;
--primary-ink: #ffffff;
--primary-soft: #fde4d8;
--success: #2f9e74;
--warning: #cf8a1e;
--header-image: linear-gradient(100deg, #ff8a5c 0%, #ef6a4a 100%);
--header-bg: #ef6a4a;
--header-fg: #ffffff;
--accent-image: linear-gradient(100deg, #f47a4e, #e2683f);
--check-fill: linear-gradient(135deg, #3bb083, #2f9e74);
--nav-active-bg: #fde4d8;
--card-radius: 18px;
--card-shadow: 0 6px 18px rgba(180,110,70,.12);
--shadow-md: 0 14px 34px rgba(150,90,55,.18);
--btn-radius: 14px;
--cat-work: #2f7fb0;
--cat-personal: #c4632f;
--cat-health: #2f9e74;
--cat-home: #d98a2b;
--cat-errand: #1f9aa0;
--cat-creative: #d4567f;
--cat-none: #b3a290;
}
/* =========================================================
THEME: Vibrant focused — structured layout, richer color
system, gradient header, colorful category cards.
Fun without chaos. A balanced default-plus.
========================================================= */
html[data-theme="vibrant"]{
--bg: #f4f6fc;
--surface: #fdfdff;
--surface-2: #e9edfb;
--border: #d9def2;
--text: #161a2b;
--text-muted: #4a5170;
--text-faint: #6b7396;
--primary: #4f46e5;
--primary-ink: #f6f7ff;
--primary-soft: #e4e6ff;
--success: #0f9d58;
--header-image: linear-gradient(100deg, #4f46e5 0%, #8a4bf0 55%, #0ea5b7 100%);
--header-bg: #4f46e5;
--header-fg: #f6f7ff;
--accent-image: linear-gradient(100deg, #5b4cf5, #8a4bf0);
--check-fill: linear-gradient(135deg, #16a34a, #0ea5a0);
--nav-active-bg: #e4e6ff;
--card-radius: 16px;
--card-shadow: 0 6px 18px rgba(40,46,90,.10);
--shadow-md: 0 14px 34px rgba(40,46,90,.16);
--btn-radius: 12px;
--cat-work: #2b5fd9;
--cat-personal: #8b3df5;
--cat-health: #0f9d58;
--cat-home: #ea7317;
--cat-errand: #0d9aa0;
--cat-creative: #e0318f;
--cat-none: #8a90ad;
}
html[data-mode="dark"][data-theme="vibrant"]{
--bg: #0c0e1a;
--surface: #161a2b;
--surface-2: #1f2440;
--border: #2c3354;
--text: #f2f4ff;
--text-muted: #aab2d8;
--text-faint: #7b84ad;
--primary: #7c79ff;
--primary-soft: #1a1840;
}
/* =========================================================
THEME: Retro / sticker — chunky outlined shapes, flat
saturated colors{
--bg: #fff8e7;
--surface: #ffffff;
--surface-2: #fff0c9;
--border: #1f1b16;
--text: #1f1b16;
--text-muted: #4a4034;
--text-faint: #6f6453;
--primary: #ff5d3b;
--primary-ink: #ffffff;
--primary-soft: #ffe0b0;
--success: #1ea34d;
--warning: #e08a00;
--danger: #ec3b3b;
--danger-strong: #d62b2b;
--header-image: none;
--header-bg: #ffd23f;
--header-fg: #1f1b16;
--accent-image: #ff5d3b;
--check-fill: #1ea34d;
--nav-active-bg: #ffd23f;
--card-radius: 14px;
--card-border-width: 2.5px;
--card-shadow: 4px 4px 0 #1f1b16;
--shadow-sm: 3px 3px 0 #1f1b16;
--shadow-md: 6px 6px 0 #1f1b16;
--btn-radius: 12px;
--font-display: "Arial Black", "Segoe UI", var(--font);
--display-spacing: .01em;
--cat-work: #2f6bff;
--cat-personal: #8b3df5;
--cat-health: #1ea34d;
--cat-home: #ff8a00;
--cat-errand: #00b3a6;
--cat-creative: #ff3d8b;
--cat-none: #1f1b16;
}
/* =========================================================
THEME: Calm — muted, low-stimulation sage/slate palette.
The least visually busy option (built-in "focus mode").
========================================================= */
html[data-theme="calm"]{
--bg: #f2f4f1;
--surface: #fbfcfa;
--surface-2: #e7ebe5;
--border: #d8ded4;
--text: #232924;
--text-muted: #56605a;
--text-faint: #7c857e;
--primary: #4a7c66;
--primary-ink: #f4f8f4;
--primary-soft: #dfeae3;
--success: #3f8f63;
--warning: #b07d2a;
--header-image: none;
--header-bg: var(--surface);
--header-fg: var(--text);
--accent-image: #4a7c66;
--check-fill: #3f8f63;
--nav-active-bg: transparent;
--card-radius: 14px;
--card-shadow: 0 1px 2px rgba(40,50,44,.06);
--shadow-md: 0 8px 22px rgba(40,50,44,.10);
--cat-work: #3f6f9e;
--cat-personal: #7a6aa6;
--cat-health: #3f8f63;
--cat-home: #a9772f;
--cat-errand: #2f8079;
--cat-creative: #a65f86;
--cat-none: #8a948c;
}
html[data-mode="dark"][data-theme="calm"]{
--bg: #12150f;
--surface: #1a1e16;
--surface-2: #232820;
--border: #333a2f;
--text: #eaf0e7;
--text-muted: #aab3a6;
--text-faint: #7e887b;
--primary: #79b59a;
--primary-soft: #19211c;
}
/* =========================================================
Base resets + structure (theme-independent)
========================================================= */
*{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
font-family: var(--font);
background: var(--bg);
background-image: var(--bg-image);
background-attachment: fixed;
color: var(--text);
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: none;
transition: background-color .3s ease, color .3s ease;
}
h1,h2,h3{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }
/* Every text-like control is themed by default, so new features never fall
back to the browser's stark white boxes (especially glaring in dark mode). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea{
border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
font-size: 14px; background: var(--surface); color: var(--text);
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--primary); outline-offset: 1px; }
html[data-mode="dark"]{ color-scheme: dark; }
ul{ list-style:none; margin:0; padding:0; }
a{ color: var(--primary); }
[data-icon]{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; }
[data-icon] svg{ width:100%; height:100%; display:block; }
#app{
max-width: 720px;
margin: 0 auto;
min-height: 100vh;
padding-bottom: 84px;
display:flex;
flex-direction: column;
}
/* ---------------- Top bar ---------------- */
.topbar{
position: sticky; top:0; z-index: 20;
display:flex; align-items:center; gap:10px;
padding: 10px 14px;
background: var(--header-bg);
background-image: var(--header-image);
color: var(--header-fg);
border-bottom: 1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:6px; color: var(--header-fg); flex-shrink:0; }
.brand-icon{ font-size:22px; }
.brand-name{ display:none; font-weight:800; font-size:15px; font-family: var(--font-display); letter-spacing: var(--display-spacing); }
@media (min-width:560px){ .brand-name{ display:inline; } }
/* On gradient/colored headers the quick-add needs a translucent
field so it reads against the accent rather than fighting it. */
.quick-add{
flex:1; display:flex; align-items:center; gap:8px;
background: var(--surface-2);
border-radius: var(--radius-md);
padding: 9px 12px;
}
.topbar[style] , .quick-add{ }
html[data-theme="candy"] .quick-add,
html[data-theme="vibrant"] .quick-add{
background: rgba(255,255,255,.22);
}
.quick-add-icon{ color: var(--header-fg); opacity:.8; font-size:16px; }
.quick-add input{
flex:1; border:none; background:transparent; outline:none;
font-size:15px; color: var(--header-fg);
}
.quick-add input::placeholder{ color: var(--header-fg); opacity:.6; }
html[data-theme="calm"] .quick-add input{ color: var(--text); }
html[data-theme="calm"] .quick-add-icon{ color: var(--text-faint); }
html[data-theme="calm"] .quick-add input::placeholder{ color: var(--text-faint); opacity:1; }
.inbox-btn{
position:relative; border:none; background:transparent; color: var(--header-fg);
font-size:20px; padding:6px; border-radius: var(--radius-sm);
}
.inbox-count{
position:absolute; top:0; right:0; background: var(--danger-strong); color:#fff;
font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 3px;
}
/* ---------------- Bottom nav ---------------- */
.bottom-nav{
position: fixed; bottom:0; left:0; right:0; z-index: 30;
display:flex; justify-content:space-around;
background: var(--surface);
border-top:1px solid var(--border);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
max-width: 720px; margin:0 auto;
}
.nav-btn{
flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
border:none; background:transparent; color: var(--text-faint);
font-size:11px; font-weight:600; padding:6px 2px; border-radius: var(--pill-radius);
transition: color .15s ease, background .15s ease;
}
.nav-btn [data-icon]{ font-size:21px; }
.nav-btn.active{ color: var(--primary); background: var(--nav-active-bg); }
@media (min-width: 760px){
body{ display:flex; }
#app{ max-width:none; flex:1; padding-bottom:0; margin-left:84px; }
.bottom-nav{
position:fixed; left:0; top:0; bottom:0; right:auto; width:84px;
flex-direction:column; justify-content:flex-start; gap:8px; padding-top:18px;
border-top:none; border-right:1px solid var(--border); max-width:84px;
}
.nav-btn{ flex:none; padding:10px 2px; }
}
/* ---------------- Views / layout ---------------- */
main{ flex:1; padding: 14px; }
.view{ display:none; }
.view.active{ display:block; animation: fadeIn .15s ease-out; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }
.day-header{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.day-title{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.day-title h1{ font-size:20px; font-weight:800; font-family: var(--font-display); letter-spacing: var(--display-spacing); }
.nav-arrow{
border:none; background: var(--surface); box-shadow: var(--shadow-sm);
width:38px; height:38px; border-radius:50%; font-size:16px; color:var(--text-muted);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
transition: transform .12s ease;
}
.link-btn{ border:none; background:none; color: var(--primary); font-size:13px; font-weight:600; padding:2px 4px; display:inline-flex; align-items:center; gap:4px; }
.primary-btn{
border:none; background: var(--accent-image); color: var(--primary-ink);
font-weight:700; font-size:13px; padding:9px 16px; border-radius: var(--btn-radius);
display:inline-flex; align-items:center; gap:6px; box-shadow: var(--shadow-sm);
transition: transform .12s ease, box-shadow .12s ease;
}
.secondary-btn{
border:1px solid var(--border); background: var(--surface); color: var(--text);
font-weight:600; font-size:13px; padding:9px 16px; border-radius: var(--btn-radius);
display:inline-flex; align-items:center; gap:6px;
}
.secondary-btn.small{ padding:6px 12px; font-size:12px; }
.danger-btn{
border:none; background: transparent; color: var(--danger-strong);
font-weight:600; font-size:13px; padding:9px 10px; border-radius: var(--btn-radius);
display:inline-flex; align-items:center; gap:6px;
}
.icon-btn{
border:none; background: transparent; color: var(--text-muted); font-size:18px;
width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover, .nav-arrow:hover{ background: var(--surface-2); }
/* ---------------- Load meter ---------------- */
.load-meter{ margin-bottom:6px; }
.load-meter-track{ background: var(--surface-2); border-radius:6px; height:9px; overflow:hidden; }
.load-meter-fill{ height:100%; background: var(--check-fill); width:0%; transition: width .35s cubic-bezier(.2,.8,.2,1); border-radius:6px; }
.load-meter-fill.warn{ background: var(--warning); }
.load-meter-fill.over{ background: var(--danger); }
.load-meter-label{ font-size:11.5px; color: var(--text-muted); display:block; margin-top:4px; }
.load-warning{
font-size:12.5px; background: #fdf1e0; color:#8a5a14; border-radius: var(--radius-sm);
padding:8px 10px; margin: 6px 0 0;
}
html[data-mode="dark"] .load-warning{ background:#352c18; color:#f0c878; }
/* ---------------- Momentum row ---------------- */
.momentum-row{ display:flex; gap:5px; margin: 14px 0; flex-wrap:wrap; align-items:center; }
.momentum-dot{
width:14px; height:14px; border-radius:50%; background: var(--surface-2);
border:1.5px solid var(--border);
}
.momentum-dot.filled{ background: var(--accent-image); border-color: transparent; }
.momentum-caption{ font-size:11px; color: var(--text-faint); width:100%; margin-top:2px; }
/* ---------------- Trays / lists ---------------- */
.tray{ margin-bottom:14px; }
.tray-title{
display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800;
color: var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em;
font-family: var(--font-display);
}
.tray-title [data-icon]{ font-size:15px; color: var(--primary); }
.tray-hint{ font-size:11px; font-weight:500; text-transform:none; color: var(--text-faint); }
.tray-hint-text{ font-size:12.5px; color: var(--text-faint); margin: -2px 0 10px; line-height:1.5; }
.tray-list{ display:flex; flex-direction:column; gap:8px; }
.empty-hint{ font-size:12.5px; color: var(--text-faint); padding:10px 2px; }
.item-row{
display:flex; align-items:center; gap:10px;
background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius);
padding: 10px 12px; box-shadow: var(--card-shadow);
transition: transform .12s ease, box-shadow .12s ease;
}
.item-cat-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.item-body{ flex:1; min-width:0; }
.item-title{ font-size:14px; font-weight:600; }
.item-title.done{ text-decoration: line-through; color: var(--text-faint); }
.item-sub{ font-size:11.5px; color: var(--text-faint); margin-top:1px; }
.item-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.check-circle{
width:26px; height:26px; border-radius:50%; border:2px solid var(--border);
background:transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:transparent;
transition: transform .12s ease;
}
.check-circle.checked{ background: var(--check-fill); border-color: transparent; color:#fff; }
.day-pick-row{ display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.day-pick-btn{
border:1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
font-size:11px; padding:4px 8px; border-radius:6px; font-weight:600;
}
.day-pick-btn.chosen{ background: var(--accent-image); color:#fff; border-color: transparent; }
/* ---------------- Timeline ---------------- */
.timeline-wrap{ margin-bottom: 90px; }
.timeline{
position:relative;
background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius);
overflow:hidden; box-shadow: var(--card-shadow);
}
.timeline-hour{
position:relative; height:54px; border-top:1px solid var(--border);
font-size:10.5px; color: var(--text-faint); padding:3px 8px 0;
}
.timeline-hour:first-child{ border-top:none; }
.timeline-block{
position:absolute; left:62px; right:8px; border-radius: var(--radius-sm);
padding:5px 8px; overflow:hidden; border-left:4px solid var(--cat-none);
background: var(--surface-2); box-shadow: var(--shadow-sm); cursor:pointer;
min-height: 26px;
}
.timeline-block .item-title{ font-size:12.5px; }
.timeline-block .item-sub{ font-size:10px; }
.timeline-block.done{ opacity:.55; }
.timeline-now-line{ position:absolute; left:0; right:0; height:2px; background: var(--danger-strong); z-index:5; }
.timeline-now-line::before{
content:""; position:absolute; left:0; top:-4px; width:10px; height:10px; border-radius:50%;
background: var(--danger-strong);
}
.fab{
position: fixed; right: max(20px, calc(50vw - 340px + 20px));
bottom: 96px; z-index:25;
width:58px; height:58px; border-radius:50%;
background: var(--accent-image); color:#fff; border:none; font-size:24px;
box-shadow: var(--shadow-md);
transition: transform .14s ease;
}
@media (min-width:760px){ .fab{ right: 24px; bottom:24px; } }
/* ---------------- Weekly view ---------------- */
.intention-banner{
display:flex; align-items:center; gap:8px; background: var(--primary-soft); color: var(--primary);
border-radius: var(--card-radius); padding:10px 14px; font-size:13.5px; font-weight:600; margin-bottom:14px;
}
.week-grid{ display:flex; flex-direction:column; gap:10px; }
.week-day-card{
background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius);
padding:12px; box-shadow: var(--card-shadow);
}
.week-day-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.week-day-name{ font-size:13px; font-weight:800; font-family: var(--font-display); }
.week-day-name.is-today{ color: var(--primary); }
.week-day-load{ font-size:10.5px; color: var(--text-faint); }
.week-day-items{ display:flex; flex-direction:column; gap:6px; }
.week-day-chip{
display:flex; align-items:center; gap:6px; font-size:12px; padding:5px 8px;
background: var(--surface-2); border-radius:6px; border-left:3px solid var(--cat-none);
}
.week-day-empty{ font-size:11.5px; color: var(--text-faint); padding:4px 0; }
/* ---------------- Monthly view ---------------- */
.calendar-grid-wrap{
background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius);
padding:10px; margin-bottom:18px; box-shadow: var(--card-shadow);
}
.calendar-dow{ display:grid; grid-template-columns: repeat(7,1fr); margin-bottom:4px; }
.calendar-dow span{ text-align:center; font-size:10.5px; font-weight:700; color: var(--text-faint); }
.calendar-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:3px; }
.calendar-cell{
position:relative; aspect-ratio: 1/1; border-radius:10px; background: var(--surface-2);
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
padding:4px 2px; font-size:12px; color: var(--text); border:none; cursor:pointer;
transition: transform .1s ease;
}
.calendar-cell.outside{ opacity:.3; }
.calendar-cell.is-today{ background: var(--primary-soft); font-weight:800; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.calendar-cell-dots{ display:flex; gap:2px; margin-top:3px; flex-wrap:wrap; justify-content:center; }
.calendar-cell-dots span{ width:5px; height:5px; border-radius:50%; }
.calendar-cell-flag{ position:absolute; top:2px; right:3px; font-size:9px; color: var(--cat-none); }
/* ---------------- Cards (strategy) ---------------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:12px; }
.strategy-card{
background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius);
padding:14px; text-align:left; box-shadow: var(--card-shadow); display:flex; flex-direction:column; gap:8px;
transition: transform .12s ease, box-shadow .12s ease;
}
.strategy-card-icon{
width:36px; height:36px; border-radius:11px; background: var(--primary-soft); color: var(--primary);
display:flex; align-items:center; justify-content:center; font-size:18px;
}
.strategy-card-name{ font-size:13.5px; font-weight:700; }
.strategy-card-steps{ font-size:11px; color: var(--text-faint); }
/* ---------------- Appearance picker (Toolkit) ---------------- */
.sub-label{
display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800;
color: var(--text-muted); margin: 16px 0 4px; text-transform:uppercase; letter-spacing:.03em;
font-family: var(--font-display);
}
.sub-label [data-icon]{ font-size:14px; color: var(--primary); }
.theme-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin-bottom:6px; }
.theme-card{
position:relative; text-align:left; cursor:pointer;
border:2px solid var(--border); background: var(--surface); border-radius: var(--radius-md);
padding:10px; display:flex; flex-direction:column; gap:8px;
transition: transform .12s ease, border-color .12s ease;
}
.theme-card.selected{ border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.theme-swatch{ height:38px; border-radius:9px; display:flex; overflow:hidden; border:1px solid var(--border); }
.theme-swatch span{ flex:1; }
.theme-card-name{ font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.theme-card-desc{ font-size:11px; color: var(--text-faint); line-height:1.4; }
.theme-card-tick{ width:18px; height:18px; border-radius:50%; background: var(--primary); color:#fff; display:none; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.theme-card.selected .theme-card-tick{ display:inline-flex; }
.motion-row{ display:flex; gap:8px; flex-wrap:wrap; }
.motion-btn{
flex:1; min-width:96px; border:2px solid var(--border); background: var(--surface); color: var(--text);
border-radius: var(--radius-md); padding:10px 8px; font-size:12.5px; font-weight:700;
display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
}
.motion-btn small{ font-weight:500; font-size:10.5px; color: var(--text-faint); }
.motion-btn.selected{ border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.motion-note{ font-size:11.5px; color: var(--text-faint); margin-top:8px; line-height:1.5; }
/* ---------------- Settings ---------------- */
.settings-form{ display:flex; flex-direction:column; gap:12px; }
.settings-form label{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color: var(--text-muted); }
.settings-form input, .settings-form select{
border:1px solid var(--border); border-radius: var(--radius-sm); padding:8px 10px; font-size:14px; background: var(--surface); color: var(--text);
}
/* ---------------- Modals ---------------- */
.modal-overlay{
position: fixed; inset:0; background: rgba(20,22,31,.5); z-index:50;
display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:560px){ .modal-overlay{ align-items:center; } }
.modal{
background: var(--surface); width:100%; max-width:540px; max-height:88vh;
border-radius: 22px 22px 0 0; display:flex; flex-direction:column; overflow:hidden;
box-shadow: var(--shadow-md);
}
@media (min-width:560px){ .modal{ border-radius: var(--radius-lg); } }
.modal-head{
display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-head h2{ font-size:16px; font-weight:800; font-family: var(--font-display); }
.modal-body{ padding:16px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }
.modal-foot{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:14px 18px; border-top:1px solid var(--border); flex-shrink:0;
}
.modal-foot-right{ display:flex; gap:8px; }
.field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color: var(--text-muted); }
.field input, .field select, .field textarea{
border:1px solid var(--border); border-radius: var(--radius-sm); padding:9px 11px; font-size:14px;
background: var(--surface); color: var(--text); font-weight:400;
}
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.field-label{ font-size:12.5px; font-weight:600; color: var(--text-muted); }
.field-label-row{ display:flex; justify-content:space-between; align-items:center; }
.checkbox-field{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; }
.category-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.category-chip{
display:flex; align-items:center; gap:6px; border:1.5px solid var(--border); background: var(--surface);
border-radius: 999px; padding:6px 12px; font-size:12.5px; font-weight:600; color: var(--text-muted);
}
.category-chip.selected{ border-color: currentColor; background: var(--surface-2); color: var(--text); }
.category-chip .dot{ width:9px; height:9px; border-radius:50%; }
.steps-editor{ display:flex; flex-direction:column; gap:6px; }
.step-row{ display:flex; align-items:center; gap:8px; }
.step-row input[type="text"]{ flex:1; border:1px solid var(--border); border-radius: var(--radius-sm); padding:7px 10px; font-size:13px; }
.step-row .icon-btn{ width:28px; height:28px; font-size:14px; }
.ritual-step-indicator{ font-size:11.5px; color: var(--text-faint); font-weight:600; }
.ritual-step-title{ font-size:14px; font-weight:700; margin-bottom:2px; }
.ritual-step-desc{ font-size:12.5px; color: var(--text-muted); margin-bottom:10px; }
.ritual-textarea{ width:100%; min-height:80px; border:1px solid var(--border); border-radius: var(--radius-sm); padding:10px; font-size:14px; font-family:inherit; }
.ritual-empty{ font-size:13px; color: var(--text-faint); text-align:center; padding: 20px 0; }
.ritual-load-row{ display:flex; justify-content:space-between; font-size:12px; padding:6px 0; border-bottom:1px solid var(--border); }
/* ---------------- Timer bar ---------------- */
.timer-bar{
position: fixed; left:50%; transform:translateX(-50%); bottom: 96px; z-index:40;
display:flex; align-items:center; gap:10px;
background: var(--text); color: var(--surface); border-radius: 999px; padding:8px 14px;
box-shadow: var(--shadow-md); font-size:13px;
}
@media (min-width:760px){ .timer-bar{ bottom:24px; } }
.timer-clock{ font-weight:700; font-variant-numeric: tabular-nums; min-width:48px; }
.timer-bar .icon-btn{ color: var(--surface); }
/* ---------------- Toast ---------------- */
.toast{
position: fixed; left:50%; transform:translateX(-50%); top:14px; z-index:60;
background: var(--text); color: var(--surface); padding:9px 16px; border-radius: var(--radius-md);
font-size:13px; box-shadow: var(--shadow-md);
}
.toast.celebrate{ background: var(--accent-image); color: var(--primary-ink); font-weight:700; }
/* =========================================================
Reward + motion (data-motion: standard | calm | off)
Research basis: small, frequent reward feedback supports
task completion in ADHD; excess ambient motion
overstimulates. So motion fires ON A WIN, is user-
controllable here, and is always disabled under
prefers-reduced-motion.
========================================================= */
/* hover/press feedback — only when motion is on */
html[data-motion="standard"] .item-row:hover,
html[data-motion="calm"] .item-row:hover,
html[data-motion="standard"] .strategy-card:hover{ transform: translateY(-2px); }
html[data-motion="standard"] .primary-btn:active,
html[data-motion="standard"] .fab:active{ transform: scale(.94); }
html[data-motion="standard"] .nav-arrow:active{ transform: scale(.9); }
html[data-motion="standard"] .theme-card:hover,
html[data-motion="standard"] .calendar-cell:active{ transform: translateY(-2px); }
html[data-motion="standard"] .day-pill:active,
html[data-motion="standard"] .up-next:active,
html[data-motion="standard"] .water-btn:active,
html[data-motion="standard"] .cat-tile:hover,
html[data-motion="standard"] .interest-chip:active,
html[data-motion="standard"] .tone-chip:active{ transform: scale(.96); }
html[data-motion="standard"] .up-next:hover{ transform: translateY(-2px); }
/* the "pop" on checking something off — the core reward beat */
.check-circle.pop{ animation: checkPop .42s cubic-bezier(.2,1.3,.4,1); }
@keyframes checkPop{
0%{ transform: scale(1); }
35%{ transform: scale(1.32); }
60%{ transform: scale(.92); }
100%{ transform: scale(1); }
}
html[data-motion="off"] .check-circle.pop{ animation: none; }
/* confetti — only on data-motion="standard" */
.confetti-piece{
position: fixed; z-index: 70; width: 9px; height: 9px; border-radius: 2px;
pointer-events: none; will-change: transform, opacity;
animation: confettiFall var(--cdur, 1100ms) cubic-bezier(.15,.6,.4,1) forwards;
}
@keyframes confettiFall{
0%{ transform: translate(0,0) rotate(0deg); opacity:1; }
100%{ transform: translate(var(--cx,0), var(--cy,120px)) rotate(var(--cr,360deg)); opacity:0; }
}
/* streak / all-done celebration ring on the momentum row */
.momentum-dot.celebrate{ animation: dotPulse .6s ease; }
@keyframes dotPulse{ 0%{ transform: scale(1); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } }
/* Reduced-motion: honor the OS setting no matter what is chosen here */
@media (prefers-reduced-motion: reduce){
*{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
.confetti-piece{ display:none !important; }
}
/* =========================================================
Bento "Today" zones + personalization
========================================================= */
/* HERO */
.hero{
background: var(--accent-image);
border-radius: 22px; padding: 16px; margin-bottom: 14px;
color: #fff; box-shadow: var(--card-shadow);
}
.hero-top{ display:flex; align-items:center; gap:14px; }
.hero-ring{ position:relative; width:72px; height:72px; flex-shrink:0; }
.ring-svg{ width:72px; height:72px; transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: rgba(255,255,255,.30); stroke-width:4; }
.ring-fill{ fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1); }
.ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num{ font-size:18px; font-weight:800; font-family: var(--font-display); line-height:1; }
.ring-sub{ font-size:10px; opacity:.85; }
.hero-greet{ flex:1; min-width:0; }
.hero-date{ font-size:12px; opacity:.85; }
.hero-hi{ font-size:20px; font-weight:800; font-family: var(--font-display); letter-spacing: var(--display-spacing); line-height:1.15; }
.hero-progress{ font-size:12.5px; opacity:.9; margin-top:2px; }
.hero-weather{
flex-shrink:0; border:none; background: rgba(255,255,255,.20); color:#fff;
border-radius:14px; padding:8px 10px; display:flex; align-items:center; gap:8px; max-width:130px;
}
.wx-icon{ font-size:20px; }
.wx-main{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.wx-temp{ font-size:14px; font-weight:700; line-height:1.1; }
.wx-place{ font-size:10px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:78px; }
.wx-set{ font-size:11.5px; font-weight:600; }
.hero-message{
margin-top:14px; background: rgba(255,255,255,.16); border-radius:14px; padding:11px 13px;
}
.hero-message-deco{ font-size:15px; opacity:.9; margin-right:6px; vertical-align:-2px; }
.hero-message-text{ font-size:13.5px; font-weight:600; line-height:1.45; }
.tone-switch{ display:flex; gap:6px; margin-top:10px; }
.tone-chip{
border:none; background: rgba(255,255,255,.22); color:#fff; border-radius:999px;
padding:5px 11px; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px;
}
.tone-chip [data-icon]{ font-size:13px; }
.tone-chip.selected{ background:#fff; color: var(--primary); }
/* DAY STRIP */
.day-strip{ display:flex; gap:6px; margin-bottom:14px; }
.day-pill{
flex:1; border:none; background: var(--surface); border:1px solid var(--border);
border-radius:14px; padding:8px 2px 6px; display:flex; flex-direction:column; align-items:center; gap:3px;
color: var(--text-muted); box-shadow: var(--card-shadow);
}
.day-pill-dow{ font-size:10px; font-weight:700; text-transform:uppercase; }
.day-pill-num{ font-size:15px; font-weight:800; font-family: var(--font-display); color: var(--text); }
.day-pill-dot{ width:6px; height:6px; border-radius:50%; background:transparent; }
.day-pill-dot.on{ background: var(--text-faint); }
.day-pill-dot.done{ background: var(--success); }
.day-pill.today .day-pill-dow{ color: var(--primary); }
.day-pill.selected{ background: var(--accent-image); border-color:transparent; color:#fff; }
.day-pill.selected .day-pill-num{ color:#fff; }
.day-pill.selected .day-pill-dot.on{ background: rgba(255,255,255,.85); }
/* UP NEXT */
.up-next{
width:100%; text-align:left; border:none; cursor:pointer;
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-left:5px solid var(--upnext-accent, var(--primary));
border-radius: var(--card-radius); padding:12px 14px; margin-bottom:12px;
display:flex; align-items:center; gap:12px; box-shadow: var(--card-shadow);
}
.up-next-play{
width:44px; height:44px; border-radius:13px; background: var(--accent-image); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.up-next-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.up-next-kicker{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color: var(--primary); font-weight:800; }
.up-next-title{ font-size:15px; font-weight:700; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.up-next-sub{ font-size:11.5px; color: var(--text-faint); }
.up-next-go{ font-size:22px; color: var(--text-faint); flex-shrink:0; }
/* STAT + CATEGORY TILES */
.stat-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.stat-tile{
background: var(--surface-2); border-radius: var(--card-radius); padding:10px 12px;
display:flex; flex-direction:column; gap:1px;
}
.stat-ic{ font-size:15px; color: var(--primary); }
.stat-val{ font-size:19px; font-weight:800; font-family: var(--font-display); color: var(--text); }
.stat-key{ font-size:11px; color: var(--text-faint); }
.cat-tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(92px,1fr)); gap:8px; margin-bottom:12px; }
.cat-tile{
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-top:4px solid var(--tile); border-radius: var(--card-radius); padding:10px 8px;
display:flex; flex-direction:column; align-items:center; gap:3px; box-shadow: var(--card-shadow);
}
.cat-tile-ic{ font-size:18px; color: var(--tile); }
.cat-tile-name{ font-size:11px; font-weight:600; color: var(--text-muted); }
.cat-tile-count{ font-size:13px; font-weight:800; color: var(--text); }
/* RECOMMENDATION */
.reco-card{
display:flex; align-items:center; gap:10px; border-radius: var(--card-radius);
padding:11px 13px; margin-bottom:14px; font-size:13px; font-weight:600;
background: var(--primary-soft); color: var(--text);
}
.reco-card.outdoor{ background: color-mix(in srgb, var(--success) 16%, var(--surface)); }
.reco-ic{ font-size:18px; color: var(--primary); flex-shrink:0; }
.reco-card.outdoor .reco-ic{ color: var(--success); }
.reco-text{ line-height:1.4; }
/* Personalization (Toolkit) */
.loc-row{ display:flex; gap:8px; align-items:center; }
.loc-row input{ flex:1; }
.loc-status{ font-size:11.5px; color: var(--text-faint); margin-top:2px; min-height:14px; }
.interest-grid{ display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.interest-chip{
border:1.5px solid var(--border); background: var(--surface); color: var(--text-muted);
border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600;
}
.interest-chip.selected{ border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.seg{ display:flex; gap:6px; margin-top:4px; }
.seg-btn{
flex:1; border:1.5px solid var(--border); background: var(--surface); color: var(--text);
border-radius:10px; padding:8px; font-size:12.5px; font-weight:700;
}
.seg-btn.selected{ border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.tone-switch-settings{ margin-top:4px; }
.tone-switch-settings .tone-chip{ background: var(--surface-2); color: var(--text-muted); }
.tone-switch-settings .tone-chip.selected{ background: var(--primary); color:#fff; }
/* WATER TRACKER */
.water-card{
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-top:4px solid var(--cat-errand); border-radius: var(--card-radius);
padding:12px 14px; margin-bottom:12px; box-shadow: var(--card-shadow);
}
.water-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.water-title{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; font-family: var(--font-display); color: var(--text); text-transform:uppercase; letter-spacing:.03em; }
.water-title [data-icon]{ color: var(--cat-errand); font-size:16px; }
.water-count{ font-size:12px; font-weight:700; color: var(--text-muted); }
.water-droplets{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.wd{
width:30px; height:30px; border:none; background: var(--surface-2); border-radius:9px;
display:flex; align-items:center; justify-content:center; font-size:17px; color: var(--text-faint);
transition: transform .12s ease, background .12s ease, color .12s ease;
}
.wd.on{ background: color-mix(in srgb, var(--cat-errand) 16%, var(--surface)); color: var(--cat-errand); }
html[data-motion="standard"] .wd:active{ transform: scale(.85); }
html[data-motion="standard"] .wd.on{ animation: dropPop .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes dropPop{ 0%{ transform: scale(1);} 40%{ transform: scale(1.28);} 100%{ transform: scale(1);} }
.water-extra{ font-size:12px; font-weight:800; color: var(--cat-errand); margin-left:2px; }
.water-controls{ display:flex; align-items:center; gap:10px; }
.water-btn{
width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border); background: var(--surface);
color: var(--text); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.water-btn.primary{ background: var(--cat-errand); border-color: transparent; color:#fff; }
.water-bar{ flex:1; height:8px; background: var(--surface-2); border-radius:6px; overflow:hidden; }
.water-bar-fill{ height:100%; background: var(--cat-errand); border-radius:6px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
/* STRATEGY CARDS — differentiated (accent + first-step preview) */
.strategy-card{ border-top:4px solid var(--sc-accent, var(--primary)); }
.strategy-card-icon{ background: color-mix(in srgb, var(--sc-accent, var(--primary)) 16%, var(--surface)); color: var(--sc-accent, var(--primary)); }
.strategy-card-preview{ font-size:11.5px; color: var(--text-muted); line-height:1.4; flex:1;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.strategy-card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.sc-count{ font-size:10.5px; font-weight:700; color: var(--sc-accent, var(--primary)); text-transform:uppercase; letter-spacing:.03em; }
.sc-open{ font-size:15px; color: var(--text-faint); }
/* ============ Simplified "Today" (date / greet / periods / water) ============ */
:root{ --font-script: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery", "Comic Sans MS", cursive; }
.today-datebar{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.today-date-wrap{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.today-date{ font-family: var(--font); font-weight:600; font-size:16px; line-height:1.2; color: var(--text); letter-spacing:-.01em; }
@media (min-width:560px){ .today-date{ font-size:18px; } }
.nav-arrow.ghost{ background:transparent; box-shadow:none; border:1px solid var(--border); }
.greet-card{
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-left:5px solid var(--primary); border-radius: var(--card-radius);
padding:14px; margin-bottom:12px; box-shadow: var(--card-shadow);
}
.greet-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.greet-card .hero-hi{ color: var(--text); font-size:17px; }
.greet-card .hero-weather{ background: var(--surface-2); color: var(--text); border:1px solid var(--border); }
.greet-card .wx-icon{ color: var(--cat-errand); opacity:1; }
.greet-card .wx-temp{ color: var(--text); }
.greet-card .wx-place{ color: var(--text-faint); }
.greet-card .wx-set{ color: var(--text-muted); }
.greet-card .hero-message{ background: var(--primary-soft); margin-top:12px; }
.greet-card .hero-message-text{ color: var(--text); }
.greet-card .hero-message-deco{ color: var(--primary); opacity:1; }
.greet-card .tone-chip{ background: var(--surface-2); color: var(--text-muted); }
.greet-card .tone-chip.selected{ background: var(--primary); color:#fff; }
/* Morning / Afternoon / Evening — visually distinct bands */
.period{ margin-bottom:13px; }
.period-head{
display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800;
font-family: var(--font-display); color: var(--text); margin-bottom:10px;
padding-bottom:7px; border-bottom:2px solid var(--period-accent, var(--border));
}
.period-ic{
width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
background: color-mix(in srgb, var(--period-accent, var(--primary)) 16%, var(--surface));
color: var(--period-accent, var(--primary)); font-size:17px;
}
#periodMorningWrap{ --period-accent: var(--cat-home); } /* warm sunrise */
#periodAfternoonWrap{ --period-accent: var(--cat-errand); } /* bright teal */
#periodEveningWrap{ --period-accent: var(--cat-personal); } /* dusky purple */
.period-empty{ padding:4px 2px; }
/* Present-moment focus (time-blindness aid) */
.period.is-past{ opacity:.62; }
.period.is-past .period-head{ border-bottom-color: var(--border); }
.period.is-now .period-head{ color: var(--text); }
.period-now{
margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color: var(--primary-ink); background: var(--period-accent, var(--primary));
padding:3px 9px; border-radius:999px;
}
.item-row.is-past{ opacity:.55; }
.now-divider{
display:flex; align-items:center; gap:8px; padding:3px 2px 5px; list-style:none;
}
.now-dot{ width:8px; height:8px; border-radius:50%; background: var(--period-accent, var(--primary)); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--period-accent, var(--primary)) 22%, transparent); }
.now-time{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--period-accent, var(--primary)); }
.now-line{ flex:1; height:1px; background: linear-gradient(to right, var(--period-accent, var(--primary)), transparent); opacity:.5; }
html[data-motion="standard"] .now-dot{ animation: nowPulse 2.4s ease-in-out infinite; }
@keyframes nowPulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--period-accent, var(--primary)) 22%, transparent); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--period-accent, var(--primary)) 6%, transparent); } }
/* Water: pre-set timed sips */
.water-slots{ display:flex; flex-wrap:wrap; gap:8px; }
.wslot{
display:flex; flex-direction:column; align-items:center; gap:3px;
border:1.5px solid var(--border); background: var(--surface-2); border-radius:12px;
padding:8px 6px; min-width:52px; color: var(--text-faint);
transition: transform .12s ease, background .12s ease, color .12s ease;
}
.wslot-ic{ font-size:18px; }
.wslot-time{ font-size:10px; font-weight:800; color: var(--text-muted); }
.wslot.on{ background: color-mix(in srgb, var(--cat-errand) 16%, var(--surface)); color: var(--cat-errand); border-color: transparent; }
.wslot.on .wslot-time{ color: var(--cat-errand); }
.wslot.due{ border-color: var(--cat-errand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-errand) 18%, transparent); }
html[data-motion="standard"] .wslot:active{ transform: scale(.9); }
html[data-motion="standard"] .wslot.on{ animation: dropPop .35s cubic-bezier(.2,1.3,.4,1); }
/* Weekly/Monthly bento polish */
.week-day-card{ border-left:5px solid var(--primary); }
.week-day-card .week-day-chip{ border-left-width:4px; }
/* ============ Combined modules: Meals / Fitness / Clean ============ */
/* 7-item bottom nav — tighten so it fits */
.bottom-nav .nav-btn{ font-size:9.5px; gap:2px; }
.bottom-nav .nav-btn [data-icon]{ font-size:19px; }
.view-sub{ font-size:11.5px; color: var(--text-faint); }
/* Today integration cards */
.today-modules{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom:12px; }
.tmod{
display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer;
background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius);
padding:11px; box-shadow: var(--card-shadow);
}
.tmod-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px;
background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }
.tmod-k{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); font-weight:800; }
.tmod-v{ display:block; font-size:12.5px; font-weight:600; color: var(--text); line-height:1.25; }
html[data-motion="standard"] .tmod:active{ transform: scale(.97); }
/* Meals */
.meal-plan{ display:flex; flex-direction:column; gap:6px; }
.meal-row{ display:flex; align-items:center; gap:8px; background: var(--surface); border:var(--card-border-width) solid var(--border);
border-radius: var(--card-radius); padding:6px 8px 6px 12px; box-shadow: var(--card-shadow); }
.meal-row.today{ border-left:4px solid var(--primary); }
.meal-row.open{ outline:2px solid var(--primary-soft); }
.meal-main{ flex:1; display:flex; align-items:center; gap:10px; background:none; border:none; text-align:left; padding:6px 0; min-width:0; }
.meal-dow{ font-size:10px; font-weight:800; text-transform:uppercase; color: var(--text-faint); width:26px; flex-shrink:0; }
.meal-name{ flex:1; font-size:13.5px; font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meal-kcal{ font-size:10.5px; color: var(--text-faint); flex-shrink:0; }
.recipe-detail{ margin-top:10px; background: var(--surface-2); border-radius: var(--card-radius); padding:14px; }
.rd-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.rd-name{ font-size:15px; font-weight:800; font-family: var(--font-display); }
.rd-serv{ font-size:12px; color: var(--text-muted); display:flex; align-items:center; gap:6px; }
.rd-step{ border:1px solid var(--border); background: var(--surface); color: var(--text); width:24px; height:24px; border-radius:50%; font-size:15px; line-height:1; }
.rd-macros{ font-size:12px; color: var(--text-muted); margin:8px 0; }
.rd-each{ color: var(--text-faint); }
.rd-sec{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--primary); font-weight:800; margin:10px 0 5px; }
.rd-ings{ display:flex; flex-direction:column; gap:3px; font-size:13px; }
.rd-ings li{ color: var(--text); }
.rd-steps{ display:flex; flex-direction:column; gap:6px; font-size:13px; padding-left:18px; list-style:decimal; }
.rd-steps li{ color: var(--text); line-height:1.4; }
/* Grocery */
.groc-aisle{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); font-weight:800; margin:12px 0 6px; }
.groc-list{ display:flex; flex-direction:column; gap:5px; }
.groc-item{ display:flex; align-items:center; gap:10px; background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; box-shadow: var(--card-shadow); }
.groc-check{ width:20px; height:20px; border-radius:6px; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.groc-check.checked{ background: var(--check-fill); border-color:transparent; }
.groc-q{ font-size:12px; font-weight:700; color: var(--text-muted); min-width:54px; }
.groc-n{ font-size:13px; color: var(--text); }
.groc-item.done .groc-n{ text-decoration: line-through; color: var(--text-faint); }
/* Nutrition */
.nut-people{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.nut-chip{ border:1.5px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; }
.nut-chip.selected{ border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.nut-chip.add{ border-style:dashed; }
.nut-rings{ display:flex; flex-direction:column; gap:9px; }
.nut-bar-top{ display:flex; justify-content:space-between; font-size:11.5px; color: var(--text-muted); margin-bottom:3px; }
.nut-track{ height:8px; background: var(--surface-2); border-radius:6px; overflow:hidden; }
.nut-fill{ height:100%; background: var(--check-fill); border-radius:6px; transition: width .35s ease; }
.nut-hint{ font-size:11.5px; color: var(--text-faint); margin-top:10px; line-height:1.5; }
.nut-log{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:13px; }
.nut-log span{ flex:1; min-width:120px; }
.nut-editor{ margin-top:12px; }
.nut-editor summary{ font-size:12.5px; font-weight:700; color: var(--primary); cursor:pointer; }
.nut-form{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.nut-lab{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:600; color: var(--text-muted); }
.nut-lab input, .nut-lab select{ border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:13px; background: var(--surface); color: var(--text); font-weight:400; }
.nut-form .danger-btn{ grid-column:1 / -1; justify-content:flex-start; }
/* Fitness */
.fit-phase{ background: var(--accent-image); color: var(--primary-ink); border-radius: var(--card-radius); padding:14px; box-shadow: var(--card-shadow); }
.fit-phase-name{ font-size:17px; font-weight:800; font-family: var(--font-display); }
.fit-phase-sub{ font-size:12.5px; opacity:.9; margin-top:2px; }
.fit-phase-note{ font-size:11px; opacity:.8; margin-top:8px; }
.fit-today-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.fit-today-kicker{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; color: var(--primary); font-weight:800; }
.fit-today-name{ font-size:15px; font-weight:800; font-family: var(--font-display); color: var(--text); }
.fit-moves{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.fit-moves li{ font-size:13px; color: var(--text); padding-left:16px; position:relative; line-height:1.4; }
.fit-moves li::before{ content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background: var(--primary); }
.fit-active, .clean-con{ display:flex; flex-direction:column; gap:2px; }
.fit-active-num, .clean-con-num{ font-size:24px; font-weight:800; font-family: var(--font-display); color: var(--text); }
.fit-active-lbl, .clean-con-lbl{ font-size:11.5px; color: var(--text-faint); line-height:1.5; }
.equip-cal{ display:flex; flex-direction:column; gap:6px; }
.equip-row{ display:flex; align-items:center; gap:10px; }
.equip-day{ font-size:11px; font-weight:800; text-transform:uppercase; color: var(--text-faint); width:34px; }
.equip-sel{ flex:1; border:1px solid var(--border); border-radius:9px; padding:7px 9px; font-size:13px; background: var(--surface); color: var(--text); }
/* Meals: controls, target, day cards */
.meal-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.meal-controls .seg{ flex:1; min-width:180px; }
.meal-target{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; background: var(--surface-2); border-radius:10px; padding:9px 12px; margin-bottom:12px; font-size:12px; color: var(--text-muted); }
.meal-target b{ color: var(--text); }
.mt-diff{ font-weight:800; font-size:11px; padding:2px 9px; border-radius:999px; }
.mt-diff.ok{ color: var(--success); background: color-mix(in srgb, var(--success) 16%, var(--surface)); }
.mt-diff.over{ color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.mt-diff.under{ color: var(--cat-work); background: color-mix(in srgb, var(--cat-work) 16%, var(--surface)); }
.meal-plan{ display:flex; flex-direction:column; gap:10px; }
.meal-day{ background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius); padding:10px 12px; box-shadow: var(--card-shadow); }
.meal-day.today{ border-left:4px solid var(--primary); }
.meal-day-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.meal-day-name{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--text-faint); }
.meal-day-kcal{ font-size:11px; color: var(--text-faint); }
.meal-slot{ display:flex; align-items:center; gap:6px; padding:5px 0; border-top:1px solid var(--border); }
.meal-slot:first-of-type{ border-top:none; }
.meal-slot-main{ flex:1; display:flex; align-items:center; gap:9px; background:none; border:none; text-align:left; min-width:0; padding:2px 0; }
.meal-slot-tag{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--primary); width:56px; flex-shrink:0; }
.meal-slot-name{ flex:1; font-size:13px; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meal-slot.open .meal-slot-name{ white-space:normal; }
.meal-act{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background: var(--surface-2); color: var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
html[data-motion="standard"] .meal-act:active{ transform: scale(.9); }
.leftover-badge{ font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--cat-errand); background: color-mix(in srgb, var(--cat-errand) 16%, var(--surface)); padding:1px 6px; border-radius:999px; }
/* Today integration cards (richer) */
.today-modules{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.tcard{ text-align:left; background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius: var(--card-radius); padding:11px 13px; box-shadow: var(--card-shadow); display:flex; flex-direction:column; gap:5px; cursor:pointer; }
.tcard-head{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); }
.tcard-ic{ color: var(--primary); font-size:15px; }
.tcard-meals{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; color: var(--text); }
.tm-meal b{ display:inline-block; width:14px; color: var(--primary); font-weight:800; }
.tcard-sub{ font-size:12.5px; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcard-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
html[data-motion="standard"] .tcard:active{ transform: scale(.98); }
/* Weekly: meals + cleaning surfaced */
.week-summary{ display:flex; gap:14px; flex-wrap:wrap; width:100%; text-align:left; background: var(--surface-2); border:none; border-radius:10px; padding:9px 12px; margin-bottom:6px; font-size:12px; color: var(--text-muted); cursor:pointer; }
.ws-item b{ color: var(--text); }
.ws-item [data-icon]{ color: var(--primary); }
.week-meal{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-muted); margin:2px 0 8px; }
.week-meal [data-icon]{ color: var(--cat-home); }
/* Fitness: per-exercise breakdown */
.ex-note{ font-size:12px; color: var(--text-muted); background: var(--surface-2); border-radius:8px; padding:8px 10px; margin-bottom:10px; line-height:1.45; }
.ex-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.ex-card{ display:flex; gap:12px; align-items:center; background: var(--surface-2); border-radius:12px; padding:10px 12px; }
.ex-fig{ width:64px; height:46px; flex-shrink:0; color: var(--primary); background: var(--surface); border:1px solid var(--border); border-radius:9px; display:flex; align-items:center; justify-content:center; }
.ex-fig svg{ width:54px; height:40px; }
.ex-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ex-name{ font-size:14px; font-weight:700; color: var(--text); }
.ex-spec{ font-size:12.5px; font-weight:700; color: var(--primary); }
.ex-cue{ font-size:11.5px; color: var(--text-muted); line-height:1.4; }
.ex-demo{ font-size:11.5px; font-weight:700; color: var(--text-muted); text-decoration:none; margin-top:2px; align-self:flex-start; }
.ex-demo:hover{ color: var(--primary); }
/* Cycle-aware planning (optional) */
.cycle-banner{ display:flex; align-items:center; gap:10px; background: var(--surface); border:var(--card-border-width) solid var(--border); border-left:4px solid var(--cat-creative); border-radius: var(--card-radius); padding:10px 12px; margin-bottom:12px; box-shadow: var(--card-shadow); }
.cycle-banner-txt{ font-size:12px; color: var(--text-muted); line-height:1.4; }
.cycle-chip{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--cat-creative); background: color-mix(in srgb, var(--cat-creative) 18%, var(--surface)); padding:3px 9px; border-radius:999px; flex-shrink:0; }
.cycle-note{ font-size:12px; color: var(--text-muted); background: color-mix(in srgb, var(--cat-creative) 10%, var(--surface)); border-radius:10px; padding:9px 11px; margin:10px 0 0; line-height:1.45; }
.cycle-note .cycle-chip{ margin-right:6px; }
.cycle-setting{ border-top:1px solid var(--border); padding-top:12px; margin-top:4px; }
.cycle-toggle{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--text); }
.cycle-toggle input{ width:18px; height:18px; }
.opt-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); border:1px solid var(--border); border-radius:999px; padding:1px 7px; font-weight:700; }
#cycleFields{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
/* Cleaning */
.clean-zone-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.clean-zone-name{ font-size:17px; font-weight:800; font-family: var(--font-display); color: var(--text); }
.clean-zone-week{ font-size:11px; color: var(--text-faint); }
.clean-zone-area{ font-size:12.5px; color: var(--text-muted); margin:4px 0 12px; }
.clean-tasks{ display:flex; flex-direction:column; gap:6px; }
.clean-task{ display:flex; align-items:center; gap:10px; background: var(--surface); border:var(--card-border-width) solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:13.5px; color: var(--text); box-shadow: var(--card-shadow); }
.clean-check{ width:22px; height:22px; border-radius:7px; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.clean-check.checked{ background: var(--check-fill); border-color:transparent; }
.clean-task.done{ color: var(--text-faint); }
.clean-task.done span:not(.clean-check){ text-decoration: line-through; }
/* =========================================================
Elevated identity — typography + premium palettes.
The daily message becomes a serif pull-quote; the childish
wand flourish is retired. Four editorial themes are added,
with Editorial as the default.
========================================================= */
:root{ --font-quote: Georgia, "Iowan Old Style", "Times New Roman", serif; }
/* Retire the playful flourish everywhere */
.hero-message-deco{ display:none !important; }
/* Depth pass — give surfaces material weight instead of flat fills.
A layered resting shadow plus a hairline top highlight (visible on
dark themes, subtle on light) keeps cards from looking pasted-on. */
.greet-card, .water-card, .reco-card, .strategy-card, .week-day-card,
.item-row, .up-next, .calendar-grid-wrap, .timeline, .day-pill, .modal{
box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.tone-chip, .interest-chip, .seg-btn, .wslot, .period-ic, .strategy-card-icon, .stat-ic{
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* The message reads as a quiet pull-quote, not a sticker */
.greet-card .hero-message{
background: transparent; margin-top:14px; padding:2px 0 2px 16px;
border-left:2px solid var(--primary); border-radius:0;
}
.greet-card .hero-message-text{
font-family: var(--font-quote); font-style: italic; font-weight:400;
font-size:16px; line-height:1.55; color: var(--text);
}
.greet-card{ border-left-width: var(--card-border-width); }
.greet-card .hero-hi{
font-family: var(--font-display); font-weight:500; font-size:15px;
letter-spacing:.01em; color: var(--text-muted);
}
.tone-switch{ margin-top:14px; }
.greet-card .tone-chip{
background: transparent; border:1px solid var(--border); color: var(--text-muted);
border-radius:999px; padding:5px 13px; font-size:10.5px; font-weight:700;
text-transform:uppercase; letter-spacing:.12em;
}
.greet-card .tone-chip [data-icon]{ display:none; }
.greet-card .tone-chip.selected{ background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
/* Editorial section headers feel like a magazine, not an app */
.period-head, .tray-title{ letter-spacing:.04em; }
/* ---- THEME: Onyx (default) — bold near-black, bright accent, depth ---- */
html[data-theme="onyx"]{
--bg:#101114;
--bg-image: radial-gradient(900px 520px at 100% -12%, rgba(198,242,78,.07), transparent 60%), radial-gradient(700px 460px at -10% 110%, rgba(90,169,255,.06), transparent 60%);
--surface:#191b20; --surface-2:#212429; --border:#2c3038;
--text:#eef0f3; --text-muted:#a4abb8; --text-faint:#727a88;
--primary:#c6f24e; --primary-ink:#15171b; --primary-soft:#23271a;
--success:#7ed957; --warning:#e0b24e; --danger:#ef6b5e; --danger-strong:#f0796d;
--header-bg:#191b20; --header-image:none; --header-fg:var(--text); --nav-active-bg:#23271a;
--accent-image:linear-gradient(135deg,#d2f55f,#a9e23a); --check-fill:linear-gradient(135deg,#d2f55f,#a9e23a);
--card-radius:16px; --card-border-width:1px;
--card-shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.34);
--shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 18px 42px rgba(0,0,0,.55);
--btn-radius:12px; --font-display:"Helvetica Neue",Arial,sans-serif; --display-spacing:.01em;
--cat-work:#5aa9ff; --cat-personal:#b98cff; --cat-health:#7ed957; --cat-home:#ffae57; --cat-errand:#4fd6c4; --cat-creative:#ff7aa8; --cat-none:#727a88;
}
/* Onyx is dark by design in both system modes (no light override). */
/* ---- THEME: Mono — fine-line{
--bg:#f3f1ec; --bg-image:none;
--surface:#fbfaf7; --surface-2:#ece9e2; --border:#ddd9d0;
--text:#23211d; --text-muted:#6e695f; --text-faint:#9a9488;
--primary:#2c2a25; --primary-ink:#fbfaf7; --primary-soft:#e6e2d9;
--success:#5a6a4f; --warning:#9a7d45; --danger:#9a4a3c; --danger-strong:#85402f;
--header-bg:var(--surface); --header-image:none; --header-fg:var(--text); --nav-active-bg:transparent;
--accent-image:#2c2a25; --check-fill:#2c2a25;
--card-radius:12px; --card-border-width:1px; --card-shadow:0 1px 2px rgba(40,36,28,.05);
--shadow-sm:0 1px 2px rgba(40,36,28,.05); --shadow-md:0 12px 30px rgba(40,36,28,.1);
--btn-radius:9px; --font-display:Georgia,"Times New Roman",serif; --display-spacing:.005em;
--cat-work:#5a5650; --cat-personal:#736d63; --cat-health:#5a6a4f; --cat-home:#8a7350; --cat-errand:#566663; --cat-creative:#7a5f5a; --cat-none:#9a9488;
}
/* ---- THEME: Slate — cool slate{
--bg:#eef0f3; --bg-image: radial-gradient(800px 460px at 100% -10%, rgba(47,109,106,.06), transparent 60%);
--surface:#f9fafb; --surface-2:#e6e9ee; --border:#d6dbe2;
--text:#1c2026; --text-muted:#525a66; --text-faint:#828c99;
--primary:#2f6d6a; --primary-ink:#f4faf9; --primary-soft:#dbeae8;
--success:#2f7d5a; --warning:#b0823f; --danger:#c2503f; --danger-strong:#a8402f;
--header-bg:var(--surface); --header-image:none; --header-fg:var(--text); --nav-active-bg:var(--primary-soft);
--accent-image:linear-gradient(135deg,#358884,#285f5c); --check-fill:linear-gradient(135deg,#358884,#285f5c);
--card-radius:10px; --card-border-width:1px;
--card-shadow:0 1px 2px rgba(28,32,38,.06), 0 8px 20px rgba(28,32,38,.07);
--shadow-sm:0 1px 2px rgba(28,32,38,.06); --shadow-md:0 16px 34px rgba(28,32,38,.14);
--btn-radius:8px; --font-display:"Helvetica Neue",Arial,sans-serif; --display-spacing:.012em;
--cat-work:#3a6ea5; --cat-personal:#6a5fa5; --cat-health:#2f7d5a; --cat-home:#b0823f; --cat-errand:#2f7d76; --cat-creative:#a3506f; --cat-none:#828c99;
}
/* ---- THEME: Editorial — warm stone, charcoal{
--bg:#ece7df; --bg-image:none;
--surface:#f7f3ec; --surface-2:#efe9df; --border:#ddd5c9;
--text:#26241f; --text-muted:#6f685c; --text-faint:#a79e90;
--primary:#5b6647; --primary-ink:#f6f3ec; --primary-soft:#e4e6da;
--success:#5f7a52; --warning:#b08d57; --danger:#a4503f; --danger-strong:#8f4536;
--header-bg:var(--surface); --header-image:none; --header-fg:var(--text); --nav-active-bg:transparent;
--accent-image:#5b6647; --check-fill:#5b6647;
--card-radius:13px; --card-border-width:1px; --card-shadow:0 1px 2px rgba(40,36,28,.05);
--shadow-sm:0 1px 2px rgba(40,36,28,.05); --shadow-md:0 12px 30px rgba(40,36,28,.12);
--btn-radius:10px; --pill-radius:999px;
--font-display:Georgia,"Times New Roman",serif; --display-spacing:.005em;
--cat-work:#4f6276; --cat-personal:#7d6a86; --cat-health:#5f7a52; --cat-home:#a9763f; --cat-errand:#4f7d75; --cat-creative:#9a5f6f; --cat-none:#a79e90;
}
/* ---- THEME: Greige — cool bone, near-black{
--bg:#e9e7e2; --bg-image:none;
--surface:#f4f2ee; --surface-2:#e3e0d9; --border:#d6d2c9;
--text:#1a1a18; --text-muted:#5c5a54; --text-faint:#928f86;
--primary:#2a2a28; --primary-ink:#f4f2ee; --primary-soft:#dedbd3;
--success:#4a5a4a; --warning:#8a7a52; --danger:#8f4536; --danger-strong:#7a392c;
--header-bg:var(--surface); --header-image:none; --header-fg:var(--text); --nav-active-bg:transparent;
--accent-image:#2a2a28; --check-fill:#2a2a28;
--card-radius:11px; --card-border-width:1px; --card-shadow:0 1px 2px rgba(20,20,18,.05);
--shadow-sm:0 1px 2px rgba(20,20,18,.05); --shadow-md:0 12px 30px rgba(20,20,18,.12);
--btn-radius:8px;
--font-display:"Helvetica Neue",Arial,sans-serif; --display-spacing:.02em;
--cat-work:#56606b; --cat-personal:#6f6770; --cat-health:#5a6a55; --cat-home:#8a755a; --cat-errand:#4f6f6a; --cat-creative:#8a6470; --cat-none:#928f86;
}
/* ---- THEME: Sand — clay, espresso{
--bg:#e8ddca; --bg-image:none;
--surface:#f3ebda; --surface-2:#e4d7bf; --border:#d8c8a8;
--text:#3a2c1d; --text-muted:#6f5a40; --text-faint:#9c8a6c;
--primary:#7a5b3a; --primary-ink:#f6efe0; --primary-soft:#e9dcc4;
--success:#6a7a4f; --warning:#b0813f; --danger:#9a4633; --danger-strong:#823a29;
--header-bg:var(--surface); --header-image:none; --header-fg:var(--text); --nav-active-bg:transparent;
--accent-image:#7a5b3a; --check-fill:#7a5b3a;
--card-radius:13px; --card-border-width:1px; --card-shadow:0 1px 3px rgba(70,50,28,.07);
--shadow-sm:0 1px 3px rgba(70,50,28,.07); --shadow-md:0 14px 32px rgba(70,50,28,.15);
--btn-radius:10px;
--font-display:Georgia,"Times New Roman",serif; --display-spacing:.005em;
--cat-work:#5c6a73; --cat-personal:#7d6072; --cat-health:#6a7a4f; --cat-home:#b0813f; --cat-errand:#4f7368; --cat-creative:#a35c5c; --cat-none:#9c8a6c;
}
/* ---- THEME: Noir — dark{
--bg:#1c1b19; --bg-image:none;
--surface:#24221f; --surface-2:#2c2a26; --border:#39362f;
--text:#f0ece3; --text-muted:#b4ad9f; --text-faint:#827b6e;
--primary:#9aa57e; --primary-ink:#1c1b19; --primary-soft:#262a1f;
--success:#8fa06f; --warning:#c2a063; --danger:#cf7a63; --danger-strong:#d98a72;
--header-bg:var(--surface); --header-image:none; --header-fg:var(--text); --nav-active-bg:transparent;
--accent-image:#9aa57e; --check-fill:#9aa57e;
--card-radius:13px; --card-border-width:1px; --card-shadow:0 1px 2px rgba(0,0,0,.35);
--shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 16px 36px rgba(0,0,0,.55);
--btn-radius:10px;
--font-display:Georgia,"Times New Roman",serif; --display-spacing:.005em;
--cat-work:#7e93a8; --cat-personal:#a48fb0; --cat-health:#8fa06f; --cat-home:#c79a63; --cat-errand:#6fa39a; --cat-creative:#c0808f; --cat-none:#827b6e;
}
/* =========================================================
THEME: Spark — the dopamine-bold default.
Vivid saturated color, gradient surfaces, big rounded
shapes, oversized display type, per-view color identity,
and stronger (still win-triggered) reward feedback.
Research grounding, same constraints as the rest of the
app: reward feedback is tied to completions (not ambient),
motion stays user-controllable via data-motion and always
respects prefers-reduced-motion, and no streak mechanics.
Everything below is scoped to html[data-theme="spark"] so
the quieter themes remain intact as options in Toolkit.
========================================================= */
html[data-theme="spark"]{
--bg: #f5f4fe;
--bg-image:
radial-gradient(900px 540px at 8% -12%, rgba(124,58,237,.14), transparent 58%),
radial-gradient(820px 520px at 104% -6%, rgba(236,72,153,.12), transparent 55%),
radial-gradient(760px 560px at 50% 118%, rgba(6,182,212,.10), transparent 60%);
--surface: #ffffff;
--surface-2: #f1eefc;
--border: #e4defa;
--text: #1b1433;
--text-muted: #55496e;
--text-faint: #7a6f96;
--primary: #7c3aed;
--primary-ink: #ffffff;
--primary-soft: #ede6fd;
--success: #0e9f6e;
--warning: #d97706;
--danger: #ef4444;
--danger-strong: #dc2626;
--header-bg: #7c3aed;
--header-image: linear-gradient(108deg, #6d28d9 0%, #a21caf 38%, #db2777 68%, #f97316 104%);
--header-fg: #ffffff;
--nav-active-bg: transparent;
--accent-image: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #ec4899 100%);
--check-fill: linear-gradient(135deg, #10b981, #06b6d4);
--card-radius: 22px;
--card-border-width: 1px;
--card-shadow: 0 2px 6px rgba(84,48,190,.07), 0 14px 34px rgba(84,48,190,.10);
--shadow-sm: 0 1px 3px rgba(84,48,190,.08);
--shadow-md: 0 20px 48px rgba(84,48,190,.20);
--btn-radius: 16px;
--pill-radius: 999px;
--font-display: var(--font);
--display-spacing: -.015em;
--cat-work: #2563eb;
--cat-personal: #9333ea;
--cat-health: #0e9f6e;
--cat-home: #ea580c;
--cat-errand: #0891b2;
--cat-creative: #db2777;
--cat-none: #7a6f96;
}
html[data-mode="dark"][data-theme="spark"]{
--bg: #120b24;
--bg-image:
radial-gradient(900px 540px at 8% -12%, rgba(139,92,246,.20), transparent 58%),
radial-gradient(820px 520px at 104% -6%, rgba(236,72,153,.14), transparent 55%),
radial-gradient(760px 560px at 50% 118%, rgba(6,182,212,.10), transparent 60%);
--surface: #1c1338;
--surface-2: #271b49;
--border: #372a5e;
--text: #f2eeff;
--text-muted: #bdb2dd;
--text-faint: #8d81b3;
--primary: #b79cff;
--primary-ink: #16102b;
--primary-soft: #251a45;
--success: #34d399;
--warning: #fbbf24;
--danger: #f87171;
--danger-strong: #ef4444;
--card-shadow: 0 2px 6px rgba(0,0,0,.35), 0 16px 38px rgba(0,0,0,.38);
--shadow-sm: 0 1px 3px rgba(0,0,0,.35);
--shadow-md: 0 22px 52px rgba(0,0,0,.55);
}
/* ---- Per-view color identity: each module owns a hue, so
"where am I" is answerable at a glance (visual-first parsing
over text). Softs use color-mix so light/dark both adapt. ---- */
html[data-theme="spark"] #view-weekly,
html[data-theme="spark"] #view-monthly{
--primary: #2563eb;
--accent-image: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
html[data-theme="spark"] #view-meals{
--primary: #c2410c; /* darker than the fill gradient so text-on-white stays AA */
--accent-image: linear-gradient(135deg, #f97316, #db2777);
}
html[data-theme="spark"] #view-fitness{
--primary: #047857;
--accent-image: linear-gradient(135deg, #10b981, #06b6d4);
}
html[data-theme="spark"] #view-clean{
--primary: #0e7490;
--accent-image: linear-gradient(135deg, #06b6d4, #3b82f6);
}
html[data-theme="spark"] #view-weekly, html[data-theme="spark"] #view-monthly,
html[data-theme="spark"] #view-meals, html[data-theme="spark"] #view-fitness,
html[data-theme="spark"] #view-clean{
--primary-ink: #ffffff;
--primary-soft: color-mix(in srgb, var(--primary) 13%, var(--surface));
}
html[data-mode="dark"][data-theme="spark"] #view-weekly, html[data-mode="dark"][data-theme="spark"] #view-monthly{ --primary:#8ab2ff; --primary-ink:#101736; }
html[data-mode="dark"][data-theme="spark"] #view-meals{ --primary:#ffa06a; --primary-ink:#2b130a; }
html[data-mode="dark"][data-theme="spark"] #view-fitness{ --primary:#4ade9d; --primary-ink:#07271b; }
html[data-mode="dark"][data-theme="spark"] #view-clean{ --primary:#67d9f0; --primary-ink:#082530; }
/* ---- Top bar: full gradient hero strip ---- */
html[data-theme="spark"] .topbar{
padding: 14px 16px;
border-bottom: none;
box-shadow: 0 10px 28px rgba(109,40,217,.28);
}
html[data-theme="spark"] .quick-add{
background: rgba(255,255,255,.22);
border-radius: 999px;
padding: 10px 15px;
}
html[data-theme="spark"] .quick-add input,
html[data-theme="spark"] .quick-add-icon{ color:#ffffff; }
html[data-theme="spark"] .quick-add input::placeholder{ color:#ffffff; opacity:.75; }
html[data-theme="spark"] .brand-icon{ font-size:24px; }
/* ---- Big, confident type ---- */
html[data-theme="spark"] .today-date{
font-size: 24px; font-weight: 900; letter-spacing: -.02em;
}
@media (min-width:560px){ html[data-theme="spark"] .today-date{ font-size: 28px; } }
html[data-theme="spark"] .day-title h1{ font-size: 24px; font-weight: 900; }
html[data-theme="spark"] .period-head{ font-size: 17px; font-weight: 900; border-bottom-width: 3px; }
html[data-theme="spark"] .period-ic{ width: 36px; height: 36px; border-radius: 12px; font-size: 19px; }
html[data-theme="spark"] .tray-title{
font-size: 13px; letter-spacing: .09em; color: var(--text);
}
html[data-theme="spark"] .tray-title [data-icon]{
width: 26px; height: 26px; border-radius: 9px; font-size: 14px;
background: var(--accent-image); color: #fff;
}
/* ---- Greeting card becomes a true gradient hero ---- */
html[data-theme="spark"] .greet-card{
background: var(--accent-image);
border: none;
color: #fff;
padding: 18px;
box-shadow: 0 14px 36px rgba(139,92,246,.35);
}
html[data-theme="spark"] .greet-card .hero-hi{
color: #fff; font-size: 21px; font-weight: 900; letter-spacing: -.01em;
}
html[data-theme="spark"] .greet-card .hero-weather{
background: rgba(255,255,255,.20); border: none; color: #fff;
}
html[data-theme="spark"] .greet-card .wx-icon,
html[data-theme="spark"] .greet-card .wx-temp,
html[data-theme="spark"] .greet-card .wx-place,
html[data-theme="spark"] .greet-card .wx-set{ color:#fff; }
html[data-theme="spark"] .greet-card .hero-message{
border-left: 3px solid rgba(255,255,255,.65);
}
html[data-theme="spark"] .greet-card .hero-message-text{ color: #fff; }
html[data-theme="spark"] .greet-card .tone-chip{
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff;
}
html[data-theme="spark"] .greet-card .tone-chip.selected{
background: #ffffff; border-color: #ffffff; color: #7c3aed;
}
/* ---- Chunky completion targets (bigger hit area = lower
initiation friction; the pop is the reward beat) ---- */
html[data-theme="spark"] .check-circle{ width: 32px; height: 32px; border-width: 2.5px; font-size: 15px; }
html[data-theme="spark"] .groc-check{ width: 24px; height: 24px; border-radius: 8px; }
html[data-theme="spark"] .clean-check{ width: 26px; height: 26px; border-radius: 9px; }
html[data-theme="spark"] .item-row{ padding: 13px 14px; }
html[data-theme="spark"] .item-title{ font-size: 15px; }
/* ---- Floating pill nav with gradient active state ---- */
@media (max-width: 759px){
html[data-theme="spark"] .bottom-nav{
left: 10px; right: 10px; bottom: 10px;
border: 1px solid var(--border);
border-top: 1px solid var(--border);
border-radius: 26px;
box-shadow: 0 16px 40px rgba(27,20,51,.22);
padding: 8px 6px calc(8px + env(safe-area-inset-bottom)/2);
}
html[data-theme="spark"] #app{ padding-bottom: 104px; }
html[data-theme="spark"] .fab{ bottom: 110px; }
html[data-theme="spark"] .timer-bar{ bottom: 110px; }
}
html[data-theme="spark"] .nav-btn{ font-weight: 800; border-radius: 18px; }
html[data-theme="spark"] .nav-btn.active{
background: var(--accent-image);
color: #ffffff;
box-shadow: 0 6px 16px rgba(139,92,246,.38);
}
/* ---- Buttons, FAB, calendar, misc boldness ---- */
html[data-theme="spark"] .primary-btn{ font-size: 14px; font-weight: 800; padding: 11px 20px; }
html[data-theme="spark"] .fab{
width: 64px; height: 64px; font-size: 26px;
box-shadow: 0 12px 30px rgba(139,92,246,.45), 0 4px 10px rgba(27,20,51,.18);
}
html[data-theme="spark"] .calendar-cell{ border-radius: 14px; font-weight: 600; }
html[data-theme="spark"] .calendar-cell.is-today{
background: var(--accent-image); color: #fff; box-shadow: none;
}
html[data-theme="spark"] .day-pill{ border-radius: 18px; }
html[data-theme="spark"] .day-pill.selected{ box-shadow: 0 8px 20px rgba(139,92,246,.35); }
html[data-theme="spark"] .load-meter-track{ height: 12px; border-radius: 8px; }
html[data-theme="spark"] .water-bar{ height: 11px; }
html[data-theme="spark"] .nut-track{ height: 11px; }
html[data-theme="spark"] .momentum-dot{ width: 17px; height: 17px; }
html[data-theme="spark"] .intention-banner{
background: var(--accent-image); color: #fff; font-weight: 700;
}
html[data-theme="spark"] .fit-phase{ box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 35%, transparent); }
html[data-theme="spark"] .stat-tile{ border-radius: 18px; }
html[data-theme="spark"] .up-next-play{ border-radius: 16px; width: 48px; height: 48px; }
html[data-theme="spark"] .modal{ border-radius: 26px 26px 0 0; }
@media (min-width:560px){ html[data-theme="spark"] .modal{ border-radius: 26px; } }
html[data-theme="spark"] .toast.celebrate{
box-shadow: 0 10px 26px rgba(139,92,246,.4);
}
/* ---- Reward polish (still win-triggered + motion-gated):
progress fills get a moving sheen only while motion is
"standard"; off/calm and OS reduced-motion stay static. ---- */
html[data-theme="spark"][data-motion="standard"] .load-meter-fill,
html[data-theme="spark"][data-motion="standard"] .water-bar-fill,
html[data-theme="spark"][data-motion="standard"] .nut-fill{
background-image: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 70%), var(--check-fill);
background-size: 220% 100%, 100% 100%;
animation: sparkSheen 2.6s linear infinite;
}
@keyframes sparkSheen{
0%{ background-position: 130% 0, 0 0; }
100%{ background-position: -110% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce){
html[data-theme="spark"] .load-meter-fill,
html[data-theme="spark"] .water-bar-fill,
html[data-theme="spark"] .nut-fill{ animation: none !important; }
}
html[data-theme="spark"] .confetti-piece{ width: 11px; height: 11px; border-radius: 3px; }
/* =========================================================
WORK TAB — focus sessions, voice notes, docs, assistant.
Structural styles are theme-neutral; Spark gets a rose/
violet per-view identity like the other modules.
========================================================= */
/* Spark per-view identity for Work */
html[data-theme="spark"] #view-work{
--primary: #be185d; /* AA as text on white (see contrast checks) */
--accent-image: linear-gradient(135deg, #ec4899, #8b5cf6);
--primary-ink: #ffffff;
--primary-soft: color-mix(in srgb, var(--primary) 13%, var(--surface));
}
html[data-mode="dark"][data-theme="spark"] #view-work{ --primary:#f9a8d4; --primary-ink:#3b0a24; }
/* focus session */
.ws-setup{ display:flex; flex-direction:column; gap:12px; }
.ws-lab{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color: var(--text-muted); }
.ws-lab select, .ws-lab input{
border:1px solid var(--border); border-radius: var(--radius-sm); padding:9px 11px;
font-size:14px; background: var(--surface); color: var(--text);
}
.ws-nums{ display:flex; gap:10px; }
.ws-nums .ws-lab{ flex:1; }
.ws-live{
background: var(--accent-image); color: var(--primary-ink);
border-radius: var(--card-radius); padding:18px; text-align:center;
box-shadow: var(--card-shadow);
}
.ws-live.is-break{ background: var(--surface-2); color: var(--text); box-shadow: none; }
.ws-phase{ font-size:11px; font-weight:800; letter-spacing:.14em; opacity:.85; }
.ws-task{ font-size:15px; font-weight:700; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-clock{
font-size:56px; font-weight:800; font-family: var(--font-display);
font-variant-numeric: tabular-nums; line-height:1.1; margin:8px 0 10px;
letter-spacing: -.02em;
}
.ws-track{ height:12px; background: rgba(255,255,255,.25); border-radius:8px; overflow:hidden; }
.ws-live.is-break .ws-track{ background: color-mix(in srgb, var(--text) 12%, transparent); }
.ws-fill{ height:100%; background: rgba(255,255,255,.95); border-radius:8px; transition: width 1s linear; }
.ws-live.is-break .ws-fill{ background: var(--primary); }
.ws-btns{ display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.ws-live .secondary-btn{ background: rgba(255,255,255,.18); border-color: transparent; color: inherit; }
.ws-live .danger-btn{ color: inherit; opacity:.85; }
.ws-live.is-break .secondary-btn{ background: var(--surface); border-color: var(--border); color: var(--text); }
.ws-live.is-break .danger-btn{ color: var(--danger-strong); opacity:1; }
/* add-row shared by tasks/notes */
.wk-add{ display:flex; gap:8px; margin-bottom:10px; }
.wk-add input{
flex:1; border:1px solid var(--border); border-radius: var(--btn-radius);
padding:10px 13px; font-size:14px; background: var(--surface); color: var(--text);
}
.wk-add .primary-btn, .wk-add .secondary-btn{ flex-shrink:0; }
/* voice notes */
.wn-controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.wn-controls .wk-add{ flex:1; min-width:180px; margin-bottom:0; }
.wn-rec{
background: var(--surface); border:var(--card-border-width) solid var(--danger);
border-radius: var(--card-radius); padding:14px; margin-bottom:10px;
display:flex; flex-direction:column; gap:10px; align-items:flex-start;
box-shadow: var(--card-shadow);
}
.wn-pulse{ width:12px; height:12px; border-radius:50%; background: var(--danger); }
html[data-motion="standard"] .wn-pulse{ animation: wnPulse 1.4s ease-in-out infinite; }
@keyframes wnPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 35%, transparent);} 50%{ box-shadow:0 0 0 9px color-mix(in srgb, var(--danger) 0%, transparent);} }
.wn-live{ font-size:14px; color: var(--text); line-height:1.5; min-height:22px; }
.wn-rec .ws-btns{ margin-top:2px; justify-content:flex-start; }
.wn-list{ margin-top:4px; }
.wn-text{ font-size:13.5px; color: var(--text); line-height:1.45; white-space:pre-wrap; }
/* documents */
.wd-import{ position:relative; overflow:hidden; }
.wd-preview{ background: var(--surface-2); border-radius: var(--radius-md); padding:10px 12px; }
.wd-preview pre{
margin:0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size:11.5px; line-height:1.5; color: var(--text-muted);
white-space:pre-wrap; word-break:break-word; max-height:260px; overflow-y:auto;
}
/* assistant chat */
.wc-log{
display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto;
padding:4px 2px; margin-bottom:10px;
}
.wc-msg{ display:flex; }
.wc-msg.user{ justify-content:flex-end; }
.wc-bubble{
max-width:86%; border-radius:18px; padding:10px 14px; font-size:13.5px; line-height:1.5;
background: var(--surface-2); color: var(--text); border:1px solid var(--border);
white-space:normal; word-break:break-word;
}
.wc-msg.user .wc-bubble{
background: var(--accent-image); color: var(--primary-ink); border:none;
border-bottom-right-radius:6px;
}
.wc-msg.bot .wc-bubble{ border-bottom-left-radius:6px; }
.wc-thinking{ color: var(--text-faint); font-style:italic; }
.wc-input{ display:flex; gap:8px; }
.wc-input input{
flex:1; border:1px solid var(--border); border-radius:999px; padding:11px 16px;
font-size:14px; background: var(--surface); color: var(--text);
}
.wc-settings{ margin-top:12px; }
.wc-settings summary{ font-size:12.5px; font-weight:700; color: var(--primary); cursor:pointer; }
.wc-settings .settings-form{ margin-top:10px; }
/* assistant quick-action chips */
.wc-quick{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.wc-chip{
border:1.5px solid var(--border); background: var(--surface); color: var(--text-muted);
border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer;
}
.wc-chip:hover{ border-color: var(--primary); color: var(--primary); }
/* =========================================================
PRINT VERSION — any tab becomes a clean paper page via the
browser's Print command (Ctrl/Cmd+P). Chrome/app UI, nav,
buttons and inputs disappear; content prints black-on-white
with hairline card borders. A printed daily or weekly page
doubles as the paper fallback ADHD planning often needs.
========================================================= */
@media print{
*, *::before, *::after{
background: #ffffff !important;
background-image: none !important;
color: #111111 !important;
box-shadow: none !important;
text-shadow: none !important;
animation: none !important;
transition: none !important;
}
body{ background: #ffffff !important; }
.topbar, .bottom-nav, .fab, .timer-bar, .toast, .modal-overlay,
.nav-arrow, .icon-btn, .primary-btn, .secondary-btn, .danger-btn,
.link-btn, .quick-add, .inbox-btn, .tone-switch, .wc-input, .wc-quick,
.wc-settings, .wk-add, .wn-controls, .wn-rec, .ws-setup, .ws-btns,
.meal-act, .rd-step, .day-strip, .hero-weather, .water-controls,
input[type="checkbox"], select, .theme-grid, .motion-row{
display: none !important;
}
#app{ max-width: none; margin: 0; padding: 0; }
main{ padding: 0; }
.view{ display:none !important; }
.view.active{ display:block !important; }
.item-row, .week-day-card, .meal-day, .calendar-grid-wrap, .greet-card,
.water-card, .strategy-card, .clean-task, .groc-item, .wc-bubble,
.wd-preview, .timeline, .cycle-banner, .fit-phase, .up-next{
border: 1px solid #999999 !important;
page-break-inside: avoid;
}
.check-circle, .groc-check, .clean-check{
border: 1.5px solid #555555 !important;
color: transparent !important;
}
.check-circle.checked::after, .groc-check.checked::after, .clean-check.checked::after{
content: "X"; color: #111111 !important; font-size: 13px; font-weight: 700;
}
.tray{ page-break-inside: avoid; }
.tray-title, .period-head, .day-title h1, .today-date{
color: #111111 !important; border-color: #999999 !important;
}
a{ text-decoration: underline; }
.wc-log{ max-height: none; overflow: visible; }
}
/* ---- adaptive engine panel (Toolkit) ---- */
.adapt-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:12px; }
.adapt-line{
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-left:4px solid var(--primary); border-radius: var(--radius-md);
padding:10px 13px; font-size:13px; color: var(--text); line-height:1.5;
}
.adapt-suggestions{ display:flex; flex-direction:column; gap:9px; margin-bottom:8px; }
.adapt-sug{
display:flex; align-items:center; gap:12px; justify-content:space-between;
background: var(--primary-soft); border-radius: var(--radius-md);
padding:11px 13px; font-size:12.5px; color: var(--text); line-height:1.45;
}
.adapt-sug .small-apply{ flex-shrink:0; font-size:12px; padding:8px 14px; }
.adapt-foot{ margin-top:6px; }
/* ---- account & sync panel ---- */
.sync-status{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.sync-line{ font-size:13px; color: var(--text); line-height:1.5; }
#syncPanel .settings-form{ gap:10px; }
/* ---- per-person meal alternates ---- */
.meal-alt-line{
display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-muted);
padding:3px 0 3px 66px; line-height:1.4;
}
.meal-alt-name{ font-weight:800; color: var(--primary); }
.meal-alt-x{
margin-left:auto; width:22px; height:22px; border:none; background: var(--surface-2);
border-radius:7px; color: var(--text-faint); font-size:11px;
display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
}
.meal-alt-pick{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
background: var(--primary-soft); border-radius:10px; padding:8px 10px; margin:4px 0 4px 0;
}
.meal-alt-hint{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--primary); }
.alt-person-chip{
border:1.5px solid var(--border); background: var(--surface); color: var(--text);
border-radius:999px; padding:4px 11px; font-size:12px; font-weight:700; cursor:pointer;
}
.meal-alt-hint2{ width:100%; font-size:10.5px; color: var(--text-faint); }
/* auto per-person meal lines: tappable name opens their recipe */
.meal-alt-main{
flex:1; min-width:0; background:none; border:none; text-align:left; cursor:pointer;
font-size:12px; color: var(--text-muted); padding:2px 0; line-height:1.4;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.meal-alt-line{ padding-left:38px; }
.meal-alt-line .meal-act{ width:24px; height:24px; font-size:11px; }
/* per-person target rows in the Meals header */
.mt-row{ display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; width:100%; padding:2px 0; }
.mt-row + .mt-row{ border-top:1px dashed var(--border); padding-top:6px; margin-top:4px; }
.mt-name{ color: var(--text); }
/* flat day list: subtle primary edge, no band headers */
#periodDayWrap{ --period-accent: var(--primary); margin-bottom:14px; }
/* ---- clean interval timer + visible task rows ---- */
.ct-live{
background: var(--accent-image); color: var(--primary-ink);
border-radius: var(--card-radius); padding:16px; text-align:center;
margin: 10px 0 12px; box-shadow: var(--card-shadow);
}
.ct-task{ font-size:14px; font-weight:700; }
.ct-clock{
font-size:48px; font-weight:800; font-family: var(--font-display);
font-variant-numeric: tabular-nums; line-height:1.1; margin:6px 0 10px; letter-spacing:-.02em;
}
.ct-track{ height:11px; background: rgba(255,255,255,.28); border-radius:8px; overflow:hidden; }
.ct-fill{ height:100%; background: rgba(255,255,255,.95); border-radius:8px; transition: width 1s linear; }
.ct-live .secondary-btn{ background: rgba(255,255,255,.18); border-color: transparent; color: inherit; }
.ct-live .danger-btn{ color: inherit; opacity:.85; }
.ct-text{ flex:1; min-width:0; }
.ct-min{
font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
color: var(--primary); background: var(--primary-soft);
padding:2px 8px; border-radius:999px; flex-shrink:0;
}
.ct-play{
width:30px; height:30px; border:none; border-radius:10px; flex-shrink:0; cursor:pointer;
background: var(--accent-image); color: var(--primary-ink); font-size:14px;
display:flex; align-items:center; justify-content:center;
}
.clean-task.timing{ outline:2px solid var(--primary); }
/* ---- pre-scheduled cleaning week overview ---- */
.cs-week{ display:flex; flex-direction:column; gap:7px; }
.cs-day{
display:flex; gap:10px; align-items:flex-start;
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-radius: var(--radius-md); padding:9px 12px;
}
.cs-day.is-today{ border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.cs-dow{ font-size:11px; font-weight:800; text-transform:uppercase; color: var(--text-faint); width:32px; flex-shrink:0; padding-top:2px; }
.cs-day.is-today .cs-dow{ color: var(--primary); }
.cs-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-big{ font-size:13px; font-weight:700; color: var(--text); }
.cs-big em{ font-style:normal; font-size:10.5px; font-weight:800; color: var(--primary); }
.cs-big.done{ text-decoration:line-through; color: var(--text-faint); }
.cs-light{ font-size:12.5px; font-weight:600; color: var(--text-faint); }
.cs-smalls{ font-size:11.5px; color: var(--text-muted); line-height:1.4; }
.cs-small.done{ text-decoration:line-through; color: var(--text-faint); }
.ct-bigtag{
font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
color: var(--primary); background: var(--primary-soft); padding:1px 6px; border-radius:999px; margin-left:4px;
}
/* cleaning inside each weekly day card */
.week-clean{
display:flex; align-items:flex-start; gap:6px; font-size:12px; color: var(--text-muted);
margin:2px 0 8px; cursor:pointer; line-height:1.45;
}
.week-clean [data-icon]{ color: var(--primary); flex-shrink:0; margin-top:1px; }
.week-clean-txt{ flex:1; min-width:0; }
.wcb{ color: var(--text); font-weight:700; }
.wcb.done, .wcs.done{ text-decoration:line-through; color: var(--text-faint); }
/* breakfast-prep toggle in meal controls */
.prep-b{ font-size:12.5px; font-weight:600; color: var(--text-muted); white-space:nowrap; }
/* your-recipes: discover links + add form */
.rc-discover{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.rc-discover .wc-chip{ text-decoration:none; display:inline-flex; align-items:center; }
.rc-goalnote{ width:100%; font-size:10.5px; color: var(--text-faint); }
.rc-form{ margin-top:10px; }
.rc-form summary{ font-size:12.5px; font-weight:700; color: var(--primary); cursor:pointer; }
.rc-form .settings-form{ margin-top:10px; }
.rc-form textarea{ border:1px solid var(--border); border-radius: var(--radius-sm); padding:9px 11px; font-size:13px; background: var(--surface); color: var(--text); font-family:inherit; }
/* ---- meals sub-tabs ---- */
.meal-subtabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.mt-tab{
flex:1; min-width:80px; border:1.5px solid var(--border); background: var(--surface);
color: var(--text-muted); border-radius:999px; padding:9px 10px;
font-size:12.5px; font-weight:800; cursor:pointer;
}
.mt-tab.active{ background: var(--accent-image); border-color:transparent; color: var(--primary-ink); }
/* pantry-aware grocery */
.groc-have{
font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface));
padding:2px 8px; border-radius:999px; margin-left:auto; flex-shrink:0;
}
.groc-item.have .groc-n{ color: var(--text-muted); }
/* barcode scan overlay */
.scan-overlay{
position:fixed; inset:0; z-index:80; background:#000;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.scan-video{ width:100%; max-height:70vh; object-fit:cover; }
.scan-hint{ color:#fff; font-size:14px; font-weight:700; }
.scan-cancel{ background:#fff; }
/* fitness goal program card */
.fg-card{
background: var(--surface); border:var(--card-border-width) solid var(--border);
border-left:4px solid var(--primary); border-radius: var(--card-radius);
padding:13px 14px; box-shadow: var(--card-shadow);
}
.fg-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px; color: var(--text); }
.fg-week{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--primary); }
.fg-rx{ font-size:13px; color: var(--text); line-height:1.5; margin:8px 0 6px; }
.fg-progress{ font-size:11.5px; color: var(--text-muted); margin-bottom:10px; }
/* coaching line + push state on the goal card */
.fg-coach{
font-size:12.5px; font-weight:600; color: var(--primary);
background: var(--primary-soft); border-radius:10px; padding:8px 11px;
margin-bottom:10px; line-height:1.45;
}
.fg-card.fg-push{ border-left-color: var(--warning); }
.fg-card.fg-push .fg-coach{ color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
/* liked meals: heart button state */
.meal-act.like.liked{ background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); border-color: transparent; }
/* =========================================================
THEME: Meadow — the earthy, feminine, light default.
Warm cream, terracotta, sage and dusty rose; soft serif
display type; simple original hand-drawn line art (arches,
stems, little suns) woven into the background at a whisper.
All line art is drawn here as inline SVG — nothing traced
or copied. Contrast pairs checked >=4.5:1 for text roles.
========================================================= */
html[data-theme="meadow"]{
--bg: #f7f5ea;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #fefdf6;
--surface-2: #efefdd;
--border: #dfe0c8;
--text: #3f4234;
--text-muted: #686d52;
--text-faint: #969a7e;
--primary: #5a6b42;
--primary-ink: #fffdf4;
--primary-soft: #e9edd7;
--success: #557a4b;
--warning: #a9762b;
--danger: #b04a3a;
--danger-strong: #9c3f30;
--header-bg: #f0f0dc;
--header-image: none;
--header-fg: #40442f;
--nav-active-bg: #e8ead0;
--accent-image: linear-gradient(135deg, #7d8f62, #c06a8e);
--check-fill: linear-gradient(135deg, #6f8f5f, #8aa276);
--card-radius: 18px;
--card-border-width: 1px;
--card-shadow: 0 1px 3px rgba(105,80,55,.07), 0 10px 26px rgba(105,80,55,.08);
--shadow-sm: 0 1px 2px rgba(105,80,55,.08);
--shadow-md: 0 16px 38px rgba(105,80,55,.16);
--btn-radius: 14px;
--pill-radius: 999px;
--font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
--display-spacing: .004em;
--cat-work: #5a6e86;
--cat-personal: #8a6699;
--cat-health: #557a4b;
--cat-home: #a9762b;
--cat-errand: #4c7a8a;
--cat-creative: #a1496b;
--cat-none: #a08f7a;
}
html[data-mode="dark"][data-theme="meadow"]{
--bg: #343a31;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #3f463c;
--surface-2: #4a5245;
--border: #5a6354;
--text: #eef0e4;
--text-muted: #c8cdb6;
--text-faint: #9aa088;
--primary: #aebf8d;
--primary-ink: #28301c;
--primary-soft: #4d5647;
--header-bg: #3f463c;
--header-fg: #eef0e4;
--nav-active-bg: #4d5647;
--card-shadow: 0 2px 5px rgba(14,18,12,.26), 0 12px 28px rgba(14,18,12,.24);
--shadow-md: 0 16px 38px rgba(14,18,12,.38);
}
/* soft per-view identity in Meadow — gentle earth tones, still ADHD
"where am I" color coding, quieter than Spark's gradients */
html[data-theme="meadow"] #view-weekly, html[data-theme="meadow"] #view-monthly{ --primary:#876712; --accent-image:linear-gradient(135deg,#e8b64c,#b98a1e); }
html[data-theme="meadow"] #view-meals{ --primary:#b34e3a; --accent-image:linear-gradient(135deg,#d97f6a,#b34e3a); }
html[data-theme="meadow"] #view-fitness{ --primary:#406c38; --accent-image:linear-gradient(135deg,#6f9a5e,#406c38); }
html[data-theme="meadow"] #view-clean{ --primary:#56699f; --accent-image:linear-gradient(135deg,#8a9ec9,#56699f); }
html[data-theme="meadow"] #view-work{ --primary:#ab5479; --accent-image:linear-gradient(135deg,#c97f9e,#ab5479); }
html[data-theme="meadow"] #view-weekly, html[data-theme="meadow"] #view-monthly,
html[data-theme="meadow"] #view-meals, html[data-theme="meadow"] #view-fitness,
html[data-theme="meadow"] #view-clean, html[data-theme="meadow"] #view-work{
--primary-ink:#fffdf4;
--primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
html[data-mode="dark"][data-theme="meadow"] #view-weekly, html[data-mode="dark"][data-theme="meadow"] #view-monthly{ --primary:#e5bb66; --primary-ink:#42300a; }
html[data-mode="dark"][data-theme="meadow"] #view-meals{ --primary:#e5a08e; --primary-ink:#421f15; }
html[data-mode="dark"][data-theme="meadow"] #view-fitness{ --primary:#a8c491; --primary-ink:#223018; }
html[data-mode="dark"][data-theme="meadow"] #view-clean{ --primary:#a9b9dd; --primary-ink:#222d47; }
html[data-mode="dark"][data-theme="meadow"] #view-work{ --primary:#d9a1bb; --primary-ink:#3f2030; }
/* meadow structural touches: light, simply-drawn, unhurried.
BUG LESSON (found by Brittany): hardcoded light backgrounds here
made near-white dark-mode text invisible — the "blank message".
Everything below now uses theme variables that flip with dark mode. */
/* Her call: the daily-message card keeps its light cream base in BOTH
modes — a little sunrise on the dark screen — with ink pinned dark
so it can never go invisible again. */
html[data-theme="meadow"]{ --greet-bg:#fbf5dc; --greet-border:#e9e0b8; --greet-ink:#403a24; --greet-muted:#6b654a; }
html[data-theme="meadow"] .topbar{ border-bottom:1px solid var(--border); }
html[data-theme="meadow"] .quick-add{ background: var(--surface); border:1px solid var(--border); }
html[data-theme="meadow"] .quick-add input{ color: var(--text); }
html[data-theme="meadow"] .quick-add input::placeholder{ color: var(--text-faint); opacity:1; }
html[data-theme="meadow"] .quick-add-icon{ color: var(--text-faint); }
html[data-theme="meadow"] .greet-card{
background: var(--greet-bg); border-color: var(--greet-border);
}
html[data-theme="meadow"] .greet-card .hero-hi{ color: var(--greet-muted); }
html[data-theme="meadow"] .greet-card .hero-message-text{ color: var(--greet-ink); }
html[data-theme="meadow"] .greet-card .hero-message{ border-left-color:#d97f6a; }
html[data-theme="meadow"] .greet-card .tone-chip{ background:transparent; border:1px solid #e4dcae; color: var(--greet-muted); }
html[data-theme="meadow"] .greet-card .tone-chip.selected{ background:#5a6b42; border-color:#5a6b42; color:#fffdf4; }
html[data-theme="meadow"] .greet-card .hero-weather{ background:#fdf9e8; border:1px solid #e7e0c0; color: var(--greet-ink); }
html[data-theme="meadow"] .greet-card .wx-temp, html[data-theme="meadow"] .greet-card .wx-set{ color: var(--greet-ink); }
html[data-theme="meadow"] .greet-card .wx-place{ color: var(--greet-muted); }
html[data-theme="meadow"] .today-date{ font-family: var(--font-display); font-weight:700; font-size:21px; letter-spacing:.002em; }
html[data-theme="meadow"] .day-title h1{ font-weight:700; }
html[data-theme="meadow"] .nav-btn.active{ background: var(--nav-active-bg); color: var(--primary); }
html[data-theme="meadow"] .check-circle{ border-color: var(--border); }
html[data-theme="meadow"] .tray-title [data-icon]{ color: var(--primary); }
/* ========== THEME: timber — grounded, minimal ========== */
html[data-theme="timber"]{
--bg: #e9e4dc;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #f7f4ee;
--surface-2: #e2ddd2;
--border: #d2ccc0;
--text: #33312c;
--text-muted: #5f5c53;
--text-faint: #8b877c;
--primary: #a45a1e;
--primary-ink: #fdf8ef;
--primary-soft: #f4e4d4;
--success: #588032;
--warning: #a3701c;
--danger: #ab4028;
--danger-strong: #8f3520;
--header-bg: #e4ded4;
--header-image: none;
--header-fg: #363430;
--nav-active-bg: #dcd5c8;
--accent-image: linear-gradient(135deg, #a45a1e, #4a423a);
--check-fill: linear-gradient(135deg, #6d7f55, #55663f);
--card-radius: 11px;
--card-border-width: 1px;
--card-shadow: 0 1px 3px rgba(40,36,28,.08), 0 8px 22px rgba(40,36,28,.08);
--shadow-sm: 0 1px 2px rgba(40,36,28,.09);
--shadow-md: 0 14px 34px rgba(40,36,28,.18);
--btn-radius: 8px;
--pill-radius: 999px;
--font-display: "Helvetica Neue", Arial, sans-serif;
--display-spacing: .01em;
--cat-work: #46647e;
--cat-personal: #74465c;
--cat-health: #55663f;
--cat-home: #8a5a33;
--cat-errand: #4f6a65;
--cat-creative: #74465c;
--cat-none: #8b877c;
}
html[data-mode="dark"][data-theme="timber"]{
--bg: #35322b;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #403c34;
--surface-2: #4a453c;
--border: #57524a;
--text: #ece8df;
--text-muted: #beb8a9;
--text-faint: #8e897c;
--primary: #d4ab7c;
--primary-ink: #3a2812;
--primary-soft: #4c443a;
--header-bg: #403c34;
--header-fg: #ece8df;
--nav-active-bg: #4c443a;
--accent-image: linear-gradient(135deg, #d4ab7c, #9cb07e);
--card-shadow: 0 2px 5px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.26);
--shadow-md: 0 16px 38px rgba(0,0,0,.4);
}
html[data-theme="timber"] #view-weekly, html[data-theme="timber"] #view-monthly{ --primary:#936400; --accent-image:linear-gradient(135deg,#c28a10,#936400); }
html[data-theme="timber"] #view-meals{ --primary:#b04a1e; --accent-image:linear-gradient(135deg,#d06430,#b04a1e); }
html[data-theme="timber"] #view-fitness{ --primary:#4a7a1f; --accent-image:linear-gradient(135deg,#649a34,#4a7a1f); }
html[data-theme="timber"] #view-clean{ --primary:#1f6396; --accent-image:linear-gradient(135deg,#3a83ba,#1f6396); }
html[data-theme="timber"] #view-work{ --primary:#8a2f5c; --accent-image:linear-gradient(135deg,#aa4a7a,#8a2f5c); }
html[data-theme="timber"] #view-weekly, html[data-theme="timber"] #view-monthly,
html[data-theme="timber"] #view-meals, html[data-theme="timber"] #view-fitness,
html[data-theme="timber"] #view-clean, html[data-theme="timber"] #view-work{
--primary-ink:#fdf8ef;
--primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
html[data-mode="dark"][data-theme="timber"] #view-weekly, html[data-mode="dark"][data-theme="timber"] #view-monthly{ --primary:#d3ab7a; --primary-ink:#3a2a12; }
html[data-mode="dark"][data-theme="timber"] #view-meals{ --primary:#d59a68; --primary-ink:#3a2510; }
html[data-mode="dark"][data-theme="timber"] #view-fitness{ --primary:#9cb07e; --primary-ink:#25301a; }
html[data-mode="dark"][data-theme="timber"] #view-clean{ --primary:#8fabc4; --primary-ink:#1b2c3c; }
html[data-mode="dark"][data-theme="timber"] #view-work{ --primary:#c89bb3; --primary-ink:#33202b; }
/* ========== THEME: basalt — grounded, minimal ========== */
html[data-theme="basalt"]{
--bg: #e6e3e1;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #f5f3f2;
--surface-2: #dedad8;
--border: #cfcac7;
--text: #2e2c2b;
--text-muted: #5c5855;
--text-faint: #8a8580;
--primary: #bf4a12;
--primary-ink: #fdf5f0;
--primary-soft: #f5e3d9;
--success: #3e7d52;
--warning: #96700f;
--danger: #b03636;
--danger-strong: #932a2a;
--header-bg: #e0dcda;
--header-image: none;
--header-fg: #312e2c;
--nav-active-bg: #d8d2ce;
--accent-image: linear-gradient(135deg, #bf4a12, #35322f);
--check-fill: linear-gradient(135deg, #75908a, #477069);
--card-radius: 11px;
--card-border-width: 1px;
--card-shadow: 0 1px 3px rgba(40,36,28,.08), 0 8px 22px rgba(40,36,28,.08);
--shadow-sm: 0 1px 2px rgba(40,36,28,.09);
--shadow-md: 0 14px 34px rgba(40,36,28,.18);
--btn-radius: 8px;
--pill-radius: 999px;
--font-display: "Helvetica Neue", Arial, sans-serif;
--display-spacing: .01em;
--cat-work: #4a6580;
--cat-personal: #8a3b3f;
--cat-health: #477069;
--cat-home: #8a6a1f;
--cat-errand: #4a6580;
--cat-creative: #8a3b3f;
--cat-none: #8a8580;
}
html[data-mode="dark"][data-theme="basalt"]{
--bg: #312e2c;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #3c3936;
--surface-2: #454240;
--border: #54504c;
--text: #ebe7e4;
--text-muted: #bcb5af;
--text-faint: #8b847e;
--primary: #ea9d78;
--primary-ink: #3e2010;
--primary-soft: #493c33;
--header-bg: #3c3936;
--header-fg: #ebe7e4;
--nav-active-bg: #493c33;
--accent-image: linear-gradient(135deg, #ea9d78, #d3ac57);
--card-shadow: 0 2px 5px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.26);
--shadow-md: 0 16px 38px rgba(0,0,0,.4);
}
html[data-theme="basalt"] #view-weekly, html[data-theme="basalt"] #view-monthly{ --primary:#8f6400; --accent-image:linear-gradient(135deg,#b3820e,#8f6400); }
html[data-theme="basalt"] #view-meals{ --primary:#bf4a12; --accent-image:linear-gradient(135deg,#e0692c,#bf4a12); }
html[data-theme="basalt"] #view-fitness{ --primary:#14756a; --accent-image:linear-gradient(135deg,#2a9688,#14756a); }
html[data-theme="basalt"] #view-clean{ --primary:#2563a8; --accent-image:linear-gradient(135deg,#4483c6,#2563a8); }
html[data-theme="basalt"] #view-work{ --primary:#a8232f; --accent-image:linear-gradient(135deg,#c84450,#a8232f); }
html[data-theme="basalt"] #view-weekly, html[data-theme="basalt"] #view-monthly,
html[data-theme="basalt"] #view-meals, html[data-theme="basalt"] #view-fitness,
html[data-theme="basalt"] #view-clean, html[data-theme="basalt"] #view-work{
--primary-ink:#fdf5f0;
--primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
html[data-mode="dark"][data-theme="basalt"] #view-weekly, html[data-mode="dark"][data-theme="basalt"] #view-monthly{ --primary:#d3ac57; --primary-ink:#3a2d08; }
html[data-mode="dark"][data-theme="basalt"] #view-meals{ --primary:#e39069; --primary-ink:#3e2010; }
html[data-mode="dark"][data-theme="basalt"] #view-fitness{ --primary:#9db3ae; --primary-ink:#22302d; }
html[data-mode="dark"][data-theme="basalt"] #view-clean{ --primary:#93aec9; --primary-ink:#1d2b3c; }
html[data-mode="dark"][data-theme="basalt"] #view-work{ --primary:#d29498; --primary-ink:#3c2224; }
/* ========== THEME: field — grounded, minimal ========== */
html[data-theme="field"]{
--bg: #e8e5d5;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #f5f2e6;
--surface-2: #dfdbc8;
--border: #d2cdb8;
--text: #32312a;
--text-muted: #605e4e;
--text-faint: #8e8b78;
--primary: #5a7000;
--primary-ink: #fbfaf0;
--primary-soft: #e8e7d3;
--success: #4c7a26;
--warning: #8c6a00;
--danger: #a8443a;
--danger-strong: #93392f;
--header-bg: #e1decb;
--header-image: none;
--header-fg: #35342b;
--nav-active-bg: #d8d4bd;
--accent-image: linear-gradient(135deg, #a05f16, #1e4a7a);
--check-fill: linear-gradient(135deg, #7a7d55, #5c5f3d);
--card-radius: 11px;
--card-border-width: 1px;
--card-shadow: 0 1px 3px rgba(40,36,28,.08), 0 8px 22px rgba(40,36,28,.08);
--shadow-sm: 0 1px 2px rgba(40,36,28,.09);
--shadow-md: 0 14px 34px rgba(40,36,28,.18);
--btn-radius: 8px;
--pill-radius: 999px;
--font-display: "Helvetica Neue", Arial, sans-serif;
--display-spacing: .01em;
--cat-work: #33475f;
--cat-personal: #7c4056;
--cat-health: #47632f;
--cat-home: #96683c;
--cat-errand: #33475f;
--cat-creative: #7c4056;
--cat-none: #8e8b78;
}
html[data-mode="dark"][data-theme="field"]{
--bg: #34352b;
--bg-image: url("data:image/svg+xml;utf8,");
--surface: #3f4034;
--surface-2: #494a3e;
--border: #575848;
--text: #ebe9dc;
--text-muted: #bdbba6;
--text-faint: #8d8b76;
--primary: #b3b578;
--primary-ink: #2b2c12;
--primary-soft: #4a4b3c;
--header-bg: #3f4034;
--header-fg: #ebe9dc;
--nav-active-bg: #4a4b3c;
--accent-image: linear-gradient(135deg, #b3b578, #d0a36e);
--card-shadow: 0 2px 5px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.26);
--shadow-md: 0 16px 38px rgba(0,0,0,.4);
}
html[data-theme="field"] #view-weekly, html[data-theme="field"] #view-monthly{ --primary:#a05f16; --accent-image:linear-gradient(135deg,#c07c2c,#a05f16); }
html[data-theme="field"] #view-meals{ --primary:#a33a1f; --accent-image:linear-gradient(135deg,#c45836,#a33a1f); }
html[data-theme="field"] #view-fitness{ --primary:#2e6b33; --accent-image:linear-gradient(135deg,#4f8f54,#2e6b33); }
html[data-theme="field"] #view-clean{ --primary:#1e4a7a; --accent-image:linear-gradient(135deg,#3a6a9c,#1e4a7a); }
html[data-theme="field"] #view-work{ --primary:#9c2454; --accent-image:linear-gradient(135deg,#bc4474,#9c2454); }
html[data-theme="field"] #view-weekly, html[data-theme="field"] #view-monthly,
html[data-theme="field"] #view-meals, html[data-theme="field"] #view-fitness,
html[data-theme="field"] #view-clean, html[data-theme="field"] #view-work{
--primary-ink:#fbfaf0;
--primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
html[data-mode="dark"][data-theme="field"] #view-weekly, html[data-mode="dark"][data-theme="field"] #view-monthly{ --primary:#d0a36e; --primary-ink:#3c2a12; }
html[data-mode="dark"][data-theme="field"] #view-meals{ --primary:#de9c88; --primary-ink:#3c1f14; }
html[data-mode="dark"][data-theme="field"] #view-fitness{ --primary:#a4bd7f; --primary-ink:#26301a; }
html[data-mode="dark"][data-theme="field"] #view-clean{ --primary:#98aec9; --primary-ink:#1c2a3c; }
html[data-mode="dark"][data-theme="field"] #view-work{ --primary:#cc9fb1; --primary-ink:#35202b; }
/* onyx per-tab accents — neon night — electric tones on near-black */
html[data-theme="onyx"] #view-weekly, html[data-theme="onyx"] #view-monthly{ --primary:#7db8ff; --accent-image:linear-gradient(135deg,#a5cdff,#5f9df0); }
html[data-theme="onyx"] #view-meals{ --primary:#ffb35c; --accent-image:linear-gradient(135deg,#ffc98a,#f09a38); }
html[data-theme="onyx"] #view-fitness{ --primary:#63e0b8; --accent-image:linear-gradient(135deg,#8fecce,#3fc79c); }
html[data-theme="onyx"] #view-clean{ --primary:#6fdbe0; --accent-image:linear-gradient(135deg,#9ce9ec,#48c2c9); }
html[data-theme="onyx"] #view-work{ --primary:#ff8ad1; --accent-image:linear-gradient(135deg,#ffb0e0,#f065bb); }
html[data-theme="onyx"] #view-weekly, html[data-theme="onyx"] #view-monthly, html[data-theme="onyx"] #view-meals, html[data-theme="onyx"] #view-fitness, html[data-theme="onyx"] #view-clean, html[data-theme="onyx"] #view-work{ --primary-ink:#101319; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
html[data-theme="onyx"] #view-weekly, html[data-theme="onyx"] #view-monthly{ --primary-ink:#0c2547; }
html[data-theme="onyx"] #view-meals{ --primary-ink:#3d2405; }
html[data-theme="onyx"] #view-fitness{ --primary-ink:#08301f; }
html[data-theme="onyx"] #view-clean{ --primary-ink:#0b3033; }
html[data-theme="onyx"] #view-work{ --primary-ink:#43102d; }
/* vibrant per-tab accents — electric pop — every tab a different jolt */
html[data-theme="vibrant"] #view-weekly, html[data-theme="vibrant"] #view-monthly{ --primary:#0b7285; --accent-image:linear-gradient(135deg,#22b8cf,#0b7285); }
html[data-theme="vibrant"] #view-meals{ --primary:#cc440e; --accent-image:linear-gradient(135deg,#f76b1c,#cc440e); }
html[data-theme="vibrant"] #view-fitness{ --primary:#2a863c; --accent-image:linear-gradient(135deg,#51cf66,#2a863c); }
html[data-theme="vibrant"] #view-clean{ --primary:#1864ab; --accent-image:linear-gradient(135deg,#4dabf7,#1864ab); }
html[data-theme="vibrant"] #view-work{ --primary:#c2255c; --accent-image:linear-gradient(135deg,#f06595,#c2255c); }
html[data-theme="vibrant"] #view-weekly, html[data-theme="vibrant"] #view-monthly, html[data-theme="vibrant"] #view-meals, html[data-theme="vibrant"] #view-fitness, html[data-theme="vibrant"] #view-clean, html[data-theme="vibrant"] #view-work{ --primary-ink:#f6f7ff; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
html[data-mode="dark"][data-theme="vibrant"] #view-weekly, html[data-mode="dark"][data-theme="vibrant"] #view-monthly{ --primary:#4dd4f0; --primary-ink:#062e36; }
html[data-mode="dark"][data-theme="vibrant"] #view-meals{ --primary:#ff9a5c; --primary-ink:#401800; }
html[data-mode="dark"][data-theme="vibrant"] #view-fitness{ --primary:#69d675; --primary-ink:#0c3612; }
html[data-mode="dark"][data-theme="vibrant"] #view-clean{ --primary:#74a9ff; --primary-ink:#0d2a55; }
html[data-mode="dark"][data-theme="vibrant"] #view-work{ --primary:#ff7ab8; --primary-ink:#47082a; }
/* candy per-tab accents — sweet shop — bubblegum, grape, mint, sherbet */
html[data-theme="candy"] #view-weekly, html[data-theme="candy"] #view-monthly{ --primary:#6b21c8; --accent-image:linear-gradient(135deg,#9d5cf0,#6b21c8); }
html[data-theme="candy"] #view-meals{ --primary:#cf3168; --accent-image:linear-gradient(135deg,#ff6b9d,#cf3168); }
html[data-theme="candy"] #view-fitness{ --primary:#09835f; --accent-image:linear-gradient(135deg,#38d9a9,#09835f); }
html[data-theme="candy"] #view-clean{ --primary:#3056d3; --accent-image:linear-gradient(135deg,#6b8bff,#3056d3); }
html[data-theme="candy"] #view-work{ --primary:#c54c0a; --accent-image:linear-gradient(135deg,#ff922b,#c54c0a); }
html[data-theme="candy"] #view-weekly, html[data-theme="candy"] #view-monthly, html[data-theme="candy"] #view-meals, html[data-theme="candy"] #view-fitness, html[data-theme="candy"] #view-clean, html[data-theme="candy"] #view-work{ --primary-ink:#fff4fa; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
html[data-mode="dark"][data-theme="candy"] #view-weekly, html[data-mode="dark"][data-theme="candy"] #view-monthly{ --primary:#b197fc; --primary-ink:#241263; }
html[data-mode="dark"][data-theme="candy"] #view-meals{ --primary:#ff8fab; --primary-ink:#4a0d20; }
html[data-mode="dark"][data-theme="candy"] #view-fitness{ --primary:#63e6be; --primary-ink:#053b2c; }
html[data-mode="dark"][data-theme="candy"] #view-clean{ --primary:#91a7ff; --primary-ink:#16214d; }
html[data-mode="dark"][data-theme="candy"] #view-work{ --primary:#ffa94d; --primary-ink:#3f2200; }
/* calm per-tab accents — misty spa — muted shifts, quiet mood changes */
html[data-theme="calm"] #view-weekly, html[data-theme="calm"] #view-monthly{ --primary:#4a6b8a; --accent-image:linear-gradient(135deg,#7391ad,#4a6b8a); }
html[data-theme="calm"] #view-meals{ --primary:#9a5b43; --accent-image:linear-gradient(135deg,#bd8069,#9a5b43); }
html[data-theme="calm"] #view-fitness{ --primary:#67783f; --accent-image:linear-gradient(135deg,#93a566,#67783f); }
html[data-theme="calm"] #view-clean{ --primary:#71689e; --accent-image:linear-gradient(135deg,#968dc2,#71689e); }
html[data-theme="calm"] #view-work{ --primary:#96566d; --accent-image:linear-gradient(135deg,#b97e93,#96566d); }
html[data-theme="calm"] #view-weekly, html[data-theme="calm"] #view-monthly, html[data-theme="calm"] #view-meals, html[data-theme="calm"] #view-fitness, html[data-theme="calm"] #view-clean, html[data-theme="calm"] #view-work{ --primary-ink:#f4f8f4; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
html[data-mode="dark"][data-theme="calm"] #view-weekly, html[data-mode="dark"][data-theme="calm"] #view-monthly{ --primary:#94b4cf; --primary-ink:#14293b; }
html[data-mode="dark"][data-theme="calm"] #view-meals{ --primary:#cfa08c; --primary-ink:#38180c; }
html[data-mode="dark"][data-theme="calm"] #view-fitness{ --primary:#a9bd82; --primary-ink:#253014; }
html[data-mode="dark"][data-theme="calm"] #view-clean{ --primary:#aaa3d6; --primary-ink:#201b45; }
html[data-mode="dark"][data-theme="calm"] #view-work{ --primary:#c495ab; --primary-ink:#35182a; }
/* Period-section accents — own color per theme (Daily period list + cycle banner) */
html[data-theme="meadow"] #periodDayWrap, html[data-theme="meadow"] #cycleBanner{ --primary:#7d5280; --primary-ink:#fffdf4; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #7d5280 70%, white), #7d5280); }
html[data-mode="dark"][data-theme="meadow"] #periodDayWrap, html[data-mode="dark"][data-theme="meadow"] #cycleBanner{ --primary:#cda6d0; --primary-ink:#3a1f3c; }
html[data-theme="timber"] #periodDayWrap, html[data-theme="timber"] #cycleBanner{ --primary:#83335f; --primary-ink:#fdf8ef; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #83335f 70%, white), #83335f); }
html[data-mode="dark"][data-theme="timber"] #periodDayWrap, html[data-mode="dark"][data-theme="timber"] #cycleBanner{ --primary:#d4a4c6; --primary-ink:#3c1029; }
html[data-theme="basalt"] #periodDayWrap, html[data-theme="basalt"] #cycleBanner{ --primary:#5e4796; --primary-ink:#fdf5f0; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #5e4796 70%, white), #5e4796); }
html[data-mode="dark"][data-theme="basalt"] #periodDayWrap, html[data-mode="dark"][data-theme="basalt"] #cycleBanner{ --primary:#b7a3e0; --primary-ink:#241548; }
html[data-theme="field"] #periodDayWrap, html[data-theme="field"] #cycleBanner{ --primary:#6d5590; --primary-ink:#fbfaf0; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #6d5590 70%, white), #6d5590); }
html[data-mode="dark"][data-theme="field"] #periodDayWrap, html[data-mode="dark"][data-theme="field"] #cycleBanner{ --primary:#b5a1d4; --primary-ink:#2c1f42; }
html[data-theme="spark"] #periodDayWrap, html[data-theme="spark"] #cycleBanner{ --primary:#d61f69; --primary-ink:#ffffff; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #d61f69 70%, white), #d61f69); }
html[data-mode="dark"][data-theme="spark"] #periodDayWrap, html[data-mode="dark"][data-theme="spark"] #cycleBanner{ --primary:#f973b9; --primary-ink:#4c0525; }
html[data-theme="vibrant"] #periodDayWrap, html[data-theme="vibrant"] #cycleBanner{ --primary:#7048e8; --primary-ink:#f6f7ff; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #7048e8 70%, white), #7048e8); }
html[data-mode="dark"][data-theme="vibrant"] #periodDayWrap, html[data-mode="dark"][data-theme="vibrant"] #cycleBanner{ --primary:#a48cf5; --primary-ink:#1e0f52; }
html[data-theme="candy"] #periodDayWrap, html[data-theme="candy"] #cycleBanner{ --primary:#c2183c; --primary-ink:#fff4fa; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #c2183c 70%, white), #c2183c); }
html[data-mode="dark"][data-theme="candy"] #periodDayWrap, html[data-mode="dark"][data-theme="candy"] #cycleBanner{ --primary:#ff9db4; --primary-ink:#4a0716; }
html[data-theme="calm"] #periodDayWrap, html[data-theme="calm"] #cycleBanner{ --primary:#7e6288; --primary-ink:#f4f8f4; --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --accent-image:linear-gradient(135deg, color-mix(in srgb, #7e6288 70%, white), #7e6288); }
html[data-mode="dark"][data-theme="calm"] #periodDayWrap, html[data-mode="dark"][data-theme="calm"] #cycleBanner{ --primary:#c0a7cc; --primary-ink:#30203a; }
html[data-theme="onyx"] #periodDayWrap, html[data-theme="onyx"] #cycleBanner{ --primary:#b9a1ff; --primary-ink:#221352; --primary-soft: color-mix(in srgb, var(--primary) 14%, var(--surface)); --accent-image:linear-gradient(135deg,#cdbcff,#9d80f5); }
.brand-serif{ font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .3px; text-transform: lowercase; font-size: 1.25rem; }
.brand-mark{ color: var(--header-fg); display:block; }
.brand{ display:flex; align-items:center; gap:8px; }
html[data-mode="dark"] .brand-check{ stroke:#e39a87; }
/* Fitness sub-tab components */
.fit-details{ padding: 14px 18px; }
.fit-details summary{ cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); list-style: none; }
.fit-details summary::-webkit-details-marker{ display: none; }
.fit-details summary::after{ content: "+"; margin-left: auto; font-size: 1.1rem; color: var(--text-muted); }
.fit-details[open] summary::after{ content: "\2212"; }
.fit-details[open] summary{ margin-bottom: 10px; }
.activity-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.activity-card{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.activity-name{ font-weight: 700; }
.activity-why{ font-size: .85rem; color: var(--text-muted); flex: 1; }
.activity-card .primary-btn, .activity-card .secondary-btn{ width: 100%; }
.supp-list{ list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.supp-row{ display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.supp-check{ display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.supp-name{ font-weight: 600; }
.supp-dose{ font-size: .82rem; color: var(--text-muted); }
.supp-del{ border: none; background: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.supp-add{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.supp-add input{ flex: 1; min-width: 130px; }
.supp-notes{ border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.supp-note{ font-size: .88rem; color: var(--text-muted); }
.supp-note-name{ font-weight: 700; color: var(--text); }
/* Hub launcher: big cards fill the main tab */
.hub-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 4px; }
.hub-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius);
padding: 22px 20px; min-height: 128px; cursor: pointer; box-shadow: var(--shadow-sm);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; color: var(--text); }
.hub-card:hover, .hub-card:focus-visible{ transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.hub-ico{ width: 30px; height: 30px; color: var(--primary); }
.hub-ico svg{ width: 30px; height: 30px; }
.hub-name{ font-weight: 800; font-size: 1.12rem; }
.hub-sub{ font-size: .86rem; color: var(--text-muted); line-height: 1.35; }
.hub-back{ display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
color: var(--primary); font-weight: 700; font-size: .95rem; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }
.hub-back svg{ width: 18px; height: 18px; }
.mt-portion{ display:inline-block; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 2px 10px; margin-right: 6px; }
.mt-note{ display:block; font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.meal-side-line{ font-size: .8rem; color: var(--text-muted); padding: 2px 0 4px 26px; }
.meal-side-line::before{ content: "+"; color: var(--primary); font-weight: 700; margin-right: 5px; }
.tm-meal-btn{ background: none; border: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tm-meal-btn:hover b, .tm-meal-btn:focus-visible b{ color: var(--primary); }
.tcard-headbtn{ background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.recipe-detail{ margin-bottom: 14px; }
.rd-plate{ border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0; background: var(--surface-2); }
.rd-plate summary{ cursor: pointer; font-size: .9rem; list-style: none; }
.rd-plate summary::-webkit-details-marker{ display: none; }
.rd-plate-ings{ font-size: .85rem; color: var(--text-muted); padding-top: 6px; line-height: 1.6; }
.plate-bar{ display: flex; height: 30px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); margin: 4px 0 8px; }
.plate-seg{ display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: var(--primary-ink); min-width: 24px; }
.plate-seg.seg-0{ background: var(--primary); }
.plate-seg.seg-1{ background: color-mix(in srgb, var(--primary) 62%, var(--surface)); }
.plate-seg.seg-2{ background: color-mix(in srgb, var(--primary) 40%, var(--surface)); color: var(--text); }
.plate-seg.seg-3{ background: color-mix(in srgb, var(--primary) 24%, var(--surface)); color: var(--text); }
.plate-line{ font-size: .9rem; padding: 3px 0; }
.plate-meta{ display: block; font-size: .8rem; color: var(--text-muted); }
.rd-close{ margin-left: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
width: 30px; height: 30px; font-size: 1.05rem; line-height: 1; color: var(--text-muted); cursor: pointer; flex: 0 0 auto; }
.rd-close:hover{ color: var(--text); border-color: var(--primary); }
.rd-head{ display: flex; align-items: center; gap: 10px; }
.plate-how{ font-size: .82rem; color: var(--text-muted); margin: 2px 0 8px; line-height: 1.5; }
.hand-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
.hand-card{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px 16px; }
.hand-fig{ display: block; width: 56px; height: 56px; color: var(--primary); margin-bottom: 6px; }
.hand-fig svg{ width: 56px; height: 56px; }
.hand-name{ font-weight: 800; margin-bottom: 4px; }
.hand-desc{ font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.scan-results{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px; max-width: 480px; }
.scan-fix{ width: 100%; display: flex; gap: 8px; }
.scan-fix input{ flex: 1; }
.scan-btns{ display: flex; gap: 10px; }
.pantry-fills{ display: inline-flex; gap: 5px; margin-top: 5px; }
.pantry-fill{ border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
border-radius: 999px; padding: 2px 9px; font-size: .78rem; cursor: pointer; }
.pantry-fill.selected{ background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
.pantry-low{ font-size: .72rem; font-weight: 700; color: var(--warning); border: 1px solid var(--warning);
border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.groc-low{ font-size: .72rem; font-weight: 700; color: var(--warning); border: 1px solid var(--warning);
border-radius: 999px; padding: 1px 7px; margin-left: auto; }
.rc-import{ margin-bottom: 12px; }
.rc-import-status{ font-size: .85rem; color: var(--text-muted); padding: 4px 0; }
.rc-view{ margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.health-notes{ margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.health-note{ font-size: .87rem; color: var(--text-muted); padding: 3px 0; line-height: 1.5; }
.health-note b{ color: var(--text); }
.health-note.remedy{ padding-left: 4px; }
.remedy-tag{ display:inline-block; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .72rem; border-radius: 999px; padding: 1px 8px; margin-right: 5px; }
#snackDrinkBox{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-list{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sd-item{ background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; }
.sd-name{ font-weight: 600; font-size: .9rem; }
.sd-meta{ display: block; font-size: .78rem; color: var(--text-muted); }
#snackDrinkBox .tray-hint-text{ grid-column: 1 / -1; }
@media (max-width: 520px){ #snackDrinkBox{ grid-template-columns: 1fr; } }
.sd-cycle{ grid-column: 1 / -1; font-size:.83rem; color: var(--text-muted); margin: 2px 0 0; }
/* Health questionnaire pop-out */
.hq-overlay{ position: fixed; inset: 0; background: rgba(20,22,18,.55); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 16px; }
.hq-card{ background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-md); width: 100%; max-width: 460px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.hq-head{ display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.hq-title{ font-weight: 800; font-size: 1.15rem; }
.hq-x{ border: none; background: var(--surface-2); border-radius: 999px; width: 32px; height: 32px; font-size: 1.15rem; color: var(--text-muted); cursor: pointer; }
.hq-bar{ height: 5px; background: var(--surface-2); margin: 0 18px; border-radius: 999px; overflow: hidden; }
.hq-bar span{ display: block; height: 100%; background: var(--primary); transition: width .2s ease; }
.hq-step{ font-size: .82rem; color: var(--text-muted); padding: 8px 18px 4px; font-weight: 700; }
.hq-body{ overflow-y: auto; padding: 4px 18px; }
.hq-item{ padding: 12px 0; border-bottom: 1px solid var(--border); }
.hq-item:last-child{ border-bottom: none; }
.hq-q{ font-weight: 700; }
.hq-def{ font-size: .84rem; color: var(--text-muted); margin: 3px 0 8px; line-height: 1.45; }
.hq-opts{ display: flex; flex-wrap: wrap; gap: 6px; }
.hq-opt{ border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: .84rem; cursor: pointer; }
.hq-opt.on{ background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
.hq-foot{ display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px 6px; }
.hq-note{ font-size: .78rem; color: var(--text-muted); padding: 0 18px 16px; line-height: 1.45; }
.hq-chosen{ display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.hq-pill{ background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 3px 11px; font-size: .82rem; font-weight: 600; }
.hq-pill-st{ opacity: .8; font-weight: 500; }
.recipe-detail.inline{ background: var(--surface-2); border: 1px solid var(--primary); border-radius: 12px; padding: 12px 14px; margin: 8px 0 4px; }
.sd-main{ display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.sd-item.open{ border-color: var(--primary); }
.sd-recipe{ margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.sd-recipe .rd-sec{ margin-top: 6px; }
.rc-builtin-head{ margin: 16px 0 8px; }
.rc-mealfilter{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wc-chip.on{ background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
.rc-photo{ width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; display: block; }
.rc-tags{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rc-tag{ background: var(--primary-soft); color: var(--primary); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.rc-mealfilter{ overflow-x: auto; }
.rd-roles{ display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.rd-role{ font-size: .9rem; line-height: 1.5; }
.rd-role-tag{ display: inline-block; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-right: 6px; color: #fff; }
.rd-role-protein{ background: #b34e3a; }
.rd-role-carb{ background: #876712; }
.rd-role-veg{ background: #406c38; }
.rd-role-fat{ background: #ab5479; }
.rd-role-flavor{ background: #56699f; }
.fast-banner{ display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: .92rem; }
.fast-banner.fasting{ border-color: var(--primary); }
.fast-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.fast-banner.eating .fast-dot{ background: var(--success, #3b7d3b); }
.fast-banner.fasting .fast-dot{ background: var(--primary); }
.fast-card{ margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.fast-start{ display: block; font-size: .9rem; margin: 8px 0; color: var(--text); }
.pantry-freeze{ font-size: .8rem; color: var(--text-muted); margin-top: 5px; display: flex; gap: 5px; align-items: flex-start; }
.pantry-freeze.no{ color: var(--warning, #a5722a); }
.pantry-freeze span[data-icon]{ flex: 0 0 auto; }
.pantry-exp{ display: block; font-size: .78rem; color: var(--text-muted); margin-top: 6px; }
.pantry-exp input{ margin-left: 6px; }
.scan-form{ display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.scan-form label{ display: flex; flex-direction: column; font-size: .82rem; gap: 3px; }
.scan-form .field-row{ display: flex; gap: 8px; }
.scan-form .field{ flex: 1; }
.scan-guesses{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.rc-capture{ border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin: 10px 0; background: var(--surface-2); }
.rc-capbtns{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rc-capbtn{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rc-capstatus{ font-size: .82rem; color: var(--text-muted); margin-top: 8px; }
.confirm-overlay{ position: fixed; inset: 0; background: rgba(20,22,18,.5); display: flex; align-items: center; justify-content: center; z-index: 4000; padding: 20px; }
.confirm-box{ background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-md); max-width: 360px; width: 100%; padding: 20px; }
.confirm-msg{ font-size: 1rem; margin: 0 0 16px; color: var(--text); line-height: 1.5; }
.confirm-btns{ display: flex; gap: 10px; justify-content: flex-end; }
.reco-event{ display: block; font-size: .82rem; color: var(--text-muted); margin-top: 4px; }
.md-box{ background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-md); width: 100%; max-width: 420px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; }
.md-head{ display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.md-date{ font-weight: 800; font-size: 1.1rem; }
.md-rock{ margin: 0 18px 6px; font-size: .88rem; color: var(--primary); font-weight: 700; }
.md-list{ list-style: none; margin: 4px 0; padding: 0 12px; overflow-y: auto; }
.md-item{ display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
.md-item:hover{ background: var(--surface-2); }
.md-dot{ width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.md-time{ font-size: .8rem; color: var(--text-muted); min-width: 62px; padding-top: 2px; }
.md-title{ font-weight: 600; }
.md-title.done{ text-decoration: line-through; color: var(--text-muted); }
.md-place{ display: block; font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.md-empty{ list-style: none; color: var(--text-muted); padding: 16px 8px; text-align: center; }
.md-actions{ display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.md-actions button{ flex: 1; }
.wd-thumb{ width: 46px; height: 46px; object-fit: cover; border-radius: 8px; margin-right: 10px; flex: 0 0 auto; }
.wd-type{ font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.ws-days{ display: flex; gap: 6px; margin: 8px 0; }
.ws-day{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-weight: 700; cursor: pointer; }
.ws-day.on{ background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.fit-worknote, .meal-worknote{ background: var(--primary-soft); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: .86rem; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.fin-balance{ text-align: center; padding: 18px; border-radius: 14px; margin-bottom: 12px; background: var(--surface-2); }
.fin-balance.pos{ border: 1px solid var(--success, #3b7d3b); }
.fin-balance.neg{ border: 1px solid var(--warning, #a5722a); }
.fin-bal-label{ display: block; font-size: .82rem; color: var(--text-muted); }
.fin-bal-num{ display: block; font-size: 2rem; font-weight: 800; margin-top: 4px; }
.fin-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 12px; }
.fin-stat{ background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.fin-stat-label{ display: block; font-size: .74rem; color: var(--text-muted); }
.fin-stat-val{ display: block; font-weight: 700; font-size: 1.05rem; margin-top: 2px; }
.fin-hint{ font-size: .88rem; color: var(--text-muted); margin: 8px 0; display: flex; gap: 6px; align-items: center; }
.fin-add{ background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.fin-add .field-row{ display: flex; gap: 8px; }
.fin-add input, .fin-add select{ width: 100%; }
.fin-amt{ font-weight: 700; }
.fin-amt.pos{ color: var(--success, #3b7d3b); }
.fin-amt.neg{ color: var(--text); }
.fin-photo-btn{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fin-goal{ background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.fin-goal-head{ display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 6px; }
.fin-goal-bar{ height: 10px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.fin-goal-bar span{ display: block; height: 100%; background: var(--primary); }
.fin-goal-actions{ display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.fin-goal-actions input{ flex: 1; }
.fin-goal-done{ color: var(--success, #3b7d3b); font-size: .85rem; margin-top: 6px; display: flex; gap: 5px; align-items: center; }
.calendar-cell-bill{ position:absolute; bottom:2px; left:4px; font-size: .6rem; font-weight: 800; color: var(--warning, #a5722a); }
.calendar-cell-pay{ position:absolute; bottom:2px; right:4px; font-size: .7rem; font-weight: 800; color: var(--success, #3b7d3b); line-height:1; }
.md-pay{ color: var(--success, #3b7d3b); border-color: var(--success, #3b7d3b); }
.md-bills{ margin: 0 18px 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.md-bill{ font-size: .78rem; color: var(--warning, #a5722a); border: 1px solid var(--warning, #a5722a); border-radius: 999px; padding: 1px 8px; }
.fin-goal-bar.debt span{ background: var(--warning, #a5722a); }
.fin-suggest{ background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 12px; padding: 12px 14px; font-size: .9rem; line-height: 1.55; margin-bottom: 12px; }
.fin-suggest.warn{ border-color: var(--warning, #a5722a); background: var(--surface-2); }
.fin-suggest-note{ display: block; font-size: .76rem; color: var(--text-muted); margin-top: 6px; }
.ob-card{ max-width: 440px; }
.ob-hero{ text-align: center; padding: 6px 0 4px; }
.ob-lede{ font-size: .95rem; color: var(--text-muted); line-height: 1.55; margin: 10px 0; }
.ob-themes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ob-theme{ border: 2px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.ob-theme.on{ border-color: var(--primary); }
.ob-swatches{ display: flex; gap: 3px; }
.ob-swatches span{ width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.ob-theme-name{ font-size: .74rem; font-weight: 700; color: var(--text); }
.ob-modes{ display: flex; gap: 6px; justify-content: center; }
.ob-done{ display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.ob-done-line{ display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--text); }
.ob-done-line span[data-icon]{ color: var(--success, #3b7d3b); }
.ob-acct-btns{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.clsu-rooms{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 6px; }
.clsu-room{ display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .88rem; cursor: pointer; background: var(--surface-2); }
.clsu-room.on{ border-color: var(--primary); }
.clsu-count{ margin-left: auto; font-size: .72rem; color: var(--text-muted); }
.clpj-room{ font-weight: 800; font-size: .85rem; margin: 12px 0 2px; color: var(--primary); }
.ct-tip{ display: block; font-size: .78rem; color: var(--primary); margin-top: 2px; }
.clpj-next{ background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.clpj-next-tag{ display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: 2px; }
.clpj-next .ct-tip{ margin-top: 4px; }
.clpj-roomwrap{ border: none; padding: 0; margin-top: 6px; }
.clpj-roomwrap summary{ cursor: pointer; list-style: none; }
.clpj-roomwrap summary::-webkit-details-marker{ display: none; }
.clrx{ border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface-2); }
.clrx-name{ font-weight: 800; }
.clrx-mix{ font-size: .86rem; color: var(--text); margin-top: 2px; }
.clrx-use{ font-size: .82rem; color: var(--text-muted); margin-top: 4px; }
.clrx-not{ font-size: .78rem; color: var(--warning, #a5722a); margin-top: 4px; }
.clrx-grp{ display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.clrx-grp:first-child{ margin-top: 4px; }
.clrx-grp-name{ font-weight: 800; font-size: .95rem; color: var(--primary); }
.clrx-grp-sub{ font-size: .76rem; color: var(--text-muted); }
.org-head{ font-weight: 800; color: var(--primary); margin: 14px 0 4px; font-size: .95rem; }
.org-item{ display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; margin: 6px 0; background: var(--surface-2); }
.org-title{ font-weight: 700; font-size: .88rem; }
.org-why{ font-size: .8rem; color: var(--text-muted); }
.org-links{ display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.org-link{ display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.org-link svg{ width: 13px; height: 13px; }
.org-room{ border: none; padding: 0; margin: 8px 0 0; }
.org-room summary{ cursor: pointer; font-weight: 700; font-size: .88rem; padding: 6px 0; list-style: none; }
.org-room summary::-webkit-details-marker{ display: none; }
.org-scantag{ font-size: .72rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.org-seen{ border-color: var(--primary); }
.clsu-roomwrap{ display: flex; flex-direction: column; gap: 3px; }
.clsu-sizechips{ display: flex; gap: 4px; padding-left: 26px; margin-bottom: 4px; }
.clsu-szchip{ font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; }
.clsu-szchip.on{ background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.clsu-area{ width: 64px; font-size: .72rem; padding: 2px 8px; border-radius: 999px; }
.clsu-unitbtn{ background: none; border: none; padding: 0; font-size: inherit; font-weight: 700; color: var(--primary); cursor: pointer; text-decoration: underline; }
.org-taskchips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.org-taskchip{ display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 3px 6px 3px 10px; }
.org-chipx{ background: none; border: none; color: inherit; font-size: .9rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.lock-badge{ display: inline-flex; margin-left: 6px; vertical-align: middle; color: var(--primary); }
.lock-badge svg{ width: 13px; height: 13px; }
.paywall{ max-width: 380px; text-align: center; }
.pw-lock{ display: flex; justify-content: center; color: var(--primary); margin: 4px 0 8px; }
.pw-lock svg{ width: 34px; height: 34px; }
.pw-title{ font-size: 1.15rem; margin: 0 0 4px; }
.pw-sub{ font-size: .86rem; color: var(--text-muted); margin: 0 0 10px; }
.pw-list{ list-style: none; padding: 0; margin: 0 0 10px; text-align: left; }
.pw-list li{ font-size: .84rem; padding: 4px 0 4px 22px; position: relative; }
.pw-list li::before{ content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 999px; background: var(--primary); }
.pw-soon{ color: var(--text-muted); }
.pw-soon em{ font-style: normal; font-size: .72rem; font-weight: 700; color: var(--primary); }
.pw-note{ font-size: .78rem; color: var(--text-muted); margin: 0 0 12px; }
.fin-locked{ text-align: center; padding: 12px 0; }
/* small, quiet modal close — the X inherits full width without this */
.paywall{ position: relative; }
.modal-x{ position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: 999px; padding: 0; }
.modal-x:hover{ background: var(--surface-2); }
.modal-x svg{ width: 15px; height: 15px; }
.tour-card{ max-width: 340px; text-align: center; position: relative; }
.tour-ico{ display: flex; justify-content: center; color: var(--primary); margin: 6px 0 10px; }
.tour-ico svg{ width: 36px; height: 36px; }
.tour-title{ font-size: 1.2rem; margin: 0 0 6px; }
.tour-text{ font-size: .88rem; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.tour-dots{ display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.tour-dot{ width: 7px; height: 7px; border-radius: 999px; background: var(--border); }
.tour-dot.on{ background: var(--primary); }
.pw-trialnote{ font-size: .84rem; font-weight: 700; color: var(--primary); margin: 0 0 10px; }
.tk-tourline{ padding: 10px 14px; }
/* water + journal duo under the daily message */
.today-duo{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; margin: 10px 0; }
@media (max-width: 420px){ .today-duo{ grid-template-columns: 1fr; } }
.jr-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 130px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; color: var(--text); }
.jr-card:active{ transform: scale(.98); }
.jr-art{ color: var(--primary); }
.jr-art svg{ width: 54px; height: 37px; }
.jr-word{ font-weight: 800; font-size: .92rem; }
.jr-sub{ font-size: .72rem; color: var(--text-muted); }
.jr-modal{ max-width: 420px; position: relative; }
.jr-title{ font-size: 1.1rem; margin: 0 0 10px; }
.jr-moodrow{ display: flex; gap: 6px; justify-content: space-between; margin-bottom: 10px; }
.jr-mood{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-size: .68rem; font-weight: 700; }
.jr-mood svg{ width: 24px; height: 24px; }
.jr-mood.on{ border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.jr-prompts{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.jr-prompt{ font-size: .76rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; }
.jr-prompt.on{ border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.jr-promptline{ font-size: .8rem; color: var(--text-muted); margin: 0 0 8px; min-height: 2.2em; }
#jrText{ width: 100%; resize: vertical; }
.jr-past{ margin-top: 12px; border: none; padding: 0; }
.jr-past summary{ cursor: pointer; font-weight: 700; font-size: .84rem; list-style: none; }
.jr-past summary::-webkit-details-marker{ display: none; }
.jr-pastitem{ border-top: 1px solid var(--border); padding: 8px 0; }
.jr-pasthead{ display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.jr-pastmood svg{ width: 16px; height: 16px; color: var(--primary); }
.jr-pastprompt{ color: var(--text-muted); }
.jr-pasttext{ font-size: .82rem; color: var(--text-muted); margin: 4px 0 0; white-space: pre-wrap; }
/* ===== Journal v2: creamy paper skin (theme-tinted, dark = parchment) ===== */
.jr-modal{
--paper: color-mix(in srgb, var(--primary) 5%, #f9f3e4);
--paper-tint: color-mix(in srgb, var(--primary) 9%, #f2e9d6);
--paper-line: color-mix(in srgb, var(--primary) 14%, #e3d6b8);
--paper-edge: color-mix(in srgb, var(--primary) 16%, #d9cbaa);
--rule: 28px;
max-width: 440px; position: relative;
background: var(--paper);
border: 1px solid var(--paper-edge);
}
html[data-mode="dark"] .jr-modal{
--paper: color-mix(in srgb, var(--primary) 9%, #2e2a21);
--paper-tint: color-mix(in srgb, var(--primary) 13%, #383328);
--paper-line: color-mix(in srgb, var(--primary) 18%, #4a4335);
--paper-edge: color-mix(in srgb, var(--primary) 20%, #554d3c);
}
.jr-head{ font-family: Georgia, 'Times New Roman', serif; font-size: 1.3rem; margin: 0; }
.jr-date{ font-size: .72rem; color: var(--text-muted); font-style: italic; margin: 0 0 10px; }
.jr-hub{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jr-pgcard{ text-align: left; border: 1px solid var(--paper-line); border-radius: 4px 16px 16px 16px; background: var(--paper-tint); padding: 14px 12px 12px; box-shadow: 1px 2px 0 var(--paper-edge); cursor: pointer; min-height: 92px; position: relative; color: var(--text); display: flex; flex-direction: column; gap: 3px; }
.jr-pgcard.suggested{ border-color: var(--primary); box-shadow: 1px 2px 0 var(--primary); }
.jr-pgnm{ font-family: Georgia, serif; font-weight: 700; font-size: .95rem; }
.jr-pgnm svg{ width: 13px; height: 13px; color: var(--primary); }
.jr-pgds{ font-size: .7rem; color: var(--text-muted); line-height: 1.35; }
.jr-pgtm{ position: absolute; top: 8px; right: 10px; font-size: .62rem; font-weight: 800; color: var(--primary); }
.jr-sugtag{ display: inline-block; font-size: .58rem; font-weight: 800; background: var(--primary); color: var(--paper); border-radius: 999px; padding: 1px 7px; align-self: flex-start; }
.jr-newpage{ align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 700; color: var(--primary); background: transparent; border-style: dashed; box-shadow: none; }
.jr-back{ display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; color: var(--primary); background: none; border: none; cursor: pointer; padding: 0; margin: 0 0 8px; }
.jr-back svg{ width: 14px; height: 14px; }
.jr-editbtn{ float: right; display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; }
.jr-editbtn svg{ width: 12px; height: 12px; }
.jr-ruled{ background: repeating-linear-gradient(transparent 0, transparent calc(var(--rule) - 1px), var(--paper-line) calc(var(--rule) - 1px), var(--paper-line) var(--rule)); border-radius: 4px; }
.jr-lbl{ display: flex; align-items: center; height: var(--rule); font-family: Georgia, serif; font-style: italic; font-size: .85rem; color: var(--primary); font-weight: 700; }
.jr-modal .jr-ruled input, .jr-modal .jr-ruled textarea{ display: block; width: 100%; height: var(--rule); line-height: var(--rule); border: none; border-radius: 0; background: transparent; font: inherit; font-size: .87rem; padding: 0 2px; color: var(--text); resize: none; box-shadow: none; }
.jr-modal .jr-ruled textarea{ height: calc(var(--rule) * 6); line-height: var(--rule); }
.jr-modal .jr-ruled input::placeholder, .jr-modal .jr-ruled textarea::placeholder{ color: color-mix(in srgb, var(--text-muted) 70%, transparent); font-style: italic; }
.jr-modal .jr-ruled input:focus, .jr-modal .jr-ruled textarea:focus{ outline: none; box-shadow: inset 0 -2px 0 var(--primary); }
.jr-editrow{ display: flex; align-items: center; height: var(--rule); font-family: Georgia, serif; font-style: italic; font-size: .85rem; color: var(--primary); }
.jr-qx{ margin-left: auto; background: none; border: none; font-weight: 800; font-size: 1rem; color: var(--text-muted); cursor: pointer; padding: 0 6px; }
.jr-dumpbtn{ margin-top: 10px; }
.jr-dumprow{ display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 5px 0; border-bottom: 1px dashed var(--paper-line); }
.jr-totask{ margin-left: auto; font-size: .62rem; font-weight: 800; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 2px 9px; background: var(--paper); cursor: pointer; white-space: nowrap; }
.jr-moodrow{ display: flex; gap: 6px; justify-content: space-between; margin-bottom: 12px; }
.jr-modal .jr-mood{ background: var(--paper-tint); border-color: var(--paper-line); }
.jr-modal .jr-past summary{ font-family: Georgia, serif; }
.jr-modal .jr-pastitem{ border-top: 1px solid var(--paper-line); }
.nut-chip.dormant{ opacity: .62; }
.nut-chip.dormant .lock-badge svg{ width: 11px; height: 11px; }
.rc-dormant{ opacity: .62; }
.rc-find{ width: 100%; margin: 4px 0 10px; }
.rc-import-tray{ border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; margin: 10px 0; }
.rc-import-tray summary{ cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.rc-import-tray summary::-webkit-details-marker{ display: none; }
.rc-import-tray summary svg{ width: 15px; height: 15px; color: var(--primary); }
.rc-importlocked{ width: 100%; justify-content: center; margin: 10px 0; }
.rc-two{ display: flex; gap: 8px; margin: 10px 0; }
.rc-popout{ position: fixed; inset: 0; background: rgba(20,16,10,.45); display: flex; align-items: center; justify-content: center; padding: 18px 12px; z-index: 60; }
.rc-popout[hidden]{ display: none; }
.rc-popcard{ position: relative; width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.rc-poptitle{ font-size: 1.05rem; margin: 0 0 10px; }
.wd-storage{ margin: 8px 0 4px; }
.wd-store-bar{ height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.wd-store-bar span{ display: block; height: 100%; background: var(--primary); }
.wd-store-bar.full span{ background: var(--warning, #a5722a); }
.wd-store-txt{ font-size: .72rem; color: var(--text-muted); margin-top: 4px; }
.fk-sec{ border-top: 1px solid var(--border); padding: 6px 0; }
.fk-sec summary{ cursor: pointer; font-weight: 700; font-size: .9rem; padding: 6px 0; list-style: none; }
.fk-sec summary::-webkit-details-marker{ display: none; }
.fk-item{ border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 6px 0; background: var(--surface-2); }
.fk-lbl{ display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: 4px; }
.fk-item p{ font-size: .84rem; margin: 0 0 8px; line-height: 1.45; white-space: pre-wrap; }
.fk-copy{ display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.fk-copy svg{ width: 12px; height: 12px; }
.ai-out{ font-size: .85rem; line-height: 1.5; margin-top: 8px; white-space: pre-wrap; color: var(--text); }
.ai-img{ display: block; width: 100%; border-radius: 12px; margin-top: 8px; }
#tkAiTest textarea{ width: 100%; resize: vertical; margin-bottom: 8px; }
.ai-thumbs{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ai-thumb{ position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.ai-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ai-thumb-x{ position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 999px; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; }
#aiImgComment{ width: 100%; resize: vertical; margin: 6px 0; }
.ai-shop{ margin-top: 10px; }
.ai-shop-head{ font-weight: 800; font-size: .85rem; color: var(--primary); margin-bottom: 6px; }
.ai-shop-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; margin-bottom: 6px; background: var(--surface-2); }
.ai-shop-name{ font-size: .84rem; font-weight: 600; }
.ai-cosm-lbl{ font-size: .8rem; font-weight: 700; margin: 6px 0 4px; }
.ai-cosm{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-cosm-chip{ display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; background: var(--surface-2); cursor: pointer; }
.ai-cosm-chip input{ margin: 0; }
.ai-thumb-tag{ position: absolute; bottom: 2px; left: 2px; font-size: .55rem; font-weight: 800; background: var(--primary); color: #fff; border-radius: 4px; padding: 1px 4px; }
.ai-thumb.main{ box-shadow: 0 0 0 2px var(--primary); }
.ai-thumb-main{ position: absolute; bottom: 2px; left: 2px; font-size: .55rem; font-weight: 800; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 4px; padding: 1px 5px; cursor: pointer; }
.ai-galitem{ position: relative; margin-top: 8px; }
.ai-galtag{ position: absolute; top: 6px; left: 6px; font-size: .62rem; font-weight: 800; background: var(--primary); color: #fff; border-radius: 6px; padding: 2px 8px; }
.ai-reno{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ai-reno-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-reno-row .ai-cosm-chip{ flex: 0 0 auto; }
.ai-reno-sel{ flex: 1; min-width: 130px; font-size: .74rem; padding: 3px 8px; border-radius: 8px; }
.ai-makeover-open{ width: 100%; justify-content: center; margin-top: 6px; }
.ai-mk-card{ max-width: 520px; }
.ai-like{ display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .76rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.ai-like svg{ width: 13px; height: 13px; }
.ai-like:disabled{ opacity: .7; cursor: default; }
.ai-ideabtn{ width: 100%; justify-content: center; margin-top: 10px; }
#aiIdeaGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-zoom{ position: fixed; inset: 0; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 12px; cursor: zoom-out; }
.ai-zoom img{ max-width: 100%; max-height: 100%; border-radius: 8px; }