/* Tether — refreshed design system. Mobile-first; tokens on :root, theme via data-theme, accent via data-palette. */
:root{--bg:#0a0b13;--s1:#11131d;--s2:#181b28;--s3:#212536;--ink:#f1f2f8;--muted:#9aa0b8;--line:#ffffff14;--line-strong:#ffffff26;--pa:#8b7bff;--a:var(--pa);--a2:color-mix(in srgb,var(--pa) 55%,#fff);--rough:#ff8a78;--on-a:#0b0c14;--green:#4ade9f;--amber:#f5c04a;--pink:#ff7eb6;--red:#ff6b81;--r:22px;--dock:68px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);color-scheme:dark}
[data-theme=light]{--rough:#c43d2c;--bg:#f5f4fa;--s1:#fff;--s2:#f0eff7;--s3:#e6e4f0;--ink:#171827;--muted:#62657d;--line:#17182714;--line-strong:#17182726;--on-a:#fff;--green:#14916a;--amber:#a46a08;--pink:#d6417f;--red:#c8334c;color-scheme:light}
[data-theme=light]{--a:color-mix(in srgb,var(--pa) 70%,#000);--a2:color-mix(in srgb,var(--pa) 88%,#000)}
:root{--soft:color-mix(in srgb,var(--a) 14%,transparent)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(48rem 32rem at 90% -8%,color-mix(in srgb,var(--a) 17%,transparent),transparent 62%),radial-gradient(36rem 28rem at -8% 38%,color-mix(in srgb,var(--a2) 8%,transparent),transparent 60%)}
h1,h2,h3,h4,p{margin:0}h3{font-size:16px;font-weight:650;letter-spacing:-.01em}h4{font-size:14px;font-weight:650}
ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}li{margin:6px 0}
.hidden,[hidden]{display:none!important}
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}
/* ---------- controls ---------- */
button{font:inherit;cursor:pointer;border:1px solid transparent;border-radius:14px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--s3);color:var(--ink);font-weight:600;line-height:1.2;transition:transform .12s,background .15s,border-color .15s,opacity .15s}
button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.primary{background:linear-gradient(135deg,var(--a),var(--a2));color:var(--on-a);box-shadow:0 6px 18px color-mix(in srgb,var(--a) 30%,transparent)}
button.ghost{background:transparent;border-color:var(--line-strong)}button.ghost:hover{background:var(--soft)}
button.small{min-height:38px;padding:0 12px;font-size:13px;border-radius:12px}
button.danger{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.icon-button{width:44px;padding:0}
input,select,textarea{font:inherit;font-size:16px;width:100%;min-width:0;min-height:46px;padding:0 14px;border-radius:14px;border:1px solid var(--line-strong);background:var(--s2);color:var(--ink);-webkit-appearance:none;appearance:none}
textarea{padding:12px 14px;min-height:92px;resize:vertical;line-height:1.5}
select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239aa0b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--soft)}
input[type=date],input[type=time]{display:block;text-align:left}
input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;border-radius:6px;accent-color:var(--a);appearance:auto;-webkit-appearance:checkbox}
label{font-size:13px;font-weight:600;color:var(--muted)}
.field{display:grid;gap:6px;min-width:0}.formgrid{display:grid;gap:12px;grid-template-columns:1fr}.field.full{grid-column:1/-1}
.fieldnote,.tiny,small{font-size:12px;color:var(--muted);line-height:1.5}.sub{font-size:13px;color:var(--muted);margin-top:2px}
kbd{font:600 11px ui-monospace,monospace;padding:2px 6px;border-radius:6px;background:var(--s3);color:var(--muted)}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--soft);color:var(--a2);white-space:nowrap}
[data-theme=light] .tag{color:var(--a)}
.divider{height:1px;background:var(--line);margin:16px 0}.empty{padding:18px;border:1px dashed var(--line-strong);border-radius:16px;color:var(--muted);text-align:center;font-size:14px}.empty b{display:block;color:var(--ink);margin-bottom:2px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.pillrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.notice{margin-top:14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);font-size:13px;border:1px solid color-mix(in srgb,var(--amber) 28%,transparent)}
/* ---------- shell ---------- */
.app-shell{display:block}.sidebar,.right-rail{display:none}.app-main{min-width:0;padding:0 16px calc(var(--dock) + var(--sab) + 40px)}
main{min-width:0}main>section{animation:in .28s ease both}@keyframes in{from{opacity:0;transform:translateY(8px)}}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;margin:0 -16px 12px;padding:calc(var(--sat) + 10px) 16px 10px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.topbar-context{flex:1;min-width:0}.date-line{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.context-title{font-size:21px;font-weight:750;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-breadcrumb{display:none;margin-left:.4em;color:var(--muted);font-weight:500;font-size:15px}
.top-actions{display:flex;gap:8px;flex:none}.top-actions button{min-height:44px}
.global-search-trigger .search-label,.global-search-trigger kbd,.backup-top-button{display:none}
.quick-capture-trigger{padding:0 16px}
.page-heading,.motivation-intro{margin:6px 0 18px}.page-kicker,.eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a2)}
.section-title{font-size:clamp(25px,6.6vw,38px);font-weight:780;letter-spacing:-.03em;line-height:1.1;margin:2px 0 8px}
.section-intro{color:var(--muted);max-width:62ch;font-size:15px}main>section>.section-title{margin-top:8px}main>section>.section-intro{margin-bottom:20px}
.motivation-intro{display:grid;gap:14px}.home-page-heading .page-kicker,.home-page-heading .section-intro{display:none}.home-page-heading .section-title{font-size:clamp(24px,6.4vw,32px);margin:4px 0 0}
/* ---------- cards & grids ---------- */
.card{min-width:0;overflow-wrap:anywhere;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 1px 0 #ffffff08 inset}
[data-theme=light] .card{box-shadow:0 2px 12px #1718270a}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.card-head>div{min-width:0}
.grid,.stack,.dashboard-main,.dashboard-top-grid,.dashboard-middle-grid,.dashboard-bottom-grid,.notes-layout,.calendar-layout{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-content:start}
.dashboard-main{gap:14px}
.metric-grid,.calendar-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.metric{min-width:0;padding:12px;border-radius:16px;background:var(--s2)}.metric strong{display:block;font-size:clamp(20px,6vw,28px);font-weight:760;letter-spacing:-.02em;line-height:1.1}.metric span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.3}
.next-card{background:linear-gradient(150deg,color-mix(in srgb,var(--a) 24%,var(--s1)),var(--s1) 70%);border-color:color-mix(in srgb,var(--a) 36%,transparent)}
.next-card h3{font-size:clamp(22px,6vw,28px);font-weight:760;letter-spacing:-.02em;margin-top:10px;line-height:1.15}.next-card .sub{font-size:15px;margin-top:6px}
.next-card .actions .primary{flex:1 1 100%}.next-card .actions .ghost{flex:1 1 auto}
.next-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.next-foot strong{display:block;color:var(--ink);font-size:13px}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-top:14px}
.quick-action{flex-direction:column;min-height:78px;gap:8px;font-size:13px;background:var(--s2);border-color:var(--line)}.qa-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--soft);color:var(--a2)}[data-theme=light] .qa-icon{color:var(--a)}
.card-head button,.capacity-toggle,.sidebar-search,.sidebar-search kbd{white-space:nowrap}.card-head h3{overflow-wrap:normal}.progress-card-head{flex-wrap:wrap}
/* ---------- lists ---------- */
.mini-ladder-item,.routine-row,.activity,.reminder,.calendar-event{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);min-width:0}
.mini-ladder-item:first-child,.routine-row:first-child,.activity:first-child,.calendar-event:first-child{border-top:0}
.reminder{display:block;padding:12px 14px;margin-top:8px;border:1px solid var(--line);border-radius:16px;background:var(--s2)}.reminder strong{display:block}.reminder small{display:block;margin-top:2px}.reminder .actions{margin-top:10px;gap:8px}
.mini-ladder-icon,.routine-mark{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--soft);color:var(--a2);font-weight:700;font-size:14px}
.mini-ladder-copy,.routine-copy,.activity-body,.calendar-event-main{flex:1;min-width:0;display:block}.mini-ladder-copy strong,.routine-copy strong,.activity-title,.calendar-event-main strong{display:block;font-size:15px;font-weight:620;overflow-wrap:anywhere}
.mini-ladder-copy small,.routine-copy small,.activity-meta,.calendar-event-main small{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.mini-bar{height:5px;border-radius:9px;background:var(--line);margin-top:8px;overflow:hidden}.mini-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--a),var(--a2))}
.routine-done .routine-mark{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}.routine-done strong{opacity:.65}
.activity .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--a)}.activity-actions{display:flex;gap:6px;flex:none}
.habit{padding:16px 0;border-top:1px solid var(--line)}.habit:first-child{border-top:0;padding-top:4px}
.habit-row{display:flex;gap:14px;align-items:flex-start}.habit-main{flex:1;min-width:0}
.check{position:relative;flex:none;width:30px;height:30px;min-height:30px;padding:0;margin-top:1px;border-radius:50%;border:2px solid var(--line-strong);background:transparent;font-size:15px;font-weight:800;color:var(--on-a)}
.check::after{content:"";position:absolute;inset:-9px}.check.done{background:var(--a);border-color:var(--a)}
.habit-name{font-size:16px;font-weight:650;overflow-wrap:anywhere}.done-text{text-decoration:line-through;text-decoration-color:var(--muted);opacity:.7}.habit-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.habit .tiny{margin-top:8px!important}.capacity-hint{font-size:12px;color:var(--a2);margin-top:6px}[data-theme=light] .capacity-hint{color:var(--a)}
.ladder{display:flex;gap:5px;margin-top:12px}.ladder span{flex:1;height:5px;border-radius:9px;background:var(--line-strong)}.ladder span.on{background:linear-gradient(90deg,var(--a),var(--a2))}
.habit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.routine-manager-item{display:grid;gap:12px;padding:14px 0;border-top:1px solid var(--line)}.routine-manager-item:first-child{border-top:0;padding-top:2px}.routine-disabled{opacity:.6}
.routine-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.routine-actions{display:flex;flex-wrap:wrap;gap:8px}
.goal-item{padding:16px;margin-bottom:12px;border:1px solid var(--line);border-radius:18px;background:var(--s2)}.goal-item:last-child{margin-bottom:0}.goal-complete{opacity:.8}
.goal-row{display:flex;gap:14px}.goal-badge{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--a2);font-size:18px}
.goal-main{flex:1;min-width:0}.goal-main h4{font-size:17px;overflow-wrap:anywhere}.goal-main p{font-size:13px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.goal-progress-line{height:6px;border-radius:9px;background:var(--line-strong);margin:12px 0 8px;overflow:hidden}.goal-progress-line i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--a),var(--a2))}
.goal-foot{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.goal-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.goal-buttons button{min-height:40px;font-size:13px;flex:1 1 auto}.goal-buttons .primary{flex-basis:100%}
.dash-quote{margin-top:12px;padding:14px;border-radius:16px;background:var(--s2);font-size:14px;color:var(--muted)}.dash-quote strong{color:var(--ink)}.signature{display:block;margin-top:6px;font-size:12px}
.weekday-picks{display:flex;flex-wrap:wrap;gap:8px}.weekday-picks label{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;background:var(--s2);border:1px solid var(--line);color:var(--ink)}
details{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--s2)}summary{cursor:pointer;font-size:14px;min-height:28px}details[open] summary{margin-bottom:10px}
.stage-plan-editor{display:grid;gap:12px}.stage-plan{padding:12px;border-radius:14px;background:var(--s1);border:1px solid var(--line);display:grid;gap:10px}.stage-plan h4{color:var(--a2)}
.timer-display{font-size:clamp(36px,11vw,48px);font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:2px 0 12px}
/* ---------- charts ---------- */
.week-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;height:150px}.week-day{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:0;height:100%}
.bar-stack{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}.bar-stack i{display:block;width:28%;max-width:12px;min-height:3px;border-radius:6px 6px 3px 3px}
.bar-habit{background:var(--a)}.bar-activity{background:var(--pink)}.bar-routine{background:var(--amber)}.week-day small{font-size:11px}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:12px;color:var(--muted)}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.time-layout{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.donut{position:relative;flex:none;width:116px;height:116px;border-radius:50%;display:grid;place-items:center}
.donut::before{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--s1)}.donut-center{position:relative;text-align:center;font-size:11px;color:var(--muted);line-height:1.3}.donut-center strong{display:block;font-size:17px;color:var(--ink)}
.time-legend{flex:1;min-width:140px;display:grid;gap:8px;font-size:13px;color:var(--muted)}.time-legend-row{display:flex;align-items:center;gap:8px}.time-legend-row span{flex:1}.time-legend-row strong{color:var(--ink)}.time-legend-row .legend-dot{margin:0}
/* ---------- calendar ---------- */
.calendar-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}.calendar-toolbar>div{flex:1;min-width:0;text-align:center}.calendar-toolbar h3{font-size:17px}.calendar-toolbar .sub{display:none}.calendar-toolbar .ghost{width:44px;padding:0}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.calendar-weekdays{margin-bottom:6px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase}
.calendar-filter-row{display:flex;align-items:center;gap:10px;margin:12px 0}.calendar-filter-row select{min-height:40px;flex:1}
.calendar-day{min-height:50px;padding:6px 0;flex-direction:column;gap:5px;border-radius:13px;background:var(--s2);border:1px solid transparent;font-weight:600}.calendar-day.outside{opacity:.35}
.calendar-day.is-today{border-color:var(--a);color:var(--a2)}.calendar-day.is-selected{background:var(--a);color:var(--on-a);border-color:var(--a)}
.calendar-day-dots{display:flex;justify-content:center;gap:3px;height:6px}.calendar-day-dots small{line-height:6px;color:inherit}
.cal-dot,.calendar-event-mark{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none}.calendar-event-mark{width:10px;height:10px;margin-top:2px;align-self:flex-start}
.reminder-dot{background:var(--red)}.activity-dot{background:var(--pink)}.note-dot{background:var(--amber)}.goal-dot{background:var(--green)}.habit-dot{background:var(--a)}.routine-dot{background:#4ab4ff}.review-dot{background:var(--a2)}
.calendar-day.is-selected .cal-dot{box-shadow:0 0 0 1.5px var(--on-a)}
.calendar-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:12px;color:var(--muted)}.calendar-legend span{display:flex;align-items:center;gap:6px}
.calendar-note-preview{overflow-wrap:anywhere;word-break:break-word}.calendar-summary{margin:12px 0}.calendar-event-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.calendar-event{align-items:flex-start}.calendar-empty{padding:16px;border-radius:14px;background:var(--s2);color:var(--muted);font-size:14px;text-align:center}
.calendar-quick-add{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.calendar-quick-add .primary{grid-column:1/-1}
/* ---------- notes, motivation, backups, about, settings ---------- */
.note-card{padding:16px;margin-top:12px;border:1px solid var(--line);border-radius:18px;background:var(--s2)}.note-card:first-child{margin-top:0}.note-card h4{font-size:16px;overflow-wrap:anywhere}.note-meta{font-size:12px;color:var(--muted);margin-top:2px}
.note-pinned{font-size:11px;color:var(--amber);margin-left:6px}.note-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;font-size:14.5px;color:color-mix(in srgb,var(--ink) 88%,transparent);max-height:11em;overflow:hidden}
.note-actions{display:flex;flex-wrap:wrap;gap:8px}.note-pin-choice{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--ink);font-weight:500}
.featured-motivation{background:linear-gradient(150deg,color-mix(in srgb,var(--a) 26%,var(--s1)),var(--s1) 75%);border-color:color-mix(in srgb,var(--a) 34%,transparent)}.featured-motivation h3{font-size:clamp(22px,6vw,30px);font-weight:770;margin:12px 0 8px;letter-spacing:-.02em}.featured-motivation p{color:color-mix(in srgb,var(--ink) 85%,transparent);max-width:60ch}
.motivation-step,.message-step{margin-top:14px;padding:12px 14px;border-radius:14px;background:#ffffff0d;font-size:14px}[data-theme=light] .motivation-step,[data-theme=light] .message-step{background:#17182709}.motivation-step strong{font-size:12px;color:var(--a2);text-transform:uppercase;letter-spacing:.06em}
.motivation-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:16px 0}.motivation-card{padding:16px;border-radius:18px;background:var(--s2);border:1px solid var(--line);display:grid;gap:8px;align-content:start}.motivation-card p{font-size:14px;color:var(--muted)}.motivation-card .motivation-step{margin-top:4px}
.motivation-filters{margin-top:2px}.message-title{font-weight:700;margin-bottom:6px}
.backup-action-grid,.safety-grid,.about-feature-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:14px}
.backup-action-card,.safety-check,.about-feature{padding:16px;border-radius:18px;background:var(--s2);border:1px solid var(--line);display:grid;gap:8px;align-content:start}.backup-action-card p,.about-feature p,.safety-check p{font-size:13px;color:var(--muted)}.backup-action-card button{justify-self:start}
.check-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.check-status{flex:none;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--s3);color:var(--muted)}.check-status.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}.check-status.warn{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.backup-log-item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.backup-log-item strong{color:var(--ink)}
.restore-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line-strong);font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;margin:0}
.feature-symbol{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--soft);color:var(--a2)}
.theme-mode-row,.palette-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.theme-mode,.palette-option{border:1px solid var(--line-strong);background:var(--s2);min-height:52px;justify-content:flex-start}.theme-mode{justify-content:center}.theme-mode.selected,.palette-option.selected{border-color:var(--a);background:var(--soft)}
.palette-option i{width:22px;height:22px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--c1),var(--c2))}
.palette-option[data-palette=violet]{--c1:#8b7bff;--c2:#c4b5ff}.palette-option[data-palette=ocean]{--c1:#4aa8ff;--c2:#9ad2ff}.palette-option[data-palette=forest]{--c1:#3fcf9a;--c2:#98f0cb}.palette-option[data-palette=rose]{--c1:#ff6f9f;--c2:#ffb0cb}.palette-option[data-palette=amber]{--c1:#f5b335;--c2:#ffdc92}
/* ---------- dock (mobile/tablet nav) ---------- */
.dock{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(var(--sab) + 10px);height:var(--dock);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px;border-radius:24px;background:color-mix(in srgb,var(--s1) 86%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--line-strong);box-shadow:0 12px 34px #00000055}
.dock .tab{flex-direction:column;gap:3px;min-height:0;height:100%;padding:0;border-radius:18px;background:transparent;font-size:11px;font-weight:600;color:var(--muted)}.dock .tab .i{width:22px;height:22px}
.dock .tab.active{background:var(--soft);color:var(--a2)}[data-theme=light] .dock .tab.active{color:var(--a)}
/* ---------- modals ---------- */
.modal-layer,#globalSearchLayer{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;background:#05060cb3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .2s}@keyframes fade{from{opacity:0}}
.modal-layer{align-items:flex-end}
.modal-card{width:min(560px,100%);max-height:min(90dvh,760px);overflow-y:auto;overscroll-behavior:contain;background:var(--s1);border:1px solid var(--line-strong);border-bottom:0;border-radius:28px 28px 0 0;padding:20px 18px calc(20px + var(--sab));display:grid;gap:14px;align-content:start;animation:sheet .28s cubic-bezier(.2,.8,.2,1)}@keyframes sheet{from{transform:translateY(40px);opacity:.4}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.modal-head h2{font-size:22px;font-weight:760;letter-spacing:-.02em}.modal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--a2);margin-bottom:2px}
.modal-close{flex:none;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;font-size:22px;line-height:1;background:var(--s3)}
.modal-card .actions{margin-top:2px}.modal-card .actions .primary{flex:1 1 auto}.quick-capture-privacy{font-size:12px;color:var(--muted)}
.mobile-nav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mobile-nav-grid button{justify-content:flex-start;min-height:56px;background:var(--s2);border-color:var(--line);text-align:left}.mobile-nav-grid .i{color:var(--a2)}
#globalSearchLayer{align-items:flex-start;padding:calc(var(--sat) + 12px) 12px 12px}.search-dialog{width:min(660px,100%);max-height:calc(100dvh - var(--sat) - 24px);display:flex;flex-direction:column;overflow:hidden;background:var(--s1);border:1px solid var(--line-strong);border-radius:24px;animation:sheet .25s}
.search-dialog-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line)}.search-dialog-head input{border:0;background:transparent;box-shadow:none!important;padding:0;min-height:44px}.search-dialog-head button{min-height:36px;padding:0 12px;font-size:12px}
.search-hint{padding:10px 18px;font-size:12px;color:var(--muted)}.search-results{overflow-y:auto;overscroll-behavior:contain;padding:0 8px 8px}
.search-result{width:100%;justify-content:flex-start;align-items:flex-start;text-align:left;gap:12px;padding:12px;background:transparent;font-weight:400;border-radius:14px}.search-result:hover,.search-result:focus-visible{background:var(--soft)}.search-result strong{display:block;font-weight:620}.search-result small{display:block;margin-top:2px;overflow-wrap:anywhere}.search-result>span:last-child{min-width:0}
.result-kind{flex:none;min-width:68px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--a2);padding-top:3px}.search-empty{padding:24px 12px;text-align:center;color:var(--muted)}
.toast{position:fixed;z-index:95;left:50%;bottom:calc(var(--dock) + var(--sab) + 24px);transform:translateX(-50%);width:max-content;max-width:min(92vw,440px);padding:12px 18px;border-radius:16px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;text-align:center;box-shadow:0 10px 30px #0006;animation:in .25s}
.hero{display:none}
/* ---------- tablet+ ---------- */
@media(min-width:620px){.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.motivation-grid,.backup-action-grid,.safety-grid,.about-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.next-card .actions .primary{flex:0 0 auto}.goal-buttons .primary{flex-basis:auto}.dashboard-middle-grid,.dashboard-bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.routine-card{grid-column:1/-1}.dashboard-bottom-grid>:last-child:nth-child(odd){grid-column:1/-1}.dashboard-top-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.calendar-toolbar .sub{display:block}.modal-layer{align-items:center;padding:20px}.modal-card{border-radius:28px;border-bottom:1px solid var(--line-strong);padding-bottom:20px}.motivation-intro{grid-template-columns:1fr auto;align-items:end}.app-main{padding-left:28px;padding-right:28px}.topbar{margin:0 -28px 14px;padding-left:28px;padding-right:28px}.toast{bottom:calc(var(--dock) + var(--sab) + 30px)}}
@media(max-width:380px){.dock .tab{font-size:10px}.top-actions{gap:6px}.quick-capture-trigger{padding:0 12px}.card{padding:16px}.mobile-nav-grid{grid-template-columns:1fr}.metric{padding:10px}}
/* ---------- desktop: sidebar replaces dock ---------- */
@media(min-width:900px){
 .app-shell{display:grid;grid-template-columns:268px minmax(0,1fr);align-items:start}.dock,#mobileNavLayer{display:none!important}
 .sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100dvh;overflow-y:auto;padding:22px 16px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--s1) 55%,transparent)}
 .brand{display:flex;align-items:center;gap:12px;padding:0 6px}.logo img{width:46px;height:46px;border-radius:14px;display:block;object-fit:cover}.brand h1{font-size:21px;font-weight:780;letter-spacing:-.02em}.brand p{font-size:12px;color:var(--muted)}
 .sidebar-tools{display:none}.sidebar-search{justify-content:flex-start;text-align:left;background:var(--s2);border-color:var(--line);color:var(--muted);font-weight:500}.sidebar-search kbd{margin-left:auto}.sidebar-create{width:100%}
 .side-nav{display:grid;gap:2px}.side-label{margin:14px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
 .side-link{text-align:left;justify-content:flex-start;width:100%;min-height:40px;line-height:1.25;background:transparent;color:var(--muted);font-weight:550;border-radius:12px;padding:0 12px}.side-link:hover{background:var(--s2);color:var(--ink)}.side-link.active{background:var(--soft);color:var(--ink)}.side-link.active .i{color:var(--a2)}
 .sidebar-bottom{margin-top:auto;display:flex;gap:10px;padding:12px;border-radius:16px;background:var(--s2);font-size:12px;color:var(--muted);line-height:1.45}.sidebar-bottom strong{color:var(--ink)}.privacy-mark{color:var(--green)}
 .app-main{padding:0 36px 56px}.topbar{margin:0 -36px 18px;padding:18px 36px 12px;border-bottom:0;background:color-mix(in srgb,var(--bg) 70%,transparent)}.context-breadcrumb{display:inline}.context-title{font-size:26px}
 .global-search-trigger{width:auto;padding:0 14px;min-width:230px;justify-content:flex-start;color:var(--muted);font-weight:500}.global-search-trigger .search-label{display:inline}.global-search-trigger kbd{display:inline;margin-left:auto}.backup-top-button{display:inline-flex}
 .grid,.notes-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.notes-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.calendar-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
 .dashboard-middle-grid,.dashboard-bottom-grid{align-items:start}.motivation-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.backup-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .calendar-day{min-height:62px}.toast{bottom:28px}.search-dialog{margin-top:6vh}
}
@media(min-width:1360px){
 .app-shell{grid-template-columns:268px minmax(0,1fr)}
 .right-rail{display:grid;gap:14px;align-content:start;position:sticky;top:0;height:100dvh;overflow-y:auto;padding:22px 20px 22px 0}
 .rail-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px;font-weight:650}.date-short{flex:1;color:var(--muted);font-size:13px}.rail-icon-btn{width:40px;min-height:40px;padding:0;background:var(--s2);border:1px solid var(--line)}
