/* Abstract paper: presentation only; existing routes and controls retained. */
:root{--linen:#f7f2e7;--paper:#fffcf5;--ink:#182c27;--muted:#55635b;--clay:#285343;--line:#dedecf;--shadow:0 8px 25px #283f3010,0 2px 5px #283f3006;--display:Georgia,'Times New Roman',serif}
body{background:radial-gradient(ellipse at 10% 0,#fffaf0,transparent 65%),var(--linen);color:var(--ink)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#285343}
.app-shell .sidebar{background:#fbf8f0;border-color:var(--line)}
.app-shell .brand{font-family:var(--display);font-weight:700;letter-spacing:-.7px}
.app-shell .demo{background:#e0e7d7;color:#285343}
.app-shell .nav-button{color:#44594d}
.app-shell .nav-button:hover{background:#eaf0e2}
.app-shell .nav-button[aria-current=page]{background:#e2e9d9;border-color:#d3dfcb;color:#204b3c;box-shadow:inset 3px 0 #285343}
.app-shell .intro,.app-shell .form-heading,.app-shell .info-page{position:relative;isolation:isolate}
.app-shell .intro{padding:30px 0 24px;min-height:240px;align-items:center}
.app-shell .intro::before,.app-shell .form-heading::before,.app-shell .info-page::before{content:'';position:absolute;z-index:-1;pointer-events:none;background:url('assets/abstract-paper.svg') right top/contain no-repeat;width:390px;height:280px;right:-24px;top:-50px;opacity:.9}
.app-shell .hero-copy{max-width:760px}
.app-shell .intro h1,.app-shell .form-heading h1,.app-shell .info-page>h1{font-family:var(--display);font-weight:600;letter-spacing:-2px;line-height:1.08;font-size:clamp(38px,4.5vw,66px)}
.app-shell .hero-art{display:none}
.app-shell .intro h1{max-width:750px}
.app-shell .headline-dot{color:var(--ink)}
.app-shell .intro p:not(.eyebrow){color:#40594b}
.app-shell .notice{border-color:#9cad90;color:#536155}
.app-shell .stats>.stat-card{border-radius:15px;background:#e2e7d6;border-color:#d3dcc7;color:#213e31;box-shadow:var(--shadow)}
.app-shell .stats>.stat-card:nth-child(2){background:#fae6c6;border-color:#f0d6b1;color:#634520}
.app-shell .stats>.stat-card:nth-child(3){background:#f7d8c9;border-color:#ebc5b4;color:#873a28}
.app-shell .stats>.stat-card[aria-pressed=true]{outline:2px solid #285343;outline-offset:3px;box-shadow:var(--shadow)}
.app-shell .stats>.stat-card:hover{filter:brightness(.98);transform:none}
.app-shell .stat-card i{display:none}
.app-shell .stats .stat-body>span:first-child{font-family:var(--display);font-weight:500;font-size:42px}
.app-shell .stats .stat-label{font-family:'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:400}
.app-shell .list-head h2,.app-shell .list-heading-row h2,.app-shell .help-card h2,.app-shell .archive-dialog h2{font-family:var(--display);font-weight:600;letter-spacing:-.7px}
.app-shell .list-head h2{font-size:30px}
.app-shell .item{background:linear-gradient(125deg,#fffdf8,#faf6ed);border-color:#e8e3d7;border-radius:18px;box-shadow:var(--shadow)}
.app-shell .item h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.5px}
.app-shell .category{color:#3f5545;background:#e7ebde;padding:5px 8px;border-radius:6px;width:fit-content;letter-spacing:.8px}
.app-shell .category:before{display:none}
.app-shell .badge{background:#dde8d4;color:#2b533c;border-radius:8px;font-size:12px}
.app-shell .badge.soon{background:#fae3bd;color:#654312}
.app-shell .badge.overdue{background:#f8d4c4;color:#8a3420}
.app-shell .item p,.app-shell .item .reminder-summary,.app-shell .item .notes{color:#4a5b51}
.app-shell button:not(.nav-button):not(.stat-card):not(.secondary):not(.text-button):not(.delete-choice):not(.delete-button):not(.renew-button){background-color:#285343;color:#fffdf5}
.app-shell .item-actions button{background:#fffaf0;color:#344c3e;border:1px solid #cdd5c7;border-radius:8px}
.app-shell .item-actions .renew-button{background:#285343!important;color:#fffdf5!important;border-color:#285343}
.app-shell .item-actions .delete-button{color:#873e2b;background:#fffaf0;border-color:#ddc6b6}
.app-shell .text-button{color:#285343}
.app-shell .secondary{color:#344c3e;border-color:#bac7b6}
.app-shell .form-heading{padding:18px 0 4px;max-width:840px}
.app-shell .form-heading::before{width:240px;height:210px;right:-20px;top:-30px;opacity:.65}
.app-shell .form-heading p,.app-shell .form-heading h1{position:relative}
.app-shell .form-card{background:linear-gradient(120deg,#fffdf7,#faf6eb);border:1px solid #e5e0d3;border-radius:22px;box-shadow:var(--shadow);padding:32px}
.app-shell .form-card input,.app-shell .form-card select,.app-shell .form-card textarea,.app-shell .filter select,.app-shell .archive-dialog select{background-color:#fcf9f1;border-color:#d7d8cb;box-shadow:0 3px 8px #283f3005;border-radius:10px;color:#203b30}
.app-shell .form-card input::placeholder,.app-shell .form-card textarea::placeholder{color:#68756f;opacity:1}
.app-shell .reminder-field{background:transparent;border-color:#dfe2d5;border-radius:12px}
.app-shell .form-card .reminder-options label:has(input:checked){background:#e2ead9;border-color:#658069;color:#203f2f}
.app-shell .reminder-options input{accent-color:#285343}
.app-shell .privacy-note{background:#f9e6d5;border-color:#e9d4be;border-left-color:#b66e42;color:#6d4230}
.app-shell .help-card,.app-shell .about-story,.app-shell .archive-dialog{background:var(--paper);border-color:var(--line);border-radius:18px;box-shadow:var(--shadow)}
.app-shell .story-accent{background:#92a488}
.app-shell .info-page::before{opacity:.32;right:0;top:-20px}
.app-shell .help-nav a{color:#285343}
.app-shell .delete-choice{background:#fff7ec;border-color:#ddc6b6;color:#873e2b}
.app-shell .archive-dialog::backdrop{background:#182c276e}
.portfolio-shell h1,.portfolio-shell h2,.portfolio-shell h3,.preview-shell h1{font-family:var(--display);font-weight:600;letter-spacing:-1.3px}
.portfolio-shell .wordmark,.preview-shell .preview-brand{font-family:var(--display);font-weight:600}
.portfolio-shell .hero{position:relative;isolation:isolate}
.portfolio-shell .hero::before{content:'';position:absolute;right:-48px;top:0;width:560px;height:440px;background:url('assets/abstract-paper.svg') right top/contain no-repeat;z-index:-1;opacity:.65;pointer-events:none}
.portfolio-shell .hero h1{font-size:clamp(42px,5.2vw,76px);letter-spacing:-2.5px;line-height:1.05}
.portfolio-shell .hero h1>span{color:#285343}
.portfolio-shell .hero-visual img{height:530px;border:1px solid #d8ddce;border-radius:24px;box-shadow:0 14px 30px #203f2a18;filter:none}
.portfolio-shell .hero-orbit{background:#dce4d2;box-shadow:none}
.portfolio-shell .hero-corner{border-color:#b29261}
.portfolio-shell .principles article,.portfolio-shell .progress-columns article{background:var(--paper);border-color:var(--line);border-radius:18px;box-shadow:var(--shadow)}
.portfolio-shell .progress-columns article:first-child{border-top-color:#285343}
.portfolio-shell .screen-button,.portfolio-shell .screen-grid-four .screen-button{padding:0;aspect-ratio:390/844;background:var(--linen);border:1px solid #d8ddce;border-radius:18px;box-shadow:var(--shadow)}
.portfolio-shell .screen-button img{object-fit:cover;border-radius:0}
.portfolio-shell .screen-button:hover{background:#e3eadb;transform:translateY(-3px)}
.portfolio-shell .try-section{background:#e2e9d9;border-color:#cdd9bf;box-shadow:-4px 5px 0 #99ad8c}
.portfolio-shell .button{background:#285343;border-radius:10px}
.portfolio-shell .button:hover{background:#1c4033}
.portfolio-shell .hero-visual figcaption{color:#52634f}
.portfolio-shell .status-dot,.portfolio-shell .figure-dot{background:#6e8a65}
.preview-shell{background:radial-gradient(ellipse at 90% 0,#dfe7d5,transparent 55%),var(--linen)}
.preview-shell .preview-brand span{background:#e2e9d9;color:#285343;font-family:'Segoe UI',sans-serif}
.preview-shell .preview-controls{background:var(--paper);border-color:var(--line);box-shadow:-4px 5px 0 #99ad8c;border-radius:16px}
.preview-shell select{background:#fcf9f1;border-color:#cdd5c7}
.preview-shell .mission-statement,.preview-shell .privacy{border-color:#93a987;color:#435847}
.preview-shell .phone-top,.preview-shell .phone-bottom,.preview-shell iframe{background:var(--linen)}
.preview-shell .stage-label{color:#52634f}
@media(max-width:800px){
 .app-shell .sidebar{background:transparent;position:relative;isolation:isolate;padding:20px 18px 4px;border-bottom:0}
 .app-shell .sidebar::before{content:'';position:absolute;right:0;top:0;width:200px;height:270px;background:url('assets/abstract-paper.svg') right top/contain no-repeat;opacity:.7;z-index:-1;pointer-events:none}
 .app-shell .sidebar .brand{font-size:29px;max-width:245px;line-height:1.12}
 .app-shell .sidebar .demo{font-size:9px}
 .app-shell .sidebar-bottom .nav-button{color:#254a3a;background:#fffaf0d9;border:1px solid #dce2d2;border-radius:9px;min-height:44px}
 .app-shell .main-nav{background:#fbf8f0f5;border-color:#d4ddca;backdrop-filter:blur(12px);grid-template-columns:repeat(4,minmax(0,1fr))}
 .app-shell .main-nav .nav-button{font-size:12px;background:none;border:0;border-radius:0}
 .app-shell .main-nav .nav-button[aria-current=page]{box-shadow:inset 0 -3px #285343;color:#285343}
 .app-shell main{padding:16px 18px 12px}
 .app-shell .intro{padding:4px 0 8px;min-height:0;display:block}
 .app-shell .intro::before{display:none}
 .app-shell .intro h1{font-size:clamp(32px,8.5vw,44px);letter-spacing:-1.3px;margin:8px 0 12px}
 .app-shell .intro p:not(.eyebrow){font-size:16px}
 .app-shell .notice{margin:12px 0 22px;font-size:12px}
 .app-shell .stats{gap:10px}
 .app-shell .stats>.stat-card{padding:16px 10px;border-radius:13px}
 .app-shell .stats .stat-body>span:first-child{font-size:37px}
 .app-shell .stats .stat-label{font-size:12px;line-height:1.45}
 .app-shell .list-head h2,.app-shell .list-heading-row h2{font-size:29px}
 .app-shell .item{padding:20px;border-radius:18px}
 .app-shell .item h3{font-size:23px;margin-top:18px}
 .app-shell .category{font-size:10px}
 .app-shell .badge{font-size:12px}
 .app-shell .item p,.app-shell .item .notes,.app-shell .item .reminder-summary{font-size:15px}
 .app-shell .form-heading h1,.app-shell .info-page>h1{font-size:39px;letter-spacing:-1.4px}
 .app-shell .form-heading::before{width:140px;height:160px;opacity:.35;right:-18px}
 .app-shell .form-card{padding:24px 18px;border-radius:20px}
 .app-shell .form-card input,.app-shell .form-card select,.app-shell .form-card textarea{font-size:16px}
 .portfolio-shell .hero h1{font-size:clamp(36px,9.3vw,54px);letter-spacing:-1.6px}
 .portfolio-shell .hero::before{width:230px;height:250px;right:-22px;opacity:.35}
 .portfolio-shell .hero-visual img{height:460px}
 .portfolio-shell .screen-grid .screen-button{padding:0}
 .portfolio-shell .screen-grid h3{letter-spacing:-.2px;font-size:17px}
 .preview-shell .preview-guide h1{font-size:42px;letter-spacing:-1.6px}
}
/* Targeted controls keep the green action hierarchy across the existing app. */
.app-shell .list-heading-row #add,.app-shell .archive-choice{background:#285343;border-color:#285343;color:#fffdf5}
@media(max-width:800px){.app-shell .list-heading-row{align-items:flex-start}.app-shell .list-head h2,.app-shell .list-heading-row h2{font-size:25px;line-height:1.2}}
/* Shared Settings access and deliberately small preference surface. */
.app-shell .app-utilities{position:fixed;right:30px;top:14px;display:flex;gap:8px;justify-content:flex-end;z-index:6;padding:6px;background:#f7f2e7f2;border:1px solid #e2e3d5;border-radius:13px;box-shadow:0 3px 12px #203b3008}
.app-shell .app-utilities .nav-button{width:auto;min-height:44px;padding:10px 13px;font-size:14px;gap:8px;color:#284c3a;background:#fcf9f1}
.app-shell .app-utilities .nav-button[aria-current=page]{background:#e2e9d9;border-color:#bccbb1;box-shadow:inset 0 -2px #285343}
.app-shell main{padding-top:95px}
.app-shell .settings-page{max-width:760px}
.app-shell .settings-card{background:linear-gradient(120deg,#fffdf7,#faf6eb);border:1px solid #dedecf;box-shadow:var(--shadow);border-radius:20px;padding:8px 26px 24px;margin-top:28px}
.app-shell .settings-row{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 0;border-bottom:1px solid #dedecf}
.app-shell .settings-row>div{min-width:0;flex:1}
.app-shell .settings-row label,.app-shell .settings-permission h2{font:600 18px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:-.3px;color:#203b30}
.app-shell .settings-row p{font-size:14px;line-height:1.6;margin:6px 0 0;color:#506150}
.app-shell .settings-row input[type=time]{width:150px;min-height:48px;flex:none;border:1px solid #bac9b2;border-radius:10px;padding:10px;font-size:16px;background:#fcf9f1;color:#254a38}
.app-shell .settings-privacy{border-bottom:0;padding-bottom:18px}
.app-shell .settings-row input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:54px;height:32px;padding:0;border-radius:20px;background:#d0d4c9;border:1px solid #9ba78f;cursor:pointer;box-shadow:none;margin:8px 0}
.app-shell .settings-row input[role=switch]:before{content:'';display:block;position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fffdf5;box-shadow:0 2px 4px #203b3025;transition:transform .15s}
.app-shell .settings-row input[role=switch]:checked{background:#285343;border-color:#285343}
.app-shell .settings-row input[role=switch]:checked:before{transform:translateX(22px)}
.app-shell .notification-example{padding:18px;border-radius:13px;background:#e9edde;border:1px solid #d6dfcb;color:#203b30;margin:0 0 24px}
.app-shell .notification-example .eyebrow{font-size:9px;letter-spacing:1.1px;margin:0 0 12px;color:#46613f}
.app-shell .notification-example strong{font-size:14px;font-weight:600}
.app-shell .notification-example #notification-preview{margin:6px 0 0;font-size:16px;line-height:1.6;color:#243f30}
.app-shell .settings-permission{border-top:1px solid #dedecf;padding-top:24px}
.app-shell .settings-permission h2{margin:0 0 6px}
.app-shell .permission-status{font-size:15px;margin:0 0 15px}
.app-shell .settings-permission summary{min-height:48px;padding:12px 0;color:#285343;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.app-shell .settings-permission details p,.app-shell .settings-footnote{font-size:14px;line-height:1.7;color:#506150}
.app-shell .settings-footnote{margin:22px 8px}
.app-shell .settings-policy{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;background:var(--paper);border:1px solid #dedecf;border-radius:16px;text-decoration:none;color:#203b30;min-height:70px}
.app-shell .settings-policy>span:first-child{display:grid;gap:5px}
.app-shell .settings-policy strong{font-size:18px}
.app-shell .settings-policy span span{font-size:14px;color:#506150}
.app-shell .settings-policy>span:last-child{font-size:30px}
.app-shell .reminder-options .due-date-option small{display:block;font-size:12px;line-height:1.5;font-weight:400;color:#506150;margin-top:5px;max-width:240px}
.app-shell .item .reminder-timing{font-size:13px;color:#506150;line-height:1.6;margin-top:8px}
@media(max-width:800px){
 .app-shell .sidebar{padding-bottom:0}
 .app-shell .app-utilities{position:relative;right:auto;top:auto;z-index:2;margin:0 18px;padding:4px 0 0;gap:6px;flex-wrap:wrap;background:none;border:0;box-shadow:none;border-radius:0}
 .app-shell .app-utilities .nav-button{font-size:12px;min-height:44px;padding:8px 9px;gap:5px;border:1px solid #dce2d2;border-radius:9px;background:#fffaf0e8}
 .app-shell .app-utilities .nav-button svg{width:17px;height:17px}
 .app-shell main{padding-top:16px}
 .app-shell .settings-card{padding:0 18px 18px;margin-top:22px}
 .app-shell .settings-row{gap:12px;flex-wrap:wrap;padding:22px 0}
 .app-shell .settings-row input[type=time]{width:140px}
 .app-shell .settings-row:first-child>div{flex-basis:100%}
 .app-shell .settings-privacy{flex-wrap:nowrap}
 .app-shell .settings-row label,.app-shell .settings-permission h2{font-size:17px}
 .app-shell .notification-example{padding:15px}
 .app-shell .settings-policy{padding:20px 18px}
 .app-shell .reminder-options .due-date-option small{font-size:13px;max-width:none}
}
@media(forced-colors:active){.app-shell .settings-row input[role=switch]{appearance:auto;-webkit-appearance:auto}.app-shell .settings-row input[role=switch]:before{display:none}}
@media(prefers-reduced-motion:reduce){.app-shell .settings-row input[role=switch]:before{transition:none}}
/* Keep the switch's visual track compact while preserving a 48px touch target. */
.app-shell .settings-row input[role=switch]{height:48px;background:none;border:0;border-radius:10px;margin:0}
.app-shell .settings-row input[role=switch]:after{content:'';position:absolute;inset:8px 0;border-radius:20px;background:#d0d4c9;border:1px solid #9ba78f;z-index:0}
.app-shell .settings-row input[role=switch]:before{top:12px;z-index:1}
.app-shell .settings-row input[role=switch]:checked{background:none;border:0}
.app-shell .settings-row input[role=switch]:checked:after{background:#285343;border-color:#285343}
.app-shell #settings-page-title:focus{outline:none}
@media(forced-colors:active){.app-shell .settings-row input[role=switch]:after{display:none}}