/* Nudjo — "Pop Glass" design system (violet to pink). Tokens, base and shared components first (shared verbatim across the MyApps Hub apps apart from the hue block), then Nudjo's own layout. Dark mode follows the OS; forces one. */ /* Metric-adjusted fallback so the web-font swap does not shift layout. */ @font-face{ font-family:"PJS Fallback"; src:local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust:104%; ascent-override:97%; descent-override:25%; line-gap-override:0%; } :root{ color-scheme: light dark; /* per-app hue (Nudjo: violet to pink) */ --a1:#6d28d9; --a2:#db2777; --a1-vivid:#8b5cf6; --a2-vivid:#f472b6; --a-ink:#6d28d9; --grad:linear-gradient(135deg,var(--a1) 0%,var(--a2) 100%); --grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--a1) 13%,transparent),color-mix(in srgb,var(--a2) 13%,transparent)); --on-grad:#fff; /* neutrals (light) */ --bg:#f6f5fb; --surface:#ffffff; --surface-2:#efedf7; --surface-3:#e5e2f1; --text:#15131f; --muted:#5d5a72; --border:rgba(30,20,70,.10); --border-strong:#8a86a0; --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.88); --glass-border:rgba(30,20,70,.08); --scrim:rgba(14,10,30,.48); --toast-bg:rgba(21,19,31,.94); --toast-fg:#fff; --focus:var(--a1); --bar-danger:#ff8a80; /* semantic */ --success:#047857; --success-soft:color-mix(in srgb,#10b981 16%,transparent); --warn:#b45309; --warn-soft:color-mix(in srgb,#f59e0b 20%,transparent); --danger:#dc2626; --danger-soft:color-mix(in srgb,#ef4444 12%,transparent); /* radii / spacing */ --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px; /* elevation */ --sh-1:0 1px 2px rgba(30,20,70,.05),0 4px 12px rgba(30,20,70,.06); --sh-2:0 2px 4px rgba(30,20,70,.06),0 12px 28px rgba(30,20,70,.12); --sh-3:0 4px 8px rgba(30,20,70,.08),0 20px 44px rgba(30,20,70,.18); --glow:0 6px 18px color-mix(in srgb,var(--a1) 38%,transparent); --glow-lg:0 10px 28px color-mix(in srgb,var(--a1) 45%,transparent),0 2px 6px color-mix(in srgb,var(--a2) 30%,transparent); --blur:saturate(180%) blur(18px); /* type */ --font:"Plus Jakarta Sans","PJS Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:var(--font); --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px; /* motion */ --dur-1:120ms; --dur-2:220ms; --dur-3:360ms; --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-in-out:cubic-bezier(.65,0,.35,1); /* z-index */ --z-bar:20; --z-dock:30; --z-fab:40; --z-menu:45; --z-lightbox:70; --z-busy:80; --z-scrim:85; --z-sheet:86; --z-toast:90; --z-progress:99; /* safe areas */ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --appbar-h:60px; --dock-clear:96px; /* The hub's shared ✦ assistant widget (myapps-hub.com/agent.js, injected at runtime; 48px circle) reads --hub-agent-bottom / --hub-agent-right. It stacks 12px above whatever floats at the bottom of the current view and is centred over the FAB (62px). The values below are for the list view; the editor dock and bulk-select bar override --hub-agent-bottom further down. */ --fab-size:62px; --fab-bottom:20px; --hub-agent-right:calc(max(16px,var(--safe-r)) + (var(--fab-size) - 48px) / 2); --hub-agent-bottom:calc(var(--fab-bottom) + var(--fab-size) + 12px); /* legacy aliases (older rules / inline styles) */ --card:var(--surface); --ink:var(--text); --accent:var(--a-ink); --accent-soft:var(--surface-2); --shadow:var(--sh-1); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0c0b12; --surface:#16151f; --surface-2:#211f2e; --surface-3:#2c2a3c; --text:#f3f2fa; --muted:#a4a1ba; --border:rgba(255,255,255,.09); --border-strong:#77748f; --glass:rgba(22,21,31,.66); --glass-strong:rgba(22,21,31,.88); --glass-border:rgba(255,255,255,.09); --scrim:rgba(0,0,0,.6); --toast-bg:rgba(243,242,250,.96); --toast-fg:#15131f; --success:#34d399; --warn:#fbbf24; --danger:#f87171; --bar-danger:#b91c1c; --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3); --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45); --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6); --a-ink:#c4b5fd; } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0c0b12; --surface:#16151f; --surface-2:#211f2e; --surface-3:#2c2a3c; --text:#f3f2fa; --muted:#a4a1ba; --border:rgba(255,255,255,.09); --border-strong:#77748f; --glass:rgba(22,21,31,.66); --glass-strong:rgba(22,21,31,.88); --glass-border:rgba(255,255,255,.09); --scrim:rgba(0,0,0,.6); --toast-bg:rgba(243,242,250,.96); --toast-fg:#15131f; --success:#34d399; --warn:#fbbf24; --danger:#f87171; --bar-danger:#b91c1c; --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3); --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45); --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6); --a-ink:#c4b5fd; } :root[data-theme="light"]{ color-scheme:light; } /* ---------- theme control (settings) ---------- */ .theme-seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border)} .theme-seg button{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-pill); background:none;color:var(--muted);font:inherit;font-weight:700;font-size:14px;cursor:pointer} .theme-seg button[aria-checked="true"]{background:var(--grad);color:#fff;box-shadow:var(--glow)} .theme-seg button:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px} /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{margin:0;height:100%} body{ background:var(--bg);color:var(--text); font-family:var(--font);font-size:var(--fs-base);line-height:1.5;font-weight:500; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overscroll-behavior-y:none; padding-bottom:env(safe-area-inset-bottom); } h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.2} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;touch-action:manipulation} a{color:var(--a-ink)} .hidden,[hidden]{display:none !important} .muted{color:var(--muted)} .small{font-size:var(--fs-sm)} /* aurora: faint two-colour glow behind the top of every screen */ body::before{ content:"";position:fixed;inset:0 0 auto 0;height:min(60vh,460px);z-index:-1;pointer-events:none; background: radial-gradient(60% 70% at 15% 0%,color-mix(in srgb,var(--a1-vivid) 20%,transparent),transparent 70%), radial-gradient(55% 65% at 90% 0%,color-mix(in srgb,var(--a2-vivid) 16%,transparent),transparent 70%); } :focus{outline:none} :focus-visible{outline:3px solid var(--focus);outline-offset:2px} :root[data-theme="dark"] :focus-visible{outline-color:var(--a-ink)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :focus-visible{outline-color:var(--a-ink)}} .ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .ic.sm{width:18px;height:18px}.ic.lg{width:28px;height:28px} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} :root[data-theme="dark"] .grad-text{background:linear-gradient(135deg,var(--a1-vivid),var(--a2-vivid));-webkit-background-clip:text;background-clip:text} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grad-text{background:linear-gradient(135deg,var(--a1-vivid),var(--a2-vivid));-webkit-background-clip:text;background-clip:text}} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--glass:var(--surface);--glass-strong:var(--surface)} } @keyframes fade-in{from{opacity:0}to{opacity:1}} @keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes pop-in{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}} @keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}} @keyframes toast-in{ 0%{opacity:0;transform:translateX(-50%) translateY(18px) scale(.9)} 100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} } @keyframes pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)} 50%{box-shadow:0 0 0 10px rgba(220,38,38,0)} } /* ---------- app bar ---------- */ .topbar{ position:sticky;top:0;z-index:var(--z-bar); display:flex;align-items:center;gap:var(--s-2); min-height:calc(var(--appbar-h) + var(--safe-t)); padding:var(--safe-t) max(var(--s-3),var(--safe-r)) 0 max(var(--s-3),var(--safe-l)); background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border-bottom:1px solid var(--glass-border); } .brand-mark{ width:34px;height:34px;border-radius:12px;background:var(--grad);color:#fff;flex:none; display:grid;place-items:center;box-shadow:var(--glow); } .brand-mark .ic{width:19px;height:19px} .brand-mark.brand-hero{width:64px;height:64px;border-radius:22px;margin:0 auto 14px} .brand-mark.brand-hero .ic{width:30px;height:30px} /* ---------- icon buttons ---------- */ .iconbtn{ position:relative;width:44px;height:44px;border:0;border-radius:14px;padding:0;flex:none; display:grid;place-items:center;background:transparent;color:var(--text); transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2); } @media (hover:hover){.iconbtn:hover{background:var(--surface-2)}} .iconbtn:active{transform:scale(.9);background:var(--surface-3)} .iconbtn.danger{color:var(--danger)} .iconbtn:disabled{opacity:.4;cursor:default} /* ---------- buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:12px 20px;border:0;border-radius:var(--r-md); background:var(--surface-2);color:var(--text);font-weight:700;font-size:15.5px;letter-spacing:-.005em; text-decoration:none; transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),background-color var(--dur-2),filter var(--dur-2); } @media (hover:hover){.btn:hover{background:var(--surface-3)}} .btn:active{transform:scale(.97)} .btn.primary{background:var(--grad);color:#fff;box-shadow:var(--glow)} @media (hover:hover){.btn.primary:hover{filter:brightness(1.08) saturate(1.05);background:var(--grad)}} .btn.link{background:none;color:var(--a-ink);min-height:44px;padding:8px 12px;box-shadow:none} .btn.danger{background:var(--danger-soft);color:var(--danger)} .btn.small{min-height:40px;padding:8px 16px;font-size:14px;border-radius:var(--r-sm)} .btn.small::after{content:"";position:absolute;inset:-2px 0} .btn:disabled{opacity:.5;pointer-events:none} .btn .ic{width:19px;height:19px} .btn.small .ic{width:17px;height:17px} /* ---------- chips / badges ---------- */ .chip{ flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px; border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--muted); font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none; transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2),color var(--dur-2),border-color var(--dur-2); } .chip:active{transform:scale(.94)} .chip.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--glow)} .chip .ic{width:16px;height:16px} .badge,.pill{ display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1.2; padding:5px 10px;border-radius:var(--r-pill);background:var(--grad-soft);color:var(--a-ink); } .badge.net{background:var(--warn-soft);color:var(--warn);white-space:nowrap;flex:none} /* ---------- form fields ---------- */ .auth-card input, .modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card textarea, .modal-card select, #search, #add-item-input, .grocery-bar select, .grocery-bar input, .question .q-when{ width:100%;min-height:48px;padding:12px 14px; font-size:16px;color:var(--text);background:var(--surface-2); border:1.5px solid transparent;border-radius:var(--r-md);outline:none; transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2); } .auth-card input::placeholder,.modal-card input::placeholder,.modal-card textarea::placeholder, #search::placeholder,#add-item-input::placeholder,.grocery-bar input::placeholder{color:var(--muted);opacity:.85} .auth-card input:focus, .modal-card input:not([type="checkbox"]):focus, .modal-card textarea:focus, .modal-card select:focus, #search:focus, #add-item-input:focus, .grocery-bar select:focus, .grocery-bar input:focus, .question .q-when:focus{ background:var(--surface);border-color:var(--a1-vivid); box-shadow:0 0 0 4px color-mix(in srgb,var(--a1-vivid) 24%,transparent); } .modal-card textarea{line-height:1.55;resize:vertical;font-family:inherit} .modal-card select, .grocery-bar select{ -webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a86a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:20px; } input[type="date"],input[type="datetime-local"]{-webkit-appearance:none;appearance:none} .question .q-when{min-height:44px;padding:8px 12px;font-size:16px} /* ---------- auth ---------- */ #auth-view{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px} .auth-card{ position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-xl);box-shadow:var(--sh-2); padding:32px 24px;width:100%;max-width:380px;text-align:center; animation:pop-in var(--dur-3) var(--ease-spring); } .auth-card h1{margin:0 0 4px;font-size:var(--fs-xl);display:block} .auth-card p{margin:6px 0} .auth-card form{display:flex;flex-direction:column;gap:10px;margin-top:18px} .auth-card > .btn{display:flex;width:100%} .auth-error{color:var(--danger);font-size:14px;min-height:18px;margin:8px 0 0;font-weight:600} /* ---------- list-view top bar ---------- */ .search-field{position:relative;flex:1;min-width:0;display:flex;align-items:center} .search-field .search-ic{position:absolute;left:14px;color:var(--muted);width:19px;height:19px} #search{min-height:44px;padding:8px 46px 8px 42px;border-radius:var(--r-pill)} /* The mic sits where a native search-cancel "x" would otherwise render. */ #search::-webkit-search-cancel-button{display:none} .search-mic{ position:absolute;top:50%;right:4px;transform:translateY(-50%); width:36px;height:36px;display:grid;place-items:center; border:0;background:none;color:var(--muted);padding:0;border-radius:50%; transition:background-color var(--dur-2),transform var(--dur-1) var(--ease-out); } .search-mic::before{content:"";position:absolute;inset:-4px} .search-mic:active{background:var(--surface-3)} .search-mic.recording{color:#fff;background:var(--danger);animation:pulse 1.2s ease-in-out infinite} /* ---------- menus ---------- */ .menu{ position:fixed;z-index:var(--z-menu);min-width:220px;overflow:hidden; background:color-mix(in srgb,var(--surface) 96%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--sh-3); transform-origin:top right;animation:pop-in var(--dur-2) var(--ease-spring); } #account-menu{top:calc(var(--appbar-h) + var(--safe-t) - 4px);right:10px} .menu-head{padding:14px 16px;font-weight:800;border-bottom:1px solid var(--border);overflow-wrap:anywhere} .menu-item{ display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 16px; border:0;background:none;text-align:left;font-size:15.5px;font-weight:600;color:var(--text); transition:background-color var(--dur-1); } .menu-item:active,.menu-item:hover{background:var(--surface-2)} .menu-item .ic{color:var(--a-ink)} .menu.sheet{bottom:calc(96px + var(--safe-b));right:max(20px,var(--safe-r));transform-origin:bottom right;min-width:250px} /* ---------- notes list ---------- */ .view-tabs{max-width:720px;margin:0 auto;padding:12px 12px 0;background:transparent} #notes-list{padding:12px 12px calc(var(--dock-clear) + var(--safe-b));max-width:720px;margin:0 auto;overscroll-behavior:contain} .section-title{margin:22px 4px 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .stagger > *{animation:rise var(--dur-3) var(--ease-out) both} .stagger > :nth-child(2){animation-delay:30ms}.stagger > :nth-child(3){animation-delay:60ms} .stagger > :nth-child(4){animation-delay:90ms}.stagger > :nth-child(5){animation-delay:120ms} .stagger > :nth-child(6){animation-delay:150ms}.stagger > :nth-child(7){animation-delay:180ms} .stagger > :nth-child(8){animation-delay:210ms}.stagger > :nth-child(9){animation-delay:240ms} .stagger > :nth-child(10){animation-delay:270ms}.stagger > :nth-child(n+11){animation-delay:300ms} .note-card{ position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--sh-1); padding:16px 18px 16px 20px;margin-bottom:10px;cursor:pointer; transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2),opacity var(--dur-2); } @media (hover:hover){.note-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--a1-vivid) 40%,var(--border))}} .note-card:active{transform:scale(.982);box-shadow:var(--sh-1);transition-duration:var(--dur-1)} .note-card::before{ content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0; background:var(--type,var(--a1-vivid)); } .note-card[data-type="reminder"]{--type:#f472b6} .note-card[data-type="note"]{--type:#8b5cf6} .note-card[data-type="checklist"]{--type:#34d399} .note-card[data-type="grocery"]{--type:#fbbf24} .note-card[data-type="trade"]{--type:#22d3ee} .note-card[data-type="digest"]{--type:#60a5fa} /* Room for the absolutely-positioned toggle buttons in the corner so a long, wrapped title never runs in behind them (offsets 10 / 48 / 86, 32px each). */ .note-card h3{margin:0 0 4px;font-size:17px;font-weight:800;display:flex;align-items:center;gap:6px;padding-right:46px;overflow-wrap:anywhere; transition:color var(--dur-3) var(--ease-out),text-decoration-color var(--dur-3) var(--ease-out)} .note-card:has(.done-toggle) h3{padding-right:88px} .note-card:has(.snooze-toggle) h3{padding-right:128px} .note-card .snippet{margin:0;color:var(--muted);font-size:14px;max-height:40px;overflow:hidden;word-break:break-word} /* Trade cards lead with a reason ("could not parse...") that must read whole. */ .note-card[data-type="trade"] .snippet{max-height:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical} .badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .note-card.done{opacity:.68} .note-card.done h3{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)} .empty{text-align:center;color:var(--muted);padding:56px 24px;display:flex;flex-direction:column;align-items:center} .empty .big{ width:92px;height:92px;margin:0 auto 18px;border-radius:32px;display:grid;place-items:center; background:var(--grad-soft);color:var(--a-ink); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a1-vivid) 25%,transparent); animation:float 4.5s ease-in-out infinite; } .empty .big .ic{width:42px;height:42px;stroke-width:1.75} .empty p{margin:6px 0;max-width:30ch;font-size:15px;font-weight:600} #trash-list .empty{display:block;padding:24px 0} /* corner toggles on a card: 32px circles with a 44px hit area */ .done-toggle,.delete-toggle,.snooze-toggle{ position:absolute;top:10px;width:32px;height:32px;padding:0;border:0;border-radius:50%; display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-size:0;line-height:0; transition:background-color var(--dur-2),color var(--dur-2),transform var(--dur-1) var(--ease-out); } .done-toggle{right:10px} .delete-toggle{right:10px;color:var(--muted)} .snooze-toggle{right:48px} /* Reminders already carry a done-toggle in that slot — sit beside it. */ .note-card .done-toggle ~ .delete-toggle{right:48px} /* An open reminder carries done + snooze + delete — delete moves past both. */ .note-card .done-toggle ~ .snooze-toggle ~ .delete-toggle{right:86px} .done-toggle:active{background:var(--success-soft);color:var(--success);transform:scale(.88)} .delete-toggle:active{background:var(--danger-soft);color:var(--danger);transform:scale(.88)} .snooze-toggle:active{background:var(--grad-soft);color:var(--a-ink);transform:scale(.88)} @media (hover:hover){ .done-toggle:hover{background:var(--success-soft);color:var(--success)} .delete-toggle:hover{background:var(--danger-soft);color:var(--danger)} .snooze-toggle:hover{background:var(--grad-soft);color:var(--a-ink)} } .done-toggle::before,.delete-toggle::before,.snooze-toggle::before{content:"";position:absolute;inset:-6px} /* ---------- fab ---------- */ .fab{ position:fixed;right:max(16px,var(--safe-r));bottom:calc(var(--fab-bottom) + var(--safe-b));z-index:var(--z-fab); width:var(--fab-size);height:var(--fab-size);border:0;border-radius:22px;padding:0;display:grid;place-items:center; background:var(--grad);color:#fff;font-size:0;line-height:0; box-shadow:var(--glow-lg); transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2); } .fab .ic{width:28px;height:28px;stroke-width:2.6;transition:transform var(--dur-3) var(--ease-spring)} @media (hover:hover){.fab:hover{transform:translateY(-2px) scale(1.04)}.fab:hover .ic{transform:rotate(90deg)}} .fab:active{transform:scale(.9)} /* ---------- editor ---------- */ .editor-main{padding:12px 12px calc(148px + var(--safe-b));max-width:720px;margin:0 auto} #note-title{ flex:1;min-width:0;text-overflow:ellipsis;padding:8px 10px;border-radius:var(--r-sm);border:0;background:transparent;box-shadow:none; color:var(--text);font:800 clamp(17px,5vw,22px)/1.2 var(--font-display);letter-spacing:-.02em; transition:background-color var(--dur-2); } #note-title::placeholder{color:var(--muted);opacity:.7} #note-title:focus{background:var(--surface-2)} #note-title:focus-visible{outline:none} #view-only-badge{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} #save-state{font-weight:600;font-size:11px;line-height:1.15;flex:none;max-width:72px;text-align:right} #note-body{ width:100%;min-height:55vh;border:0;resize:vertical;font:inherit;font-size:17px;line-height:1.65; background:transparent;color:var(--text);outline:none;padding:4px; } #note-body:focus-visible{outline:none} /* Bottom padding reserves room for #add-item-form's sticky footprint above the floating dock. */ #items-list{list-style:none;margin:0 0 12px;padding:0 0 104px} #items-list li{ display:flex;align-items:center;gap:12px;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-md);min-height:56px;padding:8px 8px 8px 14px;margin-bottom:8px;box-shadow:var(--sh-1); transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2); } #items-list li:focus-within{border-color:var(--a1-vivid);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1-vivid) 24%,transparent)} #items-list .item-text{ flex:1;min-width:0;min-height:40px;border:0;background:none;font:inherit;font-size:16px;line-height:1.35;color:var(--text);outline:none;padding:9px 0; resize:none;overflow:hidden;display:block;overflow-wrap:anywhere; text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:2px; transition:color var(--dur-3) var(--ease-out),text-decoration-color var(--dur-3) var(--ease-out),opacity var(--dur-3); } #items-list li.checked .item-text{text-decoration-color:currentColor;color:var(--muted);opacity:.75} #items-list .item-text:focus-visible{outline:none} #items-list .rm{ flex:none;min-width:44px;min-height:44px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r-sm); color:var(--muted);padding:0; transition:background-color var(--dur-1),color var(--dur-1); } #items-list .rm:active{background:var(--danger-soft);color:var(--danger)} @media (hover:hover){#items-list .rm:hover{background:var(--danger-soft);color:var(--danger)}} #items-list .item-added-by{flex:none;white-space:nowrap} /* Custom checkbox: animated tick, gradient fill, 46px hit area. */ #items-list input[type="checkbox"],.note-card .select-check{ -webkit-appearance:none;appearance:none;position:relative;flex:none;cursor:pointer; width:26px;height:26px;margin:0;border-radius:9px; border:2px solid var(--border-strong);background:var(--surface); display:inline-grid;place-content:center; transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2),transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2); } #items-list input[type="checkbox"]::before{content:"";position:absolute;inset:-10px} #items-list input[type="checkbox"]::after,.note-card .select-check::after{ content:"";width:13px;height:7px;margin-top:-2px; border:solid #fff;border-width:0 0 3px 3px;border-radius:1px; transform:rotate(-45deg) scale(0);opacity:0; transition:transform var(--dur-2) var(--ease-spring),opacity var(--dur-1); } #items-list input[type="checkbox"]:checked,.note-card .select-check:checked{background:var(--grad);border-color:transparent;box-shadow:var(--glow)} #items-list input[type="checkbox"]:checked::after,.note-card .select-check:checked::after{transform:rotate(-45deg) scale(1);opacity:1} #items-list input[type="checkbox"]:active{transform:scale(.86)} #items-list input[type="checkbox"]:disabled{cursor:default;opacity:.6} /* Pinned above the floating dock so it stays reachable however long the list. */ #add-item-form{ display:flex;gap:8px;align-items:center; position:sticky;bottom:calc(84px + var(--safe-b));z-index:5; background:linear-gradient(to top,var(--bg) 70%,transparent); padding:12px 0 8px;margin:0 0 8px; } .grocery-bar{display:flex;align-items:center;gap:8px;padding:12px 12px 0;max-width:720px;margin:0 auto} .grocery-bar select,.grocery-bar input{flex:1;min-width:0;width:auto} .grocery-bar select{flex:.75} .grocery-bar label{white-space:nowrap;font-weight:700} .suggestions{margin-top:16px} #suggestions-label{font-weight:700;margin-bottom:2px} #suggestion-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} #suggestion-chips .chip{border-style:dashed;border-color:var(--a1-vivid);color:var(--a-ink);background:transparent} #suggestion-chips .chip:active{background:var(--grad-soft)} /* URLs in a note body: a plain textarea can't render a real link, so this row (populated from the same text) is the clickable form. */ .note-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .note-links .chip{ border-color:transparent;background:var(--grad-soft);color:var(--a-ink); max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .note-link{color:var(--a-ink);text-decoration:underline;text-underline-offset:2px;word-break:break-all} /* ---------- floating dock (editor action bar) ---------- */ .dock{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(12px + var(--safe-b));z-index:var(--z-dock); display:flex;align-items:center;gap:2px;padding:6px; max-width:calc(100vw - 24px); border-radius:var(--r-pill); background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-border);box-shadow:var(--sh-3); } .dock > button{ position:relative;isolation:isolate;flex:1 1 auto;min-width:44px;min-height:48px;width:auto;height:48px; display:grid;place-items:center;align-content:center;gap:2px; padding:6px 12px;border:0;background:none;border-radius:var(--r-pill); color:var(--muted); transition:color var(--dur-2),transform var(--dur-1) var(--ease-out); } .dock > button .ic{width:22px;height:22px;transition:transform var(--dur-3) var(--ease-spring)} .dock > button::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad); opacity:0;transform:scale(.55); transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring); } .dock > button:active{transform:scale(.92);background:none} @media (hover:hover){.dock > button:hover{background:none;color:var(--text)}} .dock > button.active{color:#fff} .dock > button.active::before{opacity:1;transform:scale(1);box-shadow:var(--glow)} .dock > button.active .ic{transform:translateY(-1px) scale(1.08)} .dock > button.danger{color:var(--danger)} .dock.icons-only > button{min-width:44px;padding:6px 10px} #dictate-btn.recording{color:#fff;animation:pulse 1.2s ease-in-out infinite} #dictate-btn.recording::before{opacity:1;transform:scale(1);background:var(--danger)} /* ---------- bulk select ---------- */ .select-bar{ position:fixed;left:max(12px,var(--safe-l));right:max(12px,var(--safe-r));bottom:calc(16px + var(--safe-b)); display:flex;align-items:center;gap:2px;z-index:var(--z-dock); background:var(--toast-bg);color:var(--toast-fg);border-radius:var(--r-pill); padding:6px 8px;box-shadow:var(--sh-3); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); } .select-bar .iconbtn{color:inherit;min-width:40px;width:40px;height:44px;padding:0;flex:none} @media (hover:hover){.select-bar .iconbtn:hover{background:color-mix(in srgb,currentColor 14%,transparent)}} .select-bar .iconbtn:active{background:color-mix(in srgb,currentColor 20%,transparent)} .select-bar .iconbtn.danger{color:var(--bar-danger)} .select-bar .btn.small{flex:none;min-height:40px;padding:6px 10px} .select-count{flex:1;min-width:0;font-size:12.5px;font-weight:800;line-height:1.15;white-space:normal;overflow:hidden;padding-left:2px} .select-actions{display:flex;gap:0;flex:none} .note-card.selectable{display:flex;flex-direction:column;padding-left:58px} .note-card.selectable.not-selectable{opacity:.5} .note-card .select-check{position:absolute;left:18px;top:17px;pointer-events:none} /* the whole card is the tap target */ .note-card.selectable::before{left:0} /* ---------- reminder labels, search bar ---------- */ #reminder-labels{ scroll-padding-inline:12px; display:flex;gap:8px;overflow-x:auto;padding:4px 12px 10px; max-width:720px;margin:0 auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; } #reminder-labels::-webkit-scrollbar{display:none} #reminder-labels .label-chip{flex:none;max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #reminder-labels .label-chip b{font-weight:800;color:var(--a-ink)} #search-match-bar{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px 8px 8px 16px;background:var(--grad-soft);border-radius:var(--r-md);margin:8px 12px; } #search-match-bar #search-match-count{font-size:13.5px;font-weight:700;color:var(--muted)} /* ---------- modals: bottom sheets on phones, centred cards on wider screens ---------- */ .modal{ position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim); display:flex;align-items:flex-end;justify-content:center;padding:0; animation:fade-in var(--dur-2) var(--ease-out); } .modal-card{ width:100%;max-width:560px;background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;padding:14px 20px calc(20px + var(--safe-b));box-shadow:var(--sh-3); /* Settings outgrew the screen once texts and paired phones moved in. Without a height cap the card is clipped and the bottom of a long dialog cannot be reached. dvh so the collapsing mobile address bar doesn't cut it off. */ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto;overscroll-behavior:contain; animation:sheet-up var(--dur-3) var(--ease-out); } .modal-card::before{content:"";display:block;width:42px;height:5px;border-radius:99px;background:var(--border-strong);opacity:.5;margin:0 auto 14px} .modal-card h3{font-size:var(--fs-lg);margin:0 0 6px} .modal-card > .btn.link{display:flex;width:100%;margin-top:4px} @media (min-width:640px){ .modal{align-items:center;padding:20px} .modal-card{border-radius:var(--r-xl);max-width:440px;animation:pop-in var(--dur-3) var(--ease-spring)} .modal-card::before{display:none} } .modal-card form{display:flex;flex-direction:column;gap:10px;margin-top:12px} .modal-card label.small{font-weight:700;margin-top:4px} .modal-card label.small .muted{font-weight:500} #share-list{list-style:none;padding:0;margin:12px 0} #share-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere} #share-form{flex-direction:row;flex-wrap:wrap;align-items:stretch} #share-form #share-email{flex:1 1 100%} #share-form select{flex:1 1 0;width:auto;min-width:0} #share-form .btn{flex:none} .dialog-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px} #text-form textarea{resize:vertical} /* ---------- toast ---------- */ .toast{ position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);z-index:var(--z-toast); max-width:min(92vw,460px);display:flex;align-items:center;gap:12px; padding:12px 18px;border-radius:var(--r-pill); background:var(--toast-bg);color:var(--toast-fg);font-size:14.5px;font-weight:600; white-space:normal;text-align:left; -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); box-shadow:var(--sh-3);animation:toast-in var(--dur-3) var(--ease-spring) both; } .toast-action{ border:0;background:none;color:inherit;font-weight:800;font-size:14.5px;padding:6px 4px;min-height:36px; text-decoration:underline;text-underline-offset:3px; } /* ---------- settings ---------- */ .ingest-box{margin-top:14px;padding:14px;border:0;border-radius:var(--r-lg);background:var(--surface-2)} /* Each ingest-box is a
, collapsed by default (the dialog already outgrows the screen). The title fills the row so the pill and the chevron group at the right. */ .ingest-head{display:flex;align-items:center;gap:8px} .ingest-head b{flex:1} b.ih{display:flex;align-items:center;gap:10px} b.ih .ic{color:var(--a-ink)} summary.ingest-head{cursor:pointer;list-style:none;min-height:32px} summary.ingest-head::-webkit-details-marker{display:none} summary.ingest-head::after{ content:"";width:20px;height:20px;flex:none;transition:transform var(--dur-2) var(--ease-out); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a86a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat; } details[open] > summary.ingest-head::after{transform:rotate(180deg)} details.ingest-box > *:not(summary){margin-top:10px} .ingest-box input,.ingest-box select,.ingest-box .btn:not(.primary):not(.link){background:var(--surface)} .pw-field{position:relative} .pw-field input{width:100%;padding-right:48px} .pw-toggle{ position:absolute;top:50%;right:4px;transform:translateY(-50%); width:40px;height:40px;display:grid;place-items:center; border:0;background:none;color:var(--muted);padding:0;border-radius:50%; } /* Horizontally scrollable, not wrapping: the tab row can hold more chips than a phone fits (admins see two extra). Padding leaves room for chip glow. */ .ingest-tabs{ display:flex;gap:8px;margin:6px 0 0;padding:4px 2px 12px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:12px; } .ingest-tabs::-webkit-scrollbar{display:none} .ingest-tabs .chip{flex:none;white-space:nowrap;scroll-snap-align:start} .view-tabs.ingest-tabs{margin:0 auto;padding:12px 12px 12px} .ingest-steps{margin:6px 0 10px;padding-left:20px;color:var(--muted)} .ingest-steps li{margin-bottom:5px} #ingest-info{ word-break:break-all;font-family:ui-monospace,Menlo,monospace; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px; } /* paired phones */ #device-list{list-style:none;padding:0;margin:10px 0} #device-list li{ display:flex;justify-content:space-between;align-items:center;gap:8px; padding:8px 0;border-bottom:1px solid var(--border);font-size:13px; } #device-list .dev-meta{color:var(--muted);font-size:12px} #device-list .revoke{border:0;background:none;color:var(--danger);font-size:13px;font-weight:700;min-height:44px;padding:0 8px} #trash-list{list-style:none;padding:0;margin:10px 0} #trash-list li{ display:flex;justify-content:space-between;align-items:center;gap:8px; padding:10px 0;border-bottom:1px solid var(--border);font-size:13px; } #trash-list .trash-meta{color:var(--muted);font-size:12px;margin-top:2px} #trash-list .trash-actions{display:flex;gap:6px;flex:none} #trash-list .trash-actions button{border:0;background:none;font-size:13px;font-weight:700;min-height:44px;padding:6px 10px;border-radius:var(--r-sm)} #trash-list .restore{color:var(--a-ink)} #trash-list .restore:active{background:var(--grad-soft)} #trash-list .purge{color:var(--danger)} #trash-list .purge:active{background:var(--danger-soft)} .pair-code{ font-family:ui-monospace,Menlo,monospace;font-size:26px;letter-spacing:.18em; text-align:center;padding:12px;margin-top:4px;border-radius:var(--r-md); background:var(--grad-soft);color:var(--a-ink);font-weight:700; } /* what arrived by text */ #relay-log{list-style:none;padding:0;margin:6px 0 0} #relay-log li{padding:8px 0;border-bottom:1px solid var(--border);font-size:13px} #relay-log .rx-head{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px} #relay-log .rx-text{margin:3px 0 0;word-break:break-word} #relay-log .rx-made{color:var(--a-ink);font-weight:700} /* "is this an appointment?" — asked when extraction was unsure */ #questions{padding:12px 12px 0;max-width:720px;margin:0 auto} .question{ background:var(--grad-soft);border:1.5px solid color-mix(in srgb,var(--a1-vivid) 45%,transparent);border-radius:var(--r-lg); padding:16px;margin-bottom:10px;box-shadow:var(--sh-1); } .question h4{margin:0 0 6px;font-size:15px} .question .q-text{margin:0 0 8px;font-size:13px;color:var(--muted);word-break:break-word} .question .q-guess{font-size:13px;margin:0 0 10px} .question .q-actions{display:flex;gap:8px;margin-top:10px} .question .q-actions .btn{flex:1} /* ---------- drag to reorder (sortable.js) ---------- Long-press an item, or grab its grip. Scrolling/tapping stay native: only the grip itself opts out of touch scrolling. */ .sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .drag-handle{ flex:none;display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;border-radius:var(--r-sm); background:none;color:var(--muted);cursor:grab;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none; transition:background-color var(--dur-1),color var(--dur-1); } .drag-handle .ic{width:20px;height:20px} .drag-handle:active,.drag-handle[aria-pressed="true"]{background:var(--grad-soft);color:var(--a-ink);cursor:grabbing} @media (hover:hover){.drag-handle:hover{background:var(--surface-2);color:var(--a-ink)}} .drag-handle:focus-visible{outline:3px solid var(--focus);outline-offset:0} /* cards: grip sits bottom-right, clear of the corner toggles up top */ .note-card.sortable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .note-card .drag-handle{position:absolute;right:6px;bottom:4px} .note-card.sortable .snippet,.note-card.sortable .badges{padding-right:40px} #items-list li .drag-handle{width:32px;margin-right:-4px} .ingest-tabs .chip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .np-shift{transition:transform 190ms var(--ease-out) !important} .np-dragging{ transition:none !important;position:relative;z-index:var(--z-fab);cursor:grabbing; box-shadow:var(--sh-3),0 0 0 2px color-mix(in srgb,var(--a1-vivid) 55%,transparent) !important; border-color:transparent !important;opacity:.98; } .np-dragging.np-dropping{transition:transform 160ms var(--ease-out) !important} .np-dragging.np-cancel{opacity:.55;box-shadow:var(--sh-2),0 0 0 2px var(--danger) !important} .chip.np-dragging{box-shadow:var(--glow-lg) !important} .np-sorting{-webkit-user-select:none;user-select:none;scroll-snap-type:none !important} html.np-no-select,html.np-no-select *{-webkit-user-select:none !important;user-select:none !important;-webkit-touch-callout:none !important} html.np-no-select #items-list .item-text{caret-color:transparent} @media (prefers-reduced-motion: reduce){ .np-shift,.np-dragging.np-dropping{transition:none !important} } /* ---------- reduced motion (keep last) ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .fab:hover,.note-card:hover{transform:none} .search-mic.recording,#dictate-btn.recording{animation:none !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 40%,transparent)} } /* New app logo in the top bar and on the sign-in hero. */ .brand-logo{width:36px;height:36px;border-radius:11px;flex:none;box-shadow:var(--sh-1);display:block} .brand-hero-logo{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;box-shadow:var(--sh-2, var(--sh-1))} /* ---------- trade / weekly-summary note: posting status ---------- */ .trade-bar{max-width:720px;margin:0 auto;padding:12px 12px 0;display:flex;flex-direction:column;gap:8px} .trade-status.warn{color:var(--danger)} .trade-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .trade-row > span:first-child{flex:1 1 100%;font-weight:600} .trade-row input{flex:0 1 110px;min-width:0;width:auto} .trade-raw{white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto;user-select:text} .trade-bar .btn{align-self:flex-start} /* ---------- hub ✦ assistant widget: room for it (html.hub-agent-on) ---------- Only present for admins/Elite users. Editor (FAB hidden): ✦ sits 12px above the floating dock (bottom 12px, 62px tall). Bulk-select (FAB hidden): 12px above the select bar (bottom 16px, 56px tall). */ :root[data-view="editor-view"]{--hub-agent-bottom:calc(12px + 62px + 12px);--hub-agent-right:max(16px,var(--safe-r))} :root.selecting{--hub-agent-bottom:calc(16px + 56px + 12px);--hub-agent-right:max(12px,var(--safe-r))} /* The ✦ button (48px, --hub-agent-bottom up from the bottom) floats over the right edge where a card's delete button sits; whether or not agent.js has tagged yet, let the last card scroll fully clear of both the FAB and ✦ so its delete button is always reachable. */ #notes-list{padding-bottom:calc(var(--hub-agent-bottom) + 48px + 24px + var(--safe-b))} html.hub-agent-on #notes-list{padding-bottom:calc(var(--hub-agent-bottom) + 48px + 24px + var(--safe-b))} /* Sticky "add item" row: leave a gutter so ✦ (48px at right:16px) never covers its Add button. */ html.hub-agent-on #add-item-form{padding-right:60px} html.hub-agent-on .menu.sheet{bottom:calc(var(--hub-agent-bottom) + 48px + 12px + var(--safe-b))}