.motivation-head strong{display:block;font-size:15px}.motivation-head span{font-size:12px;color:var(--muted)}.motivation-message{margin:12px 0;font-size:14px;color:color-mix(in srgb,var(--ink) 88%,transparent)}.motivation-panel .actions{margin-top:12px}
}
@media(min-width:1700px){.dashboard-middle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.routine-card{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- tasks, nudges, transfer ---------- */
.task-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:14px}.task-add input[type=date]{grid-column:1/-1}.task-add button{min-width:84px}
@media(min-width:620px){.task-add{grid-template-columns:minmax(0,1fr) 170px auto}.task-add input[type=date]{grid-column:auto}}
.task{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.task:first-of-type{border-top:0}.card-head+.task{border-top:0;padding-top:2px}
.task-main{flex:1;min-width:0}.task-title{font-weight:620;overflow-wrap:anywhere}.task-done .task-title{text-decoration:line-through;opacity:.6}.task-meta{font-size:12px;color:var(--muted);margin-top:2px}.task-main select{margin-top:8px;min-height:38px;font-size:14px}
.task-actions{display:flex;flex-direction:column;gap:6px;flex:none}.task-actions button{min-height:36px;padding:0 12px;font-size:13px}
.card-head h3 .tag{margin-left:6px;vertical-align:2px}
.nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;margin-bottom:12px;border-radius:16px;background:var(--soft);border:1px solid color-mix(in srgb,var(--a) 28%,transparent);font-size:14px}.nudge div{display:flex;gap:8px}.nudge button{min-height:38px;font-size:13px;padding:0 12px}
.tcode{font:12px/1.4 ui-monospace,SFMono-Regular,monospace;min-height:110px;word-break:break-all}
.head-tools{display:flex;align-items:center;gap:8px;flex:none}.rail-top{display:none}

/* ---------- phase 2: check-in, care cards ---------- */
.checkin,.care{margin-bottom:12px}.care{border-color:color-mix(in srgb,var(--a) 34%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--a) 12%,var(--s1)),var(--s1))}
.chips{display:flex;gap:8px;margin-top:12px}.chips button{flex:1;min-width:0;padding:0 8px}.chips.wrap{flex-wrap:wrap}.chips.wrap button{flex:1 1 auto}.chips button.on{background:var(--soft);border-color:var(--a)}
.enough,.note-line{margin:0 0 12px;padding:12px 14px;border-radius:14px;border-left:3px solid var(--a);background:var(--soft);font-size:14px;color:var(--muted)}
#xCare:not(:empty)~#xNudges{display:none}
.xrow{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;font-weight:500;color:var(--ink)}

