/* Interactive demo: muted indigo, a fine-line target, and optional small steps. */
.goals-experience { --goal-ink:#555576; --goal-accent:#75759c; --goal-pale:#e8e6ef; --goal-line:#c9c5d9; }
.goals-experience .goal-filter { display:inline-flex; align-items:center; justify-content:center; gap:5px; color:var(--goal-ink); }
.goals-experience .goal-filter svg { width:15px; height:15px; flex:none; }
.goals-experience .bucket-filter-divider { display:block; box-sizing:border-box; flex:0 0 1px; width:1px; min-width:1px; height:15px; margin-inline:3px; padding:0; border:0; border-radius:0; align-self:center; background:#7a79634d; }
.goals-experience .goal-filter.active { background:var(--goal-pale); color:var(--goal-ink); box-shadow:inset 0 0 0 1px #75759c24; }
.goals-experience .app-list-tools .goal-filter:focus-visible { outline:1px solid #817d9f; outline-offset:2px; box-shadow:none; }
.goals-experience .goal-filter[hidden] { display:none!important; }
.goals-experience .app-create-option-icon.goal-icon { background:#e7e5ef; color:#66658b; }
.goal-icon svg { width:19px; height:19px; }
.goals-experience .goals-title { color:var(--goal-ink); }
.goals-panel { box-sizing:border-box; min-height:485px; padding:0; }
.goals-panel[hidden],.goal-detail[hidden],.goal-dialog [hidden],.has-goals-view .bucket-sheet[hidden] { display:none!important; }
.goals-overview { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 3px 15px; color:#74717c; font:400 11px/1.4 'DM Sans',sans-serif; }
.goals-kicker { display:flex; align-items:center; gap:7px; font:600 9px/1.4 Manrope,sans-serif; letter-spacing:1.2px; color:var(--goal-ink); }
.goals-kicker svg { width:16px; height:16px; }
.goals-list { max-height:440px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b8b1c4 transparent; padding:1px 5px 10px 1px; }
.goal-card { border:1px solid #b9b3c334; border-radius:13px; background:linear-gradient(110deg,#fbf9f4ed,#f2eff5c4); box-shadow:0 3px 9px #3d304b03; margin-bottom:8px; overflow:hidden; }
.goal-summary { display:grid; grid-template-columns:34px minmax(0,1fr) 90px 14px; align-items:center; gap:12px; width:100%; padding:12px 17px; border:0; border-radius:12px; background:transparent; color:#3d3c4b; text-align:left; cursor:pointer; font-family:'DM Sans',sans-serif; }
.goal-summary:hover { background:#e7e3f025; }
.goal-symbol { width:34px; height:34px; display:grid; place-items:center; border:1px solid #77769f2b; border-radius:11px; background:linear-gradient(150deg,#f5f3f9,#e3e0ed); color:var(--goal-ink); box-shadow:inset 0 1px 0 #fff9; }
.goal-symbol svg { width:23px; height:23px; }
.goal-summary-copy { min-width:0; }
.goal-summary-copy strong { display:block; font-size:15px; line-height:1.3; font-weight:500; overflow-wrap:anywhere; }
.goal-summary-copy small { display:block; margin-top:5px; color:#84808d; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.goal-progress { min-width:0; font-size:10px; color:#7b7588; line-height:1.5; text-align:right; }
.goal-progress i { display:block; height:3px; border-radius:10px; margin-top:7px; background:#d7d2df80; overflow:hidden; }
.goal-progress b { display:block; height:100%; background:linear-gradient(90deg,#aaa2c0,#76749b); border-radius:10px; transition:width .25s ease; }
.goal-chevron { width:14px; height:14px; fill:none; stroke:#898296; stroke-width:1.2; transition:transform .2s ease; }
.goal-summary[aria-expanded="true"] .goal-chevron { transform:rotate(180deg); }
.goal-detail { border-top:1px solid #b7b0c526; padding:12px 17px 13px 63px; }
.goal-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font:400 10px/1.4 'DM Sans',sans-serif; color:#81798c; }
.goal-shared-label { color:#775a64; }
.goal-note,.goal-simple-note { margin:8px 0 9px; font:400 11px/1.5 'DM Sans',sans-serif; color:#77707f; }
.goal-steps { list-style:none; margin:0; padding:0; }
@media(min-width:740px){.goal-steps{display:grid;grid-template-columns:1fr 1fr;gap:1px 22px;}}
.goal-steps label { display:flex; align-items:center; gap:9px; padding:5px 0; font:400 12px/1.3 'DM Sans',sans-serif; color:#4d4858; cursor:pointer; }
.goal-steps input { appearance:none; flex:none; margin:0; width:15px; height:15px; border:1px solid #aaa0bb; border-radius:4px; background:#fff7; cursor:pointer; display:grid; place-content:center; }
.goal-steps input:checked { background:#817d9f; border-color:#817d9f; }
.goal-steps input:checked::after { content:''; width:7px; height:4px; border-left:1.5px solid white; border-bottom:1.5px solid white; transform:translateY(-1px) rotate(-45deg); }
.goal-steps input:checked+span { color:#9890a0; text-decoration:line-through; text-decoration-color:#bab3c2; }
.goal-add-step { display:flex; align-items:center; gap:8px; margin:8px 0 10px; border-bottom:1px solid #b6aec740; }
.goal-add-step input { width:100%; min-width:0; border:0; border-radius:0; background:transparent; padding:7px 0; font:400 11px/1.4 'DM Sans',sans-serif; color:#514b60; }
.goal-add-step input::placeholder { color:#9d93a8; }
.goal-add-step button { border:0; background:transparent; padding:0; height:30px; width:30px; flex:none; font-size:19px; color:#777094; cursor:pointer; }
.goal-detail-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.goal-detail-footer small { font:400 10px/1.4 'DM Sans',sans-serif; color:#93899e; }
.goal-achieve { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none; min-height:30px; padding:5px 10px; border:1px solid #9a8caf37; border-radius:8px; background:#e9e4f0; color:#655976; font:500 10px/1.4 'DM Sans',sans-serif; cursor:pointer; }
.goal-achieve svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; }
.goal-achieve:disabled { opacity:.48; cursor:default; }
.goal-card.is-achieved { background:#e7e5e980; box-shadow:none; }
.is-achieved .goal-symbol { opacity:.65; }
.goals-divider { display:flex; align-items:center; gap:12px; margin:21px 0 12px; color:#8a8295; font:500 10px/1.4 'DM Sans',sans-serif; }
.goals-divider::after { content:''; height:1px; background:#b4adbd66; flex:1; }
.goals-empty { font:400 14px/1.6 'DM Sans',sans-serif; color:#77707f; margin:24px 16px; }
.goal-inline-row { border-bottom:1px solid #a5a08429; }
.goal-inline-summary { padding:15px 12px; grid-template-columns:27px minmax(0,1fr) 90px 14px; gap:12px; }
.goal-inline-summary .goal-symbol { width:27px; height:27px; border-radius:9px; }
.goal-inline-summary .goal-symbol svg { width:19px; height:19px; }
.goal-inline-summary .goal-summary-copy strong { font-size:14px; }
.goal-inline-summary .goal-chevron { transform:rotate(-90deg); }
.goals-sr { position:absolute!important; width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.goal-dialog { box-sizing:border-box; width:min(460px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:1px solid #ddd6e4; border-radius:19px; background:#f7f4ef; box-shadow:0 30px 100px #15101c55; color:#484152; font-family:'DM Sans',sans-serif; }
.goal-dialog::backdrop { background:#15191b66; backdrop-filter:blur(5px); }
.goal-dialog header { display:flex; align-items:center; gap:12px; padding:22px; background:linear-gradient(115deg,#343448,#51516b); color:#f5f1ef; }
.goal-dialog-symbol { display:grid; place-items:center; width:40px; height:40px; border:1px solid #c6bfd647; border-radius:13px; background:#cec7e00f; color:#d1c7e1; flex:none; }
.goal-dialog-symbol svg { width:28px; height:28px; }
.goal-dialog header small { display:block; font-size:8px; font-weight:500; letter-spacing:1.4px; color:#c8bed1; }
.goal-dialog h2 { margin:5px 0 0; font:400 25px/1.15 Newsreader,serif; letter-spacing:-.4px; }
.goal-dialog header button { margin-left:auto; width:28px; height:28px; border:0; border-radius:50%; background:#ffffff0b; color:#dbd2df; font-size:21px; cursor:pointer; }
.goal-dialog-body { padding:22px; }
.goal-input-label { display:block; font-size:11px; margin:0 0 7px; font-weight:500; }
.goal-input-label span,.goal-date-line label span { color:#98909e; font-size:10px; margin-left:5px; font-weight:400; }
.goal-dialog input:not([type="checkbox"]),.goal-dialog textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid #d8d0df; border-radius:8px; background:#fff9; color:#454050; font:400 13px/1.5 'DM Sans',sans-serif; padding:10px 11px; }
.goal-dialog textarea { resize:vertical; max-height:120px; }
.goal-date-line { display:grid; grid-template-columns:1fr 165px; align-items:center; gap:12px; margin:14px 0 18px; font-size:11px; }
.goal-date-line input { font-size:11px!important; padding:7px 9px!important; }
.goal-step-option { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:17px 0 0; padding-top:17px; border-top:1px solid #cbc0d54d; }
.goal-step-option label { font-size:12px; font-weight:500; }
.goal-step-option small { display:block; font-size:10px; font-weight:400; color:#958b9e; margin-top:4px; }
.goal-step-option input { appearance:none; width:32px; height:19px; border-radius:20px; background:#d9d2df; flex:none; margin:0; cursor:pointer; transition:background .2s; }
.goal-step-option input::after { content:''; display:block; width:13px; height:13px; border-radius:50%; margin:3px; background:#fff; transition:transform .2s; box-shadow:0 1px 3px #423b5924; }
.goal-step-option input:checked { background:#777196; }
.goal-step-option input:checked::after { transform:translateX(13px); }
.goal-draft-steps { margin-top:14px; display:grid; gap:7px; }
.goal-draft-row { display:flex; align-items:center; gap:6px; }
.goal-draft-row button { border:0; background:transparent; width:27px; height:32px; color:#877a91; font-size:20px; cursor:pointer; }
.goal-draft-add { border:0; background:none; margin-top:9px; padding:4px 0; font:500 11px/1.5 'DM Sans',sans-serif; color:#726387; cursor:pointer; }
.goal-form-error { margin:10px 0 0; color:#8a483c; font-size:11px; }
.goal-form-error:empty { display:none; }
.goal-dialog footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 22px; border-top:1px solid #dcd4e04d; background:#eee9f1; }
.goal-dialog footer>span { color:#98909e; font-size:10px; }
.goal-create-submit { display:flex; align-items:center; gap:20px; border:1px solid #6b617f; border-radius:9px; padding:11px 14px; background:#67627e; color:#faf6f0; font:500 12px/1.5 'DM Sans',sans-serif; cursor:pointer; }
.goal-create-submit span { font-size:15px; }
.goals-panel :is(button,input):focus-visible,.goal-dialog :is(button,input,textarea):focus-visible,.goal-inline-row button:focus-visible { outline:2px solid #8f83a6; outline-offset:2px; }
@media(max-width:1040px){ .goals-experience .app-list-tools { grid-template-columns:1fr; } .goals-experience .app-list-tools .app-home-mode{ grid-row:2;grid-column:1; } .goal-summary { gap:9px; } }
@media(max-width:680px){
 .goals-experience .app-list-tools .bucket-view-tabs { gap:3px; display:flex; flex-wrap:wrap; }
 .goals-experience .app-list-tools .bucket-view-tabs button { min-height:30px; padding:0 8px; }
 .goals-experience .bucket-filter-divider { margin-inline:2px; }
 .goals-panel { min-height:482px; } .goals-list { max-height:440px; }
 .goals-overview { font-size:9px; gap:8px; }.goals-kicker{font-size:8px;letter-spacing:.7px;}
 .goal-summary { grid-template-columns:28px minmax(0,1fr) 11px; gap:8px; padding:13px 12px; }
 .goal-symbol { width:28px;height:28px;border-radius:9px; }.goal-symbol svg{width:20px;height:20px;}
 .goal-summary-copy strong { font-size:13px; }.goal-summary-copy small{font-size:10px;}
 .goal-progress { grid-column:2;grid-row:2;text-align:left;font-size:10px;max-width:110px; }.goal-progress i{margin-top:4px;}
 .goal-chevron { grid-column:3;grid-row:1; }.goal-detail{padding:12px 13px;}.goal-detail-footer{gap:8px;}
 .goal-inline-summary { padding:13px 10px; }.goal-inline-summary .goal-summary-copy strong{font-size:13px;}
 .goal-dialog header,.goal-dialog-body { padding:18px; }.goal-dialog h2{font-size:22px;}.goal-date-line{grid-template-columns:1fr 145px;gap:6px;}
}
@media(prefers-reduced-motion:reduce){.goals-panel *,.goal-dialog *{transition:none!important;}}