.tasks-toolbar { display:flex; gap:.7rem; align-items:center; padding:0 1.5rem 1rem; } .tasks-add-btn { background:var(--amber); color:#1A1410; border:0; border-radius:8px; font-family:'Archivo',sans-serif; font-weight:600; font-size:.82rem; padding:.5rem .9rem; cursor:pointer; } .task-group { padding:0 1.5rem 1.4rem; } .task-group-label { font-family:'Archivo',sans-serif; font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:#8A7B67; padding:.6rem 0; } body.light-theme .task-group-label { color:#6B5B47; } .task-card { display:flex; gap:.8rem; align-items:flex-start; background:var(--charcoal-soft); border:1px solid var(--glass-border); border-radius:10px; padding:.8rem 1rem; margin-bottom:.55rem; } .task-card.overdue { border-color:rgba(224,90,74,0.55); } .task-tick { width:20px; height:20px; flex:0 0 20px; margin-top:.15rem; border-radius:5px; border:1px solid var(--glass-border); background:transparent; color:var(--amber); cursor:pointer; font-size:.75rem; line-height:1; } .task-title { font-family:'Archivo',sans-serif; font-size:.92rem; color:#F0E8D8; } body.light-theme .task-title { color:#1A1410; } .task-meta { display:flex; gap:.5rem; align-items:center; margin-top:.3rem; } .task-pri { font-size:.6rem; letter-spacing:1px; text-transform:uppercase; border-radius:999px; padding:.08rem .45rem; border:1px solid var(--glass-border); color:#C4A882; } body.light-theme .task-pri { color:#6B5B47; } .pri-urgent { color:#E05A4A; border-color:rgba(224,90,74,0.5); } .pri-high { color:var(--amber); border-color:rgba(232,162,61,0.5); } .task-due { font-size:.7rem; color:#8A7B67; } body.light-theme .task-due { color:#6B5B47; } .task-card.overdue .task-due { color:#E05A4A; } /* body.light-theme .task-pri (0,2,0) outranks these single-class rules, so the accent colours need matching specificity to survive in light theme. */ body.light-theme .pri-urgent { color:#E05A4A; } body.light-theme .pri-high { color:var(--amber); } .quick-card { max-width: 420px; } .quick-body { padding: 1.2rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; } .quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .quick-err { color: #E05A4A; font-size: .78rem; min-height: 1rem; } /* ===== @ event picker (js/event-picker.js) ===== Positioned with position:fixed and appended to , so it is never a descendant of .ev-form-card / .ev-form-backdrop — it can't be clipped by their overflow and isn't affected by .ev-form-backdrop's backdrop-filter (filter/backdrop-filter on an ancestor only creates a new containing block for descendants, and this dropdown is a body-level sibling). Colours below are all existing theme-aware custom properties (--charcoal-soft, --glass-border, --bone, --muted redefine themselves under body.light-theme already) except .evp-option-status, which copies .task-pri's hardcoded-hex + explicit light-theme override pattern. */ .evp-dropdown { position: fixed; max-height: 320px; overflow-y: auto; background: var(--charcoal-soft); border: 1px solid var(--glass-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); padding: .3rem; } .evp-option { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .6rem; border-radius: 7px; cursor: pointer; } .evp-option.active, .evp-option:hover { background: var(--glass-white); } /* --glass-white is only a 2% tint in light theme (rgba(0,0,0,0.02)) — too faint to show which row arrow-key navigation has selected. Give .active an explicit, clearly visible amber tint, consistent with .rail-item:hover's light-theme treatment. */ body.light-theme .evp-option.active { background: rgba(232,162,61,0.14); } body.light-theme .evp-option:hover { background: rgba(232,162,61,0.14); } .evp-option-name { font-family: 'Archivo', sans-serif; font-size: .85rem; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .evp-option-meta { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } .evp-option-date { font-size: .68rem; color: var(--muted); white-space: nowrap; } .evp-option-status { font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; padding: .08rem .45rem; border: 1px solid var(--glass-border); color: #C4A882; } body.light-theme .evp-option-status { color: #6B5B47; } .evp-chip { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; background: var(--charcoal-soft); border: 1px solid var(--glass-border); border-radius: 999px; padding: .3rem .4rem .3rem .7rem; font-family: 'Archivo', sans-serif; font-size: .78rem; color: var(--bone); } .evp-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .evp-chip-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; width: 18px; height: 18px; border-radius: 50%; font-size: .7rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .evp-chip-x:hover { color: #E05A4A; } /* ===== Microsoft To Do connection (js/todo.js) ===== A status strip, not a module: it lives inside the Tasks view, so it stays in this file rather than earning a stylesheet of its own for thirty lines. Most colours here are theme-aware custom properties (--charcoal-soft, --glass-border, --muted redefine themselves under body.light-theme already). The exceptions are the two accents used AS TEXT, and the convention for flat accents holds for fills and borders only — raw #E05A4A reads about 3.2:1 on a light card, under AA — so each carries a body.light-theme counterpart, reusing the pair already established across the profit figures, asset tags and link statuses: #9C5C08 for amber, #B03A2E for red. */ .todo-sync { padding: 0 1.5rem 1rem; } .todo-line { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; background: var(--charcoal-soft); border: 1px solid var(--glass-border); border-radius: 10px; padding: .65rem .9rem; } .todo-state { font-family: 'Archivo', sans-serif; font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; flex: 0 0 auto; } /* --teal-bright reads well on charcoal but only ~2.6:1 on white, so light theme drops to the deeper --teal. Same pair as .lnk-status-working. */ .todo-state-on { color: var(--teal-bright); } body.light-theme .todo-state-on { color: var(--teal); } .todo-state-warn { color: #E05A4A; } body.light-theme .todo-state-warn { color: #B03A2E; } /* Web Push's "add to Home Screen" state (js/push-ui.js) — actionable, but not broken, so it gets its own tone rather than reusing the warn red. Same var(--amber) / #9C5C08 pair used everywhere else in this codebase as text. */ .todo-state-info { color: var(--amber); } body.light-theme .todo-state-info { color: #9C5C08; } .todo-detail { font-size: .78rem; line-height: 1.5; color: var(--muted); flex: 1 1 240px; } .todo-muted { color: var(--muted); } .todo-btn { background: var(--amber); color: #1A1410; border: 0; border-radius: 8px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .75rem; padding: .4rem .8rem; cursor: pointer; flex: 0 0 auto; } /* Reconnecting an already-working connection is a rare, deliberate act, so it does not get the same weight as the button that turns the feature on. Border and text only — the text is --muted, which is already theme-aware. */ .todo-btn-quiet { background: transparent; color: var(--muted); border: 1px solid var(--glass-border); font-weight: 500; } .todo-status { font-size: .75rem; line-height: 1.5; color: var(--muted); padding: .4rem .1rem 0; } .todo-status-working { color: var(--teal-bright); } body.light-theme .todo-status-working { color: var(--teal); } .todo-status-error { color: #E05A4A; } body.light-theme .todo-status-error { color: #B03A2E; }