/* ---------- phase 3: reminders banner, categories, rough day, seasons ---------- */
#xDue{position:fixed;z-index:110;left:12px;right:12px;top:calc(var(--sat) + 74px);display:grid;gap:8px;max-width:520px;margin:0 auto}
.due{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:var(--s1);border:1px solid var(--a);box-shadow:0 12px 30px #0006}.due b{display:block}.due small{color:var(--muted)}
.seg{margin:0 0 8px}.catrow{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}.catname{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}.catrow small{color:var(--muted);font-size:12px;white-space:nowrap}.catrow input{flex:1;min-width:0;min-height:40px}.catadd{display:flex;gap:8px;margin-top:14px}.catadd input{flex:1}
@media(max-width:520px){.catrow{flex-wrap:wrap}.catrow .catname{flex:1 1 100%}.catrow small{flex:1}}
#xRoughLink{margin:0 0 12px}#xSeasonNote[hidden]{display:none}
#xRough{position:fixed;inset:0;z-index:130;overflow-y:auto;padding:calc(var(--sat) + 16px) 16px calc(var(--sab) + 28px);background:radial-gradient(60rem 40rem at 50% -10%,color-mix(in srgb,var(--a) 24%,transparent),transparent 65%),var(--bg)}#xRough[hidden]{display:none}
.rough-in{max-width:560px;margin:0 auto;display:grid;gap:14px}.rough-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.rough-top h2{font-size:clamp(22px,6vw,28px);letter-spacing:-.02em}.rough-top .primary{flex:none}
.rcard{padding:18px;border-radius:22px;background:var(--s1);border:1px solid var(--line);display:grid;gap:12px;justify-items:start}.rcard textarea{width:100%;margin-top:10px}.rbig{font-size:18px;line-height:1.45;font-weight:560}
.pacer{display:grid;justify-items:center;gap:14px;width:100%;padding:8px 0}.orb{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--a2),var(--a));animation:orb 10s ease-in-out infinite;opacity:.9}@keyframes orb{0%,100%{transform:scale(.55)}40%{transform:scale(1)}}


