/* iOS-inspired web surfaces. Uses the device's system font, never a bundled Apple font. */
:root{--canvas:#f2f2f7;--surface:#fff;--surface-raised:#fff;--sidebar:#f2f2f7;--line:#d8d8de;--secondary:#63636b;--muted:#63636b;--label:#1c1c1e;--tint:var(--accent-text);--selection:var(--accent-soft);--material:rgba(250,250,252,.9);--destructive:#c9342f;background:var(--canvas);color:var(--label);font-family:var(--app-font,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[data-theme=dark]{--canvas:#000;--surface:#1c1c1e;--surface-raised:#2c2c2e;--sidebar:#111113;--line:#3b3b40;--secondary:#b5b5bd;--muted:#b5b5bd;--label:#f5f5f7;--tint:var(--accent-dark-text);--selection:var(--accent-dark-soft);--material:rgba(28,28,30,.92);--destructive:#ffaaa4;background:var(--canvas);color:var(--label)}
body{background:var(--canvas);color:var(--label)}button,input,textarea,select{font-family:inherit}button{-webkit-tap-highlight-color:transparent}button:active{filter:brightness(.94)}input,textarea,select{accent-color:var(--accent)}
main{min-height:100svh}.content{max-width:900px;margin-top:28px;padding-bottom:60px}h1{font-size:calc(34px * var(--text-scale,1));font-weight:750;letter-spacing:-1.1px;line-height:1.15;color:var(--label)}#view-subtitle{font-size:calc(14px * var(--text-scale,1));color:var(--secondary);line-height:1.6;margin-top:8px}#view-subtitle span{color:inherit}.heading-row{margin-bottom:26px}
#sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:20px 16px}.account-name strong{font-size:15px}.avatar,[data-theme=dark] .avatar{border:0;background:var(--selection);color:var(--tint)}.nav-item,.nav-add{border-radius:11px;min-height:44px;font-size:15px}.nav-add,.nav-add:hover{color:var(--tint)}.nav-item.selected,[data-theme=dark] .nav-item.selected{background:var(--selection);color:var(--tint)}.selected .nav-count,.selected .nav-today{color:var(--tint)}.nav-count{font-size:13px;color:var(--secondary)}.projects-heading{font-size:13px;color:var(--secondary);margin-top:24px}.project-hash{font-size:20px}.brand,[data-theme=dark] .brand{color:var(--label);letter-spacing:-.3px;font-size:15px}.brand img{width:25px;height:25px;opacity:1}.brand>span{display:none}.settings-launch,[data-theme=dark] .settings-launch{font-size:15px;color:var(--tint)}.storage-status,[data-theme=dark] .storage-status{color:var(--secondary)}
.cloud-bar,[data-theme=dark] .cloud-bar{background:var(--material);border-bottom:1px solid var(--line);font-size:12px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.cloud-bar #cloud-status{color:var(--secondary)}.cloud-bar .button,.account-actions summary{border:0;background:var(--surface-raised);color:var(--tint);border-radius:999px;min-height:36px;font-size:12px}.account-actions-menu{background:var(--surface-raised);border-radius:16px}.account-actions-menu #signout{color:var(--destructive)}
.topbar{background:transparent}.topbar-right,#daily-progress{color:var(--secondary)}.topbar .icon-button,.text-button{color:var(--tint)}.text-button{border-radius:999px;font-size:calc(14px * var(--text-scale,1));padding:8px 12px}.text-button:hover,[data-theme=dark] .text-button:hover{background:var(--selection);color:var(--tint)}.theme-symbol{color:var(--secondary)}.theme-toggle{border:0;background:#d1d1d6}.theme-toggle[aria-checked=true],[data-theme=dark] .theme-toggle{border:0;background:#248a3d}.theme-thumb,[data-theme=dark] .theme-thumb{background:#fff;box-shadow:0 2px 4px #0003}
.list-section,#list:has(> .task-row){background:var(--surface);border-radius:18px;padding:0 16px;margin-bottom:22px;box-shadow:0 1px 1px #00000004}.section-heading,[data-theme=dark] .section-heading{margin:0;padding:16px 0 12px;border-color:var(--line);align-items:center}.section-heading h2{font-size:calc(17px * var(--text-scale,1));font-weight:650;color:var(--label)}.section-heading small{font-size:12px;background:var(--canvas);padding:2px 7px;border-radius:999px;color:var(--secondary)}.section-date{color:var(--secondary);font-size:12px}.section-heading.overdue h2,[data-theme=dark] .section-heading.overdue h2,.task-date.overdue,[data-theme=dark] .task-date.overdue{color:var(--destructive)}.section-heading button,[data-theme=dark] .section-heading button{color:var(--tint);font-size:13px}.task-row{border-color:var(--line);gap:10px;padding:14px 0}.task-row:last-child{border-bottom:0}.task-name{font-size:calc(17px * var(--text-scale,1));line-height:1.4;color:var(--label);font-weight:450;letter-spacing:-.2px}.task-description{font-size:calc(14px * var(--text-scale,1));color:var(--secondary);line-height:1.5}.task-meta,.task-project{font-size:calc(12px * var(--text-scale,1));color:var(--secondary)}.task-label{color:var(--secondary);background:var(--canvas);border-radius:5px;padding:1px 5px}.task-actions .icon-button{color:var(--secondary)}.task-date.future{color:var(--tint)}.check-task{width:22px;height:22px;margin-top:2px}.check-task:focus-visible{outline-offset:3px}.task-row.done .task-name{color:var(--secondary)}
.empty-state{padding:44px 24px;background:var(--surface);border-radius:22px}.empty-illustration:before{background:var(--selection)}.empty-illustration svg{color:var(--tint)}.empty-state h2{color:var(--label);font-size:calc(20px * var(--text-scale,1))}.empty-state p,.quiet-footer{color:var(--secondary);font-size:calc(13px * var(--text-scale,1))}.quiet-footer{font-size:12px}.tiny-mark{color:var(--tint);border-color:var(--line)}
.button{border:0;border-radius:11px;background:var(--surface-raised);color:var(--tint);font-size:calc(15px * var(--text-scale,1));min-height:44px}.button:hover,[data-theme=dark] .button:hover{background:var(--selection)}.button.primary,.button.primary:hover,[data-theme=dark] .button.primary,[data-theme=dark] .button.primary:hover{background:var(--accent);color:#fff;border:0;font-weight:600}.button.danger,[data-theme=dark] .button.danger{color:var(--destructive)}.icon-button{border-radius:50%;min-width:36px;min-height:36px}.icon-button:hover,[data-theme=dark] .icon-button:hover{background:var(--selection);color:var(--tint)}
.options,[data-theme=dark] .options,.search-box,[data-theme=dark] .search-box{background:var(--surface);border:0;border-radius:14px;color:var(--secondary)}.options select,[data-theme=dark] .options select{color:var(--label);background:var(--canvas);border:0;border-radius:8px;font-size:15px}.search-box{gap:10px;padding:11px 14px}.search-box input{font-size:17px;background:transparent;color:var(--label)}.search-box input::placeholder{color:var(--secondary)}
.layout-switch,[data-theme=dark] .layout-switch{background:var(--line);border:0;border-radius:9px;padding:3px;gap:0}.layout-switch button{font-size:13px;color:var(--secondary);border-radius:7px;padding:7px 12px}.layout-switch button[aria-pressed=true],[data-theme=dark] .layout-switch button[aria-pressed=true]{background:var(--surface-raised);color:var(--label);box-shadow:0 2px 5px #0002}.week-strip{background:var(--surface);border:0;border-radius:16px;padding:8px;margin-bottom:22px}.week-day{border-radius:11px;color:var(--secondary)}.week-day.today,[data-theme=dark] .week-day.today{background:var(--selection);color:var(--tint)}.week-day.active{box-shadow:inset 0 -2px var(--tint)}.calendar-toolbar h2{font-size:20px;font-weight:650}.calendar-toolbar .icon-button{color:var(--tint)}.calendar-scroll{background:var(--surface);border-radius:16px;border-color:var(--line)}.month-calendar th{background:var(--surface-raised);color:var(--secondary);font-size:12px}.calendar-cell{border-color:var(--line)}.outside-month,[data-theme=dark] .outside-month{background:var(--canvas)}.calendar-date,[data-theme=dark] .calendar-date{color:var(--secondary)}.calendar-task,[data-theme=dark] .calendar-task{background:var(--selection);color:var(--label);border-radius:6px}.calendar-time,[data-theme=dark] .calendar-time{color:var(--secondary)}
.filter-card,.label-manage-row{background:var(--surface);border:0;border-radius:14px}.filter-card{font-size:16px;min-height:64px}.filter-card:hover{background:var(--selection)}.label-manage-row{padding:0 12px;margin-bottom:8px}.label-link{font-size:16px}.label-heading{color:var(--secondary);border:0;font-size:13px;text-transform:uppercase;letter-spacing:.6px}.label-link svg,.filter-card svg{color:var(--tint)}
dialog,[data-theme=dark] dialog{background:var(--surface);border:0;border-radius:22px;color:var(--label);box-shadow:0 24px 80px #0004}dialog::backdrop{background:#0005;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.task-modal-top{font-size:14px;color:var(--secondary)}.task-modal-top .icon-button,.settings-header .icon-button{background:var(--canvas);color:var(--secondary)}.title-input{color:var(--label);font-size:23px;background:transparent}.title-input::placeholder,#task-description::placeholder{color:var(--secondary)}#task-description{background:transparent;color:var(--label);font-size:16px}.task-properties>label,[data-theme=dark] .task-properties>label{border:0;border-radius:10px;background:var(--canvas);color:var(--secondary)}.task-properties input,.task-properties select{color:var(--label);font-size:15px}.quick-tip{color:var(--secondary);font-size:12px}.modal-footer,[data-theme=dark] .modal-footer{border-color:var(--line);background:var(--surface)}.project-picker,.project-picker select{color:var(--tint)}.form-label input,.form-label select,[data-theme=dark] .form-label input,[data-theme=dark] .form-label select{background:var(--canvas);color:var(--label);border:1px solid var(--line);border-radius:11px;font-size:16px}
#settings-dialog,[data-theme=dark] #settings-dialog{background:var(--canvas);max-width:700px}.settings-header{border:0;padding:26px 24px 18px}.settings-header h2{font-size:28px;font-weight:750;color:var(--label)}.settings-header p{color:var(--secondary);font-size:14px;line-height:1.5}.settings-section{margin-top:24px}.settings-section h3{color:var(--secondary);font-size:12px;letter-spacing:.6px;font-weight:500;margin:0 16px 8px}.setting-row{background:var(--surface);padding:15px 16px;gap:16px;position:relative;border-bottom:1px solid var(--line);margin:0}.settings-section .setting-row:first-of-type{border-radius:15px 15px 0 0}.settings-section .setting-row:last-of-type{border-radius:0 0 15px 15px;border-bottom:0}.setting-row strong{font-size:calc(16px * var(--text-scale,1));font-weight:450;color:var(--label)}.setting-row small,[data-theme=dark] .setting-row small{font-size:calc(13px * var(--text-scale,1));color:var(--secondary);line-height:1.5}.setting-row select,[data-theme=dark] .setting-row select{background:transparent;color:var(--tint);border:0;font-size:15px;padding:8px 2px;max-width:52%;min-height:44px}.setting-toggle,[data-theme=dark] .setting-toggle{width:51px;height:31px;border:0;background:#b8b8c0}.setting-toggle:before{width:27px;height:27px;left:2px;top:2px;box-shadow:0 2px 4px #0003}.setting-toggle:checked,[data-theme=dark] .setting-toggle:checked{background:#248a3d}.setting-toggle:checked:before{transform:translateX(20px)}.settings-bottom{border:0;background:var(--material);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.settings-bottom>span,.settings-help{font-size:12px;color:var(--secondary)}.settings-data{padding:12px 0}.settings-data .button{background:var(--surface)}
.appearance-row,.tint-row{display:block}.appearance-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}.appearance-picker button{border-radius:12px;padding:10px 4px;font-size:13px;color:var(--secondary);border:2px solid transparent;min-height:100px}.appearance-picker button[aria-pressed=true]{border-color:var(--tint);color:var(--tint);background:var(--selection);font-weight:600}.appearance-preview{display:block;width:44px;height:58px;margin:0 auto 10px;border-radius:8px;box-shadow:0 0 0 1px #8885,inset 0 10px #8882;position:relative;background:#f2f2f7}.appearance-preview:after{content:'';position:absolute;inset:20px 6px 8px;border-radius:4px;background:repeating-linear-gradient(to bottom,#8e8e9340 0 3px,transparent 3px 9px)}.dark-preview{background:#1c1c1e}.auto-preview{background:linear-gradient(90deg,#f2f2f7 50%,#1c1c1e 50%)}.tint-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:18px}.tint-picker button{width:100%;min-height:44px;display:grid;place-items:center;position:relative;border-radius:50%}.tint-picker button:before{content:'';width:28px;height:28px;background:var(--swatch);border-radius:50%;position:absolute}.tint-picker button span{z-index:1;color:#fff;font-size:17px;font-weight:700;opacity:0}.tint-picker button[aria-pressed=true]{outline:2px solid var(--tint);outline-offset:-3px}.tint-picker button[aria-pressed=true] span{opacity:1}
.account-gate{background:var(--canvas)}.account-card,[data-theme=dark] .account-card{background:var(--surface);border:0;border-radius:26px;box-shadow:0 10px 50px #0000000a;padding:32px}.account-card h1{font-size:30px;letter-spacing:-.8px}.account-card>p{font-size:15px;color:var(--secondary)}.account-card .account-footnote{font-size:12px}.account-tabs{background:var(--canvas);border:0;border-radius:10px;padding:3px;gap:0}.account-tabs button{border:0!important;border-radius:8px;font-size:15px;color:var(--secondary);flex:1}.account-tabs button[aria-pressed=true],[data-theme=dark] .account-tabs button[aria-pressed=true]{color:var(--label);background:var(--surface-raised);box-shadow:0 2px 5px #0002}.account-card .form-label{font-size:15px;font-weight:500}.account-card .form-label input{background:var(--canvas);min-height:48px}.account-submit{border-radius:12px}.account-card #forgot-password{color:var(--tint)}
[data-bold-text] .task-name,[data-bold-text] .setting-row strong,[data-bold-text] .nav-item,[data-bold-text] .button{font-weight:700}
[data-contrast]{--secondary:#37373d;--line:#8b8b91}[data-theme=dark][data-contrast]{--secondary:#e0e0e5;--line:#8b8b91}[data-contrast] .task-meta,[data-contrast] .task-description,[data-contrast] #view-subtitle,[data-contrast] .setting-row small{color:var(--secondary)}
.mobile-tabs{display:none}
@media(max-width:720px){
 #application .topbar{background:var(--material);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line);height:56px;padding:4px 16px}.topbar .icon-button{color:var(--tint)}.theme-toggle{height:30px;width:54px}.theme-thumb{height:24px;width:24px;top:3px;left:3px}.theme-toggle[aria-checked=true] .theme-thumb,[data-theme=dark] .theme-thumb{transform:translateX(24px)}#daily-progress{font-size:11px}
 .cloud-bar{padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));font-size:12px}.cloud-bar #account-email{font-size:12px}.cloud-bar #cloud-status{font-size:11px}.cloud-bar #sync-now,.cloud-bar .account-actions summary{min-height:36px;font-size:12px}.cloud-bar .account-actions-menu .button{font-size:15px;min-height:44px}
 .content{padding:0 16px calc(165px + env(safe-area-inset-bottom));margin-top:26px}h1{font-size:calc(34px * var(--text-scale,1));letter-spacing:-1px}#view-subtitle{font-size:calc(13px * var(--text-scale,1));margin-top:7px;line-height:1.5}.heading-row{margin-bottom:22px}.heading-row>div:first-child{min-width:0}.view-controls{padding-top:2px}.text-button{font-size:14px}.list-section,#list:has(> .task-row){border-radius:18px;padding:0 12px;margin-bottom:20px}.section-heading{padding:14px 0 10px}.section-heading h2{font-size:calc(17px * var(--text-scale,1))}.section-heading button{font-size:12px}.task-row{gap:6px;padding:8px 0}.task-name{font-size:calc(17px * var(--text-scale,1));font-weight:450;line-height:1.4}.task-description{font-size:calc(14px * var(--text-scale,1));line-height:1.5;margin-top:4px}.task-meta{font-size:calc(12px * var(--text-scale,1));gap:6px;margin-top:7px}.task-copy{padding:8px 0}.task-actions .icon-button{width:36px;min-width:36px;height:44px}.task-actions svg{width:16px;height:16px}.check-task,.check-task.p1,.check-task.p2,.check-task.p3{width:44px;height:44px;min-width:44px;min-height:44px;border:0}.check-task:before{width:23px;height:23px;background:var(--surface);border-color:var(--secondary)}.task-row.done .check-task:before{background:#63636b}.check-task svg{width:14px;height:14px}
 .mobile-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:18;padding:6px max(12px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));background:var(--material);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--line)}.mobile-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;color:var(--secondary);font-size:11px;font-weight:500;border-radius:12px}.mobile-tabs button svg{width:23px;height:23px;stroke-width:1.8}.mobile-tabs button.selected{color:var(--tint);font-weight:650}.mobile-tabs button:active{background:var(--selection)}.mobile-add{bottom:calc(78px + env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));background:var(--accent);border-radius:999px;min-height:52px;font-size:16px;box-shadow:0 5px 18px #0002}.sidebar-open .mobile-tabs{visibility:hidden}.sidebar-scrim{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}#application #sidebar{border-radius:0 24px 24px 0;background:var(--surface);border-right:0;width:min(330px,calc(100vw - 38px));box-shadow:12px 0 50px #0002}.nav-item,.nav-add{font-size:calc(16px * var(--text-scale,1))}
 #toast{bottom:calc(142px + env(safe-area-inset-bottom));background:var(--surface-raised);color:var(--label);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 25px #0002}#toast button,#toast #undo{color:var(--tint)}
 dialog{width:100%;max-width:100%;max-height:calc(100dvh - 18px);border-radius:24px 24px 0 0;margin:auto 0 0;box-shadow:0 -12px 60px #0003}#task-form{padding:14px 20px 0}.task-modal-top{padding-top:6px;margin-bottom:14px;font-size:14px}.title-input{font-size:calc(23px * var(--text-scale,1));min-height:50px}#task-description{font-size:calc(17px * var(--text-scale,1));min-height:80px}.task-properties>label{min-height:48px;padding:9px 10px;border-radius:11px;flex-basis:135px}.task-properties input,.task-properties select{font-size:16px}.quick-tip{font-size:13px}.modal-footer{margin-left:-20px;margin-right:-20px;padding:12px 20px calc(16px + env(safe-area-inset-bottom));background:var(--surface)}.modal-footer .project-picker{min-height:44px}.project-picker select{font-size:17px}.button{font-size:calc(16px * var(--text-scale,1));min-height:46px}.modal-footer .primary{border-radius:12px}.modal-footer .button:not(.primary){background:var(--canvas)}.form-label input,.form-label select{font-size:17px}
 #settings-dialog{width:100%;max-width:100%;max-height:calc(100dvh - 18px);border-radius:24px 24px 0 0}.settings-header{padding:24px 20px 14px;gap:10px}.settings-header h2{font-size:28px}.settings-header p{font-size:13px}.settings-header .icon-button{width:44px;height:44px}.settings-header .icon-button:active{background:var(--selection)}#settings-form{padding:0 16px 24px}.settings-section h3{font-size:12px;margin-left:16px}.setting-row{padding:14px 16px;gap:14px}.setting-row>span{flex-basis:52%;flex-grow:1}.setting-row strong{font-size:calc(16px * var(--text-scale,1));font-weight:450}.setting-row small{font-size:calc(13px * var(--text-scale,1))}.setting-row select{font-size:16px;max-width:100%;min-height:44px;flex-shrink:1}.setting-toggle{width:51px;height:31px}.setting-toggle:before{width:27px;height:27px}.setting-toggle:checked:before{transform:translateX(20px)}.settings-bottom{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px}.settings-bottom>span{font-size:12px}.settings-bottom .button{min-height:46px}.settings-bottom .primary{flex:1}.appearance-picker{gap:6px}.appearance-picker button{font-size:13px;min-width:0}.appearance-row>span,.tint-row>span{display:block}.tint-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;max-width:300px}.tint-picker button{min-height:44px}.tint-picker button:before{width:32px;height:32px}.tint-picker button[aria-pressed=true]{outline-offset:0;border-radius:14px}
 .account-gate{padding:24px 18px;min-height:100svh}.account-card{border-radius:24px;padding:28px 22px}.account-card h1{font-size:30px}.account-card>p{font-size:15px}.account-card .account-tabs button{font-size:15px;min-height:44px}.account-card .account-submit{font-size:17px;min-height:50px}.account-card .form-label{font-size:15px}.account-card input{font-size:17px}.account-card .text-button{font-size:16px}.account-card .account-footnote{font-size:12px}
 .calendar-content{padding-left:16px;padding-right:16px}.calendar-toolbar h2{font-size:20px}.calendar-toolbar .icon-button{min-width:44px;min-height:44px}.calendar-swipe-hint{font-size:12px;color:var(--secondary)}.filter-card{font-size:16px}.week-day span{font-size:12px}.week-day strong{font-size:19px}.empty-state{padding:34px 20px}.empty-state h2{font-size:22px}.empty-state p{font-size:15px}
}
@media(max-width:360px){.content{padding-left:12px;padding-right:12px}.list-section,#list:has(> .task-row){padding:0 10px}.task-actions{display:none}.cloud-bar{padding-left:12px;padding-right:12px}.setting-row>span{flex-basis:100%}.setting-row:has(.setting-toggle)>span{flex-basis:60%}.appearance-picker button{font-size:12px}.settings-header p{max-width:230px}.tint-picker{gap:8px}.task-properties>label{flex-basis:115px}}
[data-reduced-transparency] .cloud-bar,[data-reduced-transparency] #application .topbar,[data-reduced-transparency] .mobile-tabs,[data-reduced-transparency] .settings-bottom{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}[data-reduced-transparency] dialog::backdrop,[data-reduced-transparency] .sidebar-scrim{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-transparency:reduce){.cloud-bar,#application .topbar,.mobile-tabs,.settings-bottom{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){button{transition:none!important;animation:none!important}}
/* Keep the visible switch compact while its button hit area remains 44px tall. */
@media(max-width:720px){.cloud-bar #sync-now,.cloud-bar .account-actions summary{min-height:44px}.task-actions .icon-button{min-width:44px;width:44px}.theme-toggle,.theme-toggle[aria-checked=true],[data-theme=dark] .theme-toggle{height:44px;min-height:44px;background:transparent;position:relative;overflow:visible}.theme-toggle:before{content:'';position:absolute;inset:7px 0;border-radius:999px;background:#d1d1d6}.theme-toggle[aria-checked=true]:before{background:#248a3d}.theme-thumb,[data-theme=dark] .theme-thumb{top:10px;width:24px;height:24px}.account-actions summary:focus-visible,.appearance-picker button:focus-visible,.tint-picker button:focus-visible{outline:3px solid var(--tint);outline-offset:2px}}
@media(max-width:360px){.setting-row select{width:100%;flex-basis:100%;max-width:100%}}

/* Keep Upcoming's long heading separate from its layout controls. */
@media(max-width:720px){
 .heading-row:has(#upcoming-layout:not([hidden])){display:flex;flex-direction:column;align-items:stretch;gap:16px}
 .heading-row:has(#upcoming-layout:not([hidden]))>div:first-child{width:100%;min-width:0}
 .heading-row:has(#upcoming-layout:not([hidden])) .view-controls{width:100%;justify-content:space-between;flex-wrap:nowrap}
 .heading-row:has(#upcoming-layout:not([hidden])) #view-title{overflow-wrap:normal;word-break:normal}
 #view-subtitle{display:block;overflow-wrap:normal;word-break:normal}
}
/* Explicit field surfaces prevent dark-mode UA styling and nested gray blocks. */
#task-title,#task-description,[data-theme=dark] #task-title,[data-theme=dark] #task-description{background:transparent;color:var(--label);border:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.task-properties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;align-items:start}
.task-properties>label,[data-theme=dark] .task-properties>label{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;min-width:0;max-width:none;min-height:0;padding:0;background:transparent;border:0;border-radius:0;flex:auto}
.property-caption{font-size:13px;font-weight:600;line-height:1.4;color:var(--secondary)}
.task-properties input,.task-properties select,[data-theme=dark] .task-properties input,[data-theme=dark] .task-properties select{display:block;box-sizing:border-box;min-width:0;width:100%;max-width:100%;min-height:46px;margin:0;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--label);box-shadow:none;font-size:16px;line-height:1.4}
.task-properties input[type=date],.task-properties input[type=time]{width:100%;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
.task-properties input::-webkit-date-and-time-value{text-align:left;min-height:1.4em;margin:0;padding:0}
.task-properties input::-webkit-datetime-edit{padding:0}
.task-properties input::placeholder{color:var(--secondary);opacity:1}
.task-properties input:focus-visible,.task-properties select:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.task-properties .labels-field{grid-column:1/-1}
.task-properties select{padding-right:22px}
.project-picker select,[data-theme=dark] .project-picker select{background:transparent;border:0;box-shadow:none;color:var(--tint)}
.title-input{white-space:normal;overflow-wrap:normal;letter-spacing:-.3px}
@media(max-width:360px){.task-properties{grid-template-columns:minmax(0,1fr)}.task-properties .labels-field{grid-column:auto}#task-description{min-height:60px}.title-input{font-size:21px}}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
/* Account controls live in Settings, outside the workspace's conflict lock. */
#application #sidebar{top:0}
.account-settings{padding:0 24px;margin-top:4px}
#settings-dialog .cloud-bar{position:static;display:flex;flex-wrap:wrap;gap:12px;padding:16px;border:0;border-radius:16px;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
#settings-dialog #account-email{flex:1 0 100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;color:var(--label);font-size:16px;font-weight:600}
#settings-dialog #cloud-status{flex:1 0 100%;min-width:0;font-size:13px;line-height:1.5}
#settings-dialog .cloud-bar .button,#settings-dialog .account-actions summary{min-height:44px;font-size:15px}
#settings-dialog .account-actions{flex:1}
#settings-dialog .account-actions-menu{position:static;box-shadow:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:0}
#settings-dialog .account-actions summary{display:flex;align-items:center;justify-content:space-between;padding:8px 14px}
@media(max-width:720px){
 body{padding-top:var(--safe-top)}
 body:before{content:'';position:fixed;inset:0 0 auto;height:var(--safe-top);background:var(--canvas);z-index:19;pointer-events:none}
 html{scroll-padding-top:calc(64px + var(--safe-top))}
 #application .topbar{top:var(--safe-top);padding-left:max(16px,var(--safe-left));padding-right:max(16px,var(--safe-right))}
 .content{padding-left:max(16px,var(--safe-left));padding-right:max(16px,var(--safe-right));padding-bottom:calc(165px + var(--safe-bottom))}
 .mobile-tabs{padding:6px max(12px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(12px,var(--safe-left))}
 .mobile-add{bottom:calc(78px + var(--safe-bottom));right:max(20px,var(--safe-right))}
 #toast{bottom:calc(142px + var(--safe-bottom))}
 #application #sidebar{padding-top:calc(16px + var(--safe-top));padding-bottom:calc(20px + var(--safe-bottom));padding-left:max(16px,var(--safe-left))}
 dialog,#settings-dialog{max-height:calc(100dvh - var(--safe-top) - 12px);width:calc(100% - var(--safe-left) - var(--safe-right));max-width:calc(100% - var(--safe-left) - var(--safe-right));margin-left:var(--safe-left);margin-right:var(--safe-right)}
 .modal-footer{padding-bottom:calc(16px + var(--safe-bottom))}
 .settings-bottom{padding-bottom:calc(12px + var(--safe-bottom))}
 .project-modal-footer{padding-bottom:calc(12px + var(--safe-bottom))}
 .account-gate{min-height:calc(100svh - var(--safe-top));padding:24px max(18px,var(--safe-right)) calc(24px + var(--safe-bottom)) max(18px,var(--safe-left))}
 .account-settings{padding:0 16px}
}
/* Keep the workspace quiet; appearance controls belong in Settings. */
.sidebar-footer .settings-launch{display:block;text-align:left;min-height:44px;padding:10px 0;margin-bottom:4px;font-weight:500}
#daily-progress{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:var(--secondary);font-size:calc(13px * var(--text-scale,1));line-height:1.5}
#daily-progress[hidden]{display:none}
#daily-progress svg{width:15px;height:15px;flex-shrink:0;color:var(--tint)}
#mountain-celebration{position:fixed;z-index:45;left:50%;top:50%;width:min(244px,calc(100vw - 48px - var(--safe-left) - var(--safe-right)));box-sizing:border-box;padding:18px 14px 22px;border-radius:26px;background:var(--surface-raised);border:1px solid var(--line);box-shadow:0 16px 64px #0003;color:var(--tint);text-align:center;pointer-events:none;animation:mountain-popup 1800ms ease both}
#mountain-celebration svg{display:block;width:100%;height:auto;overflow:visible}
#mountain-celebration strong{display:block;margin-top:6px;font-size:17px;line-height:1.4;letter-spacing:-.3px;color:var(--label)}
.mountain-half{transform-origin:112px 128px;animation-duration:1800ms;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.mountain-left{animation-name:mountain-split-left}.mountain-right{animation-name:mountain-split-right}
.mountain-crack{stroke-dasharray:150;stroke-dashoffset:150;animation:mountain-crack 1800ms ease both}
.mountain-chip{opacity:0;animation:mountain-chip 1800ms ease-out both;transform-origin:117px 80px}
.chip-one{--chip-x:-30px;--chip-y:30px;--chip-turn:-70deg}.chip-two{--chip-x:24px;--chip-y:36px;--chip-turn:90deg}.chip-three{--chip-x:15px;--chip-y:-10px;--chip-turn:50deg}
@keyframes mountain-popup{0%{opacity:0;transform:translate(-50%,-46%) scale(.88)}12%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-53%) scale(.96)}}
@keyframes mountain-split-left{0%,28%{transform:translateX(0) rotate(0)}62%,100%{transform:translate(-18px,3px) rotate(-9deg)}}
@keyframes mountain-split-right{0%,28%{transform:translateX(0) rotate(0)}62%,100%{transform:translate(18px,3px) rotate(9deg)}}
@keyframes mountain-crack{0%,16%{stroke-dashoffset:150;opacity:0}20%{opacity:1}36%{stroke-dashoffset:0;opacity:1}48%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes mountain-chip{0%,31%{opacity:0;transform:translate(0,0) rotate(0)}38%{opacity:1}72%,100%{opacity:0;transform:translate(var(--chip-x),var(--chip-y)) rotate(var(--chip-turn))}}
[data-reduced-motion] #mountain-celebration{display:none}
@media(prefers-reduced-motion:reduce){#mountain-celebration{display:none}}