/* ============ design tokens - Apple dark system palette ============ */ * { margin: 0; box-sizing: border-box; } :root { --bg: #07090f; --ink: rgba(255,255,255,.92); --ink-2: rgba(255,255,255,.55); --ink-3: rgba(255,255,255,.32); --glass: rgba(255,255,255,.04); --glass-2: rgba(255,255,255,.07); --hair: rgba(255,255,255,.09); --hair-2: rgba(255,255,255,.16); --accent: #0A84FF; --red: #FF453A; --green: #30D158; /* Apple system colors, fixed slot order (chart pair validated for CVD) */ --c1:#0A84FF; --c2:#30D158; --c3:#FF9F0A; --c4:#BF5AF2; --c5:#FF375F; --c6:#64D2FF; --c7:#FFD60A; --c8:#5E5CE6; --ease: cubic-bezier(.22,1,.36,1); } /* light theme - toggled via #themetoggle (app.js), persisted to localStorage, applied as early as possible by an inline bootstrap script at the top of index.html so there's no flash of dark before this stylesheet's default takes hold. Every color pair below is Apple's own published light/dark equivalent for the same system color, keeping this consistent with the dark palette's own "Apple system palette" origin rather than inventing new hues. --glass/--glass-2 flip from white-based to white-based-but-more-opaque (not black-based) - Apple's own light "materials" are still white/frosted cards sitting on a light gray page, not dark overlays. */ :root[data-theme="light"] { /* a bit more gray than the first pass - --glass at 70-85% white was barely distinguishable from a page background this close to white, so cards read as flat grey instead of clearly elevated white cards. Widening the gap on both ends (a slightly darker page, a more opaque card) instead of moving just one, so neither pure white nor a much darker gray. */ --bg: #e9ebf1; --ink: rgba(0,0,0,.88); --ink-2: rgba(0,0,0,.55); --ink-3: rgba(0,0,0,.35); --glass: rgba(255,255,255,.88); --glass-2: rgba(255,255,255,.97); --hair: rgba(0,0,0,.1); --hair-2: rgba(0,0,0,.18); --accent: #007AFF; --red: #FF3B30; --green: #34C759; --c1:#007AFF; --c2:#34C759; --c3:#FF9500; --c4:#AF52DE; --c5:#FF2D55; --c6:#32ADE6; --c7:#FFCC00; --c8:#5856D6; /* a handful of progress-bar/timeline TRACK backgrounds share this exact value - one token so they're consistent, not because every rgba(255,255,255,.07) in the file is this token (most aren't - see the contrast-pass note further down). */ --track: rgba(0,0,0,.08); } html[data-theme="light"] { color-scheme: light; } /* Light-mode contrast pass (2026-09-01): these components were all written with a literal rgba(255,255,255,X) instead of a --token, so they stayed white-tinted regardless of theme - invisible or near-invisible against an already-light page (a translucent WHITE overlay on a background that's already close to white has almost no contrast to see). Each gets an explicit light-mode override here instead of being converted to a shared token, so dark mode's already-tuned exact values are untouched. This is a targeted pass on what was actually visibly broken (the clock, the ring track, the timeline, progress-bar tracks, the icon buttons) - not an exhaustive audit of every rgba(255,255,255,..) literal in this file. There are more like it on screens not checked yet; flagged in TODO.md. */ :root[data-theme="light"] #clock { /* background-IMAGE specifically, not the background shorthand - the shorthand implicitly resets background-clip/background-size to their defaults too, which is exactly what broke this the first time (background-clip:text reverted to border-box, so the gradient painted as a solid box instead of clipping to the digits, and the now-invisible color:transparent text had nothing left to make it visible). */ background-image: linear-gradient(110deg, #1a1a2e 15%, #2a3f8f 40%, #6a3a9e 60%, #b34a1e 78%, #1a1a2e 100%); } :root[data-theme="light"] #track { stroke: rgba(0,0,0,.09); } :root[data-theme="light"] #ticks { stroke: rgba(0,0,0,.18); } :root[data-theme="light"] #tlaxis { background: rgba(0,0,0,.08); } :root[data-theme="light"] #tline b { background: rgba(0,0,0,.5); box-shadow: 0 0 4px rgba(0,0,0,.3); } :root[data-theme="light"] #tlticks i { background: rgba(0,0,0,.16); } :root[data-theme="light"] #tlticks i.maj { background: rgba(0,0,0,.3); } :root[data-theme="light"] #tcbar, :root[data-theme="light"] #stbar, :root[data-theme="light"] #snbar, :root[data-theme="light"] #fsnbar, :root[data-theme="light"] #ftcbar, :root[data-theme="light"] .pbar, :root[data-theme="light"] .wppbar { background: var(--track); } :root[data-theme="light"] #tuthelp, :root[data-theme="light"] #adminbtn, :root[data-theme="light"] #installbtn, :root[data-theme="light"] #feedbackbtn, :root[data-theme="light"] #feedbackMailFallback, :root[data-theme="light"] #themetoggle { /* a near-white circle on an already near-white page has almost no color contrast to read by - a visible shadow gives it an edge to read against regardless of the page tint underneath */ background: rgba(255,255,255,.95); border-color: rgba(0,0,0,.16); box-shadow: 0 1px 4px rgba(0,0,0,.12); } /* task/subtask checkboxes use appearance:none (fully custom circular check), so their border is the ONLY thing drawing the circle at all - a white one was completely invisible against a light page, not just faint. */ :root[data-theme="light"] input[type=checkbox] { border-color: rgba(0,0,0,.3); } :root[data-theme="light"] input[type=checkbox]:hover { border-color: rgba(0,0,0,.55); } /* the previous pass's border, and then a soft shadow in its place, both still read as a visible "boxy" outline around every card/tile - dropping both entirely. The --bg/--glass gap above already gives cards a real, visible edge against the page on its own; no border or shadow line needed on top of it. */ :root[data-theme="light"] .panel { border-color: transparent; box-shadow: none; } /* the ambient blobs and the vignette are both tuned for a near-black backdrop (soft glow, edge darkening) - at full strength on a light page they'd read as flat colored blotches and an odd dark smudge in the corners rather than atmosphere, so both get toned down a lot rather than removed outright. */ :root[data-theme="light"] .blob { opacity: calc(.045 + var(--energy, 0) * .014); } :root[data-theme="light"] body::before { background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0,0,0,.06)); } html { color-scheme: dark; /* fluid UI scale: a straight vw/vh proportion (1rem=16px at the 2560x1440 reference display) has one fatal property - EVERY viewport below the point where 0.625vw/1.11111vh reaches 14px (roughly 2240x1260) computes to less than that, so a flat floor to keep things legible below that point makes every one of those screens - a 1244x846 tablet, a 1920x1080 monitor, a 1366x768 laptop window, all wildly different real sizes - land on the exact same font-size. That's what broke the nav (vs #topRightBar) and #fmain's scale(1.3): components got tuned assuming "big enough to be off the floor" meant real room to spare, but a window barely above the floor and one deep in the floor look identical here, so there's no signal left to design against. Fixed by interpolating between two REAL anchor points instead of one flat floor - true "CSS locks" fluid typography, not a proportion: 10px at 1244x846 (this app's actual tablet) up to 16px at 2560x1440 (the original 0.625vw/1.11111vh reference target, unchanged). Everything in between - every common laptop width - gets its own graduated value instead of sharing the tablet's exact number; below 1244 it keeps gently decreasing rather than hitting a wall. min() of a width-term and a height-term still handles a viewport that's normal-width but short on room (a windowed, non-fullscreen browser losing space to its own chrome) by shrinking to fit. 8px is a backstop for near-zero widths, not a real target - the formula itself never gets that low at any width worth supporting. Ceiling unchanged at 24px for 4K+ displays beyond the reference. */ font-size: clamp(8px, min( calc(10px + 6 * (100vw - 1244px) / 1316), calc(10px + 6 * (100vh - 846px) / 594) ), 24px); } body { height: 100vh; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-touch-callout: none; /* stops the browser's own edge-swipe back/forward-navigation gesture from competing with the task row's horizontal swipe-to-reveal - a different mechanism than touch-action, and the most likely cause of a swipe visibly starting then springing back uncommitted */ overscroll-behavior-x: none; } body.idle { cursor: none; } body.idle #hint { opacity: 0; } input { user-select: text; } ::selection { background: rgba(10,132,255,.4); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ============ atmosphere ============ */ /* energy meter: --energy (0-4, from days of hitting the Main 3) brightens and saturates the blobs, no new panel needed */ .blob { position: fixed; width: 70vmax; height: 70vmax; border-radius: 50%; z-index: 0; opacity: calc(.11 + var(--energy, 0) * .032); filter: blur(150px) saturate(calc(1 + var(--energy, 0) * .18)); transition: background 3.5s, opacity 2.1s, filter 2.1s; } /* ambient state hues: cooler while focusing, brief warm wash on completing the Main 3 */ body.focusing .b1 { background: #2440d6; } body.focusing .b2 { background: #0a4a6e; } body.focusing .b3 { background: #3a1e6e; } body.celebrate .b1, body.celebrate .b2, body.celebrate .b3 { background: #c56a25; transition: background 0.7s; } .b1 { background: #3c3ec7; top: -30vmax; left: -18vmax; animation: d1 93.8s ease-in-out infinite alternate; } .b2 { background: #085a80; bottom: -35vmax; right: -18vmax; animation: d2 116.2s ease-in-out infinite alternate; } .b3 { background: #7a1b52; top: 45vh; left: 60vw; width: 42vmax; height: 42vmax; animation: d3 141.4s ease-in-out infinite alternate; } @keyframes d1 { to { transform: translate(26vmax, 16vmax); } } @keyframes d2 { to { transform: translate(-20vmax, -12vmax); } } @keyframes d3 { to { transform: translate(-28vmax, -18vmax) scale(1.25); } } body::before { /* vignette */ content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(0,0,0,.5)); } body::after { /* film grain */ content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* nav is a floating pill with a translucent glass background, not a full-width bar - scrolled content (a tall Tasks column, in particular) could slide up and show through/around it. This sits behind both nav (z-index 4) and #topRightBar (z-index 5) but above .view's scrolling content (z-index 1), fully opaque where they actually sit and fading out below that so it doesn't read as a hard-edged bar cutting across the page. */ #topbarBg { position: fixed; top: 0; left: 0; right: 0; height: 5.5rem; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 65%, transparent 100%); } /* ============ segmented nav ============ */ nav { position: fixed; top: 1.3rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; padding: .1875rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); backdrop-filter: blur(24px); transition: opacity 0.7s; } nav .thumb { position: absolute; top: .1875rem; bottom: .1875rem; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: left 0.49s var(--ease), width 0.49s var(--ease); } nav button { position: relative; background: none; border: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 500; color: var(--ink-2); padding: .42rem 1.15rem; border-radius: 999px; transition: color 0.42s; } nav button.on, nav button:hover { color: var(--ink); } /* countdown badge on the Focus tab: tabular-nums so digits never jitter mid-tick, and a reserved min-width so the nav only resizes once (on start/stop), not continuously while ticking */ #navtime { display: inline-block; min-width: 0; font-variant-numeric: tabular-nums; color: var(--ink-2); opacity: .85; } #navtime:not(:empty) { margin-left: .5rem; min-width: 2.9em; } #navtime.brk { color: var(--green); } /* nav (centered) and #topRightBar (right-anchored) are two independent fixed-position elements with no collision-avoidance between them - fine while there's a wide gap, but the root font-size floor (see the clamp() above) means nav's pixel width stops shrinking with the viewport well before ~1280px, so a narrower window/tablet can close that gap entirely. Shrinking nav's own font/padding here (independent of the root clamp) and collapsing #acct's signed-out "Sign in with Google" text down to its icon - matching the already icon-only feedback/tutorial/admin buttons right next to it - are the two levers that actually control each side's width, so this is where the fix has to happen. */ @media (max-width: 1280px) { nav button { font-size: .74rem; padding: .36rem .8rem; } #acct:not(.on) { width: 1.875rem; padding: 0; justify-content: center; } #acct:not(.on) #acctLabel { display: none; } } /* ============ views ============ */ .view { position: fixed; inset: 0; z-index: 1; overflow-y: auto; padding: 5.6rem 1.5rem 2.5rem; opacity: 0; transform: translateY(16px) scale(.995); pointer-events: none; transition: opacity 0.56s var(--ease), transform 0.56s var(--ease); } .view.on { opacity: 1; transform: none; pointer-events: auto; } /* grid-template-columns explicitly caps the track's minimum at 0 (grid's default "auto" track otherwise sizes to its content's min-content width, the same overflow trap flex items have by default) - without this, a wide child like #plist's section columns can stretch .wrap past the viewport instead of shrinking/wrapping, forcing .view's horizontal scrollbar to appear even though every column inside already has its own min-width:0 and text-wrapping/ellipsis rules */ .wrap { max-width: 48.75rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; } .view.on .anim { animation: rise 0.77s var(--ease) both; } .view.on .anim:nth-child(2) { animation-delay: .07s; } .view.on .anim:nth-child(3) { animation-delay: .14s; } .view.on .anim:nth-child(4) { animation-delay: .21s; } .view.on .anim:nth-child(5) { animation-delay: .28s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } /* ============ focus ============ */ #focus { display: flex; align-items: center; justify-content: center; gap: 3.2rem; flex-wrap: wrap; } /* #fsn is pinned to the viewport's own bottom edge (see its rule below), independent of how tall the centered #fmain column happens to be - on a short viewport (a windowed, non-fullscreen browser eating vertical space on its title/tab bar) the centered column and the pinned panel can collide. Reserving extra bottom room - only while #fsn actually has something to show - shifts the centered column up enough to clear it at realistic window-chrome heights, without permanently shrinking the centered composition on a fresh account where #fsn stays hidden. */ #focus:has(#fsn:not([hidden])) { padding-bottom: 2rem; } #fmain { display: grid; justify-items: center; text-align: center; } /* the 1.3x boost only has room on genuinely spacious displays - #fside and #fsn are both position:absolute (they opt out of #focus's flex layout entirely, so nothing stops #fmain growing into them). At the root font-size floor (see the clamp() above; anything narrower than ~2240x1260 sits there) #tline alone comes out to ~717px unscaled - at 1.3x that's ~933px, wide enough to overlap #fside's fixed-width column by well over 100px on a realistic tablet/laptop-window size. Gating the scale to the same width/height this app's font clamp already treats as "enough room" keeps the dramatic large-display look without inflating the one screen where three independently-positioned pieces (#fmain, #fside, #fsn) have to share space with no collision-avoidance between them. */ @media (min-width: 2240px) and (min-height: 1260px) { #fmain { transform: scale(1.3); } } #clock { font-size: clamp(4.4rem, 11.5vw, 9.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; padding: 0 .06em; /* background-clip:text clips glyph overhang at the box edge */ background: linear-gradient(110deg, #fff 15%, #b8c9ff 40%, #e5b8ff 60%, #ffc4b0 78%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 22.4s linear infinite; filter: drop-shadow(0 0 44px rgba(150,140,255,.25)); } @keyframes shimmer { to { background-position: -250% 0; } } #clock small { font-size: .34em; font-weight: 500; letter-spacing: .02em; -webkit-text-fill-color: rgba(255,255,255,.85); } #date { margin-top: .7rem; font-size: .95rem; color: var(--ink-2); margin-bottom: .9rem; } #modesw { position: relative; display: inline-flex; padding: .1875rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); margin-bottom: 2.5rem; } #modesw .thumb { position: absolute; top: .1875rem; bottom: .1875rem; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: left 0.49s var(--ease), width 0.49s var(--ease); } #modesw button { position: relative; background: none; border: none; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 500; color: var(--ink-2); padding: .32rem .85rem; border-radius: 999px; transition: color 0.42s; } #modesw button.on, #modesw button:hover { color: var(--ink); } #minswrap.dim { opacity: .35; pointer-events: none; } #ringbox { position: relative; width: clamp(15rem, 38vh, 20.625rem); aspect-ratio: 1; display: grid; place-items: center; } /* overflow:visible - svg's own UA default is hidden (unlike every other element, whose default is visible), which was hard-clipping #prog/#ticks's drop-shadow glow at the svg's own square canvas edge instead of letting it fade out smoothly - that flat clipped edge is what read as a square box around the ring. */ #ringbox svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } #track { fill: none; stroke: rgba(255,255,255,.055); stroke-width: 5; } #ticks { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 7; stroke-dasharray: 1.2 9.69; } #prog { fill: none; stroke: url(#gFocus); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 741.4; transition: stroke-dashoffset 0.42s linear; filter: drop-shadow(0 0 16px rgba(191,90,242,.45)); } #prog.break { stroke: url(#gBreak); filter: drop-shadow(0 0 16px rgba(48,209,88,.45)); } #ringbox.pulse { animation: pulse 1.26s var(--ease); } @keyframes pulse { 30% { transform: scale(1.05); } } #left { font-size: 3.7rem; font-weight: 100; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; } #mode { margin: .9rem auto 0; display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: .3rem .85rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair); } #mode i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); transition: background 0.42s; } #mode.run i { background: var(--accent); box-shadow: 0 0 8px var(--accent); } #mode.run.brk i { background: var(--green); box-shadow: 0 0 8px var(--green); } #controls { margin-top: 2.3rem; display: flex; gap: .7rem; } .pill { font: inherit; font-size: .92rem; font-weight: 500; color: var(--ink); background: var(--glass); border: 1px solid var(--hair-2); border-radius: 999px; padding: .55rem 1.5rem; cursor: pointer; transition: background 0.35s, transform 0.21s var(--ease); } .pill:hover { background: var(--glass-2); transform: translateY(-1px); } .pill:active { transform: scale(.96); } .pill.on { color: var(--accent); border-color: rgba(10,132,255,.5); } .minpill { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: text; padding: .55rem 1.3rem; } .minpill:focus-within { border-color: rgba(10,132,255,.5); } #smins { width: 2.2rem; background: none; border: none; padding: 0; text-align: right; font: inherit; color: var(--ink); font-variant-numeric: tabular-nums; } #smins:focus { outline: none; } #smins::-webkit-inner-spin-button, #smins::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #smins { -moz-appearance: textfield; } .minpill .unit { font-size: .78rem; color: var(--ink-3); } #startpause { min-width: 7.5rem; border: none; font-weight: 600; background: linear-gradient(180deg, #2b95ff, #0071e3); box-shadow: 0 6px 20px rgba(10,132,255,.35), inset 0 1px 0 rgba(255,255,255,.25); } #startpause:hover { background: linear-gradient(180deg, #3ea0ff, #0a7cf0); } #dots { margin-top: 2rem; display: flex; align-items: center; gap: .5rem; min-height: 1rem; } #dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(10,132,255,.6); animation: rise 0.56s var(--ease) both; } #dots i.hollow { background: none; border: 1px solid var(--ink-3); box-shadow: none; } #dots span { font-size: .74rem; color: var(--ink-3); margin-left: .3rem; cursor: pointer; transition: color 0.35s; } #dots span:hover { color: var(--ink); } /* today timeline: a thick 24h axis holding session blocks and task-completion ticks directly */ #tline { position: relative; width: min(51.25rem, 85vw); height: 3.875rem; margin-top: 1.6rem; } #tlaxis { position: absolute; top: 1.25rem; left: 0; right: 0; height: .75rem; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; } #tlaxis i.night { position: absolute; top: 0; bottom: 0; background: rgba(94,92,230,.25); } #tlaxis i.sess { position: absolute; top: 0; bottom: 0; border-radius: 2px; } #tlaxis i.sess.c { background: var(--accent); box-shadow: 0 0 6px rgba(10,132,255,.6); } #tlaxis i.sess.a { background: var(--red); box-shadow: 0 0 6px rgba(255,69,58,.6); } /* task completions marked directly on the axis, alongside the session blocks */ #tlaxis i.tick { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: var(--green); box-shadow: 0 0 6px var(--green); } #tline b { position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: rgba(255,255,255,.55); box-shadow: 0 0 4px rgba(255,255,255,.4); } /* hour markers under the axis - thin ticks plus a handful of labels, so the strip reads as an actual time scale rather than just a proportional bar with no reference points */ #tlticks { position: absolute; top: 2.125rem; left: 0; right: 0; height: .3125rem; } #tlticks i { position: absolute; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,.12); } #tlticks i.maj { background: rgba(255,255,255,.22); height: 100%; } #tllabels { position: absolute; top: 2.625rem; left: 0; right: 0; height: 1rem; } #tllabels span { position: absolute; top: 0; transform: translateX(-50%); font-size: .66rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; } #tllabels span:first-child { transform: none; } #tllabels span:last-child { transform: translateX(-100%); } /* focus dim mode: while the timer runs, only the ring and the task card stay lit */ #clock, #date, #fsn, #dots, #tline { transition: opacity 1.12s var(--ease); } body.focusing #clock, body.focusing #date, body.focusing #fsn, body.focusing #dots, body.focusing #tline, body.focusing #hint { opacity: .15; } /* focus side card, pinned top-right→middle */ #fside { position: absolute; top: 5.6rem; bottom: 50vh; width: 18.75rem; right: 1.5rem; display: flex; flex-direction: column; } .fgroup { font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); margin: .9rem 0 .15rem; } .fgroup:first-child { margin-top: 0; } .fsecgroup { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 1.2rem 0 0; } .fsecgroup:first-child { margin-top: 0; } /* quick-add: a second, more discoverable path to Main 3 alongside the existing right-click/swipe on a Tasks-screen row - #main3results overlays #flist below it rather than pushing it down, since it only ever appears transiently while searching. */ #main3add { position: relative; flex: none; margin-bottom: .9rem; } #main3search { width: 100%; font: inherit; font-size: .84rem; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--hair); border-radius: 9px; padding: .5rem .7rem; transition: border-color 0.2s; } #main3search:focus { border-color: rgba(10,132,255,.5); } #main3search:disabled { opacity: .5; cursor: default; } #main3results { position: absolute; z-index: 3; top: calc(100% + .3rem); left: 0; right: 0; background: rgba(20,25,38,.96); border: 1px solid var(--hair-2); border-radius: 10px; padding: .3rem; backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgba(0,0,0,.4); max-height: 15rem; overflow-y: auto; } .main3result { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: .4rem .6rem; border-radius: 7px; } .main3result:hover { background: rgba(255,255,255,.08); } .m3text { display: block; font-size: .84rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m3ctx { display: block; font-size: .7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #flist { overflow-y: auto; flex: 1; min-height: 0; } #flist .frow, #sntoday .frow { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .88rem; animation: rise 0.42s var(--ease); } #flist .frow:last-child, #sntoday .frow:last-child { border-bottom: none; } #flist .frow.sub { padding-left: 1.7rem; font-size: .82rem; } #flist .frow.sub input[type=checkbox] { width: .9375rem; height: .9375rem; } #flist .frow.sub input[type=checkbox]:checked::after { left: .23125rem; top: .075rem; width: .225rem; height: .4375rem; } /* ============ panels ============ */ .panel { position: relative; background: var(--glass); border: 1px solid var(--hair); border-radius: 20px; padding: 1.35rem 1.5rem; backdrop-filter: blur(20px); box-shadow: 0 20px 50px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05); } /* #authGate/#recap/#feedbackModal each sit on their own full-screen blurred scrim (see those rules below) - .panel's OWN blur on top of that is pure double-compositing waste, recomputed every frame of its entrance/exit animation, since the scrim already blurs the whole page underneath. #fside (the only other .panel user) has no scrim behind it, so its blur stays. */ #authGate .panel, #recap .panel, #feedbackModal .panel { backdrop-filter: none; } .phead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; gap: 1rem; } .phead h2 { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .phead .meta { font-size: .78rem; color: var(--ink-3); } .empty { color: var(--ink-3); font-size: .9rem; line-height: 1.6; padding: .8rem 0; } /* ============ tasks ============ */ #tasks .wrap, #calendar .wrap, #willpower .wrap, #stats .wrap { max-width: none; } #tcbar, #stbar { display: flex; height: .75rem; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.07); margin-top: 1rem; } #tcbar i, #stbar i { transition: width 0.91s var(--ease); } #tcopen, #stopenb { background: var(--c4); } #tcdone, #stdoneb { background: var(--accent); } input:focus, select:focus { outline: none; } ::placeholder { color: var(--ink-3); } .tasks-toolbar { display: flex; justify-content: flex-end; gap: .6rem; margin-bottom: -.2rem; } /* at most 5 section columns per row - a 20% flex-basis means a 6th has no room left on the line and wraps below, where it (and any more) grow to fill that new row on their own */ #plist { display: flex; flex-wrap: wrap; width: 100%; align-items: flex-start; row-gap: 2rem; } .section-col { flex: 1 1 20%; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; padding: 0 1.4rem; } .section-col:first-child { padding-left: 0; } .section-col:last-child { padding-right: 0; } .section-col:not(:last-child) { border-right: 1px solid var(--hair); } .section-head { display: flex; align-items: center; gap: .5rem; padding: 0 .2rem; } .section-head b, .section-head input.secname { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } /* section titles had no truncation at all (unlike project names above), plus the same missing min-width:0 - a long section name would push its column, and the whole row, wider than the window with no way to shrink */ /* flex-grow:0 (not 1) - it only needs to shrink for a long name, not actively expand for a short one. flex:1 here pushed the hide-completed eye icon (and edit/archive) far away from a short name like "Work" instead of sitting right next to it; min-width:0 alone is what lets a long name still shrink and ellipsis-truncate. */ .section-head b { min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section-head input.secname { font-family: inherit; background: rgba(255,255,255,.05); border: 1px solid rgba(10,132,255,.5); border-radius: 8px; padding: .1rem .5rem; min-width: 0; flex: 1 1 auto; } /* unlike rename/delete this is a state toggle, not an action - stays visible without hovering so you can tell at a glance whether a section is currently hiding its completed tasks */ .section-head .hidedone { opacity: .5; } .section-head .hidedone.on { opacity: .95; color: var(--accent); } .section-head .archsec.on, .proj header .arch.on { opacity: .95; color: var(--accent); } /* capped so a section with many projects scrolls internally instead of pushing its "+ Add project" input (and every other section's alignment) further down the page */ .section-projects { display: grid; gap: 1.1rem; min-width: 0; max-height: 62.5rem; overflow-y: auto; overflow-x: hidden; padding-right: .4rem; margin-right: -.4rem; } /* .panel (shared with every other panel in the app) deliberately has no overflow:hidden, since it would clip its own outer box-shadow - scoped here instead of there so only project cards lose that shadow. Without this, header content that doesn't fully fit (a long name once min-width:0 lets it shrink as far as it can, still short of the icons+badges' fixed width) rendered past the card's own straight-edge box instead of the rounded corner, which is what visually looked like the corner getting "cut" by the overflowing content. */ .proj { overflow: hidden; transition: border-color 0.42s, background 0.42s; } .proj:hover { border-color: var(--hair-2); background: var(--glass-2); } /* -webkit-touch-callout suppresses iOS Safari's native long-press callout (copy/share sheet), which otherwise races our own JS press-and-hold drag/context-menu logic below and cancels it mid-gesture; user-select stops the OS also treating the hold as a text-selection attempt. Neither property affects scrolling (unlike touch-action), so swipe-to-scroll is untouched. */ .proj header { display: flex; align-items: center; gap: .65rem; cursor: grab; -webkit-touch-callout: none; user-select: none; } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; } /* min-width:0 is what actually lets the ellipsis above apply - a flex item floors at its own content's full width otherwise (same bug as the .section-head b fix below), which is what let one long project name force this whole column (and the section-columns row) wider than the window instead of truncating. flex-grow is 0, not 1 - it only needs to shrink for a long name, not actively expand for a short one, which pushed the edit/archive icons far away from a short name like "Launch" instead of sitting right next to it. */ .proj header b { font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proj header input.pname { font: inherit; font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid rgba(10,132,255,.5); border-radius: 8px; padding: .1rem .5rem; min-width: 0; flex: 1 1 auto; } .proj header .count, .section-head .count { color: var(--ink-2); font-size: .74rem; margin-left: auto; flex: none; font-variant-numeric: tabular-nums; padding: .18rem .6rem; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--hair); } .proj header .count.full { color: var(--green); background: rgba(48,209,88,.1); border-color: rgba(48,209,88,.35); } /* collapse/expand chevron for an individual project - always visible (not hover-gated like rename/delete) so you can tell at a glance which projects are currently collapsed */ .proj header .collapse { opacity: .6; transition: transform 0.35s var(--ease), opacity 0.28s, color 0.28s; } .proj header .collapse:hover { opacity: 1; } .proj header .collapse.collapsed { transform: rotate(-90deg); } .pbar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin: .8rem 0 .4rem; } .pbar i { display: block; height: 100%; border-radius: 2px; transition: width 0.84s var(--ease); } .proj ul { list-style: none; padding: 0; } .proj li { margin: 0 -.45rem; border-radius: 9px; transition: background 0.28s; border-bottom: 1px solid rgba(255,255,255,.05); animation: rise 0.49s var(--ease); } .proj li:hover { background: rgba(255,255,255,.035); } .proj li:last-of-type { border-bottom: none; } /* a gap before each new task (and its subtasks) sets that whole group apart from the one before. position:relative + overflow:hidden clips .row-swipe-actions until swiped into view; the row's own flex layout/padding lives on .row-content now (the child that actually slides) for both task and subtask rows - only the drag gesture (cursor:grab, reordering) stays task-only below, since subtasks can swipe to reveal actions but can't yet be reordered (see beginDragWatch()). */ .proj li:not(.sub) { margin-top: .6rem; cursor: grab; -webkit-touch-callout: none; user-select: none; position: relative; overflow: hidden; } .proj li:not(.sub):first-child { margin-top: 0; } /* the sliding row content and the actions revealed behind it on a touch swipe-left - see beginDragWatch()'s swipe-reveal branch. .row-swipe-actions sits just past the row's right edge (invisible, clipped by the li's own overflow:hidden) until both are translated left together. */ .row-content { display: flex; align-items: center; gap: .7rem; padding: .48rem .45rem; box-sizing: border-box; width: 100%; transition: transform 0.25s var(--ease); } .row-swipe-actions { position: absolute; top: 0; left: 100%; bottom: 0; width: 8.4rem; display: flex; transition: transform 0.25s var(--ease); } .row-swipe-actions button { all: unset; flex: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; color: var(--ink-2); background: var(--glass-2); } .row-swipe-actions button + button { border-left: 1px solid var(--hair); } .row-swipe-actions button.danger { background: rgba(255,69,58,.18); color: var(--red); } .proj li.dragging, .proj.dragging { opacity: .4; } /* the floating clone that follows the cursor during a pointer-based drag, and the highlight on whichever row/card is currently the drop target - both driven by beginDragWatch() */ .drag-ghost { position: fixed; z-index: 40; pointer-events: none; opacity: .92; overflow: hidden; transform: rotate(-1.5deg); box-shadow: 0 14px 34px rgba(0,0,0,.5); background: rgba(20,25,38,.96); border-radius: 9px; } .drop-hint { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 9px; } /* classic outline/tree connector: a vertical trunk with a horizontal elbow branching into each subtask's checkbox. The trunk sits at left:0, which lands exactly under the MAIN task's own checkbox center - not the subtask's: a non-sub li's checkbox center is 10px from the