/* ---------- phase 4: refinements ---------- */
/* rough-day button: warm coral, always reachable from the top bar */
.rough-btn{background:color-mix(in srgb,var(--rough) 14%,transparent);border-color:color-mix(in srgb,var(--rough) 48%,transparent);color:var(--rough);min-height:44px;width:44px;padding:0;border-radius:14px}
.rough-btn .i{fill:color-mix(in srgb,var(--rough) 28%,transparent);stroke:var(--rough)}
.rough-btn:hover{background:color-mix(in srgb,var(--rough) 24%,transparent)}
.rough-btn:focus-visible{outline:2px solid var(--rough);outline-offset:2px}
.rough-label{display:none}
@media(min-width:620px){.rough-btn{width:auto;padding:0 16px}.rough-label{display:inline}}
.linklike{background:none;border:0;min-height:0;padding:0;display:inline;color:var(--a2);text-decoration:underline;text-underline-offset:3px;font-weight:600;border-radius:4px}
#xRoughLink{display:none}
#xRough .rough-top .primary{background:linear-gradient(135deg,var(--rough),color-mix(in srgb,var(--rough) 60%,#fff));color:#1a0b08}

/* toggle switch */
.switch{position:relative;display:inline-block;flex:none;width:52px;height:30px;margin-top:2px}
.switch input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer;z-index:1;border-radius:99px}
.switch .track{display:block;width:52px;height:30px;border-radius:99px;background:var(--s3);border:1px solid var(--line-strong);position:relative;transition:background .18s,border-color .18s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.switch input:checked+.track{background:var(--a);border-color:var(--a)}
.switch input:checked+.track::after{transform:translateX(22px);background:var(--on-a)}
.switch input:focus-visible+.track{box-shadow:0 0 0 3px var(--soft),0 0 0 5px var(--a)}
.is-off{opacity:.5;transition:opacity .15s}.is-off input{pointer-events:none}

/* colour picker */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:12px;margin-top:14px}
.swatch{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:var(--sw);border:2px solid transparent;box-shadow:inset 0 0 0 1px #0003,0 4px 12px color-mix(in srgb,var(--sw) 35%,transparent);justify-self:center;transition:transform .15s}
.swatch:hover{transform:scale(1.08)}.swatch.selected{outline:2px solid var(--ink);outline-offset:3px}
.swatch svg{width:20px;height:20px;stroke:#0b0c14;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:.15s}
.swatch.selected svg{opacity:1;transform:none}
.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.swatch-name{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600}.swatch-name i{width:14px;height:14px;border-radius:50%;flex:none}.swatch-name span{flex:1;min-width:0}
.custom-accent{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:16px;border:1px dashed var(--line-strong)}.custom-accent.selected{border-style:solid;border-color:var(--a);background:var(--soft)}
.custom-pick{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-weight:600;font-size:14px;cursor:pointer}
.custom-pick input{width:40px;height:40px;min-height:40px;padding:2px;border-radius:50%;cursor:pointer;flex:none}
.custom-pick input::-webkit-color-swatch-wrapper{padding:0}.custom-pick input::-webkit-color-swatch{border:0;border-radius:50%}.custom-pick input::-moz-color-swatch{border:0;border-radius:50%}
.hexin{width:104px;flex:none;font:14px ui-monospace,SFMono-Regular,monospace;text-transform:lowercase;min-height:40px}

/* categories + seasons */
.xpanel{margin-top:14px;display:grid;gap:14px}
.disclosure{flex:none;gap:6px}.chev{width:16px;height:16px;stroke-width:2.2;transition:transform .18s}.chev.up{transform:rotate(180deg)}
.catlist{display:grid}.catlist .catrow:first-child{border-top:1px solid var(--line)}.catadd{margin-top:0}
.chipwrap{display:inline-flex;align-items:stretch}.chipwrap>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.chipwrap .chipedit{min-height:0;width:38px;padding:0;border:1px solid var(--line-strong);border-left:0;border-radius:0 14px 14px 0;background:var(--s2);color:var(--muted)}
.dashed{border-style:dashed;color:var(--a2)}
.seg button.on{background:var(--soft);border-color:var(--a)}

/* top bar: breathing room */
@media(min-width:900px){.top-actions{gap:10px}}

/* right rail: one calm panel, aligned with the page header */
@media(min-width:1360px){
 .app-shell{grid-template-columns:268px minmax(0,1fr)}
 .right-rail{display:flex;flex-direction:column;gap:0;padding:0 24px 24px;border-left:1px solid var(--line);background:color-mix(in srgb,var(--s1) 55%,transparent)}
 .rail-top{display:flex;align-items:flex-end;min-height:82px;padding:0 0 14px;margin:0;border-bottom:1px solid var(--line)}
 .rail-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
 .rail-top .date-short{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
 .right-rail .card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:20px 0;border-bottom:1px solid var(--line)}
 .right-rail .card:last-child{border-bottom:0}
 .right-rail .card-head{align-items:flex-start;gap:8px}
 .rail-reminders h3{white-space:nowrap}.rail-reminders .head-tools{gap:6px}
 .rail-icon-btn{width:36px;min-height:36px;border-radius:12px}

 .motivation-panel .motivation-message{margin:10px 0}
}

/* Settings: cards that Tether adds (install, guidance, season, categories) sit under the title with the same 14px rhythm as the rest of the page. */
#xSettingsTop{margin-bottom:14px}
#xSettingsTop:empty{display:none}
.catrow>small{color:var(--muted);font-size:12px;white-space:nowrap}
.catname small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px;overflow-wrap:anywhere}
@media(max-width:520px){.catrow{flex-wrap:wrap}.catrow .catname{flex:1 1 100%}.catrow>small{flex:1}}
#xIdbCheck{margin-bottom:14px}
#xSafety{margin-top:14px}
/* Backup Center: keep an even gap between every stacked card (Back up now, Transfer code, etc.) */
#page-backups>.card,#page-backups>.grid{margin-top:14px}

/* Home: Next reminders card (the old right panel is gone) */
.rail-reminders{margin:0}
.rail-reminders .card-head{align-items:flex-start;gap:8px}
.rail-reminders .head-tools{gap:8px}
.icon-only{width:40px;min-height:40px;padding:0;display:inline-grid;place-items:center}

/* Mid-width desktops/laptops: compact the top bar so the page title always fits. */
@media(min-width:900px) and (max-width:1279px){
 .global-search-trigger{min-width:0;width:44px;padding:0;justify-content:center}
 .global-search-trigger .search-label,.global-search-trigger kbd{display:none}
 .rough-btn{width:44px;padding:0}.rough-label{display:none}
 .backup-top-button span{display:none}.backup-top-button{width:44px;padding:0}
}
.context-title{min-width:0}
