@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); :root { --vx-ink: var(--cw-text); --vx-graphite: var(--cw-text); --vx-muted: var(--cw-text-muted); --vx-line: rgba(24, 24, 27, 0.14); --vx-line-strong: rgba(24, 24, 27, 0.24); --vx-canvas: var(--cw-surface); --vx-card: rgba(255,255,255,0.86); --vx-card-solid: var(--cw-surface); --vx-black: var(--cw-text); --vx-champagne: var(--cw-accent-tint); --vx-gold: var(--cw-accent); --vx-bronze: var(--cw-accent); --vx-blue: var(--cw-accent); --vx-violet: var(--cw-accent); --vx-green: var(--cw-success); --vx-yellow: var(--cw-warning); --vx-red: var(--cw-danger); --vx-blue-soft: var(--cw-accent-tint); --vx-green-soft: var(--cw-success-bg); --vx-yellow-soft: var(--cw-warning-bg); --vx-red-soft: var(--cw-danger-bg); --vx-violet-soft: var(--cw-accent-tint); --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06), 0 1px 4px rgba(24, 24, 27, 0.04); --shadow-md: 0 12px 34px rgba(18, 22, 30, 0.10); --shadow-lg: 0 28px 70px rgba(18, 22, 30, 0.13); --r-xl: 42px; --r-lg: 30px; --r-md: 22px; --r-sm: 15px; /* ====================================================================== CLIK WORK CANONICAL DESIGN TOKENS — the single source of truth for the whole app. Calm, premium light theme (the "Connect your Gmail" empty state): soft lavender surfaces, white cards, one purple accent, dark headings, muted grey text, glowing purple primary button. Every legacy variable below (--vx-*, --cp-*, --google-*, --email-*, …) is re-pointed to these; do NOT introduce colors outside this set. ====================================================================== */ /* surfaces — re-pointed to Fluent neutral tokens (theme.css). The page itself uses the --bg-canvas lilac gradient on ; --cw-bg is a solid base for containers (a gradient would be invalid in background-color contexts). */ --cw-bg: var(--bg-subtle); --cw-surface: var(--bg-surface); /* cards, panels (white) */ --cw-surface-muted: var(--bg-subtle); /* soft neutral wash: empty states, sidebar, tiles */ --cw-surface-hover: var(--bg-card-accent);/* pale-lilac hover */ /* text */ --cw-text: var(--text-primary); --cw-text-muted: var(--text-secondary); --cw-text-subtle: var(--text-tertiary); /* placeholders, tertiary */ --cw-text-on-accent: var(--text-on-brand);/* white content on a solid brand fill (titles, links) */ --cw-on-accent-soft: var(--brand-tint); /* secondary/subtitle text on a solid brand fill */ /* borders */ --cw-border: var(--stroke-default); --cw-border-strong: var(--stroke-strong); /* accent (brand FLUENT PURPLE) — single source of truth; remapping these values repaints buttons, links, icons, active states, tints and accents app-wide. Re-pointed to the Fluent brand ramp in theme.css. The green now survives ONLY in the logo asset (Decision 1). brand-foreground/-pressed are the AA-safe text/deep-fill stops; semantic success green is separate below. */ --cw-accent: var(--brand-primary); /* primary: CTA bg, active icon, hero accent */ --cw-accent-text: var(--brand-foreground);/* links + stat text on white (AA on white) */ --cw-accent-deep: var(--brand-pressed); /* AA-safe deep fill for SOLID brand cards: white text ~7:1 */ --cw-accent-hover: var(--brand-hover); --cw-accent-active: var(--brand-pressed); /* hover / pressed */ --cw-accent-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-pressed)); --cw-accent-soft: var(--brand-primary); /* soft accent: focus rings, borders, soft icons */ --cw-accent-soft-bg: var(--brand-tint); /* badges/pills (lightest tinted fill) */ --cw-accent-soft-border: rgba(91, 95, 199, 0.22); --cw-accent-soft-text: var(--brand-pressed); /* deep brand text on tinted fills */ --cw-accent-tint: var(--brand-tint); /* active nav, soft icon chips (lightest fill) */ --cw-accent-tint-hover: #DCE0F7; /* slightly deeper lavender hover on tinted elements */ /* Notes date-group header ("TODAY"/"Yesterday"/...) — single source of truth. Flat Apple-style section header: muted grey label on a hairline divider, no pill. These tokens are dark-aware (overridden in the dark block below). */ --cw-date-bar-text: var(--cw-text-subtle); /* muted Apple grey label */ --cw-date-bar-border: var(--cw-border); /* hairline divider underneath */ /* effects */ --cw-focus-ring: 0 0 0 3px rgba(91, 95, 199, 0.28); --cw-shadow-sm: 0 1px 2px rgba(17,17,31,0.04); --cw-shadow-md: 0 4px 16px rgba(17,17,31,0.06); --cw-shadow-accent: 0 8px 24px rgba(91, 95, 199, 0.30); /* Module cards — one soft, neutral elevation for EVERY card (white AND the dark-green Executive cards). Neutral rgba(16,24,40) so dark-green cards get the SAME light shadow, never a heavier/green-tinted one. */ --cw-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06); --cw-shadow-card-hover: 0 2px 4px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.10); /* radii */ --cw-radius-sm: 8px; --cw-radius-md: 12px; --cw-radius-lg: 16px; --cw-radius-pill: 999px; /* semantic (use sparingly, tinted to fit) */ --cw-success:var(--success); --cw-success-bg:#E9F7EF; --cw-warning:var(--warning); --cw-warning-bg:#FEF3E2; --cw-danger:var(--danger); --cw-danger-bg:#FDECEC; /* ---- Notes "paper" writing surface (single source of truth; light) ---- Warm ivory sheet + warm ink so the note reads like ink on paper, not pure black on white. Flips to a warm dark sheet in the dark-mode block below. */ --cw-paper-bg: #FBF8F1; /* warm off-white ivory sheet */ --cw-paper-page: #F1ECE1; /* slightly deeper tone behind the sheet */ --cw-paper-ink: #2B2823; /* warm near-black — title/body */ --cw-paper-ink-soft: #4A463E; /* warm secondary ink — meta/placeholder */ --cw-paper-rule: rgba(43,40,35,0.06); /* faint horizontal rule (Ruled) */ --cw-paper-margin: rgba(193,82,72,0.22); /* faint left margin line (Legal pad) */ --cw-paper-shadow: 0 1px 2px rgba(43,40,35,0.05), 0 10px 30px rgba(43,40,35,0.07); /* Apple-Notes-style writing surface: flat, basically white with a barely perceptible warmth — no box, no shadow. The note detail pane + editor and the notes page all share this one color so they read as one continuous sheet. Flips to Apple's flat soft-dark surface in the dark-mode block. */ --cw-note-surface: #FCFCFB; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; /* Fluent base type: var(--font-base) family + 14/20 body size/line-height. */ font: var(--font-body); color: var(--vx-ink); /* transparent so the fixed html::before --bg-canvas layer shows through */ background: transparent; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(16,17,20,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16,17,20,0.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, black 0%, transparent 78%); opacity: .54; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 34%, transparent 62%), radial-gradient(circle at 50% -10%, rgba(255,255,255,.7), transparent 34%); mix-blend-mode: soft-light; } button, input, select, textarea { font-family: inherit; } button { cursor: pointer; } button, input, select, textarea { border-radius: 999px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.92); color: var(--vx-ink); outline: none; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease; } button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } input:focus, select:focus, textarea:focus { border-color: rgba(var(--brand-rgb),.52); box-shadow: 0 0 0 5px rgba(var(--brand-rgb),.12); } .auth-screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: var(--cw-surface); } .auth-hidden, .app-hidden { display: none !important; } .auth-form input[hidden], .auth-form button[hidden], .auth-message[hidden], #sendOtp[hidden], #verifyOtp[hidden] { display: none !important; } .auth-card { width: min(620px, 100%); position: relative; overflow: hidden; border: 1px solid rgba(24,24,27,.18); border-radius: 44px; padding: 42px; background: rgba(255,255,255,.82); backdrop-filter: blur(22px); box-shadow: 0 40px 100px rgba(20,20,24,.17); } .auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--vx-black), var(--vx-gold), var(--vx-violet), var(--vx-blue)); } .auth-form { display: grid; gap: 12px; margin-top: 28px; } .auth-form input, .auth-form button { height: 52px; padding: 0 18px; font-size: 14px; } .auth-form button { background: var(--vx-black); color: white; border-color: var(--vx-black); font-weight: 700; letter-spacing: .2px; } /* Google federated sign-in button — follows Google brand guidelines. */ .auth-form button.google-signin-btn { background: var(--cw-surface); color: var(--cw-text); border: 1px solid var(--cw-border); border-radius: 24px; height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; } .auth-form button.google-signin-btn:hover { background: var(--cw-accent-tint); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .auth-form button.google-signin-btn:disabled { opacity: .6; cursor: default; box-shadow: none; } .google-signin-btn .google-g { flex: 0 0 auto; display: block; } .auth-divider { display: flex; align-items: center; text-align: center; color: var(--vx-muted); font-size: 13px; margin: 2px 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--vx-line); } .auth-divider span { padding: 0 12px; } .auth-form input.is-invalid { border-color: var(--cw-danger) !important; box-shadow: 0 0 0 3px rgba(214,69,61,.12) !important; } .auth-message { color: var(--vx-muted); font-size: 13px; line-height: 1.55; padding: 14px 16px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.62); border-radius: 18px; } .shell { position: relative; z-index: 1; width: min(1540px, 94vw); margin: 0 auto; padding: 44px 0 64px; } .vx-brand-strip { position: relative; min-height: 172px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin: 0 0 18px; padding: 24px 28px 24px 30px; overflow: hidden; border: 1px solid rgba(215,221,242,.84); border-radius: 34px; background: radial-gradient(circle at 82% 28%, rgba(var(--brand-rgb),.13), transparent 34%), radial-gradient(circle at 12% 0%, rgba(var(--brand-rgb),.08), transparent 32%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,252,255,.78)); box-shadow: 0 18px 54px rgba(65, 74, 111, .09), inset 0 1px 0 rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .vx-brand-strip::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--cw-text), var(--vx-blue), var(--vx-violet), rgba(168,177,194,.72)); opacity: .9; } .vx-brand-strip::after { content: ""; position: absolute; right: calc(min(34vw, 340px) + 18px); top: 28px; width: 1px; height: calc(100% - 56px); background: linear-gradient(180deg, transparent, rgba(var(--brand-rgb),.54), transparent); opacity: .7; } .vx-brand-strip-content { position: relative; z-index: 1; min-width: 0; } .vx-brand-strip-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--cw-accent-active); font-size: 10.5px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; } .vx-brand-strip-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)); box-shadow: 0 0 0 5px rgba(var(--brand-rgb),.09); } .vx-brand-strip-title { margin: 8px 0 0; max-width: 760px; color: var(--cw-text); font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; font-weight: 850; letter-spacing: 0; } .vx-brand-strip-copy { max-width: 760px; margin: 12px 0 0; color: var(--cw-text-muted); font-size: 14.5px; line-height: 1.55; font-weight: 620; } .vx-brand-strip-member { display: none; } body.is-authenticated .vx-brand-strip-guest { display: none !important; } body.is-authenticated .vx-brand-strip-member { display: inline-flex; } .vx-brand-strip-title .vx-brand-strip-member, .vx-brand-strip-copy .vx-brand-strip-member { display: none; } body.is-authenticated .vx-brand-strip-title .vx-brand-strip-member, body.is-authenticated .vx-brand-strip-copy .vx-brand-strip-member { display: inline; } .vx-brand-strip-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; } .vx-brand-strip-tag { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 11px; border: 1px solid rgba(var(--brand-rgb),.5); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--cw-text-muted); font-size: 11.75px; font-weight: 720; white-space: nowrap; box-shadow: 0 1px 2px rgba(16,24,40,.025), inset 0 1px 0 rgba(255,255,255,.68); } .vx-brand-strip-tag:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb),.36); background: rgba(255,255,255,.84); } .vx-brand-strip-tag svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; color: var(--cw-accent-text); } .vx-brand-strip-tag span { line-height: 1; } .vx-brand-strip-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .vx-brand-strip-actions button, .vx-brand-strip-help-link { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-height: 38px; margin: 0; padding: 0 16px; border-radius: 999px; font-size: 12px; font-weight: 850; line-height: 1; vertical-align: middle; white-space: nowrap; } .vx-brand-strip-help-link { border: 1px solid rgba(var(--brand-rgb),.62); background: rgba(255,255,255,.58); color: var(--cw-accent-text); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.74); } .vx-brand-strip-help-link:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb),.42); background: rgba(255,255,255,.82); color: var(--cw-accent-text); } .vx-brand-strip-primary { border-color: rgba(21,26,35,.9); background: var(--cw-text); color: var(--cw-surface); box-shadow: 0 12px 28px rgba(21,26,35,.13); } .vx-brand-strip-secondary { border-color: rgba(var(--brand-rgb),.7); background: rgba(255,255,255,.7); color: var(--cw-accent-text); } .vx-brand-strip-contact-btn { border-color: rgba(var(--brand-rgb),.34); background: linear-gradient(135deg, rgba(var(--brand-rgb),.1), rgba(var(--brand-rgb),.12)); color: var(--cw-accent-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .vx-brand-strip-art { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; justify-self: center; } .vx-brand-strip-art::before { content: ""; position: absolute; width: 292px; height: 292px; border-radius: 999px; background: radial-gradient(circle, rgba(var(--brand-rgb),.12), rgba(var(--brand-rgb),.08) 42%, transparent 72%); filter: blur(10px); } .hero-fun-section { width: 7.8cm; max-width: min(34vw, 340px, 100%); align-self: center; flex: 0 0 auto; gap: 8px; } .fun-section-head { position: relative; z-index: 1; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; } .fun-section-title { color: var(--cw-text); font-size: 13.4px; font-weight: 850; letter-spacing: 0; } .fun-section-date { color: var(--cw-text-muted); font-size: 11px; font-weight: 720; white-space: nowrap; } .daily-comic-frame { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1; display: grid; overflow: hidden; border-radius: 22px; } .daily-comic-img { width: 100%; height: 100%; display: block; object-fit: contain; } .daily-comic-img[hidden], .daily-comic-fallback[hidden] { display: none !important; } .daily-comic-fallback { width: 100%; height: 100%; display: grid; place-items: center; gap: 8px; padding: 24px; text-align: center; border: 1px solid var(--cw-border); border-radius: 22px; background: var(--cw-surface-muted); color: var(--cw-text-muted); } .daily-comic-fallback strong { color: var(--cw-text); font-size: 14px; } .daily-comic-fallback span { font-size: 12px; font-weight: 720; } @media (max-width: 1020px) { .vx-brand-strip { grid-template-columns: minmax(0, 1fr) auto; padding-right: 22px; } .vx-brand-strip::after { right: 304px; } .hero-fun-section { width: min(100%, 280px); max-width: 100%; } } @media (max-width: 720px) { .vx-brand-strip { min-height: 0; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; padding: 18px 18px 19px; border-radius: 26px; } .vx-brand-strip::after { display: none; } .vx-brand-strip-title { font-size: 26px; line-height: 1.08; } .vx-brand-strip-copy { margin-top: 9px; font-size: 13px; line-height: 1.45; } .vx-brand-strip-tags { gap: 7px; margin-top: 12px; } .vx-brand-strip-actions { gap: 8px; margin-top: 13px; } .vx-brand-strip-actions button, .vx-brand-strip-help-link { height: 36px; min-height: 36px; padding: 0 13px; font-size: 11.5px; } .vx-brand-strip-tag { min-height: 27px; gap: 6px; padding: 5px 9px; font-size: 11px; } .vx-brand-strip-tag svg { width: 15px; height: 15px; } .vx-brand-strip-art { display: grid; } .hero-fun-section { width: min(100%, 360px); max-width: 100%; justify-self: center; margin-top: 8px; } .fun-section-head { padding: 0 2px; } } .hero { display: grid; grid-template-columns: minmax(0,1fr) 410px; gap: 26px; align-items: stretch; margin-bottom: 22px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(215,207,195,.82); background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); color: var(--vx-muted); letter-spacing: 1.35px; text-transform: uppercase; font-size: 10.5px; font-weight: 700; backdrop-filter: blur(12px); } .eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--vx-gold), var(--vx-blue)); box-shadow: 0 0 0 5px rgba(185,138,54,.10); } h1 { margin: 0; font-size: clamp(48px, 7vw, 92px); line-height: .91; font-weight: 500; letter-spacing: -3.3px; } h1 span { font-weight: 700; background: linear-gradient(90deg, var(--cw-text), var(--cw-warning) 48%, var(--cw-accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .subcopy { max-width: 820px; color: var(--vx-muted); font-size: 18px; line-height: 1.62; margin: 16px 0 0; } .today-card, .composer, .lane, .metric, .toolbar, .ai-intelligence { border: 1px solid rgba(215,207,195,.86); background: var(--vx-card); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); border-radius: var(--r-xl); } .today-card { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 208px; position: relative; overflow: hidden; } .today-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background: linear-gradient(90deg, var(--vx-black), var(--vx-gold), var(--vx-blue)); } .today-card::after { content:""; position:absolute; right:-70px; top:-90px; width:230px; height:230px; border-radius:50%; background: radial-gradient(circle, rgba(185,138,54,.22), transparent 63%); } .today-card span, .metric span, .toolbar-title { color: var(--vx-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; } .today-card strong { position: relative; z-index: 1; font-size: 26px; line-height: 1.15; letter-spacing: -.7px; font-weight: 500; } .today-card small { position: relative; z-index: 1; color: var(--vx-bronze); font-weight: 700; } .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .metric { padding: 20px 22px; box-shadow: var(--shadow-sm); border-radius: 26px; position: relative; overflow: hidden; background: rgba(255,255,255,.82); } .metric::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background: var(--vx-blue); } .metric.violet::before { background: var(--vx-violet); } .metric.yellow::before { background: var(--vx-yellow); } .metric.red::before { background: var(--vx-red); } .metric strong { display: block; margin-top: 8px; font-size: 34px; letter-spacing: -1px; } .metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .ai-intelligence { padding: 24px; margin: 0 0 18px; position: relative; overflow: hidden; } .ai-intelligence::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background: linear-gradient(90deg, var(--vx-black), var(--vx-gold), var(--vx-violet), var(--vx-red)); } .ai-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; } .eyebrow.mini { margin-bottom: 10px; padding: 7px 12px; font-size: 10px; } .ai-head h2 { margin: 0; font-size: 36px; line-height: 1.03; font-weight: 500; letter-spacing: -1px; } .ai-head p { margin: 9px 0 0; color: var(--vx-muted); font-size: 14.5px; line-height: 1.58; max-width: 780px; } .intel-refresh { background: var(--vx-black); color: var(--cw-surface); border-color: var(--vx-black); white-space: nowrap; padding: 13px 18px; font-weight: 700; } .intel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .intel-card { background: rgba(255,255,255,.84); border: 1px solid var(--vx-line); border-radius: 28px; padding: 18px; box-shadow: var(--shadow-sm); min-height: 255px; position: relative; overflow: hidden; } .intel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .intel-title { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--vx-muted); margin-bottom: 13px; } .intel-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .intel-dot.blue { background: var(--vx-blue); } .intel-dot.violet { background: var(--vx-violet); } .intel-dot.red { background: var(--vx-red); } .intel-dot.yellow { background: var(--vx-yellow); } .intel-list { display: grid; gap: 10px; } .intel-item { padding: 12px 13px; border: 1px solid var(--cw-warning-bg); border-radius: 18px; background: rgba(255,255,255,.78); } .intel-item strong { display:block; font-size: 13.5px; line-height: 1.35; margin-bottom: 5px; } .intel-item span, .intel-empty, .ai-hint { color: var(--vx-muted); font-size: 11.5px; line-height: 1.5; } .risk-mini { color: var(--vx-red); } .owner-mini { color: var(--vx-bronze); } .ai-hint { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--cw-warning-bg); border: 1px solid var(--cw-warning); } .toolbar { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-md); } .owner-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .owner-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.85); border-radius: 18px; padding: 11px 13px; color: var(--vx-ink); box-shadow: var(--shadow-sm); } .owner-chip.secure { background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)); color: white; border-color: var(--cw-text); } .owner-chip strong { font-size: 13px; } .owner-chip span { font-size: 11.5px; color: var(--vx-muted); } .owner-chip.secure span { color: rgba(255,255,255,.68); } .toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .toolbar-actions select, .toolbar-actions button { height: 42px; padding: 0 15px; } .session-pill { padding: 12px 14px; border-radius: 999px; background: rgba(17,19,23,.06); border: 1px solid var(--vx-line); color: var(--vx-muted); font-size: 12px; } .session-pill strong { color: var(--vx-ink); } .download-btn { background: linear-gradient(135deg, var(--vx-black), var(--cw-warning)); color: var(--cw-surface); border-color: var(--vx-black); font-weight: 700; } .logout-btn { color: var(--vx-muted); } .composer { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr .8fr .8fr .8fr auto; gap: 10px; padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow-md); } .composer input, .composer select, .composer button { min-height: 46px; padding: 0 14px; } .composer button { background: linear-gradient(135deg, var(--vx-gold), var(--cw-warning)); color: white; border-color: transparent; font-weight: 700; } .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .lane { min-height: 620px; overflow: hidden; position: relative; box-shadow: var(--shadow-md); animation: riseIn .55s both; } .lane:nth-child(2) { animation-delay: .08s; } .lane:nth-child(3) { animation-delay: .16s; } .lane::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background: var(--vx-blue); } .lane[data-section="monthly"]::before { background: var(--vx-violet); } .lane[data-section="weekly"]::before { background: linear-gradient(90deg, var(--vx-gold), var(--vx-red)); } .lane-head { height: 74px; display:flex; align-items:center; justify-content:space-between; padding: 0 22px; border-bottom: 1px solid var(--vx-line); } .lane-head span { font-size: 16px; font-weight: 700; letter-spacing: -.2px; } .lane-head b { min-width: 34px; height: 34px; display:grid; place-items:center; border-radius: 50%; background: rgba(255,255,255,.8); border: 1px solid var(--vx-line); color: var(--vx-muted); font-size: 13px; } .dropzone { min-height: 520px; padding: 16px; display: grid; gap: 14px; align-content: start; } .dropzone:empty::before { content: "Swipe or drag a priority here"; display: grid; place-items: center; min-height: 180px; border: 1px dashed var(--vx-line-strong); border-radius: 26px; color: var(--vx-muted); font-size: 13px; background: rgba(255,255,255,.44); } .task { position: relative; padding: 16px; border-radius: 28px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); cursor: grab; overflow: hidden; touch-action: pan-y; animation: cardIn .34s both; transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease; } .task:hover { transform: translateY(-4px) scale(1.008); box-shadow: var(--shadow-md); border-color: var(--vx-line-strong); } .task.dragging { opacity: .72; transform: rotate(1deg) scale(1.02); box-shadow: 0 30px 80px rgba(20,20,24,.22); } .task::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background: var(--vx-green); } .task.on_track::before { background: var(--vx-green); } .task.at_risk::before { background: var(--vx-yellow); } .task.delayed::before { background: var(--vx-red); } .task::after { content:"Swipe ↔"; position:absolute; right: 16px; top: 14px; color: rgba(96,100,111,.48); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .task-topline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 11px; border: 1px solid var(--cw-warning-bg); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,247,241,.74)); } .owner-avatar { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cw-text), var(--cw-warning)); color: var(--cw-warning-bg); font-weight: 700; border: 1px solid rgba(185,138,54,.28); flex: 0 0 40px; } .owner-label { font-size: 9.5px; color: var(--vx-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .owner-name { font-size: 14px; font-weight: 700; color: var(--vx-ink); } .owner-phone { color: var(--vx-muted); font-size: 11.5px; margin-top: 1px; } .task-title { font-size: 17px; font-weight: 700; letter-spacing: -.25px; margin-bottom: 8px; line-height: 1.3; padding-right: 62px; } .task-desc { color: var(--vx-muted); line-height: 1.5; font-size: 13px; margin-bottom: 14px; } .meta { display: flex; flex-wrap: wrap; gap: 7px; } .pill { border: 1px solid var(--vx-line); background: rgba(255,255,255,.72); color: var(--vx-muted); padding: 7px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; } .pill.status-on_track { color: var(--vx-green); background: var(--vx-green-soft); border-color: var(--cw-success-bg); } .pill.status-at_risk { color: var(--vx-yellow); background: var(--vx-yellow-soft); border-color: var(--cw-warning); } .pill.status-delayed { color: var(--vx-red); background: var(--vx-red-soft); border-color: var(--cw-danger-bg); } .actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .actions button { padding: 8px 10px; font-size: 11px; background: rgba(255,255,255,.76); border: 1px solid var(--vx-line); color: var(--vx-muted); box-shadow: none; } .actions button:hover { border-color: rgba(185,138,54,.42); color: var(--vx-bronze); } @keyframes riseIn { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform: translateY(0); } } @keyframes cardIn { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } } @media (max-width: 1320px) { .hero, .board, .composer, .toolbar { grid-template-columns: 1fr; } .metrics, .intel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolbar-actions { width: 100%; justify-content: stretch; } .toolbar-actions select, .toolbar-actions button { flex: 1; } .lane { min-height: 420px; } .dropzone { min-height: 280px; } } @media (max-width: 760px) { .shell { width: min(100% - 28px, 1540px); padding-top: 24px; } .auth-card { padding: 28px; border-radius: 32px; } h1 { font-size: 48px; letter-spacing: -1.8px; } .subcopy { font-size: 15px; } .metrics, .intel-grid { grid-template-columns: 1fr; } .ai-head { flex-direction: column; } .today-card, .toolbar, .composer, .lane, .ai-intelligence { border-radius: 28px; } .toolbar-actions { flex-direction: column; align-items: stretch; } .owner-summary { flex-direction: column; } .dropzone { padding: 12px; } .task { border-radius: 24px; } } /* Landing-first secure access experience */ .landing-hero { align-items: start; margin-bottom: 18px; } .landing-login { width: 100%; padding: 26px; border-radius: 34px; box-shadow: var(--shadow-lg); } .landing-login h2 { margin: 0; font-size: 30px; line-height: 1.04; letter-spacing: -.8px; font-weight: 500; } .login-copy { margin: 10px 0 0; color: var(--vx-muted); font-size: 13.5px; line-height: 1.55; } .landing-login .auth-form { margin-top: 18px; } .full-width-vantage { margin-bottom: 18px; min-height: 145px; } body.is-authenticated .landing-hero { grid-template-columns: 1fr; } body.is-authenticated .full-width-vantage { animation: riseIn .45s both; } /* Remove the "Someone needs you" / Shared-with-me (SNY) collaboration-inbox section entirely (logged-out AND authenticated) — no space reserved. The 2-ID `#appShell #todayVantage` (2,1,0) out-specifies the @media(min-width:641px) `display:grid !important` rule (1,3,0). */ #appShell #todayVantage { display: none !important; } body:not(.is-authenticated) .composer, body:not(.is-authenticated) .download-btn, body:not(.is-authenticated) #refreshIntel { opacity: .62; } body:not(.is-authenticated) .dropzone:empty::before { content: "Login to populate private tasks"; } body:not(.is-authenticated) .intel-card { background: rgba(255,255,255,.68); } body:not(.is-authenticated) .session-pill strong { color: var(--vx-bronze); } @media (max-width: 1320px) { .landing-login { max-width: 720px; } } /* --- VantageX ViSE-inspired landing refinement --- */ :root { --vx-ink: var(--cw-text); --vx-graphite: var(--cw-text); --vx-muted: var(--cw-text-muted); --vx-line: var(--cw-border); --vx-line-strong: var(--cw-accent-tint); --vx-canvas: var(--cw-surface); --vx-card: rgba(255,255,255,0.92); --vx-card-solid: var(--cw-surface); --vx-black: var(--cw-text); --vx-champagne: var(--cw-accent-tint); --vx-gold: var(--cw-accent); --vx-bronze: var(--cw-accent); --vx-blue: var(--cw-accent); --vx-violet: var(--cw-accent); --vx-green: var(--cw-success); --vx-yellow: var(--cw-warning); --vx-red: var(--cw-danger); --vx-blue-soft: var(--cw-accent-tint); --vx-green-soft: var(--cw-success-bg); --vx-yellow-soft: var(--cw-warning-bg); --vx-red-soft: var(--cw-danger-bg); --vx-violet-soft: var(--cw-accent-tint); --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.04); --shadow-md: 0 10px 30px rgba(16,24,40,.08); --shadow-lg: 0 24px 56px rgba(16,24,40,.10); } body { font-family: var(--font-base); background: radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb),.06), transparent 28%), radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb),.055), transparent 26%), radial-gradient(circle at 50% 100%, rgba(174,183,200,.10), transparent 32%), linear-gradient(180deg, var(--cw-surface) 0%, var(--cw-surface-muted) 100%); } body::before { background-image: linear-gradient(rgba(21,26,35,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(21,26,35,0.035) 1px, transparent 1px); background-size: 36px 36px; opacity: .5; } body::after { background: radial-gradient(circle at 50% -10%, rgba(255,255,255,.78), transparent 34%), linear-gradient(120deg, transparent 0%, rgba(255,255,255,.40) 38%, transparent 65%); } button, input, select { border-color: var(--vx-line); } input:focus, select:focus, textarea:focus { border-color: rgba(var(--brand-rgb),.45); box-shadow: 0 0 0 5px rgba(var(--brand-rgb),.10); } .shell { width: min(1540px, 94vw); } .landing-hero { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .55fr) !important; align-items: stretch; gap: 24px; margin-bottom: 18px; } .hero-copy, .hero-panel, .landing-narrative, .today-card, .metrics, .ai-intelligence, .toolbar, .composer, .lane { border: 1px solid var(--vx-line); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,254,.96)); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); } .hero-copy { position: relative; overflow: hidden; border-radius: 42px; padding: 46px; } .hero-copy::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .hero h1 { max-width: 960px; font-size: clamp(46px, 5.4vw, 82px); line-height: .98; letter-spacing: -4px; color: var(--vx-ink); } .hero h1 span, .ai-head h2, .core-info h3 { color: var(--vx-blue); } .subcopy { max-width: 880px; color: var(--vx-muted); font-size: 18px; line-height: 1.72; } .eyebrow { border-color: var(--vx-line); background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); color: var(--vx-muted); } .eyebrow span, .eyebrow-dot { background: var(--vx-blue) !important; } .hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; } .primary-cta, .intel-refresh, .auth-form button, .download-btn { background: linear-gradient(135deg, var(--cw-text) 0%, var(--cw-accent) 52%, var(--cw-accent) 100%); color: var(--cw-surface); border-color: transparent; font-weight: 700; } .primary-cta { min-height: 48px; padding: 0 22px; } .privacy-note { max-width: 420px; color: var(--vx-muted); font-size: 13px; line-height: 1.55; } .hero-panel { position: relative; overflow: hidden; border-radius: 42px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; background: radial-gradient(circle at 12% 0%, rgba(var(--brand-rgb),.12), transparent 32%), radial-gradient(circle at 96% 10%, rgba(var(--brand-rgb),.12), transparent 30%), linear-gradient(180deg, var(--cw-surface) 0%, var(--cw-accent-tint) 100%); } .brand-strip { position: absolute; left: 32px; top: 32px; display: flex; gap: 8px; } .brand-strip span { width: 28px; height: 10px; border-radius: 99px; background: var(--vx-blue); } .brand-strip span:nth-child(2) { background: var(--vx-violet); } .brand-strip span:nth-child(3) { background: var(--cw-text-subtle); } .brand-strip span:nth-child(4) { background: var(--cw-accent-tint); } .panel-kicker { margin: 0 0 12px; color: var(--vx-blue); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; } .hero-panel h2 { margin: 0 0 14px; font-size: 32px; line-height: 1.08; letter-spacing: -1px; font-weight: 600; } .hero-panel p:last-child { margin: 0; color: var(--vx-muted); line-height: 1.7; font-size: 14px; } .landing-narrative { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-radius: 36px; padding: 18px; margin-bottom: 18px; } .narrative-card { position: relative; overflow: hidden; min-height: 170px; border: 1px solid var(--vx-line); border-radius: 28px; padding: 22px; background: var(--cw-surface); box-shadow: var(--shadow-sm); } .narrative-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vx-blue); } .narrative-card.purple-line::before { background: var(--vx-violet); } .narrative-card.slate-line::before { background: var(--cw-text-subtle); } .narrative-card span { color: var(--vx-blue); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; } .narrative-card h3 { margin: 30px 0 8px; font-size: 20px; letter-spacing: -.4px; } .narrative-card p { margin: 0; color: var(--vx-muted); font-size: 13.5px; line-height: 1.58; } .auth-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; } .auth-hidden { display: none !important; } .auth-backdrop { position: absolute; inset: 0; background: rgba(21,26,35,.34); backdrop-filter: blur(12px); } .auth-card { width: min(480px, 100%); z-index: 1; border-radius: 34px; padding: 32px; border: 1px solid rgba(215,221,231,.96); background: rgba(255,255,255,.94); box-shadow: 0 36px 100px rgba(16,24,40,.22); } .auth-card::before { height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .close-auth { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; background: var(--cw-surface); border: 1px solid var(--vx-line); color: var(--vx-muted); font-size: 22px; line-height: 1; } .auth-card h2 { margin: 0; font-size: 34px; letter-spacing: -1.2px; } .login-copy { color: var(--vx-muted); line-height: 1.65; margin: 12px 0 0; } .auth-form input, .auth-form button { height: 50px; font-size: 14px; } .auth-message { border-color: var(--vx-line); background: var(--cw-surface-muted); color: var(--vx-muted); } body.login-open { overflow: hidden; } .today-card::before, .ai-intelligence::before { background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .metric::before { background: var(--vx-blue); } .metric.violet::before { background: var(--vx-violet); } .metric.yellow::before { background: var(--cw-text-subtle); } .metric.red::before { background: var(--vx-red); } .lane::before { background: var(--vx-blue); } .lane[data-section="monthly"]::before { background: var(--vx-violet); } .lane[data-section="weekly"]::before { background: linear-gradient(90deg, var(--vx-violet), var(--cw-text-subtle)); } .composer button { background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)); } .owner-avatar { background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)); color: var(--cw-accent-tint); border-color: rgba(var(--brand-rgb),.25); } .task-topline, .intel-item { border-color: var(--vx-line); background: var(--cw-surface); } .actions button:hover { border-color: rgba(var(--brand-rgb),.34); color: var(--vx-blue); } .ai-hint { background: var(--vx-blue-soft); border-color: var(--cw-accent-tint); } @media (max-width: 1320px) { .landing-hero { grid-template-columns: 1fr !important; } .hero-panel { min-height: 240px; } .landing-narrative { grid-template-columns: 1fr; } } @media (max-width: 760px) { .hero-copy { padding: 30px 22px; border-radius: 30px; } .hero h1 { font-size: 42px; letter-spacing: -1.8px; } .hero-panel { padding: 26px 22px; border-radius: 30px; } .auth-modal { padding: 16px; align-items: end; } .auth-card { border-radius: 28px; padding: 28px 22px 22px; } .auth-form button.google-signin-btn { width: 100%; height: 48px; font-size: 16px; } } /* ===== VantageX Premium Header + Clikin.ai Footer ===== */ .vx-header { position: sticky; top: 0; z-index: 90; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,0.74); border-bottom: 1px solid rgba(215,221,231,0.62); box-shadow: 0 1px 0 rgba(255,255,255,.72) inset; } .vx-header.scrolled { box-shadow: 0 12px 34px rgba(16,24,40,.07), 0 1px 0 rgba(255,255,255,.72) inset; } .vx-header-inner { width: min(1540px, 94vw); margin: 0 auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 22px; } .vx-brand { display: flex; align-items: center; gap: 14px; min-width: 210px; } .vx-logo-mark, .vx-footer-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--cw-accent); box-shadow: 13px 0 0 var(--cw-accent), 26px 0 0 var(--cw-text-subtle), 39px 0 0 var(--cw-accent-tint); margin-right: 40px; } .vx-brand-text { display: flex; flex-direction: column; line-height: 1.05; } .vx-title { font-size: 17px; font-weight: 700; letter-spacing: -.35px; color: var(--cw-text); } .vx-sub { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cw-accent-text); } .vx-header-context { padding: 9px 14px; border: 1px solid rgba(231,235,242,.92); border-radius: 999px; background: rgba(255,255,255,.70); color: var(--cw-text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .vx-header-actions { display: flex; justify-content: flex-end; min-width: 170px; } .vx-login-btn { height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(215,221,231,.92); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,252,254,.96)); color: var(--cw-text); font-size: 13px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.04); } .vx-login-btn:hover { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); color: var(--cw-surface); border-color: transparent; box-shadow: 0 14px 34px rgba(var(--brand-rgb),.22); } .vx-footer { position: relative; z-index: 1; margin-top: 10px; padding: 28px 0 34px; border-top: 1px solid rgba(215,221,231,.66); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(251,252,254,.68)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .vx-footer::before { content: ""; display: block; width: min(1540px, 94vw); margin: -29px auto 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.32), rgba(var(--brand-rgb),.28), transparent); } .vx-footer-inner { width: min(1540px, 94vw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .vx-footer-left { display: flex; align-items: center; gap: 12px; } .vx-footer-text { color: var(--cw-text-muted); font-size: 13px; font-weight: 720; } .vx-footer-text strong { color: var(--cw-accent-text); font-weight: 800; } .vx-footer-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .vx-footer-link { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--cw-text-muted); font: inherit; font-size: 12px; font-weight: 740; letter-spacing: 0; text-decoration: none; } .vx-footer-link:hover, .vx-footer-link:focus-visible { border-color: rgba(214, 220, 235, .92); background: rgba(255,255,255,.76); color: var(--cw-text); outline: none; } .vx-footer-button { cursor: pointer; } .vx-footer-login { border-color: rgba(214, 220, 235, .92); background: rgba(255,255,255,.76); box-shadow: 0 8px 20px rgba(31,43,76,.04); } @media (max-width: 820px) { .vx-header-inner { width: min(100% - 28px, 1540px); min-height: 66px; } .vx-header-context { display: none; } .vx-brand { min-width: 0; } .vx-header-actions { min-width: 0; } .vx-title { font-size: 16px; } .vx-sub { font-size: 9.5px; } .vx-login-btn { height: 38px; padding: 0 14px; font-size: 12px; } .vx-footer-inner { flex-direction: column; align-items: flex-start; width: min(100% - 28px, 1540px); } .vx-footer-right { justify-content: flex-start; } .vx-footer::before { width: min(100% - 28px, 1540px); } } /* ===== VantageX v4 task-led hero, scrollable execution lanes and history rail ===== */ .task-hero { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr) !important; gap: 22px; align-items: stretch; } .next-actions-panel { min-height: 430px; display: flex; flex-direction: column; gap: 18px; } .next-actions-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .next-actions-head h1 { margin: 10px 0 12px; font-size: clamp(44px, 5.4vw, 48px); line-height: .94; letter-spacing: -4px; } .next-actions-head .subcopy { max-width: 760px; } .compact-login { flex: 0 0 auto; padding-inline: 22px !important; min-width: 118px; } .next-actions-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 58%); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin; } .next-actions-carousel::-webkit-scrollbar, .history-rail::-webkit-scrollbar, .dropzone::-webkit-scrollbar { height: 8px; width: 8px; } .next-actions-carousel::-webkit-scrollbar-thumb, .history-rail::-webkit-scrollbar-thumb, .dropzone::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb),.22); border-radius: 999px; } .next-action-slide { scroll-snap-align: start; min-height: 210px; border: 1px solid var(--vx-line); border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,254,.96)); box-shadow: var(--shadow-sm); padding: 22px; position: relative; overflow: hidden; } .next-action-slide::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet)); } .next-action-slide.at_risk::before { background: linear-gradient(90deg, var(--cw-warning), var(--cw-warning)); } .next-action-slide.delayed::before { background: linear-gradient(90deg, var(--cw-danger), var(--cw-danger)); } .next-action-slide.completed::before { background: linear-gradient(90deg, var(--cw-success), var(--cw-success)); } .slide-rank { display: inline-flex; height: 32px; min-width: 42px; align-items: center; justify-content: center; border-radius: 999px; background: var(--vx-blue-soft); color: var(--vx-blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-bottom: 14px; } .slide-status { color: var(--vx-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; } .next-action-slide h3 { margin: 0 0 10px; font-size: 25px; line-height: 1.1; letter-spacing: -.8px; } .next-action-slide p { margin: 0; color: var(--vx-muted); font-size: 14px; line-height: 1.6; } .slide-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .slide-meta span { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--vx-line); background: var(--cw-surface); color: var(--vx-muted); font-size: 11px; font-weight: 700; } .carousel-hint { color: var(--vx-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; } .snapshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; } .snapshot-grid div { border: 1px solid var(--vx-line); border-radius: 20px; background: rgba(255,255,255,.72); padding: 16px 14px; } .snapshot-grid strong { display: block; font-size: 32px; letter-spacing: -1px; color: var(--vx-blue); } .snapshot-grid span { display: block; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--vx-muted); text-transform: uppercase; } .scrollable-board .lane { height: 660px; min-height: 660px; display: flex; flex-direction: column; } .scrollable-board .dropzone { flex: 1; min-height: 0; overflow-y: auto; padding-right: 12px; } .lane[data-section="in_progress"]::before { background: var(--vx-violet) !important; } .lane[data-section="completed"]::before { background: linear-gradient(90deg, var(--vx-violet), var(--cw-text-subtle)) !important; } .metric.green::before { background: var(--vx-green); } .history-section { margin-top: 22px; border: 1px solid var(--vx-line); border-radius: 36px; background: rgba(255,255,255,.86); box-shadow: var(--shadow-md); padding: 26px; overflow: hidden; } .history-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; } .history-head h2 { margin: 4px 0 0; font-size: 30px; letter-spacing: -1px; } .history-head small { color: var(--vx-muted); font-weight: 700; } .history-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 360px); gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; } .history-card { scroll-snap-align: start; border: 1px solid var(--vx-line); border-radius: 26px; background: linear-gradient(180deg, var(--cw-surface), var(--cw-surface-muted)); box-shadow: var(--shadow-sm); padding: 18px; } .history-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .history-top span, .history-top b { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--vx-green); } .history-top b { color: var(--vx-muted); } .history-card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.3px; } .history-card p { margin: 0; color: var(--vx-muted); font-size: 13px; line-height: 1.55; } .history-meta { margin-top: 14px; color: var(--vx-muted); font-size: 12px; font-weight: 700; } .history-empty { min-height: 120px; display: grid; place-items: center; border: 1px dashed var(--vx-line-strong); border-radius: 26px; color: var(--vx-muted); font-weight: 700; background: rgba(255,255,255,.54); } /* Prior-month archives: links to the Google Docs in Drive. Rendered as the first column of the history rail; collapses entirely when there are no archives. */ .history-archives:empty { display: none; } .history-archives { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; } .history-archive-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cw-text-muted, var(--vx-muted)); margin-bottom: 2px; } .history-archive-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; min-height: 44px; border: 1px solid var(--cw-border, var(--vx-line)); border-radius: 14px; background: var(--cw-surface, #fff); color: var(--cw-text, inherit); text-decoration: none; font-weight: 700; transition: border-color .15s ease, background .15s ease; } .history-archive-link:hover { border-color: rgba(var(--brand-rgb), .35); background: rgba(var(--brand-rgb), .04); } .history-archive-link.is-disabled { opacity: .6; cursor: default; } .history-archive-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-archive-go { color: var(--cw-accent, var(--brand-foreground)); font-weight: 800; } /* Single closure-history link that replaces the inline completed-task cards. */ .history-closure-link { max-width: 460px; min-height: 56px; } .history-archive-name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--cw-text-muted, var(--vx-muted)); } @media (max-width: 980px) { .task-hero { grid-template-columns: 1fr !important; } .next-actions-carousel { grid-auto-columns: minmax(280px, 84%); } .scrollable-board .lane { height: 540px; min-height: 540px; } } @media (max-width: 640px) { .next-actions-head { flex-direction: column; } .next-actions-head h1 { font-size: 42px; letter-spacing: -2px; } .snapshot-grid { grid-template-columns: 1fr; } .history-head { align-items: flex-start; flex-direction: column; } .history-rail { grid-auto-columns: 86%; } } /* ===== VantageX top command center ===== */ .vx-command-top { position: relative; margin: 0 0 22px; padding: 22px; border: 1px solid var(--vx-line); border-radius: 42px; background: radial-gradient(circle at 4% 0%, rgba(var(--brand-rgb),.08), transparent 28%), radial-gradient(circle at 96% 8%, rgba(var(--brand-rgb),.07), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,254,.96)); box-shadow: var(--shadow-md); backdrop-filter: blur(16px); overflow: hidden; } .vx-command-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .vx-command-brand { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .vx-command-lockup { display: inline-flex; align-items: center; gap: 16px; } .vx-command-lockup .vx-logo-mark { flex: 0 0 auto; } .vx-command-lockup strong { display: block; font-size: 22px; line-height: 1; letter-spacing: -.55px; color: var(--vx-ink); } .vx-command-lockup span { display: block; margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vx-muted); } .vx-command-brand p { max-width: 560px; margin: 0; color: var(--vx-muted); font-size: 13.5px; line-height: 1.55; text-align: right; } .vx-command-top .landing-narrative { margin-bottom: 18px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .vx-command-top .today-card { margin-bottom: 18px; } .vx-command-top .metrics { margin-bottom: 0; } .task-hero { margin-top: 0; } @media (max-width: 900px) { .vx-command-top { padding: 18px; border-radius: 32px; } .vx-command-brand { flex-direction: column; align-items: flex-start; } .vx-command-brand p { text-align: left; } .vx-command-top .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .vx-command-top .metrics { grid-template-columns: 1fr; } } /* Add-task feedback */ .vx-toast { position: fixed; right: 28px; bottom: 28px; z-index: 9999; min-width: 260px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(215,221,231,.9); background: rgba(255,255,255,.96); color: var(--vx-ink, var(--cw-text)); box-shadow: 0 20px 50px rgba(16,24,40,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; font-weight: 700; letter-spacing: .01em; transform: translateY(18px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .vx-toast.show { opacity: 1; transform: translateY(0); } .vx-toast.success { border-color: rgba(var(--brand-rgb),.25); color: var(--cw-accent-text); } .vx-toast.error { border-color: rgba(239,68,68,.28); color: var(--cw-danger); } #addTask:disabled { opacity: .65; cursor: wait; } @media (max-width: 720px){ .vx-toast{ left:16px; right:16px; bottom:18px; text-align:center; } } /* V6.1 cleanup: removed narrative feature cards and made delete action clearly destructive */ .delete-task-btn, .actions button.delete-task-btn { background: linear-gradient(135deg, var(--cw-danger), var(--cw-danger)) !important; color: var(--cw-surface) !important; border-color: rgba(220, 38, 38, 0.2) !important; box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16) !important; font-weight: 800 !important; } .delete-task-btn:hover, .actions button.delete-task-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(239, 68, 68, 0.22) !important; filter: saturate(1.05); } .vx-command-top { margin-bottom: 22px; } .today-card.full-width-vantage { margin-top: 8px; } /* ===== VantageX v9 AI Command Centre — option B ===== */ .ai-command-centre { position: relative; margin: 0 0 22px; padding: 26px; border: 1px solid var(--vx-line); border-radius: 42px; background: radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb),.075), transparent 30%), radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb),.065), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.97), rgba(251,252,254,.97)); box-shadow: var(--shadow-lg); overflow: hidden; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .ai-command-centre::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .ai-command-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; align-items: stretch; margin-bottom: 18px; } .ai-command-copy { padding: 12px 0 4px; } .ai-command-copy h2 { margin: 0; max-width: 900px; font-size: clamp(34px, 4vw, 40px); line-height: .98; letter-spacing: -2.2px; font-weight: 600; color: var(--vx-ink); } .ai-command-copy p:not(.eyebrow) { max-width: 900px; margin: 14px 0 0; color: var(--vx-muted); font-size: 16px; line-height: 1.65; } .ai-command-score { border: 1px solid rgba(215,221,231,.9); border-radius: 30px; background: linear-gradient(180deg, var(--cw-surface), var(--cw-accent-tint)); box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; justify-content: center; min-height: 170px; } .ai-command-score span, .ai-card-kicker { color: var(--vx-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .ai-command-score strong { display: block; margin: 10px 0 6px; font-size: 56px; line-height: .9; letter-spacing: -2px; color: var(--vx-blue); } .ai-command-score small { color: var(--vx-muted); line-height: 1.45; font-weight: 700; } .ai-command-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-bottom: 18px; } .ai-command-card { position: relative; overflow: hidden; min-height: 190px; border: 1px solid var(--vx-line); border-radius: 30px; background: linear-gradient(180deg, var(--cw-surface), var(--cw-surface-muted)); box-shadow: var(--shadow-sm); padding: 22px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .ai-command-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--vx-line-strong); } .ai-command-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--vx-blue); } .ai-command-card.primary::before { background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet)); } .ai-command-card.risk::before { background: linear-gradient(90deg, var(--cw-danger), var(--cw-warning)); } .ai-command-card.owner::before { background: linear-gradient(90deg, var(--vx-violet), var(--cw-text-subtle)); } .ai-command-card h3 { margin: 34px 0 12px; font-size: 25px; line-height: 1.12; letter-spacing: -.7px; color: var(--vx-ink); } .ai-command-card p { margin: 0; color: var(--vx-muted); font-size: 13.5px; line-height: 1.62; } .ai-command-detail { position: relative; z-index: 1; border: 1px solid rgba(231,235,242,.92); border-radius: 34px; background: rgba(255,255,255,.72); padding: 20px; } .compact-ai-head { margin-bottom: 16px !important; } .compact-ai-head h2 { font-size: 32px !important; color: var(--vx-ink) !important; } .ai-command-centre .intel-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .ai-command-centre .intel-card { min-height: 220px; } @media (max-width: 1180px) { .ai-command-hero, .ai-command-grid, .ai-command-centre .intel-grid { grid-template-columns: 1fr; } .ai-command-score { min-height: auto; } } @media (max-width: 720px) { .ai-command-centre { padding: 18px; border-radius: 30px; } .ai-command-copy h2 { font-size: 34px; letter-spacing: -1.4px; } .ai-command-card, .ai-command-score, .ai-command-detail { border-radius: 24px; } } /* ===== VantageX Ask AI panel replaces static execution snapshot ===== */ .ask-ai-panel { min-height: 430px; justify-content: flex-end; gap: 14px; } .ask-ai-panel .ask-ai-copy { margin: 0 0 18px; color: var(--vx-muted); line-height: 1.65; font-size: 14px; } .ask-ai-box { position: relative; z-index: 2; display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(215,221,231,.86); border-radius: 28px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); } .ask-ai-answer { width: 100%; max-width: none; min-width: 0; min-height: 118px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; border-radius: 22px; border: 1px solid rgba(231,235,242,.9); background: radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb),.08), transparent 30%), linear-gradient(180deg, var(--cw-surface), var(--cw-surface-muted)); color: var(--vx-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; } .ask-ai-answer strong { display: block; color: var(--vx-ink); font-size: 15px; letter-spacing: -.15px; } .ask-ai-answer span { display: block; max-width: 100%; overflow-wrap: anywhere; } .ask-ai-input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .ask-ai-input-row input { height: 46px; padding: 0 15px; border-radius: 999px; } .ask-ai-input-row button { height: 46px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); color: var(--cw-surface); border-color: transparent; font-weight: 800; box-shadow: 0 12px 26px rgba(var(--brand-rgb),.18); } @media (max-width: 760px) { .ask-ai-input-row { grid-template-columns: 1fr; } .ask-ai-input-row button { width: 100%; } } /* Real Ask AI product layer */ .ask-ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 100%; min-width: 0; } .ask-ai-suggestions span { display: inline-flex; align-items: center; max-width: 100%; min-height: 28px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb),.16); background: var(--vx-blue-soft); color: var(--vx-blue); font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: normal; overflow-wrap: anywhere; } .task.ai-highlight { border-color: rgba(var(--brand-rgb),.55) !important; box-shadow: 0 0 0 6px rgba(var(--brand-rgb),.10), 0 22px 50px rgba(var(--brand-rgb),.18) !important; transform: translateY(-4px) scale(1.015); } /* V12: blue edit action for Kanban cards */ .edit-task-btn, .actions button.edit-task-btn { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; color: var(--cw-surface) !important; border-color: rgba(var(--brand-rgb),0.18) !important; box-shadow: 0 8px 18px rgba(var(--brand-rgb),0.16) !important; font-weight: 800 !important; } .edit-task-btn:hover, .actions button.edit-task-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(var(--brand-rgb),0.24) !important; filter: saturate(1.06); } /* V13: clean Kanban card actions + full edit modal */ .compact-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: nowrap; } .compact-actions button { flex: 1; min-height: 38px; border-radius: 999px; font-size: 12px; font-weight: 800; } .edit-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; } .edit-hidden { display: none !important; } .edit-backdrop { position: absolute; inset: 0; background: rgba(21,26,35,.34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .edit-card { position: relative; z-index: 1; width: min(680px, 100%); max-height: min(88vh, 820px); overflow: auto; padding: 32px; border: 1px solid rgba(215,221,231,.96); border-radius: 34px; background: rgba(255,255,255,.96); box-shadow: 0 36px 100px rgba(16,24,40,.22); } .edit-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .close-edit { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; background: var(--cw-surface); border: 1px solid var(--vx-line); color: var(--vx-muted); font-size: 22px; line-height: 1; } .edit-card h2 { margin: 0; font-size: 34px; letter-spacing: -1.2px; line-height: 1.05; } .edit-copy { margin: 12px 0 0; color: var(--vx-muted); line-height: 1.6; font-size: 14px; } .edit-form { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .edit-form input, .edit-form select, .edit-form textarea { width: 100%; border-radius: 22px; border: 1px solid var(--vx-line); background: rgba(255,255,255,.95); color: var(--vx-ink); outline: none; padding: 0 16px; font-family: inherit; font-size: 14px; } .edit-form input, .edit-form select { height: 52px; } .edit-form textarea { grid-column: 1 / -1; min-height: 110px; padding-top: 14px; resize: vertical; } .edit-form input:focus, .edit-form select:focus, .edit-form textarea:focus { border-color: rgba(var(--brand-rgb),.45); box-shadow: 0 0 0 5px rgba(var(--brand-rgb),.10); } .edit-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; } .edit-actions button { min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; } .edit-cancel { background: var(--cw-surface); color: var(--vx-muted); border-color: var(--vx-line); } .edit-save { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); color: var(--cw-surface); border-color: transparent; box-shadow: 0 10px 24px rgba(var(--brand-rgb),.18); } .edit-form .auth-message { grid-column: 1 / -1; margin-top: 2px; } .auth-message.error { color: var(--cw-danger); border-color: rgba(239,68,68,.24); background: var(--cw-danger-bg); } .login-status-message.error { color: var(--cw-danger); border-color: rgba(220,38,38,.16); background: rgba(220,38,38,.06); font-weight: 750; } body.edit-open { overflow: hidden; } @media (max-width: 720px) { .edit-modal { padding: 16px; align-items: end; } .edit-card { border-radius: 28px; padding: 28px 22px 22px; } .edit-form { grid-template-columns: 1fr; } .edit-actions { flex-direction: column-reverse; } .edit-actions button { width: 100%; } } /* ===== V15: Inline card editing + AI auto-prioritization ===== */ .ai-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .auto-prioritize-btn { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; border-color: transparent !important; } .secondary-refresh { background: transparent !important; color: var(--vx-blue) !important; border: 1px solid rgba(var(--brand-rgb),.22) !important; box-shadow: none !important; } .secondary-refresh:hover { background: rgba(var(--brand-rgb),.07) !important; } /* Outline-only card actions */ .edit-task-btn, .actions button.edit-task-btn, .delete-task-btn, .actions button.delete-task-btn, .save-inline-task-btn, .cancel-inline-task-btn { background: transparent !important; box-shadow: none !important; border-width: 1px !important; border-style: solid !important; font-weight: 800 !important; } .edit-task-btn, .actions button.edit-task-btn, .save-inline-task-btn { color: var(--cw-accent-text) !important; border-color: rgba(var(--brand-rgb),.46) !important; } .delete-task-btn, .actions button.delete-task-btn, .cancel-inline-task-btn { color: var(--cw-danger) !important; border-color: rgba(239,68,68,.48) !important; } .edit-task-btn:hover, .actions button.edit-task-btn:hover, .save-inline-task-btn:hover { background: rgba(var(--brand-rgb),.08) !important; box-shadow: 0 8px 18px rgba(var(--brand-rgb),.12) !important; filter: none !important; } .delete-task-btn:hover, .actions button.delete-task-btn:hover, .cancel-inline-task-btn:hover { background: rgba(239,68,68,.08) !important; box-shadow: 0 8px 18px rgba(239,68,68,.12) !important; filter: none !important; } .save-inline-task-btn { min-width: 120px; } .cancel-inline-task-btn { min-width: 108px; } .task.is-inline-editing { border-color: rgba(var(--brand-rgb),.28); box-shadow: 0 0 0 5px rgba(var(--brand-rgb),.08), var(--shadow-md); cursor: default; } .task.is-inline-editing::after { content: "Editing"; color: var(--vx-blue); } .inline-edit-form { display: grid; gap: 10px; margin-top: 12px; } .inline-edit-form input, .inline-edit-form select, .inline-edit-form textarea { width: 100%; border: 1px solid var(--vx-line); background: rgba(255,255,255,.94); color: var(--vx-ink); border-radius: 16px; padding: 11px 13px; font-size: 13px; outline: none; } .inline-edit-form textarea { min-height: 86px; resize: vertical; line-height: 1.5; font-family: inherit; } .inline-edit-form input:focus, .inline-edit-form select:focus, .inline-edit-form textarea:focus { border-color: rgba(var(--brand-rgb),.48); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.10); } .inline-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .inline-actions { justify-content: flex-end; } .inline-actions button { flex: 0 0 auto; padding-inline: 16px; } @media (max-width: 680px) { .inline-edit-grid { grid-template-columns: 1fr; } .ai-actions-row { width: 100%; } .ai-actions-row button { flex: 1; } } /* ===== Register / Login whitelist controls ===== */ .vx-header-actions { gap: 10px; align-items: center; } .vx-register-btn { height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb),.22); background: rgba(238,243,255,.86); color: var(--cw-accent-text); font-size: 13px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 20px rgba(var(--brand-rgb),.05); } .vx-register-btn:hover { background: linear-gradient(135deg, var(--cw-accent-tint), var(--cw-accent-tint)); border-color: rgba(var(--brand-rgb),.28); color: var(--cw-accent-text); } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; margin: 4px 0 18px; border: 1px solid var(--vx-line); border-radius: 999px; background: rgba(248,250,253,.94); } .auth-tab { height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--vx-muted); font-weight: 800; font-size: 12px; letter-spacing: .04em; box-shadow: none; } .auth-tab:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.72); } .auth-tab.active { background: linear-gradient(135deg, var(--cw-text) 0%, var(--cw-accent) 52%, var(--cw-accent) 100%); color: var(--cw-surface); box-shadow: 0 10px 24px rgba(16,24,40,.12); } @media (max-width: 820px) { .vx-register-btn { height: 38px; padding: 0 13px; font-size: 12px; } } /* ===== V18: scrollable dense Kanban + header logout ===== */ .vx-logout-header-btn { display: none; height: 42px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(239,68,68,.32); background: transparent; color: var(--cw-danger); font-size: 13px; font-weight: 800; letter-spacing: .01em; box-shadow: none; } .vx-logout-header-btn:hover { background: rgba(239,68,68,.08); box-shadow: 0 10px 24px rgba(239,68,68,.12); } body.is-authenticated .vx-login-btn, body.is-authenticated .vx-register-btn { display: none !important; } body.is-authenticated .vx-logout-header-btn { display: inline-flex !important; } /* Ensure columns themselves are fixed-height and scroll internally */ .board.scrollable-board { align-items: stretch; min-height: 0; } .scrollable-board .lane { height: min(72vh, 760px) !important; min-height: 560px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .scrollable-board .lane-head { flex: 0 0 74px; } .scrollable-board .dropzone { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 16px 12px 18px 16px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; align-content: unset !important; scroll-behavior: smooth; overscroll-behavior: contain; } .scrollable-board .dropzone::-webkit-scrollbar { width: 9px; } .scrollable-board .dropzone::-webkit-scrollbar-track { background: transparent; } .scrollable-board .dropzone::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb),.22); border-radius: 999px; border: 2px solid rgba(255,255,255,.75); } /* Dense cards: owner + title always visible even when many tasks are present */ .scrollable-board .task { flex: 0 0 auto; min-height: 158px; padding: 14px 14px 12px !important; border-radius: 24px !important; overflow: visible !important; } .scrollable-board .task::after { top: 12px; right: 14px; font-size: 9px; } .scrollable-board .task-topline { min-height: 52px; margin-bottom: 10px !important; padding: 8px 10px !important; border-radius: 17px !important; } .scrollable-board .owner-avatar { width: 36px !important; height: 36px !important; flex-basis: 36px !important; border-radius: 13px !important; font-size: 13px; } .scrollable-board .owner-label { font-size: 9px !important; letter-spacing: 1.15px; } .scrollable-board .owner-name { font-size: 13px !important; line-height: 1.15; } .scrollable-board .owner-phone { font-size: 11px !important; line-height: 1.15; } .scrollable-board .task-title { display: block !important; visibility: visible !important; font-size: 16px !important; line-height: 1.25 !important; margin: 0 0 6px !important; padding-right: 44px !important; color: var(--vx-ink) !important; max-height: 42px; overflow: hidden; } .scrollable-board .task-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 9px !important; font-size: 12.5px !important; line-height: 1.35 !important; } .scrollable-board .meta { gap: 5px !important; margin-top: 6px; } .scrollable-board .pill { padding: 5px 8px !important; font-size: 10.5px !important; } .scrollable-board .compact-actions { margin-top: 10px !important; gap: 8px !important; } .scrollable-board .compact-actions button { min-height: 32px !important; padding: 6px 10px !important; font-size: 11px !important; } @media (max-width: 980px) { .scrollable-board .lane { height: min(68vh, 640px) !important; min-height: 480px !important; } } @media (max-width: 820px) { .vx-logout-header-btn { height: 38px; padding: 0 14px; font-size: 12px; } } /* ===== V21 production gating + top auth polish ===== */ .vx-header-actions { align-items: center !important; } .vx-register-btn, .vx-login-btn, .vx-logout-header-btn, .auth-tab, #sendOtp, #verifyOtp { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; white-space: nowrap !important; } .auth-tabs { align-items: center !important; } .auth-tab { min-height: 52px !important; } /* ===== V22: cross-browser polish + empty auth fields + 12-inch laptop/mobile swipe ===== */ .auth-form input#loginName, .auth-form input#loginPhone, .auth-form input#loginOtp { text-align: left; } .auth-form input::placeholder { color: rgba(95,107,122,.72); } /* Ensure buttons look centered across Chrome, Edge, Safari desktop and mobile */ .vx-register-btn, .vx-login-btn, .vx-logout-header-btn, .auth-tab, .primary-cta, #sendOtp, #verifyOtp, #addTask, .download-btn, .logout-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; -webkit-appearance: none; appearance: none; } /* Desktop and 12-inch laptop: preserve three usable Kanban lanes and make the board horizontally safe */ .board.scrollable-board { display: grid !important; grid-template-columns: repeat(3, minmax(330px, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; overflow-x: auto !important; overflow-y: visible !important; padding-bottom: 10px !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .board.scrollable-board .lane { scroll-snap-align: start; } .board.scrollable-board::-webkit-scrollbar { height: 8px; } .board.scrollable-board::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb),.22); border-radius: 999px; } /* Kanban lanes: internal scroll, readable dense cards */ .scrollable-board .lane { height: clamp(520px, 66vh, 760px) !important; min-height: 520px !important; } .scrollable-board .lane-head { flex: 0 0 66px !important; height: 66px !important; } .scrollable-board .dropzone { -webkit-overflow-scrolling: touch; touch-action: pan-y; } .scrollable-board .task { min-height: 136px !important; max-height: none !important; touch-action: pan-y; } .scrollable-board .task-topline { min-height: 48px !important; } .scrollable-board .task-title { min-height: 20px; max-height: 44px !important; } .scrollable-board .task-desc { min-height: 16px; } /* 12-inch laptop / compact desktop screens */ @media (min-width: 900px) and (max-width: 1280px) { .shell, .vx-header-inner, .vx-footer-inner { width: min(100% - 28px, 1540px) !important; } .composer { grid-template-columns: minmax(210px, 1.4fr) minmax(150px, .9fr) minmax(160px, .9fr) minmax(130px, .7fr) minmax(130px, .7fr) minmax(120px, .65fr) minmax(145px, .75fr) auto !important; gap: 8px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .composer input, .composer select, .composer button { min-width: 0 !important; font-size: 13px !important; } .board.scrollable-board { grid-template-columns: repeat(3, minmax(300px, 1fr)) !important; } .scrollable-board .lane { height: calc(100vh - 260px) !important; min-height: 500px !important; } .scrollable-board .task { min-height: 128px !important; padding: 12px !important; } .scrollable-board .task-title { font-size: 15px !important; } .scrollable-board .task-topline { min-height: 46px !important; padding: 7px 9px !important; } } /* Tablet / mobile: one smooth vertical flow, swipeable rails retained */ @media (max-width: 899px) { .board.scrollable-board { grid-template-columns: 1fr !important; overflow-x: visible !important; scroll-snap-type: none; } .scrollable-board .lane { height: min(62vh, 560px) !important; min-height: 420px !important; } .auth-tabs { gap: 8px !important; } .auth-tab { min-height: 46px !important; } } @media (max-width: 560px) { .vx-header-inner { min-height: 64px !important; gap: 10px !important; } .vx-header-actions { gap: 8px !important; } .vx-register-btn, .vx-login-btn, .vx-logout-header-btn { height: 36px !important; padding: 0 11px !important; font-size: 11px !important; } .scrollable-board .lane { height: min(58vh, 500px) !important; min-height: 390px !important; } .auth-card { max-height: calc(100vh - 28px); overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ===== V23/V24 Kanban + AI creation polish ===== */ .next-actions-head{align-items:flex-start;} .next-actions-head > div{max-width:100%;} .lane-head-actions{display:inline-flex;align-items:center;gap:10px;} .lane-add-btn{ width:34px;height:34px;border-radius:999px;padding:0;display:grid;place-items:center; border:1px solid rgba(var(--brand-rgb),.24);background:var(--vx-blue-soft);color:var(--vx-blue); font-size:21px;font-weight:800;line-height:1;box-shadow:var(--shadow-sm); } .lane-add-btn:hover{background:linear-gradient(135deg,var(--vx-blue),var(--vx-violet));color:var(--cw-surface);border-color:transparent;box-shadow:0 12px 24px rgba(var(--brand-rgb),.18);} .lane-quick-add{ margin:14px 16px 0;padding:12px;border:1px solid var(--vx-line);border-radius:22px; background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center; } .lane-quick-add[hidden]{display:none!important;} .lane-quick-add input{height:40px;padding:0 13px;border-radius:999px;min-width:0;} .lane-quick-add button{height:40px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:800;} .lane-quick-add button[data-save-lane]{background:linear-gradient(135deg,var(--vx-blue),var(--vx-violet));color:var(--cw-surface);border-color:transparent;} .lane-quick-add .ghost-mini{background:transparent;color:var(--vx-muted);border-color:var(--vx-line);} .ask-ai-clear-btn{background:transparent!important;color:var(--vx-blue)!important;border:1px solid rgba(var(--brand-rgb),.35)!important;box-shadow:none!important;} .ask-ai-clear-btn:hover{background:rgba(var(--brand-rgb),.08)!important;box-shadow:0 8px 18px rgba(var(--brand-rgb),.12)!important;} .ask-ai-input-row{grid-template-columns:minmax(0,1fr) auto auto;} .dropzone.is-drag-over{outline:2px solid rgba(var(--brand-rgb),.25);outline-offset:-8px;background:rgba(238,243,255,.45);} @media (max-width:760px){ .ask-ai-input-row{grid-template-columns:1fr;} .lane-quick-add{grid-template-columns:1fr;} .lane-quick-add button{width:100%;} } @media (max-width:1180px){ .scrollable-board{grid-template-columns:repeat(3,minmax(310px,1fr));overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;} .scrollable-board .lane{scroll-snap-align:start;} } /* ===== VantageX v25 Ask AI textarea polish ===== */ .ask-ai-input-row { display: grid !important; grid-template-columns: minmax(280px, 1fr) auto auto !important; gap: 10px !important; align-items: end !important; } .ask-ai-input-row textarea#askAiInput { width: 100% !important; min-width: 280px; min-height: 92px; max-height: 172px; padding: 14px 16px !important; border-radius: 20px !important; border: 1px solid var(--vx-line) !important; background: rgba(255,255,255,.96) !important; color: var(--vx-ink) !important; font-size: 14px; line-height: 1.45; resize: vertical; overflow-y: auto; overflow-x: hidden; white-space: pre-wrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.72); -webkit-appearance: none; appearance: none; } .ask-ai-input-row textarea#askAiInput::placeholder { color: rgba(95,107,122,.72); } .ask-ai-input-row button { align-self: stretch; min-height: 46px; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap; } @media (max-width: 1180px) { .ask-ai-input-row { grid-template-columns: minmax(240px, 1fr) auto auto !important; } .ask-ai-input-row textarea#askAiInput { min-width: 240px; } } @media (max-width: 760px) { .ask-ai-input-row { grid-template-columns: 1fr !important; } .ask-ai-input-row textarea#askAiInput { min-width: 0; min-height: 104px; max-height: 190px; } .ask-ai-input-row button { width: 100%; min-height: 46px; } } /* ===== VantageX v26 responsive Ask AI + 12/13-inch browser alignment fix ===== */ html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; } .shell, .vx-header-inner, .vx-footer-inner { max-width: min(1540px, calc(100vw - 48px)); } .task-hero, .landing-hero.task-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 480px) !important; gap: clamp(16px, 1.6vw, 24px) !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } .next-actions-panel, .ask-ai-panel, .hero-copy, .hero-panel { min-width: 0 !important; max-width: 100% !important; } .next-actions-panel { overflow: hidden !important; } .next-actions-carousel { width: 100% !important; max-width: 100% !important; grid-auto-columns: minmax(280px, min(52%, 380px)) !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .next-action-slide { min-width: 0 !important; max-width: 100% !important; } .ask-ai-panel { overflow: visible !important; padding: clamp(24px, 2vw, 32px) !important; } .ask-ai-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .ask-ai-answer { width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere; } /* Keep the textarea wide, but move buttons below it so nothing spills out of the card. */ .ask-ai-input-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(168px, auto) !important; grid-template-areas: "input actions" !important; gap: 10px !important; align-items: center !important; } .ask-ai-input-row textarea#askAiInput { grid-area: input !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 108px !important; max-height: 190px !important; padding: 14px 16px !important; border-radius: 20px !important; resize: vertical !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } .ask-ai-actions { grid-area: actions !important; display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; } .ask-ai-input-row button { width: 100% !important; min-width: 0 !important; min-height: 46px !important; height: 46px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; text-align: center !important; box-sizing: border-box !important; } .ask-ai-actions #askAiBtn { flex: 1 1 auto !important; } .ask-ai-actions #askAiClearBtn { flex: 0 0 auto !important; } /* 12/13-inch laptop safety: keep the whole hero balanced and readable. */ @media (max-width: 1366px) { .shell, .vx-header-inner, .vx-footer-inner { max-width: calc(100vw - 40px) !important; } .task-hero, .landing-hero.task-hero { grid-template-columns: minmax(0, 1fr) 390px !important; gap: 18px !important; } .hero-copy { padding: 36px 32px !important; } .hero-panel.ask-ai-panel { padding: 28px 24px !important; } .next-actions-carousel { grid-auto-columns: minmax(260px, 48%) !important; } .ask-ai-panel h2 { font-size: 28px !important; line-height: 1.08 !important; } } /* Tablet and smaller desktop: stack hero panels cleanly. */ @media (max-width: 1100px) { .task-hero, .landing-hero.task-hero { grid-template-columns: 1fr !important; } .hero-panel.ask-ai-panel { min-height: auto !important; } .ask-ai-input-row { grid-template-columns: minmax(0, 1fr) minmax(128px, auto) !important; } } /* Mobile browsers: one-column, thumb-friendly, no horizontal scroll except intentional rails. */ @media (max-width: 760px) { .shell, .vx-header-inner, .vx-footer-inner { max-width: calc(100vw - 28px) !important; width: calc(100vw - 28px) !important; } .hero-copy, .hero-panel.ask-ai-panel { padding: 24px 18px !important; border-radius: 28px !important; } .next-actions-carousel { grid-auto-columns: minmax(260px, 88%) !important; } .ask-ai-input-row { grid-template-columns: 1fr !important; grid-template-areas: "input" "actions" !important; } .ask-ai-input-row textarea#askAiInput { min-height: 116px !important; max-height: 220px !important; } } /* ===== VantageX v27 Minimal Metrics Ticker ===== */ .metrics { width: 100% !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 14px !important; padding: 8px !important; border: 1px solid rgba(215,221,231,.72) !important; border-radius: 14px !important; background: rgba(255,255,255,.72) !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; } .metrics::-webkit-scrollbar { display: none; } .metric { flex: 1 0 0 !important; min-width: 150px !important; height: 38px !important; min-height: 38px !important; padding: 0 13px 0 14px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; position: relative !important; overflow: hidden !important; border-radius: 10px !important; border: 1px solid rgba(231,235,242,.92) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,254,.92)) !important; box-shadow: none !important; backdrop-filter: none !important; font: inherit !important; text-align: left !important; cursor: pointer !important; -webkit-appearance: none; appearance: none; } .metric::before { content: "" !important; position: absolute !important; left: 0 !important; top: 8px !important; bottom: 8px !important; width: 3px !important; border-radius: 0 999px 999px 0 !important; background: var(--vx-blue) !important; } .metric.violet::before { background: var(--vx-violet) !important; } .metric.green::before { background: var(--vx-green) !important; } .metric.yellow::before { background: var(--cw-text-subtle) !important; } .metric.red::before { background: var(--vx-red) !important; } .metric span { color: var(--vx-muted) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; margin: 0 !important; } .metric strong { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; color: var(--vx-ink) !important; font-size: 18px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.35px !important; } .metric:hover { transform: none !important; box-shadow: 0 8px 18px rgba(var(--brand-rgb),.08) !important; border-color: rgba(var(--brand-rgb),.24) !important; } .metric:focus-visible, .today-card[data-scroll-target]:focus-visible { outline: 3px solid rgba(var(--brand-rgb),.22) !important; outline-offset: 2px !important; } .today-card[data-scroll-target] { cursor: pointer; } .today-card[data-scroll-target]:hover { border-color: rgba(var(--brand-rgb),.24) !important; } .nav-target-highlight { outline: 3px solid rgba(var(--brand-rgb),.28); outline-offset: 3px; animation: vxNavTargetPulse .9s ease-out; } @keyframes vxNavTargetPulse { 0% { outline-color: rgba(var(--brand-rgb),.42); } 100% { outline-color: rgba(var(--brand-rgb),0); } } @media (max-width: 760px) { .metrics { margin-bottom: 12px !important; padding: 7px !important; border-radius: 13px !important; } .metric { flex: 0 0 auto !important; min-width: 138px !important; height: 36px !important; min-height: 36px !important; padding: 0 11px 0 13px !important; } .metric span { font-size: 9px !important; } .metric strong { font-size: 16px !important; } } /* ===== VantageX / Flow premium system refresh ===== */ :root { --vx-ink: var(--cw-text); --vx-muted: var(--cw-text-muted); --vx-line: var(--cw-accent-tint); --vx-line-strong: var(--cw-accent-tint); --vx-blue: var(--cw-accent); --vx-violet: var(--cw-accent); --vx-blue-soft: var(--cw-accent-tint); --vx-card: rgba(255,255,255,.94); --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.035); --shadow-md: 0 12px 34px rgba(16,24,40,.075); --shadow-lg: 0 24px 60px rgba(16,24,40,.10); } *, *::before, *::after { min-width: 0; } html, body { overflow-x: hidden !important; } body { background: linear-gradient(180deg, var(--cw-surface) 0%, var(--cw-accent-tint) 46%, var(--cw-surface) 100%) !important; letter-spacing: 0 !important; } body::before, body::after { display: none !important; } .vx-header { background: rgba(250,248,244,.9) !important; border-bottom-color: rgba(226,220,211,.82) !important; } .vx-logo-mark, .vx-footer-mark { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; margin: 0 !important; display: grid !important; place-items: center !important; border-radius: 13px !important; background: linear-gradient(135deg, var(--cw-accent) 0%, var(--cw-accent) 100%) !important; box-shadow: 0 14px 28px rgba(var(--brand-rgb),.18) !important; color: var(--cw-surface) !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: -.03em !important; } .vx-logo-mark::before, .vx-footer-mark::before { content: "CP"; } .vx-footer-mark { width: 34px !important; height: 34px !important; flex-basis: 34px !important; border-radius: 11px !important; font-size: 12px !important; } .vx-brand { gap: 12px !important; } .vx-title { font-size: 18px !important; letter-spacing: -.02em !important; } .vx-sub { color: var(--cw-accent-text) !important; letter-spacing: .12em !important; } .shell { width: min(1440px, calc(100vw - 48px)) !important; padding-top: 30px !important; } .today-card, .ai-command-centre, .hero-copy, .hero-panel, .toolbar, .composer, .lane, .history-section, .flow-workspace-head { border-color: rgba(230,235,243,.95) !important; background: rgba(255,255,255,.94) !important; box-shadow: var(--shadow-sm) !important; } .today-card:hover, .ai-command-centre:hover, .hero-copy:hover, .hero-panel:hover, .lane:hover { box-shadow: var(--shadow-md) !important; } .flow-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 14px; padding: 18px 20px; border: 1px solid var(--vx-line); border-radius: 24px; } .flow-workspace-head p { max-width: 560px; margin: 0; color: var(--vx-muted); font-size: 13px; line-height: 1.55; text-align: right; } .flow-lockup { display: inline-flex; align-items: center; gap: 12px; } .flow-logo-mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.78) 0 3px, transparent 3px 8px, rgba(255,255,255,.78) 8px 11px, transparent 11px 16px, rgba(255,255,255,.78) 16px 19px, transparent 19px), linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); box-shadow: 0 12px 26px rgba(var(--brand-rgb),.16); } .flow-lockup strong { display: block; color: var(--vx-ink); font-size: 18px; line-height: 1; letter-spacing: -.02em; } .flow-lockup small { display: block; margin-top: 5px; color: var(--vx-muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .vx-logo-mark, .vx-footer-mark, .flow-logo-mark, .hero-vx-lockup img { object-fit: contain !important; background: transparent !important; } img.vx-logo-mark, img.vx-footer-mark, img.flow-logo-mark { padding: 0 !important; box-shadow: none !important; } img.vx-logo-mark::before, img.vx-footer-mark::before { content: none !important; } img.flow-logo-mark { border-radius: 12px; } .hero-vx-lockup { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-bottom: 8px; padding: 7px 11px 7px 7px; border: 1px solid rgba(230,235,243,.95); border-radius: 999px; background: rgba(255,255,255,.84); box-shadow: var(--shadow-sm); } .hero-vx-lockup img { width: 34px; height: 34px; border-radius: 10px; } .hero-vx-lockup span { color: var(--vx-ink); font-size: 12px; font-weight: 900; letter-spacing: .02em; } .assistant-flow-lockup { position: absolute; left: 28px; top: 28px; } .composer { grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 1fr) minmax(150px, 1fr) repeat(4, minmax(124px, .8fr)) auto !important; overflow: visible !important; } .composer input, .composer select, .composer button, .auth-form input, .auth-form button, .toolbar-actions select, .toolbar-actions button { border-radius: 14px !important; } .board.scrollable-board { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow-x: hidden !important; padding-bottom: 0 !important; } .scrollable-board .lane { height: clamp(540px, 66vh, 760px) !important; min-height: 520px !important; border-radius: 24px !important; } .lane-head { background: linear-gradient(180deg, var(--cw-surface), var(--cw-surface-muted)); } .dropzone:empty::before { content: "Flow is ready for your next priority" !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(238,244,255,.68), rgba(255,255,255,.72)) !important; } .task { border-radius: 18px !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } .task:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(16,24,40,.08) !important; } .task.priority-critical { border-color: rgba(220,38,38,.25) !important; } .task.priority-high { border-color: rgba(245,158,11,.28) !important; } .task.priority-low { border-color: rgba(104,115,134,.22) !important; } .task.priority-critical::before { background: linear-gradient(90deg, var(--cw-danger), var(--cw-warning)) !important; } .task.priority-high::before { background: linear-gradient(90deg, var(--cw-warning), var(--cw-accent)) !important; } .task.priority-medium::before { background: linear-gradient(90deg, var(--cw-accent), var(--cw-accent)) !important; } .task.priority-low::before { background: var(--cw-text-subtle) !important; } .task::after { content: "Flow" !important; } .task-topline { background: var(--cw-surface-muted) !important; border-color: rgba(230,235,243,.92) !important; } .compact-actions { display: flex !important; align-items: center; flex-wrap: wrap; gap: 7px !important; } .compact-actions button { flex: 1 1 72px; min-width: fit-content !important; overflow-wrap: anywhere; } .task-note-link-btn, .task-linked-notes-btn, .detail-row-actions [data-task-see-notes], .detail-row-actions [data-add-note-task] { min-height: 32px !important; padding: 0 11px !important; border-radius: 999px !important; background: rgba(255,255,255,.76) !important; color: var(--cw-accent-text) !important; border-color: rgba(207,216,229,.95) !important; box-shadow: 0 8px 18px rgba(16,24,40,.08) !important; font-size: 11px !important; line-height: 1 !important; } .task-note-link-btn:hover, .task-linked-notes-btn:hover, .detail-row-actions [data-task-see-notes]:hover, .detail-row-actions [data-add-note-task]:hover { background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)) !important; color: var(--cw-surface) !important; } .email-task-btn, .actions button.email-task-btn { background: transparent !important; color: var(--cw-accent-text) !important; border: 1px solid rgba(var(--brand-rgb),.34) !important; box-shadow: none !important; font-weight: 800 !important; } .email-task-btn:hover, .actions button.email-task-btn:hover { background: rgba(var(--brand-rgb),.08) !important; box-shadow: 0 8px 18px rgba(var(--brand-rgb),.11) !important; } .next-actions-carousel, .history-rail { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 14px !important; overflow-x: hidden !important; padding-bottom: 0 !important; } .next-action-slide, .history-card { scroll-snap-align: none !important; } .carousel-hint { margin-top: 2px; } .email-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; } .email-hidden { display: none !important; } .email-backdrop { position: absolute; inset: 0; background: rgba(20,25,35,.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .email-card { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(88vh, 760px); overflow: auto; padding: 30px; border: 1px solid rgba(230,235,243,.98); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 36px 100px rgba(16,24,40,.22); } .email-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .close-email { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 999px !important; background: var(--cw-surface); color: var(--vx-muted); } .email-flow-lockup { margin-bottom: 20px; } .email-card h2 { margin: 0; font-size: 30px; line-height: 1.08; letter-spacing: -.04em; } .email-copy { margin: 10px 0 0; color: var(--vx-muted); font-size: 14px; line-height: 1.6; } .email-task-preview { display: grid; gap: 7px; margin: 18px 0 0; padding: 14px; border: 1px solid var(--vx-line); border-radius: 18px; background: linear-gradient(180deg, var(--cw-surface), var(--cw-surface-muted)); } .email-task-preview strong { color: var(--vx-ink); line-height: 1.25; } .email-task-preview span { color: var(--vx-muted); font-size: 12px; font-weight: 700; } .email-form { display: grid; gap: 12px; margin-top: 16px; } .email-form input, .email-form select, .email-form textarea { width: 100%; border-radius: 16px !important; padding: 0 15px; } .email-form input, .email-form select { height: 50px; } .email-form textarea { min-height: 112px; padding-top: 14px; resize: vertical; line-height: 1.5; } .email-form button { min-height: 48px; border-radius: 999px !important; border-color: transparent; background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)); color: var(--cw-surface); font-weight: 800; box-shadow: 0 12px 26px rgba(var(--brand-rgb),.18); } .email-form button:disabled { opacity: .64; cursor: wait; } .email-status-message { position: relative; padding-left: 34px !important; } .email-status-message::before { content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; border-radius: 999px; background: var(--vx-blue); transform: translateY(-50%); } .email-status-message.loading::before { animation: emailStatusPulse .85s ease-in-out infinite; } .email-status-message.success { border-color: rgba(18,183,106,.28) !important; background: var(--cw-success-bg) !important; color: var(--cw-success) !important; } .email-status-message.success::before { background: var(--cw-success); } .email-status-message.error::before { background: var(--vx-red); } body.email-open { overflow: hidden; } @media (max-width: 1180px) { .composer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .composer #title, .composer #addTask { grid-column: 1 / -1; } .board.scrollable-board { grid-template-columns: 1fr !important; } .scrollable-board .lane { height: auto !important; min-height: 420px !important; } .flow-workspace-head { align-items: flex-start; flex-direction: column; } .flow-workspace-head p { text-align: left; } } @media (max-width: 760px) { .shell, .vx-header-inner, .vx-footer-inner { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; } .vx-logo-mark { width: 36px !important; height: 36px !important; flex-basis: 36px !important; border-radius: 11px !important; font-size: 12px !important; } .vx-sub, .vx-header-context { display: none !important; } .composer { grid-template-columns: 1fr !important; } .composer #title, .composer #addTask { grid-column: auto; } .next-actions-carousel, .history-rail { grid-template-columns: 1fr !important; } .compact-actions { grid-template-columns: 1fr !important; } .flow-workspace-head, .email-card { border-radius: 22px !important; padding: 22px 18px !important; } .email-modal { padding: 14px; align-items: end; } } /* Final horizontal-scroll guard: all responsive density must resolve inside the viewport. */ .metrics, .board.scrollable-board, .next-actions-carousel, .history-rail, .composer { overflow-x: hidden !important; scroll-snap-type: none !important; } @media (max-width: 760px) { .metrics { flex-wrap: wrap !important; white-space: normal !important; } .metric { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; } } /* ===== Final production polish pass: Flow as a focused product surface ===== */ :root { --vx-radius-xs: 10px; --vx-radius-sm: 14px; --vx-radius-md: 18px; --vx-radius-lg: 24px; --vx-focus: rgba(var(--brand-rgb),.12); --vx-surface: rgba(255,255,255,.92); --vx-surface-strong: var(--cw-surface); } body { background: var(--cw-surface-muted) !important; color: var(--cw-accent-text) !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } button, input, select, textarea { transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, transform .16s ease, opacity .16s ease !important; } button:active { transform: translateY(0) scale(.985) !important; } input:focus, select:focus, textarea:focus { border-color: rgba(var(--brand-rgb),.45) !important; box-shadow: 0 0 0 4px var(--vx-focus) !important; } .vx-header { background: rgba(250,248,244,.9) !important; border-bottom: 1px solid rgba(226,220,211,.82) !important; } .vx-header-inner { min-height: 68px !important; } .vx-product-nav { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(226,220,211,.82); border-radius: 999px; background: rgba(255,253,249,.72); } .vx-product-nav button { padding: 7px 10px; border-radius: 999px; border: 0; background: transparent; color: var(--cw-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; cursor: pointer; box-shadow: none; } .vx-product-nav button:nth-child(3) { color: var(--vx-blue); background: var(--cw-accent-tint); } .vx-product-nav button:hover, .vx-product-nav button:focus-visible { color: var(--vx-blue); background: var(--cw-accent-tint); outline: none; } .vx-header-actions button { height: 38px !important; } .vx-login-btn { min-width: 112px !important; } .vx-register-btn { min-width: 92px !important; } .vx-logout-header-btn { min-width: 84px !important; } .vx-header-actions { flex: 0 0 auto !important; } .momentum-strip { position: relative; isolation: isolate; height: 34px; max-height: 36px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 10px; border: 1px solid rgba(20,184,166,.20); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--cw-text-muted); box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(15,23,42,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); white-space: nowrap; outline: none; } .momentum-strip[hidden] { display: none !important; } .momentum-strip:focus-visible { border-color: rgba(20,184,166,.48); box-shadow: 0 0 0 4px rgba(20,184,166,.10), 0 12px 28px rgba(15,23,42,.08); } .momentum-title { color: var(--cw-success); font-size: 10px; font-weight: 900; letter-spacing: .13em; line-height: 1; text-transform: uppercase; } .momentum-short, #momentumStreakShort { display: none; } .momentum-days { display: inline-flex; align-items: center; gap: 4px; height: 24px; } .momentum-day { width: 8px; height: 22px; border-radius: 999px; border: 1px solid var(--cw-accent-tint); background: var(--cw-surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); } .momentum-day.productive { border-color: rgba(15,118,110,.36); background: linear-gradient(180deg, rgba(45,212,191,.86), rgba(15,118,110,.82)); } .momentum-day.login { border-color: rgba(217,119,6,.34); background: linear-gradient(180deg, rgba(254,215,170,.92), rgba(251,146,60,.78)); } .momentum-day.empty { border-color: rgba(203,213,225,.78); background: linear-gradient(180deg, var(--cw-surface), var(--cw-accent-tint)); } .momentum-streak { color: var(--cw-text-muted); font-size: 12px; font-weight: 900; letter-spacing: -.01em; line-height: 1; } .momentum-tooltip { position: absolute; top: calc(100% + 9px); right: 0; z-index: 20; width: 230px; display: grid; gap: 6px; padding: 12px 13px; border: 1px solid rgba(226,232,240,.96); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 22px 54px rgba(15,23,42,.14); color: var(--cw-text-muted); font-size: 12px; font-weight: 700; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; } .momentum-tooltip b { color: var(--cw-text); font-weight: 900; } .momentum-strip:hover .momentum-tooltip, .momentum-strip:focus .momentum-tooltip, .momentum-strip:focus-within .momentum-tooltip { opacity: 1; transform: translateY(0); } .shell { display: grid; gap: 16px; padding-top: 24px !important; padding-bottom: 56px !important; } .metrics, .today-card.full-width-vantage, .ai-command-centre, .task-hero, .toolbar, .flow-command-bar, .flow-workspace-head, .board, .history-section { margin-bottom: 0 !important; } .metrics { position: sticky; top: 78px; z-index: 42; background: rgba(255,255,255,.82) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } .metric { height: 42px !important; border-radius: 12px !important; } .today-card.full-width-vantage { min-height: 118px !important; padding: 24px !important; border-radius: var(--vx-radius-lg) !important; } .today-card strong { font-size: clamp(22px, 2.4vw, 30px) !important; letter-spacing: -.03em !important; } .today-card small { color: var(--cw-text-muted) !important; } .ai-command-centre, .hero-copy, .hero-panel, .toolbar, .flow-command-bar, .flow-workspace-head, .lane, .history-section { border-radius: var(--vx-radius-lg) !important; background: var(--vx-surface-strong) !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 34px rgba(16,24,40,.04) !important; } .ai-command-centre { padding: 22px !important; } .ai-command-detail { border-radius: 22px !important; background: var(--cw-surface-muted) !important; } .compact-ai-head h2 { font-size: clamp(24px, 2.6vw, 32px) !important; letter-spacing: -.03em !important; } .intel-grid { gap: 12px !important; } .intel-card, .intel-item { border-radius: 16px !important; } .intel-card { min-height: 190px !important; padding: 16px !important; } .hero-copy { padding: clamp(28px, 3vw, 38px) !important; } .next-actions-head h1 { font-size: clamp(38px, 4vw, 48px) !important; letter-spacing: -.055em !important; } .subcopy { max-width: 720px !important; color: var(--cw-text-muted) !important; font-size: 15px !important; line-height: 1.65 !important; } .next-action-slide { min-height: 178px !important; border-radius: 18px !important; padding: 18px !important; } .next-action-slide h3 { font-size: 20px !important; letter-spacing: -.025em !important; } .ask-ai-panel { padding-top: 94px !important; } .assistant-flow-lockup { left: 24px !important; top: 24px !important; } .ask-ai-box { border-radius: 20px !important; background: var(--cw-surface-muted) !important; } .ask-ai-answer { min-height: 104px !important; border-radius: 16px !important; } .toolbar { position: sticky; top: 136px; z-index: 38; grid-template-columns: minmax(0, 1fr) auto !important; padding: 14px !important; background: rgba(255,255,255,.88) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .toolbar-title { letter-spacing: .11em !important; } .owner-chip { border-radius: 14px !important; box-shadow: none !important; background: var(--cw-surface-muted) !important; } .session-pill, .toolbar-actions select, .toolbar-actions button { height: 38px !important; border-radius: 999px !important; } .new-task-btn, .flow-command-bar button { background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)) !important; border-color: transparent !important; color: var(--cw-surface) !important; font-weight: 850 !important; box-shadow: 0 10px 24px rgba(var(--brand-rgb),.16) !important; } .flow-command-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--vx-line); border-radius: var(--vx-radius-lg); background: var(--cw-surface); } .flow-command-bar span { display: block; color: var(--vx-blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .flow-command-bar strong { display: block; margin-top: 5px; font-size: 18px; letter-spacing: -.025em; } .flow-command-bar button { min-height: 40px; padding: 0 16px; border-radius: 999px !important; } .flow-workspace-head { position: sticky; top: 206px; z-index: 34; background: rgba(255,255,255,.9) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .flow-workspace-copy { display: grid; justify-items: end; gap: 9px; } .flow-workspace-copy p { margin: 0; color: var(--vx-muted); font-size: 13px; line-height: 1.55; text-align: right; } .flow-product-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .flow-product-pills span { padding: 6px 9px; border: 1px solid var(--cw-accent-tint); border-radius: 999px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 10px; font-weight: 850; letter-spacing: .04em; } .board.scrollable-board { gap: 14px !important; } .scrollable-board .lane { height: clamp(560px, 64vh, 740px) !important; min-height: 520px !important; border-radius: 22px !important; } .lane-head { flex-basis: 62px !important; height: 62px !important; padding: 0 18px !important; position: sticky; top: 0; z-index: 2; } .lane-head span { font-size: 14px !important; } .lane-head b, .lane-add-btn { width: 32px !important; height: 32px !important; } .scrollable-board .dropzone { gap: 10px !important; padding: 14px !important; scrollbar-width: thin; scrollbar-color: rgba(var(--brand-rgb),.22) transparent; } .dropzone:empty::before { min-height: 150px !important; color: var(--cw-accent-text) !important; font-weight: 750; } .dropzone.is-drag-over { outline: 2px solid rgba(var(--brand-rgb),.24) !important; background: rgba(238,244,255,.58) !important; } .scrollable-board .task { min-height: 142px !important; padding: 13px !important; border-radius: 16px !important; border-color: var(--cw-accent-tint) !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; background: var(--cw-surface) !important; } .task.dragging { opacity: .86 !important; transform: rotate(.4deg) scale(1.01) !important; box-shadow: 0 18px 48px rgba(16,24,40,.18) !important; } .scrollable-board .task::before { height: 3px !important; } .scrollable-board .task::after { color: rgba(100,116,139,.40) !important; letter-spacing: .12em !important; } .scrollable-board .task-topline { min-height: 44px !important; margin-bottom: 9px !important; padding: 7px 9px !important; border-radius: 13px !important; } .owner-avatar { border-radius: 11px !important; } .owner-label { color: var(--cw-accent-text) !important; } .scrollable-board .task-title { max-height: none !important; margin-bottom: 6px !important; font-size: 15px !important; letter-spacing: -.018em !important; } .scrollable-board .task-desc { color: var(--cw-text-muted) !important; -webkit-line-clamp: 2 !important; min-height: auto !important; margin-bottom: 8px !important; } .task-signal-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .priority-signal, .assignee-state { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .02em; } .priority-signal.priority-critical { color: var(--cw-danger); background: var(--cw-danger-bg); border: 1px solid var(--cw-danger-bg); } .priority-signal.priority-high { color: var(--cw-warning); background: var(--cw-warning-bg); border: 1px solid var(--cw-warning-bg); } .priority-signal.priority-medium { color: var(--cw-accent-text); background: var(--cw-accent-tint); border: 1px solid var(--cw-accent-tint); } .priority-signal.priority-low { color: var(--cw-text-muted); background: var(--cw-accent-tint); border: 1px solid var(--cw-accent-tint); } .assignee-state.ready { color: var(--cw-success); background: var(--cw-success-bg); border: 1px solid var(--cw-success-bg); } .assignee-state.missing { color: var(--cw-warning); background: var(--cw-warning-bg); border: 1px solid var(--cw-warning-bg); } .pill { border-radius: 999px !important; font-weight: 800 !important; text-transform: none !important; } .due-pill.due-overdue { color: var(--cw-danger) !important; background: var(--cw-danger-bg) !important; border-color: var(--cw-danger-bg) !important; } .due-pill.due-today { color: var(--cw-warning) !important; background: var(--cw-warning-bg) !important; border-color: var(--cw-warning-bg) !important; } .due-pill.due-soon { color: var(--cw-accent-text) !important; background: var(--cw-accent-tint) !important; border-color: var(--cw-accent-tint) !important; } .due-pill.due-scheduled, .due-pill.due-none { color: var(--cw-text-muted) !important; background: var(--cw-surface-muted) !important; border-color: var(--cw-accent-tint) !important; } .compact-actions { gap: 6px !important; margin-top: 9px !important; } .inline-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .scrollable-board .compact-actions button { min-height: 30px !important; border-radius: 10px !important; font-size: 10.5px !important; } .task-create-modal { position: fixed; inset: 0; z-index: 152; display: grid; place-items: center; padding: 24px; } .task-create-hidden { display: none !important; } .task-create-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .task-create-card { position: relative; z-index: 1; width: min(760px, 100%); max-height: min(88vh, 820px); overflow: auto; padding: 30px; border: 1px solid rgba(230,235,243,.98); border-radius: 28px; background: rgba(255,255,255,.98); box-shadow: 0 36px 100px rgba(16,24,40,.22); } .task-create-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--vx-blue), var(--vx-violet), var(--cw-text-subtle)); } .close-task-create { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 999px !important; background: var(--cw-surface); color: var(--vx-muted); } .task-create-copy { max-width: 600px; margin: 16px 0 0; color: var(--cw-text-muted); font-size: 14px; line-height: 1.6; } .task-create-form.composer { margin: 20px 0 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .task-create-form #title { grid-column: 1 / -1; } .task-create-form input, .task-create-form select { height: 48px !important; border-radius: 14px !important; background: var(--cw-surface) !important; } .task-create-form #addTask { grid-column: 1 / -1; min-height: 48px; border-radius: 999px !important; } body.task-create-open, body.login-open, body.email-open, body.storage-open { overflow: hidden !important; } .email-card, .auth-card { border-radius: 28px !important; box-shadow: 0 36px 100px rgba(16,24,40,.22) !important; } .email-task-preview { position: relative; padding-left: 18px !important; } .email-task-preview::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--vx-blue), var(--vx-violet)); } .email-form input.is-invalid { border-color: rgba(220,38,38,.5) !important; box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important; } .email-modal.is-sending .email-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--vx-blue), var(--vx-violet), transparent); animation: emailSending 1.05s linear infinite; } .email-modal.is-success .email-card { border-color: rgba(18,183,106,.35) !important; } .email-modal.is-success #sendTaskEmail { background: linear-gradient(135deg, var(--cw-success), var(--cw-success)) !important; } .email-modal.is-success #sendContactAdmin { background: linear-gradient(135deg, var(--cw-success), var(--cw-success)) !important; } .email-modal.is-error .email-card { border-color: rgba(220,38,38,.30) !important; } .email-modal.is-error #sendTaskEmail { background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)) !important; } .email-modal.is-error #sendContactAdmin { background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)) !important; } @keyframes emailSending { from { transform: translateX(-45%); } to { transform: translateX(45%); } } @keyframes emailStatusPulse { 0%, 100% { opacity: .35; transform: translateY(-50%) scale(.85); } 50% { opacity: 1; transform: translateY(-50%) scale(1.08); } } .auth-card { width: min(520px, 100%) !important; } .auth-message { border-radius: 14px !important; } body.is-loading .metrics, body.is-loading .today-card, body.is-loading .ai-command-centre, body.is-loading .task-hero { position: relative; } body.is-loading .metrics::after, body.is-loading .today-card::after, body.is-loading .ai-command-centre::after, body.is-loading .task-hero::after, body.is-loading-tasks .dropzone::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(238,244,255,.32), transparent); animation: vxSkeleton 1.4s ease-in-out infinite; } @keyframes vxSkeleton { 0% { transform: translateX(-70%); opacity: .2; } 50% { opacity: .65; } 100% { transform: translateX(70%); opacity: .2; } } @media (max-width: 1180px) { .metrics, .toolbar, .flow-workspace-head { position: relative !important; top: auto !important; } .toolbar { grid-template-columns: 1fr !important; } .flow-workspace-copy { justify-items: start; } .flow-workspace-copy p { text-align: left; } .flow-product-pills { justify-content: flex-start; } } @media (max-width: 920px) { .vx-header-context, .vx-product-nav { display: none !important; } } @media (max-width: 760px) { .shell { gap: 14px; padding-top: 16px !important; } .vx-product-nav, .vx-header-context { display: none !important; } .toolbar-actions { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; } .toolbar-actions .session-pill, .toolbar-actions select { grid-column: 1 / -1; } .toolbar-actions button { width: 100%; } .ai-actions-row { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } .ai-actions-row button { width: 100% !important; min-width: 0 !important; } .flow-command-bar { align-items: flex-start; flex-direction: column; } .flow-command-bar button { width: 100%; } .task-create-modal, .email-modal, .auth-modal { padding: 12px !important; align-items: end !important; } .task-create-card, .email-card, .auth-card { width: 100% !important; max-height: calc(100vh - 24px) !important; padding: 24px 18px 18px !important; border-radius: 22px !important; } .task-create-form.composer { grid-template-columns: 1fr !important; } .scrollable-board .lane { min-height: 390px !important; height: auto !important; } .scrollable-board .task { min-height: auto !important; } .task-signal-row, .meta { gap: 5px !important; } } /* Compact registration/login modal so it fits short laptop and mobile viewports. */ .auth-modal { padding: 14px !important; overflow-y: auto; align-items: center !important; place-items: center !important; } .auth-card { width: min(620px, 100%) !important; max-height: calc(100dvh - 28px) !important; overflow-y: auto; padding: 18px 20px !important; } .close-auth { top: 12px !important; right: 12px !important; width: 30px !important; height: 30px !important; font-size: 18px !important; } .eyebrow.mini { margin-bottom: 8px !important; font-size: 10px !important; } .auth-tabs { gap: 5px !important; margin: 0 38px 12px 0 !important; padding: 4px !important; } .auth-tab { height: 34px !important; min-height: 34px !important; font-size: 11px !important; } .auth-card h2 { font-size: 22px !important; line-height: 1.08 !important; letter-spacing: -.5px !important; } .login-copy { margin-top: 5px !important; font-size: 12px !important; line-height: 1.35 !important; } .landing-login .auth-form, .auth-form { gap: 7px !important; margin-top: 10px !important; } .auth-form input, .auth-form button { height: 38px !important; padding: 0 13px !important; font-size: 12.5px !important; } .auth-message { font-size: 11.5px !important; line-height: 1.38 !important; } .auth-message { padding: 8px 10px !important; border-radius: 12px !important; } @media (max-width: 560px) { .auth-card { width: 100% !important; padding: 16px 14px 14px !important; } .auth-tabs { margin-right: 34px !important; } } /* Top-of-page AI USP: Flow Assistant is the primary product entry point. */ .flow-ai-hero { width: 100%; margin: 0 !important; } .top-ask-ai-panel { display: grid !important; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important; grid-template-areas: "lockup box" "kicker box" "title box" "copy box"; align-items: center !important; column-gap: clamp(20px, 3vw, 42px) !important; row-gap: 8px !important; width: 100% !important; min-height: 0 !important; padding: clamp(22px, 3vw, 36px) !important; border-radius: var(--vx-radius-lg) !important; overflow: hidden !important; background: radial-gradient(circle at 8% 0%, rgba(var(--brand-rgb),.12), transparent 34%), radial-gradient(circle at 100% 20%, rgba(var(--brand-rgb),.10), transparent 28%), rgba(255,255,255,.96) !important; } .top-ask-ai-panel .assistant-flow-lockup { grid-area: lockup; position: static !important; left: auto !important; top: auto !important; } .top-ask-ai-panel .panel-kicker { grid-area: kicker; margin: 10px 0 0 !important; } .top-ask-ai-panel h2 { grid-area: title; max-width: 560px; margin: 0 !important; font-size: clamp(34px, 4.4vw, 64px) !important; line-height: .96 !important; letter-spacing: -.045em !important; } .top-ask-ai-panel .ask-ai-copy { grid-area: copy; max-width: 560px; margin: 8px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; } .top-ask-ai-panel .ask-ai-box { grid-area: box; justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; gap: 12px !important; padding: 16px !important; } .top-ask-ai-panel .ask-ai-answer { justify-self: stretch; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; padding: 12px 14px !important; justify-content: flex-start !important; } .top-ask-ai-panel .ask-ai-input-row { grid-template-columns: minmax(260px, 1fr) minmax(168px, auto) !important; grid-template-areas: "input actions" !important; align-items: center !important; } .top-ask-ai-panel .ask-ai-input-row textarea#askAiInput { min-height: 58px !important; max-height: 120px !important; padding: 11px 13px !important; border-radius: 16px !important; resize: vertical; } .top-ask-ai-panel .ask-ai-actions { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; } .top-ask-ai-panel .ask-ai-actions button { align-self: center !important; width: auto !important; min-width: 74px !important; height: 42px !important; min-height: 42px !important; padding: 0 16px !important; } .top-ask-ai-panel .ask-ai-actions #askAiBtn { flex: 1 1 auto !important; } .top-ask-ai-panel .ask-ai-actions .ask-ai-clear-btn { flex: 0 0 auto !important; min-width: 84px !important; } .landing-hero.task-hero, .task-hero { grid-template-columns: 1fr !important; } @media (max-width: 920px) { .top-ask-ai-panel { grid-template-columns: 1fr !important; grid-template-areas: "lockup" "kicker" "title" "copy" "box"; padding: 22px !important; } .top-ask-ai-panel .assistant-flow-lockup { position: static !important; left: auto !important; top: auto !important; width: 100% !important; } .top-ask-ai-panel h2 { font-size: clamp(34px, 8vw, 48px) !important; } .top-ask-ai-panel .ask-ai-box, .top-ask-ai-panel .ask-ai-answer { width: 100% !important; } .top-ask-ai-panel .ask-ai-input-row { grid-template-columns: minmax(0, 1fr) minmax(168px, auto) !important; } } @media (max-width: 640px) { .top-ask-ai-panel .ask-ai-input-row { grid-template-columns: 1fr !important; grid-template-areas: "input" "actions" !important; } .top-ask-ai-panel .ask-ai-input-row textarea#askAiInput { grid-column: 1 / -1; } .top-ask-ai-panel .ask-ai-actions { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; } .top-ask-ai-panel .ask-ai-actions #askAiBtn { flex: 1 1 auto !important; } .top-ask-ai-panel .ask-ai-actions #askAiClearBtn { flex: 0 0 auto !important; } } /* Final dashboard fixes: five desktop actions and readable private-view chip. */ .owner-chip.secure { border-color: rgba(var(--brand-rgb),.22) !important; background: linear-gradient(180deg, var(--cw-accent-tint) 0%, var(--cw-accent-tint) 100%) !important; color: var(--cw-accent-text) !important; user-select: none; } .owner-chip.secure strong { color: var(--cw-accent-text) !important; } .owner-chip.secure span { color: var(--cw-accent-text) !important; } .email-form button:disabled, .close-email:disabled { transform: none !important; box-shadow: none !important; } .close-email:disabled { opacity: .54; cursor: wait; } .next-actions-carousel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; } .next-actions-carousel.is-empty { grid-template-columns: minmax(0, 1fr) !important; } .next-action-slide { min-width: 0 !important; } @media (min-width: 1200px) { .next-actions-carousel:not(.is-empty) { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; } .next-action-slide { min-height: 188px !important; padding: 15px !important; } .next-action-slide h3 { font-size: clamp(16px, 1.25vw, 19px) !important; line-height: 1.18 !important; letter-spacing: -.02em !important; } .next-action-slide p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px !important; line-height: 1.48 !important; } .slide-rank { height: 28px !important; min-width: 38px !important; margin-bottom: 10px !important; } .slide-status { margin-bottom: 8px !important; } .slide-meta { gap: 6px !important; margin-top: 12px !important; } .slide-meta span { padding: 6px 8px !important; font-size: 10px !important; } } @media (min-width: 900px) and (max-width: 1199px) { .next-actions-carousel:not(.is-empty) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 761px) and (max-width: 899px) { .next-actions-carousel:not(.is-empty) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .next-actions-carousel:not(.is-empty) { grid-template-columns: minmax(0, 1fr) !important; } } /* Final mobile responsiveness pass: 390px/430px iPhone layout without overlap. */ html, body { max-width: 100%; overflow-x: hidden !important; } *, *::before, *::after { box-sizing: border-box; } @media (max-width: 640px) { html, body { width: 100%; overflow-x: hidden !important; } body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .vx-header { position: sticky; } .vx-header-inner { width: 100% !important; min-height: 0 !important; padding: 10px 16px 12px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "brand" "actions" !important; row-gap: 9px !important; align-items: center !important; justify-items: stretch !important; } .vx-brand { grid-area: brand; min-width: 0 !important; width: 100% !important; gap: 10px !important; justify-content: flex-start !important; } .vx-logo-mark { flex: 0 0 auto !important; transform: scale(.82); transform-origin: left center; margin-right: 32px !important; } .vx-brand-text { min-width: 0 !important; } .vx-title { font-size: 16px !important; line-height: 1.1 !important; white-space: nowrap !important; } .vx-sub { font-size: 9px !important; letter-spacing: .08em !important; white-space: nowrap !important; } .vx-header-actions { grid-area: actions; width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; justify-content: stretch !important; } .momentum-strip { grid-column: 1 / span 2; justify-self: start; width: auto; max-width: 100%; height: 32px; padding: 0 9px; gap: 7px; } .momentum-full, #momentumStreakFull { display: none; } .momentum-short, #momentumStreakShort { display: inline; } .momentum-title { font-size: 9px; letter-spacing: .12em; } .momentum-days { gap: 3px; height: 22px; } .momentum-day { width: 7px; height: 20px; } .momentum-streak { font-size: 11px; } .momentum-tooltip { right: auto; left: 0; width: min(230px, calc(100vw - 32px)); } body.is-authenticated .vx-logout-header-btn { grid-column: 3; } .vx-register-btn, .vx-login-btn, .vx-logout-header-btn { width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; padding: 0 8px !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; border-radius: 999px !important; } .shell { width: 100% !important; max-width: 100% !important; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)) !important; margin: 0 !important; overflow-x: hidden !important; } .metrics { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 14px !important; overflow: visible !important; } .metric { min-width: 0 !important; padding: 14px 14px 13px !important; border-radius: 18px !important; } .metric span { font-size: 9px !important; letter-spacing: .08em !important; } .metric strong { margin-top: 5px !important; font-size: 24px !important; line-height: 1 !important; } .today-card.full-width-vantage, .today-card { width: 100% !important; min-height: 128px !important; padding: 18px !important; border-radius: 22px !important; overflow: hidden !important; } .today-card span { font-size: 9.5px !important; letter-spacing: .08em !important; } .today-card strong { margin-top: 8px !important; font-size: 20px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; overflow-wrap: anywhere !important; } .today-card small { margin-top: 10px !important; font-size: 12px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } .flow-ai-hero, .hero-panel.ask-ai-panel, .top-ask-ai-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .top-ask-ai-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "lockup" "title" "copy" "box" !important; align-items: start !important; row-gap: 12px !important; padding: 18px !important; border-radius: 22px !important; overflow: visible !important; } .top-ask-ai-panel .assistant-flow-lockup { grid-area: lockup !important; position: static !important; display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; } .top-ask-ai-panel .assistant-flow-lockup strong { font-size: 12px !important; line-height: 1.1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .top-ask-ai-panel .assistant-flow-lockup small { font-size: 10px !important; line-height: 1.1 !important; } .top-ask-ai-panel h2 { grid-area: title !important; max-width: 100% !important; margin: 0 !important; font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -.02em !important; overflow-wrap: normal !important; } .top-ask-ai-panel .ask-ai-copy { grid-area: copy !important; max-width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; } .top-ask-ai-panel .ask-ai-box { grid-area: box !important; width: 100% !important; max-width: 100% !important; padding: 12px !important; gap: 10px !important; border-radius: 18px !important; overflow: visible !important; } .top-ask-ai-panel .ask-ai-answer { width: 100% !important; min-height: 96px !important; padding: 12px !important; border-radius: 16px !important; font-size: 12px !important; line-height: 1.45 !important; } .top-ask-ai-panel .ask-ai-answer strong { font-size: 13px !important; line-height: 1.25 !important; } .top-ask-ai-panel .ask-ai-input-row { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "input" "actions" !important; gap: 8px !important; } .top-ask-ai-panel .ask-ai-input-row textarea#askAiInput { grid-column: auto !important; width: 100% !important; min-width: 0 !important; min-height: 86px !important; max-height: none !important; padding: 12px !important; border-radius: 14px !important; font-size: 13px !important; line-height: 1.4 !important; } .top-ask-ai-panel .ask-ai-actions { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; } .top-ask-ai-panel .ask-ai-actions #askAiBtn, .top-ask-ai-panel .ask-ai-actions #askAiClearBtn { height: 40px !important; min-height: 40px !important; border-radius: 999px !important; align-self: center !important; } .top-ask-ai-panel .ask-ai-actions #askAiBtn { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; padding: 0 12px !important; font-size: 12px !important; justify-content: center !important; } .top-ask-ai-panel .ask-ai-actions #askAiClearBtn { flex: 0 0 auto !important; width: auto !important; min-width: 78px !important; padding: 0 14px !important; font-size: 12px !important; justify-content: center !important; } } @media (max-width: 380px) { .metrics { grid-template-columns: minmax(0, 1fr) !important; } .vx-header-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Notes Workspace */ .notes-workspace { display: block; width: 100%; margin: 10px 0 18px; } .notes-editorial, .notes-wall-shell { border: 1px solid rgba(226,232,240,.92); background: linear-gradient(180deg, rgba(255,253,246,.98), rgba(255,250,232,.88)), radial-gradient(circle at 0% 0%, rgba(255,232,151,.18), transparent 34%); box-shadow: var(--shadow-md); border-radius: 30px; } .notes-editorial { position: sticky; top: 92px; align-self: start; padding: 18px; overflow: hidden; } .notes-editorial::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--cw-warning), var(--cw-warning-bg) 38%, var(--cw-accent-tint) 72%, var(--cw-accent-tint)); } .notes-identity { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--cw-text); font-size: 11.5px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; } .notes-mark { width: 34px; height: 34px; filter: drop-shadow(0 10px 20px rgba(215,168,63,.14)); } .notes-editorial h2 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.04; letter-spacing: -.9px; font-weight: 650; } .notes-editorial p:not(.eyebrow) { margin: 12px 0 0; color: var(--vx-muted); font-size: 14px; line-height: 1.62; } .notes-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; margin-top: 16px; } .notes-canvas-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1 1 520px; } .notes-actions button, .notes-quick-capture button, .notes-add-btn, .notes-scope-clear, .note-execution-tools button { min-height: 38px; padding: 0 13px; background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)); color: var(--cw-surface); border-color: transparent; font-size: 12px; font-weight: 800; } .notes-search-wrap input, .notes-canvas-controls select, .notes-actions select, .notes-quick-capture textarea { width: 100%; } .notes-search-wrap input { width: clamp(130px, 13vw, 190px); height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.72); } .notes-canvas-controls select { width: auto; max-width: 160px; height: 34px; padding: 0 28px 0 11px; border-radius: 999px; color: var(--cw-warning); background: rgba(255,255,255,.78); font-size: 12px; font-weight: 750; } .notes-add-btn { width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 21px; line-height: 1; box-shadow: 0 12px 24px rgba(21,26,35,.16); } .notes-scope-clear { min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--cw-accent-text); border-color: rgba(226,232,240,.96); box-shadow: none; } .notes-actions select { height: 38px; padding: 0 13px; border-radius: 999px; color: var(--cw-warning); background: rgba(255,255,255,.78); font-size: 12px; font-weight: 750; } .notes-quick-capture { display: grid; gap: 8px; margin-top: 12px; } .notes-quick-capture textarea { min-height: 104px; padding: 13px; border-radius: 20px; resize: vertical; font-size: 13px; line-height: 1.5; } .notes-wall-shell { min-width: 0; width: 100%; height: clamp(610px, 68vh, 780px); padding: 16px; display: flex; flex-direction: column; align-self: start; position: relative; overflow: hidden; } .notes-wall-shell::after { content: "Scroll for more"; position: absolute; right: 21px; bottom: 12px; padding: 5px 9px; border: 1px solid rgba(229,191,92,.26); border-radius: 999px; color: rgba(111,84,32,.82); background: linear-gradient(180deg, rgba(255,253,246,.94), rgba(255,248,224,.86)); box-shadow: 0 10px 24px rgba(128,100,40,.08); font-size: 9.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .notes-wall-shell.is-scrollable::before { content: ""; position: absolute; left: 13px; right: 20px; bottom: 13px; height: 54px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,250,232,0), rgba(255,250,232,.94)); } .notes-wall-shell.is-scrollable::after { z-index: 2; opacity: 1; transform: translateY(0); } .notes-wall-shell.is-at-end::before, .notes-wall-shell.is-at-end::after { opacity: 0; } .notes-wall-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 2px 4px 16px; border-bottom: 1px solid rgba(226,232,240,.72); margin-bottom: 14px; } .notes-wall-title { min-width: 260px; display: grid; gap: 8px; } .notes-header-brand { display: flex; align-items: center; gap: 10px; } .notes-header-brand span { display: block; color: var(--cw-text); font-size: 18px; font-weight: 850; letter-spacing: .02em; } .notes-header-brand em { display: inline-flex; margin-top: 3px; padding: 4px 8px; border: 1px solid rgba(229,191,92,.28); border-radius: 999px; background: rgba(255,248,224,.68); color: var(--cw-warning); font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .04em; } .notes-title-meta { display: grid; gap: 2px; } .notes-wall-head span { display: block; color: var(--vx-ink); font-size: 13px; font-weight: 850; } .notes-wall-head small { display: block; margin-top: 2px; color: var(--vx-muted); font-size: 11px; line-height: 1.35; text-align: left; } .notes-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 214px; gap: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1px 3px 42px 0; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.42) transparent; } .notes-wall::-webkit-scrollbar { width: 7px; } .notes-wall::-webkit-scrollbar-track { background: transparent; } .notes-wall::-webkit-scrollbar-thumb { background: rgba(148,163,184,.34); border-radius: 999px; } .note-card { display: block; width: 100%; height: 214px; margin: 0; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; border: 1px solid rgba(226,232,240,.9); border-radius: 18px; padding: 15px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,252,242,.92)); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 28px rgba(128,100,40,.07); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* Thin, flat Apple-style section header (TODAY / Yesterday / …). No pill: no filled background, no border-radius — just a small muted-grey label sitting on a hairline divider that spans the column. Shared by list + gallery views. */ .note-topic-group { display: flex; width: 100%; margin: 0; padding: 14px 2px 5px; grid-column: 1 / -1; align-items: center; break-inside: avoid; -webkit-column-break-inside: avoid; color: var(--cw-date-bar-text); border-bottom: 0.5px solid var(--cw-date-bar-border); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .note-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(16,24,40,.09); border-color: rgba(var(--brand-rgb),.24); } .note-card.theme-paper, .note-card.theme-ruled, .note-card.theme-legal { background: var(--cw-paper-bg); } .note-card.theme-white { background: var(--cw-surface); } .note-card.theme-pearl { background: linear-gradient(180deg, var(--cw-warning-bg), var(--cw-accent-tint)); } .note-card.theme-cream { background: linear-gradient(180deg, var(--cw-surface), var(--cw-surface-muted)); } .note-card.theme-champagne { background: linear-gradient(180deg, var(--cw-surface), var(--cw-accent-tint)); } .note-card.theme-silver { background: linear-gradient(180deg, var(--cw-surface-muted), var(--cw-accent-tint)); } .note-card.theme-lavender { background: linear-gradient(180deg, var(--cw-accent-tint), var(--cw-accent-tint)); } .note-card.theme-blue { background: linear-gradient(180deg, var(--cw-accent-tint), var(--cw-accent-tint)); } .note-card.theme-graphite { background: linear-gradient(180deg, var(--cw-surface-muted), var(--cw-border)); } .note-card.small, .note-card.medium, .note-card.large { height: 214px; min-height: 214px; max-height: 214px; } .note-card.is-pinned { border-color: rgba(var(--brand-rgb),.32); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 30px rgba(var(--brand-rgb),.08); } .note-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; } .note-card-tools { display: inline-flex; align-items: center; gap: 5px; } .note-card-kicker { color: var(--cw-text-muted); font-size: 9.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .note-pin-btn { width: 25px; height: 25px; min-height: 25px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--cw-text-muted); background: rgba(255,255,255,.72); box-shadow: none; } .note-delete-btn { width: 25px; height: 25px; min-height: 25px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--cw-accent-text); background: rgba(255,255,255,.54); box-shadow: none; opacity: .42; } .note-delete-btn svg { width: 13px; height: 13px; } .note-card:hover .note-delete-btn, .note-delete-btn:focus-visible { opacity: 1; color: var(--cw-danger); background: rgba(254,242,242,.9); } .note-pin-btn.active { color: var(--cw-surface); background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); } .note-card h3 { margin: 0; color: var(--cw-text); font-size: 16px; line-height: 1.16; letter-spacing: -.25px; font-weight: 760; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .note-card p { margin: 8px 0 0; color: var(--cw-text-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; mask-image: linear-gradient(to bottom, black 78%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%); } .note-topic-pill { display: inline-flex; max-width: 100%; margin-top: 8px; padding: 4px 7px; border-radius: 999px; color: var(--cw-warning); background: rgba(255,240,184,.72); border: 1px solid rgba(229,191,92,.34); font-size: 10px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .note-linked-badge { display: inline-flex; max-width: 100%; margin-top: 8px; padding: 4px 7px; border-radius: 999px; color: var(--cw-accent-text); background: rgba(219,234,254,.74); border: 1px solid rgba(147,197,253,.5); font-size: 10px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .note-tags span { max-width: 110px; padding: 5px 7px; border: 1px solid rgba(226,232,240,.92); border-radius: 999px; background: rgba(255,255,255,.68); color: var(--cw-text-muted); font-size: 10px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; color: var(--cw-text-muted); font-size: 10.5px; font-weight: 750; } .note-card-meta span { padding: 5px 7px; border-radius: 999px; background: rgba(241,245,249,.78); } .note-empty-card { cursor: default; } .note-empty-cta { min-height: 34px; margin-top: 12px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)); color: var(--cw-surface); font-size: 12px; font-weight: 850; } .note-editor-panel { /* Apple-Notes-style flat sheet: full-bleed over the notes view, no rounded card, no shadow, no backdrop blur — just the flat continuous surface. */ position: fixed; inset: 0; z-index: 185; width: 100%; max-width: none; overflow: auto; padding: 16px; border: 0; border-radius: 0; background: var(--cw-note-surface); color: var(--cw-paper-ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateX(0); transition: transform .2s ease, opacity .2s ease; } .note-editor-hidden { opacity: 0; pointer-events: none; transform: translateX(16px); } .note-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .mini-label { display: block; color: var(--cw-text-muted); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .note-editor-head strong { display: block; margin-top: 3px; font-size: 18px; letter-spacing: -.25px; } #closeNoteEditor { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--cw-surface); color: var(--cw-text-muted); } /* Title row: title fills the left, the "Open in Google Docs" link sits far right. Wraps gracefully (docs link drops below) on narrow widths. */ .note-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; } .note-title-input { flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 18px; font-size: 18px; font-weight: 760; letter-spacing: -.25px; } .note-body-shell { position: relative; margin-top: 9px; } .note-body-input { width: 100%; min-height: 190px; max-height: 42vh; margin-top: 0; padding: 14px 54px 14px 14px; border-radius: 20px; resize: vertical; font-size: 14px; line-height: 1.58; } /* ============================================================ Clik Work note body — slim formatting + text-size toolbar, and Toast UI Editor (WYSIWYG markdown) paper-feel chrome stripping. Tokens only; icon buttons with no boxes. ============================================================ */ .note-fmt-toolbar { /* A simple flat row of quiet monochrome icons — no box, no fill, no divider. */ display: flex; align-items: center; gap: 2px; margin-top: 8px; flex-wrap: wrap; border: 0; background: none; box-shadow: none; } .note-fmt-group { display: inline-flex; align-items: center; gap: 2px; } /* Muted timestamp — sits at the LEFT of the controls row, matching the small, quiet size of the A-/A/A+ buttons. */ .note-editor-timestamp { flex: 0 1 auto; min-width: 0; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--cw-text-subtle); } .note-editor-timestamp[hidden] { display: none; } /* Body-font picker — quiet flat select, same monochrome family as A-/A/A+. */ .note-font { display: inline-flex; align-items: center; } .note-font-select { height: 28px; max-width: 96px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--cw-text-muted); font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s ease, color .15s ease; } .note-font-select:hover { background: var(--cw-surface-hover); color: var(--cw-text); } .note-font-select:focus-visible { outline: none; background: var(--cw-surface-hover); color: var(--cw-text); } .note-fmt-spacer { flex: 1 1 auto; min-width: 10px; } /* .rte-toolbar / .rte-btn are rendered by the shared rich-text editor module. */ .rte-toolbar { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; } .note-fmt-btn, .rte-btn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--cw-text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .note-fmt-btn svg, .rte-btn svg { width: 17px; height: 17px; } .note-fmt-btn:hover, .rte-btn:hover { background: var(--cw-surface-hover); color: var(--cw-text); } .note-fmt-btn:disabled, .rte-btn:disabled { opacity: .4; cursor: default; background: none; } /* Slash-command popup rendered by the shared rich-text editor module. */ .rte-slash-menu { position: fixed; z-index: 1300; min-width: 196px; max-height: 280px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 12px; box-shadow: 0 18px 44px rgba(23, 23, 31, .18); } .rte-slash-menu[hidden] { display: none; } .rte-slash-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--cw-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .rte-slash-item.is-active, .rte-slash-item:hover { background: var(--cw-surface-hover); } .rte-slash-ico { display: grid; place-items: center; width: 20px; height: 20px; color: var(--cw-text-muted); } .rte-slash-ico svg { width: 18px; height: 18px; } .rte-slash-label { flex: 1 1 auto; } .note-textsize { display: inline-flex; align-items: center; gap: 2px; } .note-textsize-btn { min-width: 28px; height: 28px; padding: 0 6px; display: inline-flex; align-items: baseline; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--cw-text-muted); font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .note-textsize-btn[data-textsize="s"] span { font-size: 10px; } .note-textsize-btn[data-textsize="l"] span { font-size: 15px; } .note-textsize-btn:hover { background: var(--cw-surface-hover); color: var(--cw-text); } .note-textsize-btn.is-active { background: var(--cw-accent-tint, var(--cw-surface-hover)); color: var(--cw-accent-text); } /* Editor mount + Quill chrome stripping (borderless, transparent paper sheet). */ .note-body-editor { --rte-font: 16px; width: 100%; min-height: 200px; } .note-body-editor[hidden] { display: none !important; } .note-body-input[hidden] { display: none !important; } .note-body-editor.ql-container { border: 0; background: none; font-family: inherit; font-size: var(--rte-font, 16px); } .note-body-editor .ql-editor { padding: 0; min-height: 200px; font-family: inherit; font-size: var(--rte-font, 16px); line-height: 1.7; color: var(--cw-paper-ink); /* warm ink on the paper sheet */ caret-color: var(--cw-paper-ink); } .note-body-editor .ql-editor.ql-blank::before { left: 0; right: 0; color: var(--cw-paper-ink-soft); opacity: .7; font-style: normal; content: attr(data-placeholder); } .note-body-editor .ql-editor h1, .note-body-editor .ql-editor h2, .note-body-editor .ql-editor h3, .note-body-editor .ql-editor strong { color: var(--cw-paper-ink); } .note-body-editor .ql-editor h1 { font-size: 1.6em; line-height: 1.25; margin: .5em 0 .3em; } .note-body-editor .ql-editor h2 { font-size: 1.35em; line-height: 1.3; margin: .5em 0 .3em; } .note-body-editor .ql-editor h3 { font-size: 1.15em; line-height: 1.35; margin: .5em 0 .3em; } .note-body-editor .ql-editor a { color: var(--cw-accent-text); } .note-body-editor .ql-editor blockquote { border-left: 3px solid var(--cw-paper-margin, rgba(0,0,0,.18)); margin: .5em 0; padding: .1em 0 .1em 14px; color: var(--cw-paper-ink-soft); } .note-body-editor .ql-editor pre, .note-body-editor .ql-editor pre.ql-syntax { background: var(--cw-surface-muted); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cw-paper-ink); } .note-body-editor .ql-editor code { background: var(--cw-surface-muted); border-radius: 4px; padding: .08em .35em; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .note-body-editor .ql-editor hr { border: 0; border-top: 1px solid var(--cw-paper-margin, rgba(0,0,0,.18)); margin: .9em 0; } .note-body-editor.rte-readonly { opacity: .92; } .note-body-editor.rte-readonly .ql-editor { caret-color: transparent; } /* Our toolbar lives in the note header (#noteFmtMount); flatten Quill's snow chrome and tint the controls to the muted/accent theme. */ .note-fmt-toolbar .ql-toolbar.ql-snow { border: 0; padding: 0; background: none; } .note-fmt-toolbar .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; } /* The --cw-* tokens resolve EMPTY in the Quill SVG context, so an unfallbacked `stroke: var(--cw-text-muted)` becomes invalid and the icons inherit stroke:none (invisible). The hex fallbacks keep the icons painted in that context while the token stays primary everywhere it does resolve. */ .note-fmt-toolbar .ql-toolbar .ql-stroke { stroke: var(--cw-text-muted, #5b5b66); } .note-fmt-toolbar .ql-toolbar .ql-fill { fill: var(--cw-text-muted, #5b5b66); } .note-fmt-toolbar .ql-toolbar .ql-picker { color: var(--cw-text-muted, #5b5b66); } .note-fmt-toolbar .ql-toolbar button:hover .ql-stroke, .note-fmt-toolbar .ql-toolbar button.ql-active .ql-stroke, .note-fmt-toolbar .ql-toolbar .ql-picker-label:hover .ql-stroke, .note-fmt-toolbar .ql-toolbar .ql-picker-item:hover .ql-stroke { stroke: var(--cw-accent, #5b5fc7); } .note-fmt-toolbar .ql-toolbar button:hover .ql-fill, .note-fmt-toolbar .ql-toolbar button.ql-active .ql-fill { fill: var(--cw-accent, #5b5fc7); } .note-fmt-toolbar .ql-toolbar button:hover, .note-fmt-toolbar .ql-toolbar .ql-picker-label:hover { color: var(--cw-accent-text, #4f52b2); } .note-fmt-toolbar .ql-toolbar button.ql-customColor, .note-fmt-toolbar .ql-toolbar button.ql-divider { width: 28px; padding: 3px 5px; } .note-fmt-toolbar.rte-toolbar-disabled .ql-toolbar, .note-fmt-group .rte-toolbar-disabled { opacity: .4; pointer-events: none; } /* Quill dropdown panels (header sizes, colour palettes) + link tooltip — themed with --cw-* tokens so they flip with dark mode (Quill ships light-only chrome). */ .note-fmt-toolbar .ql-picker-label { color: var(--cw-text-muted, #5b5b66); } .note-fmt-toolbar .ql-picker-label::before { color: var(--cw-text-muted, #5b5b66); } .note-fmt-toolbar .ql-picker-options { background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 10px; box-shadow: 0 16px 40px rgba(15,23,42,.18); } .note-fmt-toolbar .ql-picker.ql-header .ql-picker-item { color: var(--cw-text, #262433); } .note-fmt-toolbar .ql-picker.ql-header .ql-picker-item:hover, .note-fmt-toolbar .ql-picker.ql-header .ql-picker-label:hover { color: var(--cw-accent-text, #4f52b2); } #noteEditorPanel .ql-snow .ql-tooltip { background: var(--cw-surface); color: var(--cw-text); border: 1px solid var(--cw-border); border-radius: 10px; box-shadow: 0 16px 40px rgba(15,23,42,.18); } #noteEditorPanel .ql-snow .ql-tooltip input[type=text] { background: var(--cw-surface-muted); color: var(--cw-text); border: 1px solid var(--cw-border); border-radius: 6px; } #noteEditorPanel .ql-snow .ql-tooltip a { color: var(--cw-accent-text); } /* Flat, borderless writing canvas in EVERY state — no purple focus ring or border while editing. Scoped to the note editor (id specificity) + !important so it beats the global input:focus ring and Quill's own container border. */ #noteEditorPanel .note-body-input, #noteEditorPanel .note-body-input:focus, #noteEditorPanel .note-body-input:focus-visible, #noteEditorPanel .note-body-editor, #noteEditorPanel .note-body-editor:focus-within, #noteEditorPanel .note-body-editor.ql-container, #noteEditorPanel .note-body-editor .ql-editor, #noteEditorPanel .note-body-editor .ql-editor:focus, #noteEditorPanel .note-body-editor .ql-editor:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; } /* --- Warm ink for the title + plain-text fallback on the paper sheet --- */ #noteEditorPanel .note-title-input, #noteEditorPanel .note-body-input { color: var(--cw-paper-ink); } #noteEditorPanel .note-title-input::placeholder, #noteEditorPanel .note-body-input::placeholder { color: var(--cw-paper-ink-soft); opacity: .6; } /* --- Optional paper line treatments, driven by the theme picker. High specificity (body.is-notes-focus … .note-body-editor) so they win over the docked-pane padding/background rules. --- */ /* Ruled: very faint horizontal rules, ~28px apart, scrolling with the text. */ body.is-notes-focus #noteEditorPanel[data-note-paper="ruled"] .note-body-editor .ql-editor, body.is-notes-focus #noteEditorPanel[data-note-paper="ruled"] .note-body-input { background-image: repeating-linear-gradient( to bottom, transparent 0, transparent 27px, var(--cw-paper-rule) 27px, var(--cw-paper-rule) 28px); background-attachment: local; } /* Legal pad: a single faint left margin line; text clears it. */ body.is-notes-focus #noteEditorPanel[data-note-paper="legal"] .note-body-editor .ql-editor, body.is-notes-focus #noteEditorPanel[data-note-paper="legal"] .note-body-input { background-image: linear-gradient( to right, transparent 0, transparent 40px, var(--cw-paper-margin) 40px, var(--cw-paper-margin) 41px, transparent 41px); background-repeat: no-repeat; background-attachment: local; padding-left: 52px !important; } .note-refine-btn { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; min-width: 36px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(185,138,54,.22); border-radius: 50%; background: rgba(255,255,255,.86); color: var(--cw-warning); box-shadow: 0 10px 24px rgba(16,24,40,.08); transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease, opacity .15s ease; } .note-refine-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .note-refine-btn:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(185,138,54,.42); background: var(--cw-surface); color: var(--cw-warning); } .note-refine-btn:disabled { cursor: default; opacity: .45; box-shadow: none; } .note-refine-btn.is-loading { pointer-events: none; } .note-refine-btn.is-loading svg { animation: note-refine-spin .8s linear infinite; } @keyframes note-refine-spin { to { transform: rotate(360deg); } } .note-editor-grid, .note-execution-tools { display: grid; gap: 8px; margin-top: 9px; } .note-editor-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 150px; } .note-execution-tools { grid-template-columns: minmax(0, 1fr) auto; } .note-owner-section, .note-people-tags { display: grid; gap: 7px; margin-top: 9px; } .note-owner-card { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid rgba(226,232,240,.88); border-radius: 16px; background: rgba(255,255,255,.72); } .note-owner-card strong { display: block; color: var(--cw-text); font-size: 12px; line-height: 1.2; } .note-owner-card small, .note-helper-copy { display: block; margin: 0; color: var(--cw-text-muted); font-size: 11px; line-height: 1.35; } .note-people-tags .team-picker-empty { min-height: 34px; align-items: center; font-size: 11px; } .note-editor-grid input, .note-editor-grid select, .note-execution-tools select { min-height: 38px; padding: 0 12px; font-size: 12px; } .note-linked-tasks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .note-linked-list { display: flex; flex-wrap: wrap; gap: 6px; } .note-linked-empty, .note-linked-task, .task-linked-note { border: 1px solid rgba(226,232,240,.92); border-radius: 14px; background: rgba(255,255,255,.78); color: var(--cw-text-muted); box-shadow: none; } .note-linked-empty { padding: 9px 11px; font-size: 11px; } .note-linked-task, .task-linked-note { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; max-width: 220px; } .note-linked-task strong, .task-linked-note strong { max-width: 190px; color: var(--cw-text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-linked-task span, .task-linked-note span { color: var(--cw-text-muted); font-size: 10px; } .note-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cw-border); } /* Metadata group that now lives on the bottom action bar (Topic · Tags · Theme · Owner). */ .note-bar-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; } .note-action-primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: 0; border-radius: var(--cw-radius-pill); background: var(--cw-accent); color: var(--cw-text-on-accent); font-weight: 700; cursor: pointer; } .note-action-primary:hover { background: var(--cw-accent-hover); } .note-action-primary svg { width: 18px; height: 18px; } .note-action-icons { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; } .note-action-icon { /* Bare, flat, monochrome icon button — no box; a quiet hover wash only. */ width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--cw-radius-pill); background: none; color: var(--cw-text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .note-action-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .note-action-icon:hover { background: var(--cw-surface-hover); color: var(--cw-text); } .note-action-icon.is-active { background: none; color: var(--cw-accent-text); } .note-action-desktop-only { display: none; } .note-action-danger { color: var(--cw-danger); } .note-action-danger:hover { background: var(--cw-danger-bg); color: var(--cw-danger); } /* Collapsed Owner / Shared-with line */ .note-meta-people { margin-top: 9px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-md); } .note-meta-summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--cw-text-muted); } .note-meta-summary::-webkit-details-marker { display: none; } .note-meta-summary svg { width: 16px; height: 16px; } .note-meta-people[open] .note-meta-summary { border-bottom: 1px solid var(--cw-border); } .note-meta-people-body { padding: 10px 12px; } .note-meta-people-body .note-owner-section { margin-top: 0; } /* Detail-pane empty state + active list card (desktop split) */ /* Purely informational placeholder. pointer-events:none is LOAD-BEARING: with zero notes the centered flex overflow makes this element bleed ~160px above #notesSplit, exactly over the Docs "Connect" bar — it must never eat clicks (the fresh-account "Connect does nothing" bug). */ .note-detail-empty { display: none; pointer-events: none; min-height: 0; } .note-detail-empty[hidden] { display: none !important; } /* Same bug, one level up: while the editor is closed the WHOLE right pane is decorative (placeholder only) and can overlap the toolbar above the split — inert it; interactivity returns the moment a note opens. */ .note-detail-pane:has(> #noteEditorPanel.note-editor-hidden) { pointer-events: none; } .note-detail-empty svg { width: 46px; height: 46px; color: var(--cw-border-strong); } .note-detail-empty p { margin: 0; font-size: 14px; font-weight: 500; } /* Active/selected list row in the Notes focus view. Scoped + !important to beat the flat-row reset (.notes-focus-view .note-card) which forces box-shadow/border off. */ .notes-focus-view .note-card.is-active { background: var(--cw-accent-soft-bg) !important; box-shadow: inset 3px 0 0 0 var(--cw-accent) !important; } .is-col-resizing, .is-col-resizing * { cursor: col-resize !important; user-select: none !important; } .note-editor-message { min-height: 18px; margin-top: 10px; color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.4; } .note-editor-message.success { color: var(--cw-success); } .note-editor-message.error { color: var(--cw-danger); } /* Quiet inline metadata line (Topic / Tags / Theme). Base keeps stacked fields for mobile; the desktop pane (>=769px) makes it borderless + inline. */ .note-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 9px; } .note-meta-field { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 100%; color: var(--cw-text-muted); } .note-meta-field svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--cw-text-subtle); } .note-meta-field input, .note-meta-field select { min-width: 0; min-height: 38px; padding: 0 10px; font-size: 12px; } .note-meta-field input { flex: 1 1 auto; } /* Task-link popover (folded into the footer link icon). A popover may use a box. */ .note-link-pop-wrap { position: relative; display: inline-flex; } .note-link-popover { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; display: flex; align-items: center; gap: 6px; width: 260px; padding: 8px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-md); background: var(--cw-surface); box-shadow: var(--cw-shadow-md); } .note-link-popover[hidden] { display: none; } .note-link-popover select { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 0 10px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-sm); background: var(--cw-surface); color: var(--cw-text); font-size: 12px; } .note-link-pop-go { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: var(--cw-radius-pill); background: var(--cw-accent); color: var(--cw-text-on-accent); font-size: 12px; font-weight: 700; cursor: pointer; } .note-link-pop-go:hover { background: var(--cw-accent-hover); } /* Mind Map Flow Widget */ .vx-mindmap-widget { width: 100%; margin: 10px 0 18px; } .vx-mindmap-widget-link { min-height: 138px; display: grid; grid-template-columns: minmax(250px, .9fr) minmax(280px, 1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid rgba(221,214,254,.78); border-radius: 28px; color: inherit; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,255,.92)), radial-gradient(circle at 8% 0%, rgba(237,233,254,.46), transparent 34%), radial-gradient(circle at 88% 14%, rgba(219,234,254,.36), transparent 34%); box-shadow: 0 18px 58px rgba(88,80,141,.1), inset 0 1px 0 rgba(255,255,255,.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .vx-mindmap-widget-link:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb),.38); box-shadow: 0 22px 64px rgba(88,80,141,.14), inset 0 1px 0 rgba(255,255,255,.88); } .vx-mindmap-widget-copy { min-width: 0; display: flex; align-items: center; gap: 14px; } .vx-mindmap-widget-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(var(--brand-rgb),.46); border-radius: 50%; color: var(--cw-accent-active); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,243,255,.88)); box-shadow: 0 10px 24px rgba(10, 107, 73,.08); } .vx-mindmap-widget-mark svg { width: 34px; height: 34px; } .vx-mindmap-widget h2 { margin: 0; color: var(--cw-text); font-size: 21px; line-height: 1.08; font-weight: 820; letter-spacing: 0; } .vx-mindmap-widget p { margin: 4px 0 0; color: var(--cw-text-muted); font-size: 13px; line-height: 1.35; } .vx-mindmap-widget small { display: block; margin-top: 5px; color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.35; } .vx-mindmap-widget-action { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 0 0 auto; } .vx-mindmap-widget-preview { width: 128px; height: 82px; border-radius: 24px; background: radial-gradient(circle at 50% 50%, rgba(var(--brand-rgb),.08), transparent 54%), rgba(255,255,255,.62); } .vx-mindmap-widget-recent { min-width: 0; align-self: stretch; display: grid; align-content: center; gap: 8px; padding: 2px 2px; } .vx-mindmap-widget-recent-title { display: flex; align-items: center; justify-content: space-between; color: var(--cw-text-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .vx-mindmap-widget-recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .vx-mindmap-widget-recent-item { width: 100%; min-height: 30px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1px; padding: 5px 9px; border: 1px solid rgba(226,221,251,.66); border-radius: 999px; background: rgba(255,255,255,.54); box-shadow: none; text-align: left; } .vx-mindmap-widget-recent-item:hover { border-color: rgba(var(--brand-rgb),.36); background: rgba(255,255,255,.82); box-shadow: 0 10px 22px rgba(88,80,141,.07); } .vx-mindmap-widget-recent-name { min-width: 0; color: var(--cw-text); font-size: 11.5px; font-weight: 820; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-mindmap-widget-recent-meta { color: var(--cw-text-muted); font-size: 10px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vx-mindmap-widget-recent-state { min-height: 36px; display: grid; align-items: center; padding: 0 2px; color: var(--cw-text-muted); font-size: 12px; font-weight: 720; } .vx-mindmap-widget-recent-shimmer { height: 30px; border-radius: 999px; border: 1px solid rgba(226,221,251,.5); background: linear-gradient(90deg, rgba(255,255,255,.48), rgba(245,243,255,.86), rgba(255,255,255,.48)); background-size: 220% 100%; animation: vxMindRecentShimmer 1.35s linear infinite; } .vx-mindmap-widget-recent-shimmer.short { width: 78%; } @keyframes vxMindRecentShimmer { from { background-position: 0% 50%; } to { background-position: 220% 50%; } } .vx-mindmap-widget-cta { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid rgba(17,24,39,.05); border-radius: 999px; background: linear-gradient(135deg, var(--cw-text), var(--cw-text-muted)); color: var(--cw-surface); box-shadow: 0 12px 24px rgba(88,80,141,.18); font-size: 12px; font-weight: 850; white-space: nowrap; } /* Simple Plan Widget */ .vx-simple-plan-widget { width: 100%; margin: 10px 0 18px; } .vx-simple-plan-shell { min-height: 138px; display: grid; grid-template-columns: minmax(250px, .9fr) minmax(360px, 1.1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid rgba(221,214,254,.78); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,250,255,.93)), radial-gradient(circle at 8% 0%, rgba(219,234,254,.42), transparent 34%), radial-gradient(circle at 88% 14%, rgba(237,233,254,.38), transparent 34%); box-shadow: 0 18px 58px rgba(88,80,141,.1), inset 0 1px 0 rgba(255,255,255,.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .vx-simple-plan-copy { min-width: 0; display: flex; align-items: center; gap: 14px; } .vx-simple-plan-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(var(--brand-rgb),.46); border-radius: 50%; color: var(--cw-accent-active); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,243,255,.88)); box-shadow: 0 10px 24px rgba(10, 107, 73,.08); } .vx-simple-plan-mark svg { width: 34px; height: 34px; } .vx-simple-plan-widget h2 { margin: 0; color: var(--cw-text); font-size: 21px; line-height: 1.08; font-weight: 820; letter-spacing: 0; } .vx-simple-plan-widget p { margin: 4px 0 0; color: var(--cw-text-muted); font-size: 13px; line-height: 1.35; } .vx-simple-plan-widget small { display: block; margin-top: 5px; color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.35; } .vx-simple-plan-recent { min-width: 0; display: grid; gap: 8px; } .vx-simple-plan-recent-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--cw-text-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .vx-simple-plan-new { min-height: 30px; padding: 0 12px; border: 1px solid rgba(17,24,39,.05); border-radius: 999px; background: linear-gradient(135deg, var(--cw-text), var(--cw-text-muted)); color: var(--cw-surface); box-shadow: 0 12px 24px rgba(88,80,141,.18); font-size: 11px; font-weight: 850; letter-spacing: 0; text-transform: none; white-space: nowrap; } .vx-simple-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .vx-simple-plan-item { width: 100%; min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(226,221,251,.66); border-radius: 16px; background: rgba(255,255,255,.58); box-shadow: none; text-align: left; } .vx-simple-plan-item:hover { border-color: rgba(var(--brand-rgb),.36); background: rgba(255,255,255,.86); box-shadow: 0 10px 22px rgba(88,80,141,.07); } .vx-simple-plan-name { min-width: 0; color: var(--cw-text); font-size: 11.5px; font-weight: 820; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-simple-plan-meta { margin-top: 2px; color: var(--cw-text-muted); font-size: 10px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vx-simple-plan-open { min-height: 26px; padding: 0 10px; border: 1px solid rgba(var(--brand-rgb),.48); border-radius: 999px; background: rgba(255,255,255,.82); color: var(--cw-accent-active); font-size: 10.5px; font-weight: 850; white-space: nowrap; } .vx-simple-plan-state { min-height: 42px; display: grid; align-items: center; padding: 0 2px; color: var(--cw-text-muted); font-size: 12px; font-weight: 720; } .vx-simple-plan-action { display: flex; align-items: center; justify-content: flex-end; } .vx-simple-plan-preview { width: 128px; height: 82px; border-radius: 24px; background: radial-gradient(circle at 50% 50%, rgba(var(--brand-rgb),.08), transparent 54%), rgba(255,255,255,.62); } .simple-plan-task-pill { color: var(--cw-accent-active) !important; background: var(--cw-accent-tint) !important; border-color: var(--cw-accent-tint) !important; } /* To-Do Workspace */ .todo-workspace { width: 100%; margin: 0; } /* Shell removed — the To-Do sits flat inside the hero focus panel */ .todo-shell { width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } .todo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 0 2px 14px; border-bottom: 1px solid rgba(15,23,42,.08); } .todo-title-block { min-width: 250px; display: grid; gap: 6px; } .todo-brand-line { display: flex; align-items: center; gap: 11px; } .todo-premium-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(var(--brand-rgb),.42); border-radius: 50%; color: var(--cw-accent-active); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,243,255,.88)); box-shadow: 0 10px 24px rgba(10, 107, 73,.08); font-size: 20px; line-height: 1; font-weight: 600; } .todo-title-block h2 { margin: 0; color: var(--cw-text); font-size: 21px; line-height: 1.08; font-weight: 820; letter-spacing: 0; } .todo-title-block p { margin: 3px 0 0; color: var(--cw-text-muted); font-size: 13px; line-height: 1.35; } .todo-title-block small { color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.35; } .todo-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1 1 620px; } .todo-controls input, .todo-controls select, .todo-clear-filters-btn { height: 36px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: var(--cw-surface); color: var(--cw-text-muted); box-shadow: none; font-size: 12px; font-weight: 700; transition: border-color .18s ease, box-shadow .18s ease; } .todo-controls input:focus, .todo-controls select:focus { outline: 0; border-color: rgba(var(--brand-rgb),.45); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); } .todo-controls input { width: clamp(150px, 15vw, 230px); padding: 0 14px; } .todo-controls select { width: auto; max-width: 160px; padding: 0 28px 0 12px; } .todo-clear-filters-btn { padding: 0 14px; color: var(--cw-text-muted); background: var(--cw-surface-muted); box-shadow: none; white-space: nowrap; } .todo-clear-filters-btn:hover { border-color: rgba(var(--brand-rgb),.30); background: var(--cw-surface); color: var(--cw-accent-text); } .todo-add-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); color: var(--cw-surface); box-shadow: 0 10px 24px rgba(var(--brand-rgb),.24); font-size: 21px; line-height: 1; transition: transform .18s ease, box-shadow .18s ease; } .todo-add-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--brand-rgb),.28); } .todo-list { display: grid; gap: 10px; padding-top: 14px; } .todo-list::before { content: "Done Category Date Enter your to-do here Context / Details Actions"; display: grid; grid-template-columns: 44px 128px 108px minmax(0, 1.5fr) minmax(0, .9fr) minmax(314px, 340px); align-items: center; gap: 8px; padding: 0 10px 2px; color: var(--cw-text-subtle); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: pre; } .todo-row { display: grid; grid-template-columns: 44px 128px 108px minmax(0, 1.5fr) minmax(0, .9fr) 52px 142px 104px; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; background: var(--cw-surface); box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 10px 24px rgba(15,23,42,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; } .todo-row:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb),.28); box-shadow: 0 14px 30px rgba(15,23,42,.09); } .todo-row.is-completed { opacity: .62; } .todo-row.is-completed h3, .todo-row.is-completed p { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(100,116,139,.45); } .todo-row.is-editing { align-items: center; border-color: rgba(var(--brand-rgb),.34); background: var(--cw-surface); box-shadow: 0 16px 36px rgba(15,23,42,.10), 0 0 0 3px rgba(var(--brand-rgb),.06); } .todo-row.is-draft { border-style: dashed; } .todo-check { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid rgba(148,163,184,.52); border-radius: 50%; background: rgba(255,255,255,.84); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .todo-check[aria-pressed="true"] { border-color: rgba(21,128,61,.32); background: linear-gradient(135deg, var(--cw-success), var(--cw-success)); box-shadow: 0 9px 18px rgba(4,120,87,.16); } .todo-check[aria-pressed="true"]::after { content: ""; display: block; width: 8px; height: 12px; margin: 4px auto 0; border: solid var(--cw-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); } .todo-row-main { min-width: 0; } .todo-topic-pill, .todo-due-pill, .todo-task-created { display: inline-flex; width: 100%; max-width: 100%; min-height: 30px; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; line-height: 1; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .todo-topic-pill { color: var(--cw-accent-active); border: 1px solid rgba(var(--brand-rgb),.22); background: rgba(var(--brand-rgb),.07); } .todo-topic-input, .todo-due-input, .todo-title-inline, .todo-description-inline { width: 100%; min-width: 0; border: 1px solid rgba(15,23,42,.10); background: var(--cw-surface); color: var(--cw-text); box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; } .todo-topic-input:focus, .todo-due-input:focus, .todo-title-inline:focus, .todo-description-inline:focus { outline: 0; border-color: rgba(var(--brand-rgb),.45); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); } .todo-topic-input, .todo-due-input { width: 100%; max-width: 100%; height: 32px; min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 850; } .todo-topic-input { color: var(--cw-accent-active); background: rgba(var(--brand-rgb),.07); } .todo-title-inline { height: 34px; padding: 0 11px; border-radius: 13px; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .todo-title-cell { position: relative; min-width: 0; } .todo-title-counter { position: absolute; right: 9px; bottom: -12px; color: var(--cw-text-subtle); font-size: 9px; font-weight: 760; line-height: 1; opacity: 0; pointer-events: none; } .todo-title-cell:focus-within .todo-title-counter, .todo-row.is-editing .todo-title-counter { opacity: .74; } .todo-description-inline { height: 34px; min-height: 34px; max-height: 66px; padding: 8px 11px; border-radius: 13px; resize: none; overflow: auto; font-size: 12.5px; line-height: 1.42; } .todo-due-pill { color: var(--cw-text-muted); border: 1px solid rgba(203,213,225,.74); background: rgba(248,250,252,.82); } .todo-task-created { color: var(--cw-accent-text); border: 1px solid rgba(110,231,183,.5); background: rgba(236,253,245,.88); } .todo-row h3 { margin: 0; color: var(--cw-text); font-size: 12.5px; line-height: 1.35; font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .todo-row p { margin: 0; color: var(--cw-text-muted); font-size: 12.5px; line-height: 1.35; max-height: 34px; overflow: hidden; overflow-wrap: anywhere; } .todo-done-btn, .todo-convert-btn, .todo-delete-btn { min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: var(--cw-surface); color: var(--cw-text-muted); box-shadow: none; font-size: 11px; font-weight: 800; transition: border-color .18s ease, color .18s ease, background .18s ease; } .todo-done-btn:hover, .todo-convert-btn:hover { border-color: rgba(var(--brand-rgb),.30); color: var(--cw-accent-text); } .todo-done-btn, .todo-convert-btn { white-space: nowrap; } .todo-convert-btn { min-width: 140px; min-height: 36px; padding-inline: 16px; color: var(--cw-text); background: var(--cw-surface-muted); } .todo-done-btn:disabled, .todo-convert-btn:disabled { color: var(--cw-success); cursor: default; } .todo-delete-btn { width: 30px; min-width: 30px; padding: 0 !important; color: var(--cw-accent-text) !important; justify-self: end; } .todo-delete-confirm-cell { display: inline-flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; overflow: hidden; } .todo-delete-confirm-btn, .todo-delete-cancel-btn { min-width: 0; height: 30px; min-height: 30px; padding: 0 10px; border-radius: 999px; box-shadow: none; font-size: 10.5px; font-weight: 850; line-height: 1; white-space: nowrap; } .todo-delete-confirm-btn { color: var(--cw-danger); background: rgba(255,255,255,.82); border: 1px solid rgba(248,113,113,.46); box-shadow: 0 6px 14px rgba(185,28,28,.06); } .todo-delete-cancel-btn { color: var(--cw-text-muted); background: rgba(255,255,255,.76); border: 1px solid rgba(203,213,225,.78); box-shadow: 0 6px 14px rgba(15,23,42,.04); } .todo-empty-card { min-height: 132px; padding: 18px; display: grid; align-content: center; gap: 6px; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; background: var(--cw-surface); box-shadow: 0 10px 24px rgba(15,23,42,.05); } .todo-empty-card span { color: var(--cw-text-muted); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .todo-empty-card strong { color: var(--cw-text); font-size: 16px; font-weight: 820; } .todo-empty-card p { margin: 0; color: var(--cw-text-muted); font-size: 13px; line-height: 1.45; } /* ========================================================= To-Do focus view — full-screen, calm, Apple Reminders feel ========================================================= */ .todo-focus-view { --todo-accent: var(--cw-accent); --todo-ink: var(--cw-text); --todo-muted: var(--cw-text-muted); --todo-sep: var(--cw-border); position: fixed; inset: 0; z-index: 1000; background: var(--cw-surface); overflow-y: auto; -webkit-overflow-scrolling: touch; } .todo-focus-view[hidden] { display: none !important; } body.is-todo-focus { overflow: hidden; } /* Strip all top navigation / header chrome while the focus view is open */ body.is-todo-focus .vx-header { display: none !important; } body.is-todo-focus #authScreen { z-index: 1001; } .todo-focus-inner { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(18px, 3vw, 32px) clamp(18px, 4vw, 28px) 120px; display: grid; gap: 18px; } .todo-hidden-control { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } /* Top bar: back arrow + discreet tools */ .todo-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .todo-focus-tools { display: flex; align-items: center; gap: 4px; } .todo-focus-back { width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--todo-ink); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .todo-focus-back svg { width: 26px; height: 26px; } .todo-focus-back:hover { color: var(--todo-accent); background: rgba(var(--brand-rgb),.07); } .todo-icon-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cw-text-muted); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .todo-icon-btn svg { width: 21px; height: 21px; } .todo-icon-btn:hover, .todo-icon-btn.is-active { color: var(--todo-accent); background: rgba(var(--brand-rgb),.09); } .todo-options { position: relative; } .todo-options-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; display: grid; gap: 12px; width: 232px; padding: 14px; border: 1px solid var(--todo-sep); border-radius: 16px; background: var(--cw-surface); box-shadow: 0 18px 48px rgba(0,0,0,.14); } .todo-options-menu[hidden] { display: none; } .todo-option-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--todo-muted); } .todo-option-field select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: var(--cw-surface); color: var(--todo-ink); font-size: 13px; font-weight: 600; } .todo-option-field select:focus { outline: 0; border-color: rgba(var(--brand-rgb),.5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.14); } /* Title block */ .todo-focus-head { margin-top: 2px; } .todo-focus-title { margin: 0; font-size: clamp(28px, 4.4vw, 36px); line-height: 1.05; font-weight: 760; letter-spacing: -.02em; color: var(--todo-ink); } .todo-focus-subtitle { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 500; color: var(--todo-muted); } /* Google Tasks: connected status bar (below the subtitle). */ .todo-tasks-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--todo-muted); } .todo-tasks-status[hidden] { display: none; } /* "Sync now" sits ADJACENT to the status text (gap), never detached at the far page edge — the text must not stretch. */ .todo-tasks-status-text { flex: 0 1 auto; min-width: 0; } .todo-tasks-sync-btn { border: 1px solid var(--lp-purple, var(--cw-accent)); background: transparent; color: var(--lp-purple, var(--cw-accent)); border-radius: 999px; padding: 4px 14px; font-size: 12.5px; font-weight: 650; cursor: pointer; } .todo-tasks-sync-btn:hover { background: var(--lp-purple-tint, var(--cw-accent-tint)); } .todo-tasks-sync-btn:disabled { opacity: .6; cursor: default; } /* Google Tasks: subtle, non-blocking connect prompt (above the list). */ .todo-tasks-connect { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 9px 13px; border: 1px dashed var(--lp-purple, var(--cw-accent)); border-radius: 10px; background: var(--lp-purple-tint, var(--cw-accent-tint)); font-size: 13px; } .todo-tasks-connect[hidden] { display: none; } .todo-tasks-connect-icon { display: inline-flex; color: var(--lp-purple, var(--cw-accent)); } .todo-tasks-connect-icon svg { width: 18px; height: 18px; } .todo-tasks-connect-text { flex: 1; font-weight: 600; color: var(--todo-ink, var(--cw-text)); } .todo-tasks-connect-btn { border: 0; border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700; color: var(--cw-surface); background: var(--lp-purple, var(--cw-accent)); cursor: pointer; } .todo-tasks-connect-btn:hover { filter: brightness(1.05); } .todo-tasks-connect-btn:disabled { opacity: .6; cursor: default; } /* "G" badge on todos that came from Google Tasks. */ .todo-gtasks-badge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 10.5px; font-weight: 800; line-height: 1; } /* Inline expanding search */ .todo-search-wrap { position: relative; display: flex; align-items: center; animation: todoSearchIn .18s ease; } .todo-search-wrap[hidden] { display: none; } .todo-search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--todo-muted); pointer-events: none; } .todo-search-wrap input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 0; border-radius: 12px; background: var(--cw-surface-muted); color: var(--todo-ink); font-size: 15px; font-weight: 500; } .todo-search-wrap input::placeholder { color: var(--todo-muted); } .todo-search-wrap input:focus { outline: 0; background: var(--cw-surface); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18); } @keyframes todoSearchIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Category pills */ .todo-topic-pills { display: flex; flex-wrap: wrap; gap: 8px; } .todo-pill { padding: 6px 14px; border: 0; border-radius: 999px; background: var(--cw-surface-muted); color: var(--cw-text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .todo-pill:hover { background: var(--cw-accent-tint); } .todo-pill.is-active { background: var(--todo-accent); color: var(--cw-surface); } /* Apple-style inline add row */ .todo-add-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--todo-sep); background: none; cursor: pointer; text-align: left; } .todo-add-row-circle { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.6px dashed rgba(var(--brand-rgb),.5); transition: background .15s ease, border-color .15s ease; } .todo-add-row-label { font-size: 16px; font-weight: 500; color: var(--todo-muted); transition: color .15s ease; } .todo-add-row:hover .todo-add-row-label { color: var(--todo-accent); } .todo-add-row:hover .todo-add-row-circle { border-style: solid; border-color: var(--todo-accent); background: rgba(var(--brand-rgb),.08); } /* List — borderless rows, thin separators */ .todo-focus-view .todo-list { display: block; gap: 0; padding: 0; margin-top: -8px; } .todo-focus-view .todo-list::before { content: none; display: none; } .todo-focus-view .todo-row { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--todo-sep); border-radius: 0; background: none; box-shadow: none; transition: none; } .todo-focus-view .todo-row:hover { transform: none; box-shadow: none; border-color: var(--todo-sep); background: none; } .todo-focus-view .todo-row:last-child { border-bottom: 0; } .todo-focus-view .todo-row.is-completed { opacity: 1; } .todo-focus-view .todo-row.is-completed .todo-row-title { color: var(--todo-muted); } .todo-focus-view .todo-check { flex: 0 0 auto; align-self: center; width: 24px; height: 24px; min-height: 24px; border: 1.7px solid rgba(60,60,67,.3); background: var(--cw-surface); box-shadow: none; } .todo-focus-view .todo-check[aria-pressed="true"] { border-color: var(--todo-accent); background: var(--todo-accent); box-shadow: none; } .todo-focus-view .todo-row-body { flex: 1 1 auto; align-self: center; min-width: 0; display: grid; gap: 5px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .todo-focus-view .todo-row-title { margin: 0; font-size: 17px; line-height: 1.32; font-weight: 500; color: var(--todo-ink); letter-spacing: -.01em; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .todo-focus-view .todo-row-desc { margin: 0; max-height: none; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--todo-muted); overflow-wrap: anywhere; } .todo-focus-view .todo-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; } .todo-focus-view .todo-row-meta .todo-topic-pill, .todo-focus-view .todo-row-meta .todo-due-pill, .todo-focus-view .todo-row-meta .todo-task-created { width: auto; min-height: 0; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } /* Row actions sit on their own line at the bottom-right of the row, just above the divider. The full top row is freed for the title; the reserved action row keeps single- and multi-line titles aligned. Hover/focus reveals them. Shared by To-Dos + Reminders so the two modules stay consistent. */ /* Notes-pattern action column (mirrors .note-row-actions): a flex item pinned right, single horizontal row, vertically centred. It stays in flow (flex:0 0 auto) so it always reserves its intrinsic width — the title (flex:1; min-width:0) can never slide under the icons. Revealed on hover/focus. */ .todo-focus-view .todo-row-actions, .reminder-focus-view .reminder-row-actions { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .15s ease; } .todo-focus-view .todo-row:hover .todo-row-actions, .todo-focus-view .todo-row:focus-within .todo-row-actions, .todo-focus-view .todo-row.is-delete-pending .todo-row-actions { opacity: 1; } .todo-focus-view .todo-row-actions .todo-convert-btn { min-width: 0; min-height: 40px; padding: 0 14px; font-size: 11px; } /* Share = icon-only button (To-Dos + Reminders), not a text label. */ .todo-focus-view .todo-row-actions .vxshare-trigger, .reminder-focus-view .reminder-row-actions .vxshare-trigger { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--cw-text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .todo-focus-view .todo-row-actions .vxshare-trigger:hover, .reminder-focus-view .reminder-row-actions .vxshare-trigger:hover { color: var(--cw-text); background: var(--cw-surface-hover); } .todo-focus-view .todo-row-actions .vxshare-trigger svg, .reminder-focus-view .reminder-row-actions .vxshare-trigger svg { width: 16px; height: 16px; stroke-width: 1.8; } /* Share + delete are visually identical to the Notes row icons (.note-row-act): 30px button, 16px outline icon, pale hover wash. Delete is danger-red like .note-row-act-danger. (Matches Notes sizing rather than the 40px tap target.) */ .todo-focus-view .todo-row-actions .todo-delete-btn, .reminder-focus-view .reminder-row-actions .reminder-delete-btn { width: 30px; min-width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--cw-danger) !important; } .todo-focus-view .todo-row-actions .todo-delete-btn svg, .reminder-focus-view .reminder-row-actions .reminder-delete-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .todo-focus-view .todo-row-actions .todo-delete-btn:hover, .reminder-focus-view .reminder-row-actions .reminder-delete-btn:hover { background: var(--cw-danger-bg); color: var(--cw-danger) !important; } /* Editing row */ .todo-focus-view .todo-row.is-editing { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; background: none; box-shadow: none; } .todo-focus-view .todo-edit-body { align-self: center; min-width: 0; display: grid; gap: 9px; } .todo-focus-view .todo-title-inline { height: 40px; font-size: 16px; font-weight: 500; } .todo-focus-view .todo-edit-meta { display: flex; flex-wrap: wrap; gap: 8px; } .todo-focus-view .todo-edit-meta .todo-topic-input { width: auto; flex: 1 1 150px; } .todo-focus-view .todo-edit-meta .todo-due-input { width: auto; flex: 0 1 160px; } .todo-focus-view .todo-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; } /* ========================================================= Quick-add (create) row — single horizontal line on desktop; wraps to a stacked / multi-row layout on mobile (<=640px). Colors / spacing / radii / icon strokes use --cw-* tokens. ========================================================= */ .todo-focus-view .todo-row.todo-quick-add { align-items: center; } .todo-quick-add-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .todo-quick-add-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .todo-focus-view .todo-quick-add .todo-title-inline { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-md); background: var(--cw-surface); } .todo-focus-view .todo-quick-add .todo-title-inline:focus { border-color: var(--cw-accent-soft-border); box-shadow: var(--cw-focus-ring); } /* Pill buttons: note toggle / category / date */ .todo-quick-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-pill); background: var(--cw-surface); color: var(--cw-text-muted); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; } .todo-quick-pill:hover, .todo-quick-pill:focus-within { border-color: var(--cw-accent-soft-border); color: var(--cw-accent-text); background: var(--cw-accent-soft-bg); } .todo-quick-pill svg { width: 15px; height: 15px; flex: 0 0 auto; } .todo-quick-note-toggle { width: 36px; padding: 0; justify-content: center; } .todo-row.todo-notes-open .todo-quick-note-toggle { border-color: var(--cw-accent-soft-border); color: var(--cw-accent-text); background: var(--cw-accent-soft-bg); } /* Category pill holds the free-text topic input */ .todo-focus-view .todo-quick-category .todo-topic-input { display: inline-block !important; width: auto; max-width: 116px; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font-size: 12px; font-weight: 700; } .todo-focus-view .todo-quick-category .todo-topic-input:focus { outline: 0; border: 0; box-shadow: none; } .todo-row.has-category .todo-quick-category { border-color: var(--cw-accent-soft-border); color: var(--cw-accent-text); background: var(--cw-accent-soft-bg); } /* Date pill: transparent native date input overlays the whole pill */ .todo-quick-date { position: relative; overflow: hidden; } .todo-quick-date-label { pointer-events: none; } .todo-focus-view .todo-quick-date .todo-due-input { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; opacity: 0; cursor: pointer; } .todo-focus-view .todo-quick-date .todo-due-input:focus { box-shadow: none; } .todo-quick-date .todo-due-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } .todo-row.has-date .todo-quick-date { border-color: var(--cw-accent-soft-border); color: var(--cw-accent-text); background: var(--cw-accent-soft-bg); } /* Primary "Add" CTA (purple, solid) */ .todo-quick-add-btn { flex: 0 0 auto; height: 36px; padding: 0 18px; border: 0; border-radius: var(--cw-radius-pill); background: var(--cw-accent); color: var(--cw-text-on-accent); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: var(--cw-shadow-accent); transition: background .18s ease, box-shadow .18s ease, opacity .18s ease; } .todo-quick-add-btn:hover { background: var(--cw-accent-hover); } .todo-quick-add-btn:disabled { background: var(--cw-surface-muted); color: var(--cw-text-subtle); box-shadow: none; cursor: default; } /* Cancel / clear */ .todo-quick-cancel { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cw-text-subtle); font-size: 22px; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease; } .todo-quick-cancel:hover { background: var(--cw-surface-muted); color: var(--cw-text); } /* Optional one-line notes field, revealed by the note toggle, indented under title */ .todo-quick-note { max-height: 0; opacity: 0; overflow: hidden; padding-left: 2px; transition: max-height .2s ease, opacity .2s ease; } .todo-row.todo-notes-open .todo-quick-note { max-height: 80px; opacity: 1; } .todo-focus-view .todo-quick-note .todo-description-inline { display: block !important; width: 100%; height: 36px; min-height: 36px; max-height: 36px; padding: 8px 11px; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-md); background: var(--cw-surface); color: var(--cw-text); font-size: 13px; line-height: 1.3; resize: none; white-space: nowrap; overflow: hidden; } /* Mobile: keep a stacked / multi-row layout below the focus-view breakpoint */ @media (max-width: 640px) { .todo-quick-add-row { flex-wrap: wrap; } .todo-focus-view .todo-quick-add .todo-title-inline { flex: 1 1 100%; } .todo-focus-view .todo-quick-category .todo-topic-input { max-width: none; } .todo-quick-add-btn { flex: 1 1 auto; } } /* Centered, minimal empty state */ .todo-empty { display: grid; justify-items: center; gap: 14px; padding: clamp(48px, 12vh, 96px) 20px; text-align: center; } .todo-empty-icon { width: 52px; height: 52px; color: rgba(var(--brand-rgb),.45); } .todo-empty p { margin: 0; max-width: 280px; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--todo-muted); } /* Floating add button (Apple pattern) */ .todo-fab { position: fixed; right: clamp(18px, 4vw, 40px); bottom: clamp(18px, 4vw, 40px); z-index: 5; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--todo-accent); color: var(--cw-surface); box-shadow: 0 12px 30px rgba(var(--brand-rgb),.36); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .todo-fab svg { width: 26px; height: 26px; } .todo-fab:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 38px rgba(var(--brand-rgb),.42); } .todo-fab:active { transform: scale(.97); } @media (hover: none) { .todo-focus-view .todo-row-actions { opacity: 1; } } @media (max-width: 640px) { .todo-focus-inner { padding: 12px 16px 110px; gap: 16px; } .todo-focus-title { font-size: 28px; } .todo-focus-view .todo-row-actions .todo-convert-btn { display: none; } .todo-fab { width: 54px; height: 54px; } } /* ========================================================= Notes focus view — mirrors the To-Do focus treatment ========================================================= */ .notes-focus-view { --notes-accent: var(--cw-accent); --notes-ink: var(--cw-text); --notes-muted: var(--cw-text-muted); --notes-sep: var(--cw-border); position: fixed; inset: 0; z-index: 1000; background: var(--cw-note-surface); overflow-y: auto; -webkit-overflow-scrolling: touch; } .notes-focus-view[hidden] { display: none !important; } body.is-notes-focus { overflow: hidden; } /* Strip all top navigation / header chrome while the focus view is open */ body.is-notes-focus .vx-header { display: none !important; } body.is-notes-focus #authScreen, body.is-notes-focus #noteEditorPanel { z-index: 1001; } /* Default (mobile/base): list flows normally, divider + empty state hidden, editor stays the existing full-width fixed sheet. */ .notes-split-divider { display: none; } /* Desktop: master–detail split view. */ @media (min-width: 769px) { .notes-focus-inner { max-width: 1200px; height: 100%; display: flex; flex-direction: column; padding-bottom: clamp(18px, 3vw, 32px); } .notes-split { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; } .notes-wall { flex: 0 0 auto; width: var(--notes-list-w, 360px); min-width: 240px; padding-right: 14px; } .notes-split-divider { display: block; position: relative; flex: 0 0 auto; width: 11px; margin: 0 2px; border: 0; background: none; cursor: col-resize; align-self: stretch; } .notes-split-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--cw-border); transition: background .15s ease, width .15s ease; } .notes-split-divider:hover::before, .notes-split-divider:focus-visible::before, .notes-split-divider.is-dragging::before { width: 2px; background: var(--cw-accent); } .notes-split-divider:focus-visible { outline: none; } .note-detail-pane { flex: 1 1 auto; min-width: 320px; min-height: 0; display: flex; flex-direction: column; padding-left: 18px; } .note-detail-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--cw-text-subtle); } .note-action-desktop-only { display: grid; } /* Docked paper sheet: warm ivory surface, no hard box — just a barely-there soft shadow so it reads as a sheet of paper. Token-driven (flips in dark). */ body.is-notes-focus #noteEditorPanel { position: static; inset: auto; z-index: auto; width: auto; max-width: none; height: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: clamp(4px, 0.8vw, 10px) clamp(16px, 1.8vw, 26px) clamp(8px, 1.2vw, 14px); /* Flat Apple-Notes pane: no card edge, no shadow — continuous with the page. */ border: 0; border-radius: 0; background: var(--cw-note-surface); color: var(--cw-paper-ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; } body.is-notes-focus #noteEditorPanel.note-editor-hidden { display: none; } .note-detail-pane .note-editor-head { display: none; } .note-detail-pane .note-title-input { height: auto; padding: 0 2px; border: 0; border-radius: 0; background: none; font-size: 24px; } .note-detail-pane .note-title-input:focus { outline: none; box-shadow: none; } /* Compact header → start the writing area higher: trim the controls-row and body gaps so the body reclaims that vertical space (still flex-fills down). */ .note-detail-pane .note-fmt-toolbar { margin-top: 4px; } /* --- Paper feel: borderless writing canvas (the only growing child) --- */ .note-detail-pane .note-body-shell { flex: 1 1 auto; min-height: 0; display: flex; margin-top: 0; } .note-detail-pane .note-body-input { flex: 1 1 auto; min-height: 0; max-height: none; height: auto; margin-top: 14px; padding: 6px 32px 6px 2px; border: 0; border-radius: 0; background: none; resize: none; font-size: 15px; line-height: 1.75; } .note-detail-pane .note-body-input:focus { outline: none; box-shadow: none; } .note-detail-pane .note-refine-btn { top: 4px; right: 2px; border: 0; background: none; box-shadow: none; } .note-detail-pane .note-refine-btn:not(:disabled):hover { background: var(--cw-surface-hover); } /* --- Bottom bar: Save · Topic · Tags · Theme · Owner&sharing · [spacer] · icons. One line under the hairline; meta wraps if tight while Save stays left and the icon cluster stays right. The editor flex-fills everything above. --- */ .note-detail-pane .note-editor-actions { margin-top: 8px; padding-top: 8px; border-top: 0.5px solid var(--cw-border); gap: 4px 10px; } /* Meta absorbs the slack (flex:1 1 0): on wide panes it's one line; when the pane is tight it wraps INTERNALLY so Save stays left and icons stay right on the same row (rather than the icon cluster dropping to a new line). */ .note-detail-pane .note-bar-meta { gap: 2px 10px; flex: 1 1 0%; min-width: 0; } .note-detail-pane .note-meta-line { margin-top: 0; gap: 2px 10px; flex-wrap: wrap; } .note-detail-pane .note-meta-field { flex: 0 0 auto; } .note-detail-pane .note-meta-field input, .note-detail-pane .note-meta-field select { min-height: 24px; padding: 2px 2px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--cw-text-muted); font-size: 12px; } .note-detail-pane .note-meta-field input { flex: 0 0 auto; width: 9ch; } .note-detail-pane .note-meta-field input:focus, .note-detail-pane .note-meta-field select:focus { outline: none; box-shadow: none; border-bottom: 1px solid var(--cw-border); } /* --- Owner & sharing: borderless inline disclosure; opens as a popover so the bar doesn't grow vertically. --- */ .note-detail-pane .note-meta-people { border: 0; margin-top: 0; position: relative; } .note-detail-pane .note-meta-summary { padding: 4px 4px; font-size: 12px; } .note-detail-pane .note-meta-summary svg { width: 14px; height: 14px; } .note-detail-pane .note-meta-people[open] .note-meta-summary { border-bottom: 0; } .note-detail-pane .note-meta-people-body { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; width: min(330px, 80vw); padding: 12px 14px; border: 1px solid var(--cw-border); border-radius: 14px; background: var(--cw-surface); box-shadow: 0 18px 48px rgba(16,24,40,.16); } .note-detail-pane .note-action-primary { padding: 6px 8px; background: none; color: var(--cw-accent-text); flex: 0 0 auto; } .note-detail-pane .note-action-primary:hover { background: var(--cw-surface-hover); } /* No auto-margin here: the flex:1 meta already pushes icons right. An auto margin would force the icon cluster onto its own wrapped line when tight. */ .note-detail-pane .note-action-icons { margin-left: 0; flex: 0 0 auto; } .note-detail-pane .note-action-icon { border: 0; background: none; } .note-detail-pane .note-action-icon:hover { border: 0; background: var(--cw-surface-hover); color: var(--cw-text); } .note-detail-pane .note-action-icon.is-active { border: 0; background: none; color: var(--cw-accent-text); } .note-detail-pane .note-action-danger { color: var(--cw-danger); } .note-detail-pane .note-action-danger:hover { border: 0; background: var(--cw-danger-bg); color: var(--cw-danger); } /* --- Status line shrinks to a tiny muted caption --- */ .note-detail-pane .note-editor-message { min-height: 0; margin-top: 4px; font-size: 10px; } } .notes-focus-inner { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(18px, 3vw, 32px) clamp(18px, 4vw, 28px) 120px; display: grid; gap: 18px; } .notes-hidden-control { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } /* Top bar */ .notes-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .notes-focus-tools { display: flex; align-items: center; gap: 4px; } .notes-focus-back { width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--notes-ink); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .notes-focus-back svg { width: 26px; height: 26px; } .notes-focus-back:hover { color: var(--notes-accent); background: rgba(var(--brand-rgb),.07); } .notes-icon-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cw-text-muted); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .notes-icon-btn svg { width: 21px; height: 21px; } .notes-icon-btn:hover, .notes-icon-btn.is-active { color: var(--notes-accent); background: rgba(var(--brand-rgb),.09); } /* Docs tools (Sync now / Open Notes folder) live in the toolbar; hidden until Google Docs is connected. The folder one is an , so center its icon too. */ .notes-docs-tool[hidden] { display: none !important; } a.notes-icon-btn { text-decoration: none; } .notes-icon-btn.is-syncing { pointer-events: none; } .notes-icon-btn.is-syncing svg { animation: notesSyncSpin .8s linear infinite; } @keyframes notesSyncSpin { to { transform: rotate(360deg); } } /* Thin divider separating the bare icon tools from the primary New note button. Hidden on mobile (New note is a corner FAB there). */ .notes-tool-divider { display: none; width: 1px; align-self: center; height: 22px; margin: 0 4px; background: var(--cw-border); } /* Primary "New note" — the standout filled action: on-brand accent gradient, on-accent text, compose icon. Two-class selector beats .module-new-btn regardless of stylesheet order (module-shell.css loads last). */ .notes-focus-tools .notes-new-btn { gap: 8px; padding: 0 16px 0 13px; background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-active)); color: var(--cw-text-on-accent); box-shadow: 0 2px 12px color-mix(in srgb, var(--cw-accent) 30%, transparent); } .notes-focus-tools .notes-new-btn:hover { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-active)); filter: brightness(1.05); box-shadow: 0 4px 16px color-mix(in srgb, var(--cw-accent) 38%, transparent); } .notes-focus-tools .notes-new-btn svg { width: 17px; height: 17px; } /* Desktop: New note button shows (module-shell swaps the FAB at 641px); show the divider with it. Mobile keeps the FAB, so the divider stays hidden. */ @media (min-width: 641px) { .notes-focus-bar .notes-tool-divider { display: block; } } .notes-options { position: relative; } .notes-options-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; display: grid; gap: 12px; width: 232px; padding: 14px; border: 1px solid var(--notes-sep); border-radius: 16px; background: var(--cw-surface); box-shadow: 0 18px 48px rgba(0,0,0,.14); } .notes-options-menu[hidden] { display: none; } .notes-option-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--notes-muted); } .notes-options-menu select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: var(--cw-surface); color: var(--notes-ink); font-size: 13px; font-weight: 600; } .notes-options-menu select:focus { outline: 0; border-color: rgba(var(--brand-rgb),.5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.14); } /* Title block */ .notes-focus-head { margin-top: 2px; display: block; } .notes-focus-title { margin: 0; font-size: clamp(28px, 4.4vw, 36px); line-height: 1.05; font-weight: 760; letter-spacing: -.02em; color: var(--notes-ink); } .notes-focus-subtitle { margin: 5px 0 0; font-size: 13.5px; font-weight: 500; color: var(--notes-muted); } /* Google Docs: connected status bar (below the subtitle). */ .notes-docs-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--notes-muted); } .notes-docs-status[hidden] { display: none; } .notes-docs-status-text { font-weight: 500; } .notes-docs-folder-link { color: var(--lp-purple, var(--cw-accent)); font-weight: 600; text-decoration: none; } .notes-docs-folder-link:hover { text-decoration: underline; } .notes-docs-sync-btn { border: 1px solid var(--lp-purple, var(--cw-accent)); background: transparent; color: var(--lp-purple, var(--cw-accent)); border-radius: 999px; padding: 4px 14px; font-size: 12.5px; font-weight: 650; cursor: pointer; } .notes-docs-sync-btn:hover { background: var(--lp-purple-tint, var(--cw-accent-tint)); } .notes-docs-sync-btn:disabled { opacity: .6; cursor: default; } /* Google Docs: subtle, non-blocking connect prompt (above the notes list). */ .notes-docs-connect { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 9px 13px; border: 1px dashed var(--lp-purple, var(--cw-accent)); border-radius: 10px; background: var(--lp-purple-tint, var(--cw-accent-tint)); font-size: 13px; } .notes-docs-connect[hidden] { display: none; } .notes-docs-connect-icon { display: inline-flex; color: var(--lp-purple, var(--cw-accent)); } .notes-docs-connect-icon svg { width: 18px; height: 18px; } .notes-docs-connect-text { flex: 1; font-weight: 600; color: var(--notes-ink, var(--cw-text)); } .notes-docs-connect-btn { border: 0; border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700; color: var(--cw-surface); background: var(--lp-purple, var(--cw-accent)); cursor: pointer; } .notes-docs-connect-btn:hover { filter: brightness(1.05); } .notes-docs-connect-btn:disabled { opacity: .6; cursor: default; } /* "Docs" badge on synced note cards + the editor's "Open in Google Docs" link. */ .note-row-docs-badge, .note-docs-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 10px; font-weight: 800; letter-spacing: .02em; vertical-align: middle; } .note-open-in-docs { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--cw-accent-text); text-decoration: none; white-space: nowrap; } .note-open-in-docs[hidden] { display: none; } .note-open-in-docs:hover { text-decoration: underline; } .note-open-in-docs .note-docs-badge { margin-left: 0; } /* Inline expanding search */ .notes-search-wrap { position: relative; display: flex; align-items: center; animation: todoSearchIn .18s ease; } .notes-search-wrap[hidden] { display: none; } .notes-search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--notes-muted); pointer-events: none; } .notes-focus-view .notes-search-wrap input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 0; border-radius: 12px; background: var(--cw-surface-muted); color: var(--notes-ink); font-size: 15px; font-weight: 500; } .notes-focus-view .notes-search-wrap input::placeholder { color: var(--notes-muted); } .notes-focus-view .notes-search-wrap input:focus { outline: 0; background: var(--cw-surface); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18); } .notes-focus-view .notes-scope-clear { justify-self: start; padding: 7px 14px; border: 1px solid var(--notes-sep); border-radius: 999px; background: var(--cw-surface-muted); color: var(--notes-accent); font-size: 12px; font-weight: 700; cursor: pointer; } /* List — borderless rows, thin separators (Apple Notes style) */ .notes-focus-view .notes-wall { display: block; grid-template-columns: none; grid-auto-rows: auto; gap: 0; margin-top: -6px; } .notes-focus-view .note-card { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; min-height: 0; margin: 0; padding: 15px 4px; border: 0 !important; border-bottom: 1px solid var(--notes-sep) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible; cursor: pointer; transition: background .15s ease; } .notes-focus-view .note-card::before, .notes-focus-view .note-card::after { display: none; } .notes-focus-view .note-card:hover { background: rgba(var(--brand-rgb),.03); } .notes-focus-view .note-card:last-child { border-bottom: 0; } /* Title + snippet column: takes the remaining width and truncates with an ellipsis. min-width:0 lets the flex item shrink below its content size so the ellipsis kicks in before it reaches the reserved icon slot. */ .notes-focus-view .note-row-main { flex: 1 1 auto; min-width: 0; } /* Per-row Edit / Delete — bare icons, revealed on hover + keyboard focus. In-flow flex slot (NOT absolutely positioned): the slot always reserves its width so the title truncates before it and never runs under the icons. The opacity toggle only changes visibility, not layout — so no reflow on hover. */ .note-row-actions { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .note-card:hover .note-row-actions, .note-card:focus-within .note-row-actions { opacity: 1; pointer-events: auto; } .note-row-act { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--cw-text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .note-row-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .note-row-act:hover { background: var(--cw-surface-hover); color: var(--cw-text); } .note-row-act:focus-visible { outline: none; background: var(--cw-surface-hover); color: var(--cw-text); } .note-row-act-danger { color: var(--cw-danger); } .note-row-act-danger:hover, .note-row-act-danger:focus-visible { background: var(--cw-danger-bg); color: var(--cw-danger); } /* Touch / coarse pointers (no hover): keep the actions visible + reachable. */ @media (hover: none) { .note-row-actions { opacity: 1; pointer-events: auto; } } .notes-focus-view .note-row-title { display: block; margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--notes-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notes-focus-view .note-row-pin { display: inline-block; vertical-align: middle; margin-right: 7px; color: var(--notes-accent); font-size: 14px; } .notes-focus-view .note-row-sub { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--notes-muted); white-space: nowrap; overflow: hidden; } .notes-focus-view .note-row-date { flex: 0 0 auto; color: var(--cw-text-subtle); font-weight: 500; } .notes-focus-view .note-row-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notes-focus-view .note-row-mark { background: var(--notes-accent, var(--cw-accent)); color: #fff; border-radius: 3px; padding: 0 1px; font-weight: 600; /* keep the highlight from disturbing the single-line row metrics */ box-decoration-break: clone; -webkit-box-decoration-break: clone; } .notes-focus-view .note-row-preview .note-row-mark { background: color-mix(in srgb, var(--notes-accent, var(--cw-accent)) 22%, transparent); color: inherit; font-weight: 700; } .notes-focus-view .note-row-linked { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: rgba(var(--brand-rgb),.08); color: var(--notes-accent); font-size: 11px; font-weight: 700; } .notes-focus-view .note-topic-group { margin: 16px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cw-text-subtle); } .notes-focus-view .note-topic-group:first-child { margin-top: 4px; } /* ============================================================ Notes — list / gallery view toggle + Gallery (date-grouped grid of mini-page preview cards). Tokens only; flat + clean. ============================================================ */ .notes-view-toggle { display: inline-flex; align-items: center; gap: 2px; } .notes-view-btn { color: var(--cw-text-subtle); } .notes-view-btn.is-active { color: var(--cw-accent-text); background: var(--cw-accent-tint); } .note-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 6px 0 20px; } .note-gallery-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 0.5px solid var(--cw-border); border-radius: 12px; background: var(--cw-surface); box-shadow: 0 1px 2px rgba(16,24,40,.04); cursor: pointer; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .note-gallery-card:hover { border-color: var(--cw-border-strong); box-shadow: 0 6px 18px rgba(16,24,40,.08); } .note-gallery-card.is-active { border-color: var(--cw-accent-text); box-shadow: 0 0 0 1px var(--cw-accent); } /* Preview = a clamped, fixed-height mini page. Soft fade at the bottom edge. */ .note-gallery-preview { height: 130px; overflow: hidden; padding: 12px 12px 0; background: var(--cw-note-surface, var(--cw-surface)); color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.5; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); } .note-gallery-preview > :first-child { margin-top: 0; } .note-gallery-preview p, .note-gallery-preview .np-h, .note-gallery-preview .np-quote, .note-gallery-preview .np-list, .note-gallery-preview .np-pre { margin: 0 0 6px; } .note-gallery-preview .np-h { font-weight: 700; color: var(--cw-text); font-size: 12.5px; } .note-gallery-preview .np-list { padding-left: 16px; } .note-gallery-preview code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; } .note-gallery-preview .np-pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; white-space: pre-wrap; color: var(--cw-text-subtle); } .note-gallery-preview .np-link { color: var(--cw-accent-text); } .note-gallery-preview .np-quote { border-left: 2px solid var(--cw-border-strong); padding-left: 8px; color: var(--cw-text-subtle); } .note-gallery-preview .np-hr { border: 0; border-top: 1px solid var(--cw-border); margin: 6px 0; } .note-gallery-preview .np-img { max-width: 100%; max-height: 64px; border-radius: 6px; object-fit: cover; } .note-gallery-preview .np-check { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid var(--cw-border-strong); border-radius: 3px; vertical-align: middle; } .note-gallery-preview .np-check.is-checked { background: var(--cw-accent); border-color: var(--cw-accent-text); } .note-gallery-preview .np-empty { color: var(--cw-text-subtle); font-style: italic; } /* New rich-text (HTML) bodies render real elements in the thumbnail. */ .note-gallery-preview h1, .note-gallery-preview h2, .note-gallery-preview h3 { font-weight: 700; color: var(--cw-text); font-size: 12.5px; margin: 0 0 4px; } .note-gallery-preview ul, .note-gallery-preview ol { margin: 0 0 6px; padding-left: 18px; } .note-gallery-preview li { margin: 0; } .note-gallery-preview li[data-list="checked"], .note-gallery-preview li[data-list="unchecked"] { list-style: none; margin-left: -14px; } .note-gallery-preview li[data-list="checked"]::before { content: "\2611"; margin-right: 4px; color: var(--cw-accent-text); } .note-gallery-preview li[data-list="unchecked"]::before { content: "\2610"; margin-right: 4px; color: var(--cw-text-subtle); } .note-gallery-preview blockquote { border-left: 2px solid var(--cw-border-strong); margin: 0 0 6px; padding-left: 8px; color: var(--cw-text-subtle); } .note-gallery-preview pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; white-space: pre-wrap; color: var(--cw-text-subtle); margin: 0 0 6px; } .note-gallery-preview hr { border: 0; border-top: 1px solid var(--cw-border); margin: 6px 0; } .note-gallery-preview a { color: var(--cw-accent-text); } .note-gallery-foot { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; border-top: 0.5px solid var(--cw-border); background: var(--cw-surface); } .note-gallery-title { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note-gallery-title .note-row-pin { color: var(--cw-accent-text); font-size: 13px; } .note-gallery-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--cw-text-subtle); } .note-gallery-cat { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 10px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; } /* Reuse the list rows' reveal-on-hover Edit/Delete actions, floated on the card. */ .note-gallery-actions { position: absolute; top: 8px; right: 8px; } .note-gallery-card:hover .note-gallery-actions, .note-gallery-card:focus-within .note-gallery-actions { opacity: 1; pointer-events: auto; } .note-gallery-actions .note-row-act { background: var(--cw-surface); box-shadow: 0 1px 2px rgba(16,24,40,.10); } /* Phones: collapse to 1–2 columns. */ @media (max-width: 520px) { .note-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } } /* Desktop: gallery takes the full notes width; the docked detail pane folds out of flow and its editor opens as a full-screen overlay sheet over the grid. */ @media (min-width: 769px) { .notes-split.is-gallery .notes-wall { flex: 1 1 auto; width: auto; min-width: 0; padding-right: 0; } .notes-split.is-gallery .notes-split-divider { display: none; } .notes-split.is-gallery .note-detail-pane { position: fixed; inset: 0; z-index: 1002; padding: 0; pointer-events: none; } .notes-split.is-gallery .note-detail-empty { display: none; } .notes-split.is-gallery #noteEditorPanel:not(.note-editor-hidden) { position: fixed; inset: 0; z-index: 1002; width: 100%; max-width: none; height: auto; border-radius: 0; overflow-y: auto; pointer-events: auto; padding: clamp(16px, 4vw, 40px) clamp(16px, 7vw, 96px); } .notes-split.is-gallery #noteEditorPanel.note-editor-hidden { display: none; } } /* Centered, minimal empty state */ .notes-empty { display: grid; justify-items: center; gap: 14px; padding: clamp(48px, 12vh, 96px) 20px; text-align: center; } .notes-empty-icon { width: 50px; height: 50px; color: rgba(var(--brand-rgb),.45); } .notes-empty p { margin: 0; max-width: 290px; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--notes-muted); } /* Floating add button */ .notes-fab { position: fixed; right: clamp(18px, 4vw, 40px); bottom: clamp(18px, 4vw, 40px); z-index: 5; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--notes-accent); color: var(--cw-surface); box-shadow: 0 12px 30px rgba(var(--brand-rgb),.36); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .notes-fab svg { width: 26px; height: 26px; } .notes-fab:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 38px rgba(var(--brand-rgb),.42); } .notes-fab:active { transform: scale(.97); } @media (max-width: 640px) { .notes-focus-inner { padding: 12px 16px 110px; gap: 16px; } .notes-focus-title { font-size: 28px; } .notes-fab { width: 54px; height: 54px; } } /* ========================================================= Reminders focus view — mirrors the To-Do / Notes treatment ========================================================= */ .reminder-focus-view { --rem-accent: var(--cw-accent); --rem-ink: var(--cw-text); --rem-muted: var(--cw-text-muted); --rem-sep: var(--cw-border); position: fixed; inset: 0; z-index: 1000; background: var(--cw-surface); overflow-y: auto; -webkit-overflow-scrolling: touch; } .reminder-focus-view[hidden] { display: none !important; } body.is-reminder-focus { overflow: hidden; } body.is-reminder-focus .vx-header { display: none !important; } body.is-reminder-focus #authScreen { z-index: 1001; } .reminder-focus-inner { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(18px, 3vw, 32px) clamp(18px, 4vw, 28px) 120px; display: grid; gap: 18px; } /* Top bar */ .reminder-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .reminder-focus-tools { display: flex; align-items: center; gap: 4px; } .reminder-focus-back { width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--rem-ink); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .reminder-focus-back svg { width: 26px; height: 26px; } .reminder-focus-back:hover { color: var(--rem-accent); background: rgba(var(--brand-rgb),.07); } .reminder-icon-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cw-text-muted); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .reminder-icon-btn svg { width: 21px; height: 21px; } .reminder-icon-btn:hover, .reminder-icon-btn.is-active { color: var(--rem-accent); background: rgba(var(--brand-rgb),.09); } .reminder-options { position: relative; } .reminder-options-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; display: grid; gap: 12px; width: 232px; padding: 14px; border: 1px solid var(--rem-sep); border-radius: 16px; background: var(--cw-surface); box-shadow: 0 18px 48px rgba(0,0,0,.14); } .reminder-options-menu[hidden] { display: none; } .reminder-option-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--rem-muted); } .reminder-focus-view .reminder-options-menu select { height: 38px; width: 100%; max-width: none; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: var(--cw-surface); color: var(--rem-ink); font-size: 13px; font-weight: 600; box-shadow: none; } .reminder-focus-view .reminder-options-menu select:focus { outline: 0; border-color: rgba(var(--brand-rgb),.5); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.14); } /* Title block + stat line */ .reminder-focus-head { margin-top: 2px; display: block; } .reminder-focus-title { margin: 0; font-size: clamp(28px, 4.4vw, 36px); line-height: 1.05; font-weight: 760; letter-spacing: -.02em; color: var(--rem-ink); } .reminder-focus-subtitle { margin: 5px 0 0; font-size: 13.5px; font-weight: 500; color: var(--rem-muted); } .reminder-focus-view .reminder-focus-stat { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--cw-text-subtle); } /* Inline expanding search */ .reminder-search-wrap { position: relative; display: flex; align-items: center; animation: todoSearchIn .18s ease; } .reminder-search-wrap[hidden] { display: none; } .reminder-search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--rem-muted); pointer-events: none; } .reminder-focus-view .reminder-search-wrap input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 0; border-radius: 12px; background: var(--cw-surface-muted); color: var(--rem-ink); font-size: 15px; font-weight: 500; box-shadow: none; } .reminder-focus-view .reminder-search-wrap input::placeholder { color: var(--rem-muted); } .reminder-focus-view .reminder-search-wrap input:focus { outline: 0; background: var(--cw-surface); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18); } /* List — borderless rows, thin separators, no column header */ .reminder-focus-view .reminder-list { display: block; gap: 0; padding-top: 0; margin-top: -6px; } .reminder-focus-view .reminder-list::before { content: none; display: none; } .reminder-focus-view .reminder-row { position: relative; display: flex; align-items: center; gap: 13px; border: 0; border-bottom: 1px solid var(--rem-sep); border-radius: 0; background: none; box-shadow: none; padding: 14px 4px; transition: background .15s ease; } .reminder-focus-view .reminder-row:hover { transform: none; box-shadow: none; border-color: var(--rem-sep); background: none; } .reminder-focus-view .reminder-row:last-child { border-bottom: 0; } .reminder-focus-view .reminder-row.is-draft { border-bottom-style: dashed; } .reminder-focus-view .reminder-row.is-editing { display: grid; grid-template-columns: 1fr; gap: 9px; background: rgba(var(--brand-rgb),.02); border-radius: 14px; border-bottom: 1px solid var(--rem-sep); padding: 14px 12px; } .reminder-focus-view .reminder-row.is-completed { opacity: 1; } .reminder-focus-view .reminder-row.is-completed .reminder-row-title { color: var(--rem-muted); text-decoration: line-through; text-decoration-color: rgba(138,138,142,.5); } .reminder-focus-view .reminder-check { flex: 0 0 auto; align-self: center; border: 1.7px solid rgba(60,60,67,.3); background: var(--cw-surface); box-shadow: none; } /* Calm title-first body */ .reminder-focus-view .reminder-row-body { flex: 1 1 auto; align-self: center; min-width: 0; display: grid; gap: 5px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .reminder-focus-view .reminder-row-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--rem-ink); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .reminder-focus-view .reminder-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; } .reminder-focus-view .reminder-row-meta .reminder-category-pill, .reminder-focus-view .reminder-row-meta .reminder-date-pill, .reminder-focus-view .reminder-row-meta .reminder-repeat-pill { width: auto; min-height: 0; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .reminder-focus-view .reminder-row-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--rem-muted); } /* Actions layout (bottom-right, own reserved row) is shared with To-Dos — see `.todo-focus-view .todo-row-actions`. */ .reminder-focus-view .reminder-row:hover .reminder-row-actions, .reminder-focus-view .reminder-row:focus-within .reminder-row-actions, .reminder-focus-view .reminder-row.is-delete-pending .reminder-row-actions { opacity: 1; } .reminder-focus-view .reminder-row-actions .reminder-complete-btn { min-width: 0; min-height: 40px; padding: 0 14px; font-size: 11px; } .reminder-focus-view .reminder-inline-error { grid-column: 1 / -1; } .reminder-focus-view .reminder-check[aria-pressed="true"] { border-color: var(--rem-accent); background: var(--rem-accent); box-shadow: none; } /* Neutral / purple pills (no amber) */ .reminder-focus-view .reminder-category-pill { color: var(--rem-accent); border: 1px solid rgba(var(--brand-rgb),.22); background: rgba(var(--brand-rgb),.07); } .reminder-focus-view .reminder-date-pill { color: var(--cw-text-muted); border: 1px solid rgba(15,23,42,.10); background: var(--cw-surface-muted); } .reminder-focus-view .reminder-row.is-overdue .reminder-date-pill { color: var(--cw-danger); border-color: rgba(244,63,94,.3); background: rgba(244,63,94,.07); } .reminder-focus-view .reminder-repeat-pill { color: var(--cw-text-muted); border: 1px solid rgba(15,23,42,.08); background: var(--cw-accent-tint); } .reminder-focus-view .reminder-row h3 { color: var(--rem-ink); font-size: 13.5px; font-weight: 600; } .reminder-focus-view .reminder-row p { color: var(--rem-muted); } /* Editing inputs — neutral with purple focus */ .reminder-focus-view .reminder-category-input, .reminder-focus-view .reminder-date-input, .reminder-focus-view .reminder-time-input, .reminder-focus-view .reminder-title-inline, .reminder-focus-view .reminder-notes-inline, .reminder-focus-view .reminder-repeat-input, .reminder-focus-view .reminder-custom-repeat input, .reminder-focus-view .reminder-custom-repeat select { border: 1px solid rgba(15,23,42,.12); background: var(--cw-surface); color: var(--rem-ink); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .reminder-focus-view .reminder-category-input { color: var(--rem-accent); background: rgba(var(--brand-rgb),.07); } .reminder-focus-view .reminder-category-input:focus, .reminder-focus-view .reminder-date-input:focus, .reminder-focus-view .reminder-time-input:focus, .reminder-focus-view .reminder-title-inline:focus, .reminder-focus-view .reminder-notes-inline:focus, .reminder-focus-view .reminder-repeat-input:focus, .reminder-focus-view .reminder-custom-repeat input:focus, .reminder-focus-view .reminder-custom-repeat select:focus { outline: 0; border-color: rgba(var(--brand-rgb),.45); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); } .reminder-focus-view .reminder-title-counter { color: var(--cw-text-subtle); } /* Row action buttons — neutral with purple hover */ .reminder-focus-view .reminder-done-btn, .reminder-focus-view .reminder-complete-btn, .reminder-focus-view .reminder-cancel-btn, .reminder-focus-view .reminder-delete-btn { border: 1px solid rgba(15,23,42,.10); background: var(--cw-surface); color: var(--cw-text-muted); box-shadow: none; } .reminder-focus-view .reminder-done-btn:hover, .reminder-focus-view .reminder-complete-btn:hover { border-color: rgba(var(--brand-rgb),.30); color: var(--rem-accent); } .reminder-focus-view .reminder-complete-btn { background: var(--cw-surface-muted); color: var(--cw-text); } /* Centered, minimal empty state */ .reminder-empty { display: grid; justify-items: center; gap: 14px; padding: clamp(48px, 12vh, 96px) 20px; text-align: center; } .reminder-empty-icon { width: 52px; height: 52px; color: rgba(var(--brand-rgb),.45); } .reminder-empty p { margin: 0; max-width: 290px; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--rem-muted); } /* Floating add button */ .reminder-fab { position: fixed; right: clamp(18px, 4vw, 40px); bottom: clamp(18px, 4vw, 40px); z-index: 5; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--rem-accent); color: var(--cw-surface); box-shadow: 0 12px 30px rgba(var(--brand-rgb),.36); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .reminder-fab svg { width: 26px; height: 26px; } .reminder-fab:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 38px rgba(var(--brand-rgb),.42); } .reminder-fab:active { transform: scale(.97); } @media (hover: none) { .reminder-focus-view .reminder-row-actions { opacity: 1; } } @media (max-width: 640px) { .reminder-focus-inner { padding: 12px 16px 110px; gap: 16px; } .reminder-focus-title { font-size: 28px; } .reminder-fab { width: 54px; height: 54px; } /* The check already toggles completion — drop the redundant Done button on touch rows */ .reminder-focus-view .reminder-row-actions .reminder-complete-btn { display: none; } /* Let the custom-repeat editor wrap instead of overflowing narrow screens */ .reminder-focus-view .reminder-custom-repeat { display: flex; flex-wrap: wrap; gap: 6px; } .reminder-focus-view .reminder-custom-repeat input, .reminder-focus-view .reminder-custom-repeat select { flex: 1 1 84px; width: auto; min-width: 0; } .reminder-focus-view .reminder-custom-repeat > span { flex: 0 0 auto; } } /* ========================================================= Focus views — shared cross-device fit (phones, iPad, laptop, desktop) across Safari/WebKit, Chrome/Edge/Samsung (Blink) ========================================================= */ .todo-focus-view, .notes-focus-view, .reminder-focus-view { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); overscroll-behavior: contain; } .todo-fab, .notes-fab, .reminder-fab { /* Sit above the global chat bubble (bottom: 28px) so the two never overlap. */ bottom: calc(88px + env(safe-area-inset-bottom)); right: calc(28px + env(safe-area-inset-right)); z-index: 120; } .todo-options-menu, .notes-options-menu, .reminder-options-menu { width: min(232px, calc(100vw - 24px)); } /* Comfortable touch targets on coarse pointers (phones/tablets) */ @media (pointer: coarse) { .todo-focus-back, .notes-focus-back, .reminder-focus-back, .todo-icon-btn, .notes-icon-btn, .reminder-icon-btn { width: 44px; height: 44px; } .todo-fab, .notes-fab, .reminder-fab { width: 56px; height: 56px; } } /* Reminders Workspace */ :root { --reminder-bg: var(--cw-warning-bg); --reminder-border: var(--cw-warning); --reminder-chip: var(--cw-warning-bg); --reminder-accent: var(--cw-warning); --reminder-text: var(--cw-text); --reminder-muted: var(--cw-text-muted); } .reminder-workspace { width: 100%; margin: 10px 0 18px; } .reminder-shell { width: 100%; min-width: 0; padding: 16px; border: 1px solid var(--reminder-border); border-radius: 28px; background: linear-gradient(180deg, rgba(255,250,242,.98), rgba(255,247,235,.92)); box-shadow: 0 18px 54px rgba(143,92,34,.1), inset 0 1px 0 rgba(255,255,255,.82); overflow: hidden; } .reminder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 2px 4px 14px; border-bottom: 1px solid rgba(234,220,198,.86); } .reminder-title-block { min-width: 250px; display: grid; gap: 6px; } .reminder-brand-line { display: flex; align-items: center; gap: 11px; } .reminder-premium-mark { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid rgba(201,135,52,.24); border-radius: 50%; color: var(--reminder-accent); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,243,220,.9)); box-shadow: 0 10px 22px rgba(201,135,52,.12); } .reminder-premium-mark svg { width: 28px; height: 28px; } .reminder-title-block h2 { margin: 0; color: var(--reminder-text); font-size: 21px; line-height: 1.08; font-weight: 820; letter-spacing: 0; } .reminder-title-block p { margin: 3px 0 0; color: var(--reminder-muted); font-size: 13px; line-height: 1.35; } .reminder-title-block small { color: var(--reminder-muted); font-size: 11.5px; line-height: 1.35; } .reminder-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1 1 680px; } .reminder-controls input, .reminder-controls select, .reminder-clear-filters-btn { height: 34px; border-radius: 999px; border: 1px solid rgba(234,220,198,.92); background: rgba(255,255,255,.76); color: var(--reminder-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); font-size: 12px; font-weight: 740; } .reminder-controls input { width: clamp(150px, 15vw, 230px); padding: 0 13px; } .reminder-controls select { width: auto; max-width: 160px; padding: 0 28px 0 11px; } .reminder-clear-filters-btn { padding: 0 13px; color: var(--cw-warning); background: rgba(255,243,220,.78); box-shadow: none; white-space: nowrap; } .reminder-add-btn { width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(201,135,52,.18); border-radius: 50%; background: linear-gradient(135deg, var(--cw-warning), var(--cw-warning)); color: var(--cw-surface); box-shadow: 0 12px 24px rgba(201,135,52,.22); font-size: 21px; line-height: 1; } .reminder-list { display: grid; gap: 10px; padding-top: 14px; } .reminder-list::before { content: "Done List Date / Time Repeat Reminder Notes Actions"; display: grid; grid-template-columns: 44px 118px 132px 102px minmax(0, 1.25fr) minmax(0, .9fr) minmax(170px, 190px); align-items: center; gap: 8px; padding: 0 10px 2px; color: var(--cw-warning); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: pre; } .reminder-row { display: grid; grid-template-columns: 44px 118px 132px 102px minmax(0, 1.25fr) minmax(0, .9fr) 52px 58px 42px; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(234,220,198,.9); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,250,242,.86)); box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 12px 28px rgba(143,92,34,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; } .reminder-row:hover { transform: translateY(-1px); border-color: rgba(201,135,52,.3); box-shadow: 0 16px 34px rgba(143,92,34,.1); } .reminder-row.is-editing { grid-template-columns: 34px 106px 122px 96px minmax(180px, 1fr) minmax(150px, .75fr) 138px minmax(0, .9fr) 54px 62px 42px; border-color: rgba(201,135,52,.34); background: rgba(255,252,247,.96); } .reminder-row.has-inline-error { border-color: rgba(201,135,52,.58); } .reminder-row.is-saving { opacity: .78; } .reminder-row.is-draft { border-style: dashed; } .reminder-row.is-completed { opacity: .68; } .reminder-row.is-completed h3, .reminder-row.is-completed p { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(123,111,97,.45); } .reminder-check { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid rgba(171,137,94,.52); border-radius: 50%; background: rgba(255,255,255,.84); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .reminder-check[aria-pressed="true"] { border-color: rgba(201,135,52,.32); background: linear-gradient(135deg, var(--cw-warning), var(--cw-warning)); box-shadow: 0 9px 18px rgba(201,135,52,.18); } .reminder-check[aria-pressed="true"]::after { content: ""; display: block; width: 8px; height: 12px; margin: 4px auto 0; border: solid var(--cw-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); } .reminder-category-pill, .reminder-date-pill, .reminder-repeat-pill, .reminder-repeat-placeholder { display: inline-flex; width: 100%; max-width: 100%; min-height: 30px; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; line-height: 1; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reminder-category-pill { color: var(--cw-warning); border: 1px solid rgba(201,135,52,.25); background: var(--reminder-chip); } .reminder-date-pill { color: var(--cw-warning); border: 1px solid rgba(234,220,198,.96); background: rgba(255,255,255,.72); } .reminder-row.is-overdue .reminder-date-pill { color: var(--cw-warning); border-color: rgba(201,135,52,.5); background: var(--cw-warning); } .reminder-repeat-pill { color: var(--cw-warning); border: 1px solid rgba(201,135,52,.2); background: rgba(255,243,220,.72); } .reminder-repeat-placeholder { opacity: 0; } .reminder-category-input, .reminder-date-input, .reminder-time-input, .reminder-title-inline, .reminder-notes-inline, .reminder-repeat-input, .reminder-custom-repeat input, .reminder-custom-repeat select { width: 100%; min-width: 0; border: 1px solid rgba(234,220,198,.95); background: rgba(255,255,255,.8); color: var(--reminder-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.74); } .reminder-category-input, .reminder-date-input, .reminder-time-input, .reminder-repeat-input, .reminder-custom-repeat input, .reminder-custom-repeat select { height: 32px; min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 850; } .reminder-category-input { color: var(--cw-warning); background: var(--reminder-chip); } .reminder-title-cell { position: relative; min-width: 0; } .reminder-title-inline { height: 34px; padding: 0 11px; border-radius: 13px; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .reminder-title-counter { position: absolute; right: 9px; bottom: -12px; color: var(--cw-warning); font-size: 9px; font-weight: 760; line-height: 1; opacity: 0; pointer-events: none; } .reminder-title-cell:focus-within .reminder-title-counter, .reminder-row.is-editing .reminder-title-counter { opacity: .74; } .reminder-notes-inline { height: 34px; min-height: 34px; max-height: 66px; padding: 8px 11px; border-radius: 13px; resize: none; overflow: auto; font-size: 12.5px; line-height: 1.42; } .reminder-custom-repeat { display: grid; grid-template-columns: auto 58px minmax(72px, .8fr) minmax(92px, 1fr) minmax(92px, 1fr); align-items: center; gap: 6px; min-width: 0; color: var(--reminder-muted); font-size: 11px; font-weight: 800; } .reminder-row h3 { margin: 0; color: var(--reminder-text); font-size: 12.5px; line-height: 1.35; font-weight: 650; letter-spacing: 0; overflow-wrap: anywhere; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reminder-row p { margin: 0; color: var(--reminder-muted); font-size: 12.5px; line-height: 1.35; max-height: 34px; overflow: hidden; overflow-wrap: anywhere; } .reminder-done-btn, .reminder-complete-btn, .reminder-cancel-btn, .reminder-delete-btn { min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(234,220,198,.9); background: rgba(255,255,255,.78); color: var(--cw-warning); box-shadow: none; font-size: 11px; font-weight: 850; white-space: nowrap; } .reminder-complete-btn { color: var(--cw-warning); background: rgba(255,243,220,.76); } .reminder-delete-btn { width: 30px; min-width: 30px; padding: 0 !important; color: var(--cw-warning) !important; justify-self: end; } .reminder-delete-confirm-cell { display: inline-flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; overflow: hidden; } .reminder-delete-confirm-btn, .reminder-delete-cancel-btn { min-width: 0; height: 30px; min-height: 30px; padding: 0 10px; border-radius: 999px; box-shadow: none; font-size: 10.5px; font-weight: 850; line-height: 1; white-space: nowrap; } .reminder-delete-confirm-btn { color: var(--cw-warning); background: rgba(255,255,255,.82); border: 1px solid rgba(201,135,52,.42); } .reminder-delete-cancel-btn { color: var(--reminder-muted); background: rgba(255,255,255,.76); border: 1px solid rgba(234,220,198,.9); } .reminder-inline-error { grid-column: 2 / -1; color: var(--cw-warning); font-size: 11px; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; } .reminder-empty-card { min-height: 132px; padding: 18px; display: grid; align-content: center; gap: 6px; border: 1px solid rgba(234,220,198,.92); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,250,242,.86)); } .reminder-empty-card span { color: var(--reminder-muted); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .reminder-empty-card strong { color: var(--reminder-text); font-size: 16px; font-weight: 820; } .reminder-empty-card p { margin: 0; color: var(--reminder-muted); font-size: 13px; line-height: 1.45; } @media (max-width: 1180px) { .notes-wall-shell { height: clamp(540px, 68vh, 700px); } .notes-wall { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .todo-list::before { grid-template-columns: 36px 100px 96px minmax(0, 1.35fr) minmax(0, .8fr) 266px; } .todo-row { grid-template-columns: 36px 100px 96px minmax(0, 1.35fr) minmax(0, .8fr) 46px 124px 96px; } .reminder-list::before { grid-template-columns: 36px 96px 118px 88px minmax(0, 1.1fr) minmax(0, .75fr) 152px; } .reminder-row { grid-template-columns: 36px 96px 118px 88px minmax(0, 1.1fr) minmax(0, .75fr) 46px 52px 34px; } .reminder-row.is-editing { grid-template-columns: 32px 92px 116px 90px minmax(150px, 1fr) minmax(130px, .75fr) 128px minmax(0, .9fr) 52px 58px 34px; } } @media (max-width: 768px) { .vx-mindmap-widget { margin: 14px 0; } .vx-mindmap-widget-link { min-height: 0; grid-template-columns: 1fr; align-items: stretch; gap: 12px; padding: 14px; border-radius: 24px; } .vx-mindmap-widget-copy { align-items: flex-start; } .vx-mindmap-widget-mark { width: 38px; height: 38px; flex-basis: 38px; } .vx-mindmap-widget-mark svg { width: 29px; height: 29px; } .vx-mindmap-widget-action { justify-content: space-between; gap: 12px; } .vx-mindmap-widget-recent { gap: 7px; } .vx-mindmap-widget-recent-list { grid-template-columns: 1fr; gap: 5px; } .vx-mindmap-widget-recent-item { min-height: 30px; padding: 6px 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .vx-mindmap-widget-recent-item:nth-of-type(n+4) { display: none; } .vx-mindmap-widget-recent-meta { max-width: 96px; overflow: hidden; text-overflow: ellipsis; } .vx-mindmap-widget-preview { width: 112px; height: 64px; } .vx-mindmap-widget-cta { min-height: 32px; padding: 0 13px; font-size: 11px; } .vx-simple-plan-widget { margin: 14px 0; } .vx-simple-plan-shell { min-height: 0; grid-template-columns: 1fr; align-items: stretch; gap: 12px; padding: 14px; border-radius: 24px; } .vx-simple-plan-copy { align-items: flex-start; } .vx-simple-plan-mark { width: 38px; height: 38px; flex-basis: 38px; } .vx-simple-plan-mark svg { width: 29px; height: 29px; } .vx-simple-plan-recent-title { align-items: center; } .vx-simple-plan-list { grid-template-columns: 1fr; gap: 5px; } .vx-simple-plan-action { display: none; } .todo-workspace { margin: 0; } .todo-shell { border-radius: 0; padding: 0; } .todo-head { align-items: stretch; flex-direction: column; } .todo-title-block { min-width: 0; } .todo-controls { justify-content: flex-start; width: 100%; flex: 0 1 auto; } .todo-controls input { flex: 1 1 160px; width: 100%; } .todo-controls select { flex: 1 1 132px; max-width: none; } .todo-clear-filters-btn { flex: 0 0 auto; min-width: 112px; } .todo-list { gap: 7px; padding-top: 10px; overflow-x: hidden; } .todo-row { grid-template-columns: 26px minmax(0, 1fr) 42px 28px; grid-template-rows: auto auto; align-items: center; column-gap: 6px; row-gap: 1px; min-height: 44px; padding: 7px 8px; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.035); } .todo-row:hover { transform: none; box-shadow: 0 1px 2px rgba(16,24,40,.035); } .todo-list::before { display: none; } .todo-check { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; min-height: 22px; justify-self: start; } .todo-check[aria-pressed="true"]::after { width: 7px; height: 11px; margin-top: 4px; } .todo-topic-pill, .todo-due-pill, .todo-topic-input, .todo-due-input, .todo-convert-btn, .todo-title-counter { display: none !important; } .todo-title-cell { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; } .todo-title-inline { height: 19px; min-height: 19px; padding: 0; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 740; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .todo-description-inline { grid-column: 2; grid-row: 2; height: 16px; min-height: 16px; max-height: 16px; padding: 0; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.25; overflow: hidden; resize: none; white-space: nowrap; } .todo-row h3 { grid-column: 2; grid-row: 1; min-width: 0; align-self: end; font-size: 13px; font-weight: 740; line-height: 1.25; overflow-wrap: normal; } .todo-row p { grid-column: 2; grid-row: 2; min-width: 0; max-height: 16px; color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; } .todo-row p:empty { display: none; } /* Focus-view rows nest the title/subtitle inside .todo-row-body. The inline layout's `.todo-row h3/p { grid-column: 2 }` above must not leak in, or the text is pushed into a 2nd column and looks centred. Keep it left-aligned. */ .todo-focus-view .todo-row-title, .todo-focus-view .todo-row-desc, .todo-focus-view .todo-row-meta { grid-column: auto; grid-row: auto; } .todo-done-btn, .todo-delete-btn { align-self: center; justify-self: end; min-height: 28px; height: 28px; box-shadow: none; } .todo-done-btn { grid-column: 3; grid-row: 1 / span 2; width: 42px; min-width: 42px; padding: 0 6px; font-size: 10.5px; } .todo-delete-btn { grid-column: 4; grid-row: 1 / span 2; width: 26px; min-width: 26px; padding: 0 !important; border-radius: 50%; font-size: 18px; line-height: 1; } .todo-row.is-delete-pending { grid-template-columns: 26px minmax(0, 1fr) 74px; } .todo-row.is-delete-pending .todo-done-btn { display: none; } .todo-delete-confirm-cell { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; width: auto; gap: 4px; } .todo-delete-confirm-btn, .todo-delete-cancel-btn { width: 34px; height: 28px; min-height: 28px; padding: 0; font-size: 10px; } .reminder-workspace { margin: 14px 0; } .reminder-shell { border-radius: 24px; padding: 14px; } .reminder-head { align-items: stretch; flex-direction: column; } .reminder-title-block { min-width: 0; } .reminder-controls { justify-content: flex-start; width: 100%; flex: 0 1 auto; } .reminder-controls input { flex: 1 1 160px; width: 100%; } .reminder-controls select { flex: 1 1 132px; max-width: none; } .reminder-clear-filters-btn { flex: 0 0 auto; min-width: 112px; } .reminder-list { gap: 7px; padding-top: 10px; overflow-x: hidden; } .reminder-list::before { display: none; } .reminder-row, .reminder-row.is-editing { grid-template-columns: 26px minmax(0, 1fr) 42px 42px 28px; grid-template-rows: auto auto auto; align-items: center; column-gap: 6px; row-gap: 2px; min-height: 50px; padding: 7px 8px; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.035); } .reminder-row:hover { transform: none; box-shadow: 0 1px 2px rgba(16,24,40,.035); } .reminder-check { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 22px; height: 22px; min-height: 22px; justify-self: start; } .reminder-check[aria-pressed="true"]::after { width: 7px; height: 11px; margin-top: 4px; } .reminder-category-pill, .reminder-repeat-placeholder, .reminder-category-input, .reminder-date-input, .reminder-time-input, .reminder-title-counter { display: none !important; } .reminder-date-pill, .reminder-repeat-pill { grid-column: 2; width: auto; max-width: 100%; justify-self: start; min-height: 20px; padding: 3px 7px; font-size: 9.5px; } .reminder-date-pill { grid-row: 2; } .reminder-repeat-pill { grid-row: 3; } .reminder-title-cell, .reminder-row h3 { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; } .reminder-title-inline { height: 19px; min-height: 19px; padding: 0; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 740; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reminder-notes-inline, .reminder-row p { grid-column: 2; grid-row: 2 / span 2; min-width: 0; max-height: 16px; padding: 0; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--reminder-muted); font-size: 11.5px; line-height: 1.25; overflow: hidden; resize: none; white-space: nowrap; text-overflow: ellipsis; } .reminder-row p:empty { display: none; } .reminder-repeat-input { grid-column: 2; grid-row: 3; width: 132px; max-width: 100%; height: 24px; min-height: 24px; padding: 0 8px; font-size: 10px; } .reminder-custom-repeat { grid-column: 1 / -1; grid-row: 4; grid-template-columns: auto 52px minmax(64px, 1fr) minmax(86px, 1fr); gap: 5px; padding-top: 3px; } .reminder-custom-repeat input, .reminder-custom-repeat select { height: 28px; min-height: 28px; padding: 0 8px; font-size: 10px; } .reminder-done-btn, .reminder-complete-btn, .reminder-cancel-btn, .reminder-delete-btn { align-self: center; justify-self: end; min-height: 28px; height: 28px; box-shadow: none; } .reminder-done-btn { grid-column: 3; grid-row: 1 / span 3; width: 42px; min-width: 42px; padding: 0 6px; font-size: 10.5px; } .reminder-complete-btn, .reminder-cancel-btn { grid-column: 4; grid-row: 1 / span 3; width: 42px; min-width: 42px; padding: 0 6px; font-size: 10px; } .reminder-delete-btn { grid-column: 5; grid-row: 1 / span 3; width: 26px; min-width: 26px; padding: 0 !important; border-radius: 50%; font-size: 18px; line-height: 1; } .reminder-row.is-delete-pending { grid-template-columns: 26px minmax(0, 1fr) 74px; } .reminder-row.is-delete-pending .reminder-done-btn, .reminder-row.is-delete-pending .reminder-complete-btn { display: none; } .reminder-delete-confirm-cell { grid-column: 3; grid-row: 1 / span 3; align-self: center; justify-self: end; width: auto; gap: 4px; } .reminder-delete-confirm-btn, .reminder-delete-cancel-btn { width: 34px; height: 28px; min-height: 28px; padding: 0; font-size: 10px; } .reminder-row.is-editing { grid-template-columns: 26px minmax(0, 1fr) 52px 58px; grid-template-rows: auto auto auto auto auto; align-items: center; } .reminder-row.is-editing .reminder-category-input, .reminder-row.is-editing .reminder-date-input, .reminder-row.is-editing .reminder-time-input { display: block !important; height: 28px; min-height: 28px; padding: 0 8px; font-size: 10px; } .reminder-row.is-editing .reminder-category-input { grid-column: 2; grid-row: 2; } .reminder-row.is-editing .reminder-date-input { grid-column: 2; grid-row: 3; } .reminder-row.is-editing .reminder-time-input { grid-column: 2; grid-row: 4; } .reminder-row.is-editing .reminder-title-cell { grid-column: 2; grid-row: 1; } .reminder-row.is-editing .reminder-notes-inline { grid-column: 2; grid-row: 5; display: block; } .reminder-row.is-editing .reminder-repeat-input { grid-column: 3 / span 2; grid-row: 2; width: 100%; } .reminder-row.is-editing .reminder-custom-repeat { grid-column: 1 / -1; grid-row: 6; } .reminder-row.is-editing .reminder-done-btn { grid-column: 3; grid-row: 1; } .reminder-row.is-editing .reminder-cancel-btn { grid-column: 4; grid-row: 1; } .reminder-row.is-editing .reminder-delete-btn, .reminder-row.is-editing .reminder-delete-confirm-cell { grid-column: 4; grid-row: 3; } .reminder-inline-error { grid-column: 1 / -1; grid-row: auto; padding-top: 2px; font-size: 10.5px; } @supports (-webkit-touch-callout: none) { .todo-row, .todo-title-cell, .todo-row h3, .todo-row p, .reminder-row, .reminder-title-cell, .reminder-row h3, .reminder-row p { min-width: 0; } .todo-title-inline, .todo-description-inline, .reminder-title-inline, .reminder-notes-inline { -webkit-appearance: none; appearance: none; } } @media (max-width: 430px) { .todo-row { grid-template-rows: auto; min-height: 40px; padding-block: 6px; } .todo-row p, .todo-description-inline { display: none; } .todo-row h3, .todo-title-cell { grid-row: 1; align-self: center; } .reminder-row, .reminder-row.is-editing { grid-template-rows: auto auto; min-height: 44px; padding-block: 6px; } .reminder-row p, .reminder-notes-inline, .reminder-repeat-pill, .reminder-repeat-input { display: none; } .reminder-row h3, .reminder-title-cell { grid-row: 1; align-self: center; } .reminder-date-pill { grid-row: 2; } .reminder-row.is-editing .reminder-repeat-input { display: block; grid-column: 3 / span 2; grid-row: 2; } .reminder-row.is-editing .reminder-notes-inline { display: block; } } .notes-workspace { gap: 12px; margin: 14px 0; } .notes-wall-shell { border-radius: 24px; padding: 14px; } .notes-wall-shell { height: min(620px, 78vh); } .notes-wall-head { align-items: stretch; flex-direction: column; } .notes-wall-title { min-width: 0; } .notes-canvas-controls { justify-content: flex-start; min-width: 0; width: 100%; flex: 0 1 auto; } .notes-search-wrap { flex: 1 1 130px; } .notes-search-wrap input { width: 100%; } .notes-canvas-controls select { flex: 1 1 128px; max-width: none; } .notes-actions, .note-editor-grid, .note-execution-tools { grid-template-columns: 1fr; } .notes-wall { grid-template-columns: 1fr; grid-auto-rows: 214px; } .note-card, .note-card.small, .note-card.medium, .note-card.large { height: 214px; min-height: 214px; max-height: 214px; } .notes-wall-head small { text-align: left; } .note-editor-panel { inset: auto 10px 10px 10px; width: auto; max-height: 82vh; border-radius: 24px; transform: translateY(0); } .note-editor-hidden { transform: translateY(18px); } .note-body-input { min-height: 170px; } /* WYSIWYG editor stays usable in the mobile sheet: definite height, scroll inside. */ .note-body-editor { min-height: 240px; } .note-body-editor.ql-container { height: auto; min-height: 240px; } .note-body-editor .ql-editor { max-height: 46vh; overflow: auto; } .note-fmt-toolbar { margin-top: 6px; } } /* Team workspace + detailed execution view */ .team-panel, .detailed-view .detail-shell { border: 1px solid var(--vx-line); background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,255,.96)); box-shadow: var(--shadow-sm); border-radius: 32px; } .team-panel { padding: 20px; margin-bottom: 18px; } .team-panel-head, .detail-topbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .team-panel-head h2, .detail-topbar h1 { margin: 0; font-size: 30px; line-height: 1.05; letter-spacing: -.8px; } .team-panel-head small { color: var(--vx-muted); font-size: 12px; line-height: 1.45; } .team-owner-tools { display: grid; grid-template-columns: 1.15fr 1fr .9fr auto; gap: 10px; margin: 14px 0; } .team-owner-tools input, .team-owner-tools button, .detail-filters input, .detail-filters select { min-height: 42px; padding: 0 14px; } .team-owner-tools button, .team-open-btn, .detailed-open-btn, #backToFlow, .detail-table button, .drawer-actions button { background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)); color: var(--cw-surface); border-color: transparent; font-weight: 750; } .team-members-strip { position: relative; isolation: isolate; margin-top: 2px; max-width: 100%; overflow: hidden; } .team-members-strip::before, .team-members-strip::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 38px; pointer-events: none; } .team-members-strip::before { left: 0; background: linear-gradient(90deg, rgba(250,251,255,.98), rgba(250,251,255,0)); } .team-members-strip::after { right: 0; background: linear-gradient(270deg, rgba(250,251,255,.98), rgba(250,251,255,0)); } .team-members-list { display: flex; flex-wrap: nowrap; gap: 10px; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-padding-inline: 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .team-members-list::-webkit-scrollbar { display: none; } .team-members-list.has-empty-state { flex-wrap: wrap; overflow-x: visible; } .team-members-list .team-empty { flex: 1 0 100%; } .team-members-list.has-empty-state .team-empty-premium { flex: 1 1 min(360px, 100%); } .team-member-card { display: flex; flex: 0 0 clamp(238px, 24vw, 268px); justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--vx-line); border-radius: 20px; background: var(--cw-surface); contain: layout paint; scroll-snap-align: start; } .team-member-card.inactive { opacity: .58; } .team-member-card.pending-invite { opacity: 1; border-style: dashed; } .team-member-card.pending-invite .member-status { color: var(--cw-warning); border-color: rgba(177, 116, 0, .28); background: rgba(255, 198, 92, .16); } .member-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .member-main > div { min-width: 0; } .member-main strong, .drawer-head strong { display: block; font-size: 13px; line-height: 1.25; } .member-main small, .drawer-head small { display: block; color: var(--vx-muted); font-size: 11px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; } .team-avatar, .mini-avatar { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)); color: var(--cw-surface); font-size: 11px; font-weight: 800; flex: 0 0 auto; } .mini-avatar { width: 25px; height: 25px; border-radius: 9px; font-size: 9px; } .member-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; } .member-actions button { min-height: 32px; padding: 0 10px; font-size: 11px; } .member-status { padding: 7px 9px; border: 1px solid var(--vx-line); border-radius: 999px; color: var(--vx-muted); font-size: 11px; font-weight: 750; } .invitation-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(18, 22, 35, .48); backdrop-filter: blur(10px); } .invitation-card { position: relative; width: min(100%, 440px); border: 1px solid var(--vx-line); border-radius: 8px; background: var(--vx-surface); box-shadow: var(--shadow-lg); padding: 24px; color: var(--vx-ink); } .invitation-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vx-line); background: rgba(255,255,255,.9); color: var(--vx-muted); } .invitation-kicker { color: var(--vx-muted); font-size: 11px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .invitation-card h2 { margin: 8px 38px 8px 0; font-size: 22px; line-height: 1.2; letter-spacing: 0; } .invitation-card p { color: var(--vx-muted); line-height: 1.55; margin: 0; } .invitation-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .invitation-actions button { min-height: 40px; padding: 0 16px; } .invitation-actions .secondary { background: rgba(255,255,255,.86); color: var(--vx-ink); border: 1px solid var(--vx-line); } .team-empty, .team-picker-empty, .detail-empty, .detailed-loading { padding: 18px; border: 1px dashed var(--vx-line-strong); border-radius: 18px; color: var(--vx-muted); background: rgba(255,255,255,.72); font-size: 13px; } .team-picker-empty.solo { flex: 1 1 160px; align-self: center; min-height: 42px; padding: 10px 12px; border-style: solid; border-color: rgba(21, 26, 35, .08); background: rgba(255,255,255,.58); } .team-empty-premium { display: grid; gap: 8px; align-content: center; min-height: 92px; border-style: solid; border-color: rgba(21, 26, 35, .1); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,255,.76)), radial-gradient(circle at 12% 0%, rgba(var(--brand-rgb),.08), rgba(var(--brand-rgb),0) 34%); box-shadow: 0 16px 34px rgba(16, 24, 40, .06); } .team-empty-premium strong { display: block; color: var(--vx-ink); font-size: 14px; line-height: 1.2; } .team-empty-premium span { display: block; max-width: 520px; } .team-empty-premium button { justify-self: start; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(21, 26, 35, .12); color: var(--cw-surface); background: linear-gradient(135deg, var(--cw-text), var(--cw-accent)); font-weight: 750; box-shadow: 0 12px 24px rgba(21, 26, 35, .12); } .team-picker { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding: 8px; border: 1px solid var(--vx-line); border-radius: 20px; background: var(--cw-surface-muted); } .compact-picker { max-height: 120px; flex-wrap: wrap; overflow: auto; } .email-chip-picker { max-height: 58px; align-content: flex-start; gap: 2px; padding: 3px; overflow-y: auto; overflow-x: hidden; border-radius: 12px; } .member-chip-select, .inline-assignee-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 172px; padding: 8px 10px; border-radius: 16px; background: var(--cw-surface); box-shadow: none; text-align: left; } .email-chip-picker .member-chip-select { min-width: 0; max-width: 156px; flex: 0 1 auto; min-height: 20px; height: 20px; padding: 1px 5px 1px 3px; gap: 3px; border-radius: 999px; border-color: rgba(var(--brand-rgb),.18); font-size: 9px; } .email-chip-picker .mini-avatar { width: 13px; height: 13px; border-radius: 50%; font-size: 6px; letter-spacing: 0; } .member-chip-select strong { display: block; font-size: 12px; line-height: 1.2; } .member-chip-select small { display: block; color: var(--vx-muted); font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; } .email-chip-picker .member-chip-select strong { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7.8px; line-height: 1.02; } .email-chip-picker .member-chip-select small { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6.6px; line-height: 1.05; } .member-chip-select.selected, .inline-assignee-chip.selected { border-color: rgba(var(--brand-rgb),.42); background: var(--vx-blue-soft); color: var(--vx-blue); } .email-chip-picker .member-chip-select.selected { border-color: rgba(255,255,255,.28); background: linear-gradient(135deg, var(--cw-accent) 0%, var(--cw-accent) 56%, var(--cw-accent) 100%); color: var(--cw-surface); box-shadow: 0 4px 12px rgba(var(--brand-rgb),.18); } .email-chip-picker .member-chip-select.selected strong { color: var(--cw-surface); } .email-chip-picker .member-chip-select.selected small { color: rgba(255,255,255,.78); } .email-chip-picker .member-chip-select.selected .mini-avatar { background: rgba(255,255,255,.2); color: var(--cw-surface); border: 1px solid rgba(255,255,255,.24); } .member-chip-select.missing-email { border-style: dashed; } .member-chip-select.missing-email.selected { border-color: rgba(214,69,61,.42); background: linear-gradient(135deg, var(--cw-danger) 0%, var(--cw-danger) 100%); color: var(--cw-surface); } .email-chip-picker .member-chip-select.missing-email.selected small { color: rgba(255,255,255,.76); } .assignee-mini-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 9px 0 0; } .assignee-mini { display: inline-flex; align-items: center; gap: 5px; max-width: 170px; padding: 5px 7px; border: 1px solid var(--vx-line); border-radius: 999px; background: var(--cw-surface); color: var(--vx-muted); font-size: 10.5px; font-weight: 700; } .assignee-mini b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--vx-blue-soft); color: var(--vx-blue); font-size: 8px; } .assignee-mini.empty { color: var(--cw-accent-text); } .owner-mini { border-color: rgba(var(--brand-rgb),.2); background: var(--vx-blue-soft); color: var(--vx-ink); } .pending-owner { border-style: dashed; color: var(--cw-warning); background: rgba(255, 198, 92, .16); } .inline-assignee-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .inline-assignee-chip { min-width: auto; font-size: 11px; } .detailed-view { position: relative; z-index: 2; width: min(1580px, 94vw); margin: 0 auto; padding: 34px 0 64px; } .detailed-view .detail-shell { padding: 22px; } .detail-topbar h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -2px; } .detail-summary-grid { display: grid; grid-template-columns: repeat(8, minmax(128px, 1fr)); gap: 10px; margin: 16px 0; } .detail-summary-card { min-height: 98px; border: 1px solid var(--vx-line); border-radius: 22px; padding: 14px; background: var(--cw-surface); position: relative; overflow: hidden; } .detail-summary-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vx-blue); } .detail-summary-card.tone-1::before { background: var(--vx-violet); } .detail-summary-card.tone-2::before { background: var(--vx-red); } .detail-summary-card.tone-3::before { background: var(--vx-green); } .detail-summary-card span { display: block; color: var(--vx-muted); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; line-height: 1.35; } .detail-summary-card strong { display: block; margin-top: 10px; font-size: 30px; letter-spacing: -1px; } .detail-filters { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, .7fr)); gap: 10px; margin-bottom: 14px; } .detail-table-scroll { overflow: auto; border: 1px solid var(--vx-line); border-radius: 24px; background: var(--cw-surface); max-height: 68vh; } .detail-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1480px; font-size: 12px; } .detail-table th { position: sticky; top: 0; z-index: 1; background: var(--cw-accent-tint); color: var(--vx-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--vx-line); } .detail-table td { padding: 12px 10px; border-bottom: 1px solid var(--vx-line); vertical-align: top; color: var(--vx-ink); } .detail-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; white-space: nowrap; } .detail-table tbody tr:hover { background: var(--cw-accent-tint); } .detail-table td strong { display: block; max-width: 260px; line-height: 1.3; } .detail-table td small { display: block; max-width: 280px; margin-top: 4px; color: var(--vx-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-pill, .risk-badge { display: inline-flex; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--vx-line); font-size: 10px; font-weight: 800; text-transform: capitalize; white-space: nowrap; } .risk-badge.overdue, .risk-badge.blocked { color: var(--vx-red); background: var(--vx-red-soft); } .risk-badge.at_risk, .risk-badge.due_soon { color: var(--vx-yellow); background: var(--vx-yellow-soft); } .risk-badge.steady, .risk-badge.complete { color: var(--vx-green); background: var(--vx-green-soft); } .overdue-text { color: var(--vx-red); font-weight: 800; } .next-action-cell { max-width: 270px; line-height: 1.35; color: var(--vx-muted) !important; } .completion-ring { --pct: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle closest-side, var(--cw-surface) 72%, transparent 74%), conic-gradient(var(--vx-blue) calc(var(--pct) * 1%), var(--cw-accent-tint) 0); font-size: 10px; font-weight: 850; } .task-detail-drawer { position: fixed; right: 18px; top: 90px; bottom: 18px; width: min(440px, calc(100vw - 28px)); z-index: 140; overflow: auto; border: 1px solid var(--vx-line); border-radius: 28px; padding: 18px; background: rgba(255,255,255,.96); box-shadow: 0 28px 86px rgba(16,24,40,.22); backdrop-filter: blur(18px); } .drawer-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; } .drawer-head { display: flex; gap: 10px; align-items: center; padding-right: 42px; margin-bottom: 12px; } .task-detail-drawer p { color: var(--vx-muted); font-size: 13px; line-height: 1.55; } .drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .drawer-grid span, .drawer-section { border: 1px solid var(--vx-line); border-radius: 18px; background: var(--cw-surface-muted); padding: 11px; color: var(--vx-muted); font-size: 11px; } .drawer-grid b { display: block; color: var(--vx-ink); margin-top: 4px; } .drawer-section { margin-top: 10px; } .drawer-section h3 { margin: 0 0 7px; color: var(--vx-ink); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; } .drawer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .drawer-section-head h3 { margin: 0; } .drawer-section-head div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .drawer-section-head button { min-height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.78); color: var(--cw-accent-text); font-size: 11px; font-weight: 800; box-shadow: none; } .task-share-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .task-share-control select, .task-share-control button { min-height: 38px; padding: 0 12px; font-size: 12px; } .activity-line { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--vx-line); } .activity-line:first-child { border-top: 0; } .activity-line b { color: var(--vx-ink); font-size: 12px; } .activity-line span { color: var(--vx-muted); font-size: 11px; } .drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .drawer-actions button { min-height: 38px; padding: 0 12px; font-size: 12px; } body.is-team-member #openTeamPanel, body.is-team-member #teamOwnerTools, body.is-team-member .delete-task-btn { display: none !important; } body.is-detailed-route #appShell { display: none !important; } body.is-voice-detail-route #appShell, body.is-ask-ai-route #appShell, body.is-people-route #appShell, body.is-lists-route #appShell, body.is-lens-route #appShell, body.is-attachi-route #appShell, body.is-vaia-route #appShell { display: none !important; } body.is-detailed-route.email-open #appShell { display: block !important; position: relative; z-index: 180; } body.is-detailed-route.email-open #appShell > :not(#taskEmailModal) { display: none !important; } body.is-detailed-route #detailedTaskView { display: block; } .chat-launcher { position: fixed; right: 28px; bottom: 28px; z-index: 110; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.72); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--cw-surface); background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(237,244,255,.76)); box-shadow: 0 18px 42px rgba(var(--brand-rgb),.28), 0 0 0 8px rgba(var(--brand-rgb),.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .chat-launcher[hidden] { display: none !important; } /* The FLOATING chat bubble lives on the Home landing ONLY. In every module surface (Email, Calendar, People Hub, and all routes) it is hidden — chat is reached there from an in-module entry point instead, never a floating bubble. */ body.is-email-focus .chat-launcher, body.is-calendar-focus .chat-launcher, body.is-people-route .chat-launcher, body.is-ask-ai-route .chat-launcher, body.is-lists-route .chat-launcher, body.is-lens-route .chat-launcher, body.is-attachi-route .chat-launcher, body.is-vaia-route .chat-launcher, body.is-detailed-route .chat-launcher, body.is-voice-detail-route .chat-launcher { display: none !important; } .chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(var(--brand-rgb),.32), 0 0 0 8px rgba(var(--brand-rgb),.09); } .chat-launcher svg { width: 30px; height: 30px; display: block; } .chat-unread-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cw-surface); background: linear-gradient(135deg, var(--cw-danger), var(--cw-danger)); border: 2px solid var(--cw-surface); box-shadow: 0 8px 18px rgba(217,45,122,.25); font-size: 10px; font-weight: 800; } .team-chat-panel { position: fixed; right: 22px; bottom: 88px; /* Above the Email/Calendar/People focus overlays (z-index:1000) so chat opened from an in-module entry point appears over the module, not behind it. */ z-index: 1100; width: min(390px, calc(100vw - 28px)); height: min(640px, calc(100vh - 116px)); display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(246,249,255,.86)), radial-gradient(circle at 18% 0%, rgba(var(--brand-rgb),.12), transparent 36%), radial-gradient(circle at 100% 12%, rgba(var(--brand-rgb),.12), transparent 32%); box-shadow: 0 30px 90px rgba(16,24,40,.20); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; transition: transform .22s ease, opacity .18s ease; } .team-chat-panel.chat-hidden { transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none; } .chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .chat-panel-head strong { display: block; color: var(--vx-ink); font-size: 19px; line-height: 1.1; letter-spacing: 0; } .chat-panel-head button { width: 34px; height: 34px; padding: 0; border-radius: 13px; color: var(--vx-muted); background: rgba(255,255,255,.78); border-color: rgba(214,224,242,.9); font-size: 20px; line-height: 1; } .chat-room-strip { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 4px; scrollbar-width: thin; } .chat-room-chip { flex: 0 0 auto; min-width: 132px; max-width: 190px; min-height: 43px; padding: 7px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; border-radius: 15px; background: rgba(255,255,255,.72); border-color: rgba(220,227,240,.95); color: var(--vx-ink); text-align: left; } .chat-room-chip.active { color: var(--cw-surface); border-color: rgba(var(--brand-rgb),.18); background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); box-shadow: 0 12px 28px rgba(var(--brand-rgb),.18); } .chat-room-chip strong, .chat-room-chip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .chat-room-chip strong { font-size: 11px; line-height: 1.15; } .chat-room-chip small { color: currentColor; opacity: .68; font-size: 10px; line-height: 1.1; margin-top: 2px; } .chat-room-chip b { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cw-accent-text); background: var(--cw-surface); font-size: 9px; } .chat-room-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--cw-accent); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.12); } .chat-room-dot.direct { background: var(--cw-accent); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.12); } .chat-direct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } .chat-direct-row select, .chat-direct-row button { min-height: 36px; border-radius: 13px; font-size: 12px; } .chat-direct-row button { padding: 0 13px; color: var(--cw-surface); border: 0; background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)); } .chat-status { min-height: 18px; color: var(--vx-muted); font-size: 11px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-messages { min-height: 0; overflow-y: auto; padding: 8px 3px 8px 1px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; } .chat-message { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: end; } .chat-message.mine { grid-template-columns: minmax(0, 1fr) 24px; } .chat-message.mine .chat-avatar { grid-column: 2; grid-row: 1; } .chat-message.mine .chat-bubble { grid-column: 1; grid-row: 1; justify-self: end; } .chat-avatar { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cw-surface); background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); box-shadow: 0 8px 18px rgba(var(--brand-rgb),.16); font-size: 9px; font-weight: 800; } .chat-bubble { max-width: 100%; padding: 8px 10px; border-radius: 16px 16px 16px 6px; color: var(--cw-accent-text); background: rgba(255,255,255,.82); border: 1px solid rgba(225,231,242,.95); box-shadow: 0 10px 22px rgba(16,24,40,.06); } .chat-message.mine .chat-bubble { color: var(--cw-surface); border-color: rgba(var(--brand-rgb),.12); background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)); border-radius: 16px 16px 6px 16px; } .chat-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; } .chat-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1; } .chat-meta time { flex: 0 0 auto; color: currentColor; opacity: .58; font-size: 9px; } .chat-bubble p { margin: 0; font-size: 12px; line-height: 1.42; overflow-wrap: anywhere; } .chat-empty-state, .chat-room-empty { padding: 14px; color: var(--vx-muted); background: rgba(255,255,255,.62); border: 1px dashed rgba(199,211,232,.9); border-radius: 18px; font-size: 12px; line-height: 1.35; } .chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; align-items: end; padding: 8px; border: 1px solid rgba(216,225,240,.96); border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .chat-composer textarea { min-height: 42px; max-height: 110px; padding: 9px 2px 7px 6px; border: 0; border-radius: 10px; outline: 0; resize: none; color: var(--vx-ink); background: transparent; font-size: 12px; line-height: 1.35; } .chat-composer button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 15px; color: var(--cw-surface); background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)); box-shadow: 0 12px 24px rgba(var(--brand-rgb),.22); } .chat-composer button:disabled { opacity: .55; cursor: wait; } .chat-composer svg { width: 19px; height: 19px; display: block; margin: auto; } @media (max-width: 1320px) { .team-owner-tools, .detail-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .chat-launcher { right: 28px; bottom: 28px; width: 50px; height: 50px; border-radius: 17px; } .team-chat-panel { left: 10px; right: 10px; bottom: 10px; width: auto; height: min(78vh, 660px); max-height: calc(100dvh - 20px); border-radius: 24px; padding: 12px; } .team-chat-panel.chat-hidden { transform: translateY(20px); } .chat-room-strip { gap: 6px; } .chat-room-chip { min-width: 122px; max-width: 168px; min-height: 40px; padding: 6px 8px; border-radius: 14px; } .chat-direct-row select, .chat-direct-row button { min-height: 38px; } .chat-message { grid-template-columns: 22px minmax(0, 1fr); } .chat-message.mine { grid-template-columns: minmax(0, 1fr) 22px; } .chat-avatar { width: 22px; height: 22px; font-size: 8px; } .chat-bubble { padding: 7px 9px; } .chat-bubble p { font-size: 11.5px; } .chat-composer { grid-template-columns: minmax(0, 1fr) 38px; border-radius: 17px; } .chat-composer button { width: 38px; height: 38px; border-radius: 14px; } .team-panel, .detailed-view .detail-shell { border-radius: 24px; padding: 14px; } .team-panel-head, .detail-topbar { flex-direction: column; } .team-owner-tools, .detail-filters, .detail-summary-grid { grid-template-columns: 1fr; } .team-members-strip::before, .team-members-strip::after { width: 28px; } .team-member-card { flex-basis: min(76vw, 248px); align-items: flex-start; flex-direction: column; } .member-actions { justify-content: flex-start; } .task-share-control { grid-template-columns: 1fr; } .detail-table-scroll { max-height: none; } .task-detail-drawer { inset: auto 10px 10px 10px; width: auto; max-height: 78vh; border-radius: 24px; } .email-chip-picker { max-height: 56px; } .email-chip-picker .member-chip-select { width: auto; max-width: min(156px, 78vw); } .email-chip-picker .member-chip-select strong, .email-chip-picker .member-chip-select small { max-width: min(92px, 48vw); } } /* Final header-space overrides after legacy responsive header rules */ .vx-header-context.vx-space-context { display: flex !important; align-items: center !important; justify-content: center; min-width: 0; padding: 3px !important; border-color: rgba(226,220,211,.82); background: rgba(255,253,249,.72); box-shadow: 0 1px 2px rgba(16,24,40,.04), inset 0 1px 0 rgba(255,255,255,.86); } .vx-space-selector { display: flex; align-items: center; gap: 2px; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vx-space-selector::-webkit-scrollbar { display: none; } .vx-space-selector button { flex: 0 0 auto; min-height: 34px; min-width: 62px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--cw-text-muted); font-size: 12px; font-weight: 800; letter-spacing: 0; white-space: nowrap; box-shadow: none; } .vx-space-selector button:hover, .vx-space-selector button:focus-visible { background: rgba(246,248,252,.92); color: var(--cw-text); outline: none; } .vx-space-selector button.active, .vx-space-selector button[aria-pressed="true"] { background: var(--cw-surface); color: var(--cw-text); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 18px rgba(16,24,40,.06); } @media (max-width: 1100px) { .vx-header-context.vx-space-context { flex: 1 1 auto; max-width: 390px; } } @media (max-width: 760px) { .vx-header-inner { flex-wrap: wrap; row-gap: 8px; padding: 8px 0; } .vx-header-context.vx-space-context { order: 3; flex: 1 1 100%; width: 100%; max-width: 100% !important; justify-content: flex-start; } .vx-space-selector { width: 100%; } .vx-space-selector button { min-height: 38px; min-width: 74px; padding: 0 14px; } } @media (max-width: 360px) { .vx-space-selector button { min-width: 68px; padding: 0 12px; } } /* Google-style VantageX theme layer, aligned with project_plan.html. */ :root { --google-blue: var(--cw-accent); --google-blue-dark: var(--cw-accent-active); --google-blue-soft: var(--cw-accent-tint); --google-blue-line: var(--cw-accent-tint); --google-green: var(--cw-success); --google-green-soft: var(--cw-success-bg); --google-red: var(--cw-danger); --google-red-soft: var(--cw-danger-bg); --vx-purple: var(--cw-accent); --text-primary: var(--cw-text); --text-secondary: var(--cw-text-muted); --border: var(--cw-border); --border-soft: var(--cw-accent-tint); --bg: var(--cw-surface-muted); --surface: var(--cw-surface); --surface-soft: var(--cw-surface-muted); --shadow-1: 0 8px 28px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.12); --radius: 16px; --vx-ink: var(--text-primary); --vx-graphite: var(--text-primary); --vx-muted: var(--text-secondary); --vx-line: var(--border); --vx-line-strong: var(--border); --vx-canvas: var(--bg); --vx-card: var(--cw-surface); --vx-card-solid: var(--cw-surface); --vx-black: var(--cw-text); --vx-champagne: var(--google-blue-soft); --vx-gold: var(--google-blue); --vx-blue: var(--google-blue); --vx-violet: var(--vx-purple); --vx-green: var(--google-green); --vx-red: var(--google-red); --vx-blue-soft: var(--google-blue-soft); --vx-green-soft: var(--google-green-soft); --vx-red-soft: var(--google-red-soft); --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.10), 0 1px 4px rgba(60, 64, 67, 0.08); --shadow-md: var(--shadow-1); --shadow-lg: var(--shadow-1); --r-xl: 16px; --r-lg: 16px; --r-md: 12px; --r-sm: 8px; } body { font-family: var(--font-base); color: var(--text-primary); background: transparent !important; } body::before, body::after { display: none; } .vx-card, .vx-section-card, .auth-card, .vx-brand-strip, .today-card, .collaboration-inbox, .vx-mindmap-widget, .vx-simple-plan-widget, .reminder-workspace, .flow-ai-hero, .flow-board, .next-actions-card, .team-panel, .notes-panel, .chat-panel, .modal-card, .email-card, .admin-contact-modal, .metrics > *, .task-card, .note-card, .reminder-shell { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* To-Do shell removed — it lives flat inside the hero focus panel */ .todo-workspace, .todo-shell { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .vx-brand-strip::before, .vx-brand-strip::after, .auth-card::before, .flow-ai-hero::before, .flow-ai-hero::after, .today-card::before, .today-card::after, .todo-workspace::before, .todo-workspace::after, .reminder-workspace::before, .reminder-workspace::after, .vx-mindmap-widget::before, .vx-simple-plan-widget::before { display: none !important; } .vx-header { background: rgba(250, 248, 244, .92) !important; border-bottom: 1px solid rgba(226, 220, 211, .82) !important; box-shadow: 0 1px 2px rgba(60, 64, 67, .06) !important; backdrop-filter: blur(10px); } .vx-title, .vx-brand-strip-title, .todo-title-block h2, .reminder-title-block h2, .vx-mindmap-widget h2, .vx-simple-plan-widget h2 { color: var(--text-primary) !important; letter-spacing: 0 !important; } .vx-sub, .vx-brand-strip-copy, .vx-brand-strip-tag, .today-card small, .collab-inbox-head small, .todo-title-block small, .reminder-title-block small, .vx-mindmap-widget p, .vx-mindmap-widget small, .vx-simple-plan-widget p, .vx-simple-plan-widget small, .vx-simple-plan-meta, .vx-mindmap-widget-recent-meta { color: var(--text-secondary) !important; } .vx-brand-strip-kicker, .vx-section-eyebrow, .todo-brand-line, .reminder-brand-line, .vx-mindmap-widget-mark, .vx-simple-plan-mark { color: var(--google-blue) !important; } button, input, select, textarea { font-family: var(--font-base); border-radius: 6px; border-color: var(--border); background: var(--cw-surface); color: var(--text-primary); box-shadow: none; } input:focus, select:focus, textarea:focus { border-color: var(--google-blue) !important; box-shadow: 0 0 0 1px var(--google-blue) !important; } .vx-btn, .vx-login-btn, .vx-register-btn, .vx-refresh-header-btn, .vx-logout-header-btn, .vx-brand-strip-primary, .vx-brand-strip-secondary, .vx-brand-strip-contact-btn, .vx-brand-strip-help-link, .vx-simple-plan-new, .vx-simple-plan-open, .todo-add-btn, .todo-clear-filters-btn, .reminder-add-btn, .reminder-clear-filters-btn, .flow-ai-submit, .ask-ai-btn, .mini-action, .task-action-btn { min-height: 32px; border-radius: 4px !important; border: 1px solid var(--border) !important; background: var(--cw-surface) !important; color: var(--google-blue) !important; box-shadow: none !important; font-weight: 500 !important; transform: none !important; } .vx-btn-primary, .vx-register-btn, .vx-brand-strip-primary, .vx-simple-plan-new, .todo-add-btn, .reminder-add-btn, .flow-ai-submit, .ask-ai-btn { background: var(--google-blue) !important; border-color: var(--google-blue) !important; color: var(--cw-surface) !important; } .vx-btn:hover, .vx-login-btn:hover, .vx-register-btn:hover, .vx-refresh-header-btn:hover, .vx-logout-header-btn:hover, .vx-brand-strip-primary:hover, .vx-brand-strip-secondary:hover, .vx-brand-strip-contact-btn:hover, .vx-brand-strip-help-link:hover, .vx-simple-plan-new:hover, .vx-simple-plan-open:hover, .todo-add-btn:hover, .todo-clear-filters-btn:hover, .reminder-add-btn:hover, .reminder-clear-filters-btn:hover, .flow-ai-submit:hover, .ask-ai-btn:hover, .task-action-btn:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; } .vx-chip, .vx-brand-strip-tag, .chip, .pill, .status-pill, .simple-plan-task-pill, .vx-simple-plan-state, .vx-mindmap-widget-recent-state { border: 1px solid var(--border) !important; border-radius: 999px !important; background: var(--cw-surface) !important; color: var(--text-secondary) !important; box-shadow: none !important; } .vx-chip-primary, .pill.status-on_track, .simple-plan-task-pill { background: var(--google-blue-soft) !important; border-color: var(--google-blue-line) !important; color: var(--google-blue-dark) !important; } .pill.status-completed, .vx-chip-success { background: var(--google-green-soft) !important; border-color: var(--cw-success) !important; color: var(--google-green) !important; } .pill.status-delayed, .vx-chip-danger { background: var(--google-red-soft) !important; border-color: var(--cw-danger-bg) !important; color: var(--google-red) !important; } .vx-brand-strip, .today-card, .vx-mindmap-widget, .vx-simple-plan-widget, .todo-workspace, .reminder-workspace { margin-bottom: 16px; } .vx-mindmap-widget-link, .vx-simple-plan-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; } .vx-space-selector button[aria-pressed="true"], .vx-product-nav button:hover, .vx-product-nav button.is-active { background: var(--google-blue-soft) !important; border-color: var(--google-blue-line) !important; color: var(--google-blue-dark) !important; } .auth-screen { background: var(--bg) !important; } .auth-card { max-width: 560px; padding: 32px; } .auth-form button { background: var(--google-blue) !important; border-color: var(--google-blue) !important; color: var(--cw-surface) !important; } @media (max-width: 760px) { .auth-card { border-radius: 16px !important; padding: 24px; } } /* Compact human collaboration strip replacing the legacy Today's Vantage banner. */ .today-card.full-width-vantage.collaboration-inbox { display: grid !important; grid-template-columns: 182px minmax(0, 1fr); align-items: stretch; gap: 14px; min-height: 0 !important; max-height: 150px; margin-bottom: 18px; padding: 16px 18px !important; border: 1px solid rgba(220,226,236,.92); border-radius: 24px !important; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,253,.94)), var(--cw-surface); box-shadow: 0 14px 34px rgba(16,24,40,.06); overflow: hidden !important; cursor: default; } .today-card.full-width-vantage.collaboration-inbox::before { height: 3px; background: linear-gradient(90deg, rgba(21,26,35,.62), rgba(215,221,231,.55), rgba(255,255,255,0)); } .today-card.full-width-vantage.collaboration-inbox::after { display: none !important; } .collab-inbox-head { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 6px; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head span { color: var(--cw-text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .9px; line-height: 1.2; text-transform: uppercase; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { color: var(--cw-text); font-size: 16px; font-weight: 760; line-height: 1.2; } .collab-inbox-feed { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .collab-inbox-feed::-webkit-scrollbar { display: none; } .collab-feed-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; height: 82px; padding: 10px; border: 1px solid rgba(220,226,236,.9); border-radius: 16px; background: rgba(255,255,255,.86); color: var(--cw-text); text-align: left; box-shadow: 0 1px 2px rgba(16,24,40,.03); cursor: pointer; } .collab-feed-item:hover, .collab-feed-item:focus-visible { border-color: rgba(168,178,193,.95); background: var(--cw-surface); outline: none; box-shadow: 0 8px 20px rgba(16,24,40,.06); } .collab-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cw-text-subtle); } .collab-feed-item.task .collab-dot { background: var(--cw-accent); } .collab-feed-item.note .collab-dot { background: var(--cw-warning); } .collab-feed-item.message .collab-dot { background: var(--cw-success); } .collab-copy { display: grid; gap: 2px; min-width: 0; } .collab-copy strong, .collab-copy b, .collab-copy small, .collab-feed-item time { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { color: var(--cw-text-muted); font-size: 11px; font-weight: 780; letter-spacing: 0; line-height: 1.2; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { color: var(--cw-text); font-size: 13px; font-weight: 780; line-height: 1.25; } .today-card.full-width-vantage.collaboration-inbox .collab-copy small { color: var(--cw-text-muted); font-size: 11px; font-weight: 650; line-height: 1.2; } .collab-feed-item time { align-self: start; color: var(--cw-text-muted); font-size: 10.5px; font-weight: 760; line-height: 1.2; } .collab-feed-empty { display: flex; align-items: center; min-height: 82px; padding: 0 14px; border: 1px dashed rgba(207,215,227,.95); border-radius: 16px; background: rgba(255,255,255,.62); color: var(--cw-text-muted); font-size: 13px; font-weight: 720; } @media (max-width: 760px) { .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 1fr; gap: 10px; max-height: none; padding: 14px !important; border-radius: 22px !important; } .collab-inbox-head { gap: 4px; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { font-size: 14px; } .collab-inbox-feed { grid-auto-flow: column; grid-auto-columns: minmax(240px, 86%); grid-template-columns: none; } .collab-feed-item { height: 74px; border-radius: 15px; } .collab-feed-empty { min-height: 68px; } } @media (max-width: 360px) { .collab-inbox-feed { grid-auto-columns: minmax(218px, 88%); } .collab-feed-item { grid-template-columns: 7px minmax(0, 1fr); height: 78px; } .collab-feed-item time { grid-column: 2; justify-self: start; } } /* Compact signed-in identity and refresh controls in the existing header action area. */ .vx-header-actions { --vx-header-pill-height: 34px; } .vx-user-block.user-identity { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; flex: 0 1 132px; width: 132px; max-width: 132px; height: var(--vx-header-pill-height); min-height: var(--vx-header-pill-height); padding: 0 11px; border: 1px solid rgba(215,221,231,.92); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,252,254,.94)); box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.035); line-height: 1; text-align: left; box-sizing: border-box; white-space: nowrap; } .vx-user-block.user-identity[hidden] { display: none !important; } .vx-user-block.user-identity strong, .vx-user-block.user-identity small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-user-block.user-identity strong { color: var(--cw-text); font-size: 11.4px; font-weight: 650; letter-spacing: 0; line-height: 1.02; } .vx-user-block.user-identity small { margin-top: 1px; color: var(--cw-accent-text); font-size: 8.2px; font-weight: 520; line-height: .98; letter-spacing: 0; } .vx-header-actions .vx-refresh-header-btn { display: none; height: var(--vx-header-pill-height) !important; min-height: var(--vx-header-pill-height) !important; align-items: center; justify-content: center; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(215,221,231,.92); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,252,254,.96)); color: var(--cw-text); font-size: 11.4px; font-weight: 760; letter-spacing: 0; box-shadow: 0 1px 2px rgba(16,24,40,.05); } .vx-header-actions .vx-logout-header-btn { height: var(--vx-header-pill-height) !important; min-height: var(--vx-header-pill-height) !important; padding: 0 13px !important; border-color: rgba(239,68,68,.24); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,252,254,.96)); font-size: 11.4px !important; font-weight: 760; letter-spacing: 0; box-shadow: 0 1px 2px rgba(16,24,40,.035); } .vx-refresh-header-btn:hover { background: rgba(246,248,252,.96); border-color: rgba(178,188,204,.92); box-shadow: 0 10px 22px rgba(16,24,40,.08); } .vx-refresh-header-btn:disabled { cursor: wait; color: var(--cw-text-muted); background: rgba(248,250,253,.86); box-shadow: none; } body.is-authenticated .vx-refresh-header-btn { display: inline-flex !important; } @media (max-width: 920px) { .vx-user-block.user-identity { flex-basis: 124px; width: 124px; max-width: 124px; } .vx-user-block.user-identity strong { font-size: 11px; } .vx-user-block.user-identity small { font-size: 8px; } .vx-header-actions .vx-refresh-header-btn { padding: 0 12px; font-size: 11.2px; } } @media (max-width: 640px) { .vx-header-actions { --vx-header-pill-height: 32px; } body.is-authenticated .vx-header-actions { grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; } body.is-authenticated .momentum-strip { grid-column: 1 / -1; justify-self: start; } body.is-authenticated .vx-user-block.user-identity { grid-column: 1; width: 100%; max-width: 100%; flex-basis: auto; align-items: flex-start; text-align: left; padding: 0 10px; } body.is-authenticated .vx-refresh-header-btn { grid-column: 2; } body.is-authenticated .vx-logout-header-btn { grid-column: 3; } .vx-header-actions .vx-refresh-header-btn, .vx-header-actions .vx-logout-header-btn { width: auto !important; min-width: 66px !important; height: var(--vx-header-pill-height) !important; min-height: var(--vx-header-pill-height) !important; padding: 0 10px !important; font-size: 10.8px !important; } } @media (max-width: 380px) { body.is-authenticated .vx-header-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } body.is-authenticated .vx-user-block.user-identity, body.is-authenticated .momentum-strip { grid-column: 1 / -1; } body.is-authenticated .vx-refresh-header-btn { grid-column: 1; width: 100% !important; } body.is-authenticated .vx-logout-header-btn { grid-column: 2; width: 100% !important; } } /* Final responsive header, KPI Momentum placement, and compact SMY rail. */ html, body { max-width: 100%; overflow-x: hidden; } .vx-header-inner { width: min(1540px, calc(100% - 32px)) !important; min-height: 0 !important; padding: 10px 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 10px 12px !important; } .vx-brand { flex: 0 0 auto !important; min-width: 168px !important; max-width: 210px !important; } .vx-brand-text { min-width: 0 !important; } .vx-title, .vx-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-header-context.vx-space-context { display: flex !important; flex: 0 1 auto !important; max-width: min(360px, 28vw) !important; min-width: 0 !important; } .vx-space-selector, .vx-product-nav { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vx-space-selector::-webkit-scrollbar, .vx-product-nav::-webkit-scrollbar { display: none; } .vx-product-nav { display: inline-flex !important; flex: 1 1 430px !important; white-space: nowrap !important; } .vx-product-nav button { flex: 0 0 auto !important; white-space: nowrap !important; } .vx-header-actions { flex: 0 1 auto !important; min-width: 0 !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; } .vx-user-block.user-identity { flex: 0 1 132px !important; min-width: 104px !important; width: 132px !important; max-width: 132px !important; } .vx-header-actions .vx-refresh-header-btn, .vx-header-actions .vx-logout-header-btn { flex: 0 0 auto !important; } .metrics { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch !important; overflow: visible !important; white-space: normal !important; gap: 8px !important; } .metrics .metric, .metrics .momentum-strip.metric-momentum { min-width: 0 !important; height: 42px !important; min-height: 42px !important; } .metrics .momentum-strip.metric-momentum { position: relative !important; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100% !important; max-width: none !important; padding: 0 13px 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(231,235,242,.92) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,254,.92)) !important; box-shadow: none !important; overflow: visible !important; } .metrics .momentum-strip.metric-momentum::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 999px 999px 0; background: var(--cw-accent); } .metrics .momentum-title { flex: 0 1 auto; min-width: 0; color: var(--vx-muted) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .12em !important; } .metrics .momentum-days { flex: 0 0 auto; height: 24px; gap: 3px; } .metrics .momentum-day { width: 7px; height: 22px; } .metrics .momentum-streak { flex: 0 0 auto; color: var(--vx-ink) !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.35px !important; } .metrics .momentum-tooltip { right: 0; top: calc(100% + 8px); } .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: minmax(142px, 168px) minmax(0, 1fr) !important; gap: 10px !important; max-height: 112px !important; padding: 12px 14px !important; border-radius: 18px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head span { font-size: 9px !important; line-height: 1.1 !important; letter-spacing: .72px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { font-size: 12px !important; line-height: 1.15 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collab-inbox-feed { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(188px, 230px) !important; grid-template-columns: none !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain; } .collab-feed-item { grid-template-columns: 7px minmax(0, 1fr) auto !important; gap: 7px !important; height: 62px !important; min-width: 0 !important; padding: 7px 8px !important; border-radius: 13px !important; } .collab-copy { gap: 1px !important; min-width: 0 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { font-size: 8.4px !important; line-height: 1.12 !important; font-weight: 760 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { font-size: 10px !important; line-height: 1.15 !important; font-weight: 760 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy small { font-size: 8.5px !important; line-height: 1.12 !important; font-weight: 620 !important; } .collab-feed-item time { max-width: 46px !important; font-size: 8.2px !important; line-height: 1.1 !important; text-align: right !important; } .collab-dot { width: 7px !important; height: 7px !important; } .collab-feed-empty { min-height: 62px !important; padding: 0 12px !important; font-size: 11px !important; } @media (max-width: 1180px) { .vx-brand { order: 1; } .vx-header-actions { order: 2; margin-left: auto !important; } .vx-header-context.vx-space-context { order: 3; flex: 0 1 245px !important; max-width: none !important; } .vx-product-nav { order: 4; flex: 1 1 390px !important; } } @media (max-width: 760px) { .vx-header-inner { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; padding: 8px 0 10px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "brand" "actions" "space" "nav" !important; row-gap: 8px !important; } .vx-brand { grid-area: brand !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .vx-header-actions { grid-area: actions !important; width: 100% !important; margin-left: 0 !important; justify-content: stretch !important; } body.is-authenticated .vx-header-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 7px !important; } body.is-authenticated .vx-user-block.user-identity { grid-column: 1 !important; width: 100% !important; max-width: none !important; } body.is-authenticated .vx-refresh-header-btn { grid-column: 2 !important; } body.is-authenticated .vx-logout-header-btn { grid-column: 3 !important; } .vx-header-context.vx-space-context { display: flex !important; grid-area: space !important; width: 100% !important; max-width: 100% !important; } .vx-product-nav { display: inline-flex !important; grid-area: nav !important; width: 100% !important; flex: none !important; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; } .metrics .momentum-strip.metric-momentum { grid-column: span 2 !important; } .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 1fr !important; max-height: none !important; gap: 8px !important; padding: 12px !important; } .collab-inbox-feed { grid-auto-columns: minmax(202px, 78vw) !important; } } @media (max-width: 380px) { .vx-header-inner { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } body.is-authenticated .vx-header-actions { grid-template-columns: minmax(0, 1fr) minmax(58px, auto) minmax(58px, auto) !important; } .vx-header-actions .vx-refresh-header-btn, .vx-header-actions .vx-logout-header-btn { min-width: 58px !important; padding: 0 8px !important; } .metrics { grid-template-columns: minmax(0, 1fr) !important; } .metrics .momentum-strip.metric-momentum { grid-column: auto !important; } .collab-inbox-feed { grid-auto-columns: minmax(196px, 84vw) !important; } } /* SMY final compaction: premium notification-chip rail, not large cards. */ .today-card.full-width-vantage.collaboration-inbox { display: grid !important; grid-template-columns: 154px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; height: 78px !important; min-height: 78px !important; max-height: 78px !important; margin-bottom: 14px !important; padding: 10px 12px !important; border-radius: 16px !important; overflow: hidden !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { min-width: 0 !important; gap: 3px !important; justify-content: center !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head span { font-size: 7.8px !important; line-height: 1.05 !important; letter-spacing: .62px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { font-size: 10px !important; line-height: 1.1 !important; font-weight: 720 !important; max-width: 100%; } .collab-inbox-feed { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; max-width: 100% !important; height: 56px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .collab-inbox-feed::-webkit-scrollbar { display: none; } .collab-feed-item { flex: 0 0 clamp(154px, 18vw, 188px) !important; width: clamp(154px, 18vw, 188px) !important; max-width: clamp(154px, 18vw, 188px) !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; display: grid !important; grid-template-columns: 5px minmax(0, 1fr) 34px !important; align-items: center !important; gap: 5px !important; padding: 6px 7px !important; border-radius: 10px !important; overflow: hidden !important; scroll-snap-align: start; } .collab-dot { width: 5px !important; height: 5px !important; } .collab-copy { display: grid !important; grid-template-rows: repeat(3, minmax(0, auto)); gap: 0 !important; min-width: 0 !important; overflow: hidden !important; } .collab-copy strong, .collab-copy b, .collab-copy small, .collab-feed-item time { display: block !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { color: var(--cw-text-muted) !important; font-size: 7px !important; line-height: 1.08 !important; font-weight: 740 !important; letter-spacing: 0 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { color: var(--cw-text) !important; font-size: 8.4px !important; line-height: 1.12 !important; font-weight: 760 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy small { color: var(--cw-text-muted) !important; font-size: 7px !important; line-height: 1.08 !important; font-weight: 620 !important; } .collab-feed-item time { align-self: start !important; justify-self: end !important; max-width: 34px !important; color: var(--cw-text-subtle) !important; font-size: 6.8px !important; line-height: 1.05 !important; font-weight: 700 !important; text-align: right !important; } .collab-feed-empty { flex: 1 1 auto !important; min-width: 0 !important; min-height: 48px !important; height: 48px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 9.5px !important; line-height: 1.2 !important; } @media (max-width: 760px) { .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 1fr !important; height: 108px !important; min-height: 108px !important; max-height: 108px !important; gap: 7px !important; padding: 10px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { align-items: flex-start !important; } .collab-inbox-feed { width: 100% !important; height: 52px !important; } .collab-feed-item { flex-basis: clamp(164px, 62vw, 214px) !important; width: clamp(164px, 62vw, 214px) !important; max-width: clamp(164px, 62vw, 214px) !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; } } @media (max-width: 380px) { .today-card.full-width-vantage.collaboration-inbox { height: 106px !important; min-height: 106px !important; max-height: 106px !important; } .collab-feed-item { flex-basis: clamp(158px, 70vw, 206px) !important; width: clamp(158px, 70vw, 206px) !important; max-width: clamp(158px, 70vw, 206px) !important; } } /* SMY readability pass: one horizontal rail, denser text inside each card. */ .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 166px minmax(0, 1fr) !important; height: 96px !important; min-height: 96px !important; max-height: 96px !important; padding: 12px 14px !important; overflow: hidden !important; } .collab-inbox-feed { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; height: 70px !important; min-height: 70px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.32) transparent; } .collab-inbox-feed::-webkit-scrollbar { height: 4px; } .collab-inbox-feed::-webkit-scrollbar-thumb { background: rgba(148,163,184,.32); border-radius: 999px; } .collab-feed-item { flex: 0 0 clamp(224px, 24vw, 292px) !important; width: clamp(224px, 24vw, 292px) !important; max-width: clamp(224px, 24vw, 292px) !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; display: grid !important; grid-template-columns: 6px minmax(0, 1fr) auto !important; grid-template-rows: auto auto minmax(0, 1fr) !important; align-items: start !important; gap: 1px 7px !important; padding: 7px 8px !important; border-radius: 12px !important; overflow: hidden !important; scroll-snap-align: start; } .collab-dot { grid-row: 1 / 4; align-self: center; width: 6px !important; height: 6px !important; } .collab-copy { grid-column: 2; grid-row: 1 / 4; display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; gap: 1px !important; min-width: 0 !important; overflow: hidden !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { font-size: 8.2px !important; line-height: 1.12 !important; color: var(--cw-text-muted) !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { font-size: 10.5px !important; line-height: 1.16 !important; color: var(--cw-text) !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy small { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important; font-size: 8.4px !important; line-height: 1.18 !important; color: var(--cw-text-muted) !important; } .collab-feed-item time { grid-column: 3; grid-row: 1; align-self: start !important; justify-self: end !important; max-width: 52px !important; font-size: 7.4px !important; line-height: 1.08 !important; color: var(--cw-text-subtle) !important; } .collab-feed-empty { height: 66px !important; min-height: 66px !important; align-items: center !important; } @media (max-width: 760px) { .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 1fr !important; height: 124px !important; min-height: 124px !important; max-height: 124px !important; gap: 8px !important; } .collab-inbox-feed { height: 70px !important; min-height: 70px !important; } .collab-feed-item { flex-basis: clamp(236px, 82vw, 304px) !important; width: clamp(236px, 82vw, 304px) !important; max-width: clamp(236px, 82vw, 304px) !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; } } /* KPI order/streak and SMY readability final pass. */ .metrics { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 8px !important; overflow: visible !important; white-space: normal !important; } .metrics .metric, .metrics .momentum-strip.metric-momentum { min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; } .metrics .momentum-strip.metric-momentum { position: relative !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; align-content: center !important; align-items: center !important; column-gap: 8px !important; row-gap: 4px !important; width: 100% !important; padding: 6px 12px 6px 14px !important; border-radius: 12px !important; overflow: visible !important; } .metrics .momentum-strip.metric-momentum[hidden] { display: none !important; } .metrics .momentum-title { grid-column: 1 !important; grid-row: 1 !important; font-size: 9.5px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .11em !important; white-space: nowrap !important; } .metrics .momentum-full, .metrics #momentumStreakFull { display: inline !important; } .metrics .momentum-short, .metrics #momentumStreakShort { display: none !important; } .metrics .momentum-streak { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; color: var(--cw-text) !important; font-size: 14px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .metrics .momentum-days { grid-column: 1 / 4 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(15, minmax(3px, 1fr)) !important; align-items: center !important; gap: 2px !important; width: 100% !important; min-width: 0 !important; height: 6px !important; } .metrics .momentum-day { width: auto !important; min-width: 3px !important; height: 5px !important; border-radius: 999px !important; } .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 176px minmax(0, 1fr) !important; align-items: center !important; height: 112px !important; min-height: 112px !important; max-height: 112px !important; gap: 12px !important; padding: 12px 14px !important; overflow: hidden !important; } .collab-inbox-feed { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; height: 88px !important; min-height: 88px !important; max-height: 88px !important; overflow-x: auto !important; overflow-y: hidden !important; } .collab-feed-item { flex: 0 0 clamp(286px, 26vw, 348px) !important; width: clamp(286px, 26vw, 348px) !important; max-width: clamp(286px, 26vw, 348px) !important; height: 84px !important; min-height: 84px !important; max-height: 84px !important; grid-template-columns: 6px minmax(0, 1fr) auto !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; gap: 2px 8px !important; padding: 8px 9px !important; border-radius: 12px !important; overflow: hidden !important; } .collab-copy { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; gap: 2px !important; min-height: 0 !important; max-height: 68px !important; } .collab-dot { grid-row: 1 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { font-size: 15px !important; line-height: 1.1 !important; font-weight: 720 !important; letter-spacing: 0 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { font-size: 15px !important; line-height: 1.13 !important; font-weight: 760 !important; letter-spacing: 0 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy small { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; font-size: 12.5px !important; line-height: 1.18 !important; font-weight: 620 !important; } .collab-feed-item time { grid-column: 3 !important; grid-row: 1 !important; max-width: 58px !important; font-size: 12px !important; line-height: 1.1 !important; font-weight: 700 !important; white-space: nowrap !important; } @media (max-width: 760px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; } .metrics .momentum-strip.metric-momentum { grid-column: 1 / -1 !important; } .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: 1fr !important; height: 148px !important; min-height: 148px !important; max-height: 148px !important; gap: 8px !important; padding: 10px 12px !important; } .collab-inbox-feed { height: 88px !important; min-height: 88px !important; max-height: 88px !important; } .collab-feed-item { flex-basis: clamp(266px, 82vw, 330px) !important; width: clamp(266px, 82vw, 330px) !important; max-width: clamp(266px, 82vw, 330px) !important; height: 84px !important; min-height: 84px !important; max-height: 84px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { font-size: 14px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { font-size: 14px !important; } } @media (max-width: 380px) { .metrics { grid-template-columns: minmax(0, 1fr) !important; } .metrics .momentum-strip.metric-momentum { grid-column: auto !important; } .collab-feed-item { flex-basis: clamp(254px, 84vw, 310px) !important; width: clamp(254px, 84vw, 310px) !important; max-width: clamp(254px, 84vw, 310px) !important; } } /* Premium Recent Signals intelligence rail. */ .today-card.full-width-vantage.collaboration-inbox { position: relative !important; display: grid !important; grid-template-columns: 196px minmax(0, 1fr) !important; align-items: stretch !important; gap: 22px !important; height: 132px !important; min-height: 132px !important; max-height: 132px !important; margin-bottom: 16px !important; padding: 14px !important; border: 1px solid rgba(226,232,240,.76) !important; border-radius: 22px !important; background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 36%), linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.82) 48%, rgba(246,248,251,.88)) !important; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 44px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.9) !important; backdrop-filter: blur(20px) saturate(1.18) !important; -webkit-backdrop-filter: blur(20px) saturate(1.18) !important; overflow: hidden !important; } .today-card.full-width-vantage.collaboration-inbox::before { content: "" !important; position: absolute !important; inset: 0 !important; height: auto !important; border-radius: inherit !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(20,184,166,.12), rgba(99,102,241,.08), rgba(255,255,255,0) 46%), linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,0) 42%) !important; opacity: .9 !important; } .today-card.full-width-vantage.collaboration-inbox::after { content: "" !important; position: absolute !important; top: 14px !important; right: 14px !important; bottom: 14px !important; z-index: 3 !important; display: block !important; width: 74px !important; border-radius: 0 18px 18px 0 !important; background: linear-gradient(90deg, rgba(248,250,252,0), rgba(248,250,252,.92) 68%, rgba(248,250,252,.98)) !important; box-shadow: inset -1px 0 0 rgba(255,255,255,.72) !important; opacity: 0 !important; transform: translateX(10px) !important; transition: opacity .18s ease, transform .18s ease !important; pointer-events: none !important; } .today-card.full-width-vantage.collaboration-inbox.can-scroll-smy-right::after { opacity: 1 !important; transform: translateX(0) !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: 1fr auto auto 1fr !important; align-items: center !important; align-self: stretch !important; gap: 5px 11px !important; min-width: 0 !important; padding: 14px !important; border: 1px solid rgba(226,232,240,.78) !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(248,250,252,.62)), rgba(255,255,255,.68) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.045) !important; } .collab-signal-glyph { grid-column: 1 !important; grid-row: 2 / 4 !important; display: inline-grid !important; grid-template-columns: repeat(3, 7px) !important; align-items: end !important; justify-content: center !important; gap: 3px !important; width: 34px !important; height: 34px !important; border-radius: 12px !important; border: 1px solid rgba(20,184,166,.22) !important; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(236,253,245,.64)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 16px rgba(20,184,166,.08) !important; padding: 8px 6px !important; } .collab-signal-glyph i { display: block !important; width: 7px !important; border-radius: 999px !important; background: linear-gradient(180deg, var(--cw-accent), var(--cw-success)) !important; box-shadow: 0 0 0 1px rgba(15,118,110,.08) !important; } .collab-signal-glyph i:nth-child(1) { height: 10px !important; opacity: .72 !important; } .collab-signal-glyph i:nth-child(2) { height: 17px !important; opacity: .92 !important; } .collab-signal-glyph i:nth-child(3) { height: 13px !important; opacity: .82 !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head > span:not(.collab-signal-glyph) { grid-column: 2 !important; grid-row: 2 !important; max-width: 100% !important; color: var(--cw-text-muted) !important; font-size: 8px !important; line-height: 1.08 !important; font-weight: 850 !important; letter-spacing: .07em !important; text-transform: uppercase !important; overflow: hidden !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { grid-column: 2 !important; grid-row: 3 !important; max-width: 100% !important; color: var(--cw-text) !important; font-size: 13.2px !important; line-height: 1.12 !important; font-weight: 820 !important; letter-spacing: 0 !important; overflow: hidden !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .collab-inbox-feed { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; height: 104px !important; min-height: 104px !important; max-height: 104px !important; padding: 2px 2px 4px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scrollbar-width: thin !important; scrollbar-color: rgba(148,163,184,.34) transparent !important; -webkit-overflow-scrolling: touch !important; } .collab-inbox-feed::-webkit-scrollbar { height: 5px !important; display: block !important; } .collab-inbox-feed::-webkit-scrollbar-track { background: transparent !important; } .collab-inbox-feed::-webkit-scrollbar-thumb { border-radius: 999px !important; background: rgba(148,163,184,.32) !important; } .collab-feed-item { position: relative !important; flex: 0 0 clamp(306px, 24vw, 358px) !important; width: clamp(306px, 24vw, 358px) !important; max-width: clamp(306px, 24vw, 358px) !important; height: 96px !important; min-height: 96px !important; max-height: 96px !important; display: grid !important; grid-template-columns: 8px minmax(0, 1fr) auto !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; padding: 12px 12px 12px 13px !important; border: 1px solid rgba(226,232,240,.82) !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)), rgba(255,255,255,.76) !important; color: var(--cw-text) !important; box-shadow: 0 1px 2px rgba(15,23,42,.045), 0 12px 26px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.86) !important; scroll-snap-align: start !important; transform: translateY(0) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important; } .collab-feed-item:hover, .collab-feed-item:focus-visible { border-color: rgba(148,163,184,.88) !important; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86)), var(--cw-surface) !important; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 36px rgba(15,23,42,.095), inset 0 1px 0 rgba(255,255,255,.94) !important; transform: translateY(-2px) !important; outline: none !important; } .collab-dot { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; width: 8px !important; height: 42px !important; border-radius: 999px !important; background: linear-gradient(180deg, var(--cw-accent), var(--cw-success)) !important; box-shadow: 0 0 0 1px rgba(15,118,110,.08), 0 8px 18px rgba(20,184,166,.18) !important; } .collab-feed-item.task .collab-dot { background: linear-gradient(180deg, var(--cw-accent), var(--cw-accent)) !important; } .collab-feed-item.note .collab-dot { background: linear-gradient(180deg, var(--cw-warning), var(--cw-warning)) !important; } .collab-feed-item.message .collab-dot { background: linear-gradient(180deg, var(--cw-accent), var(--cw-success)) !important; } .collab-copy { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; gap: 3px !important; min-width: 0 !important; min-height: 0 !important; max-height: 72px !important; overflow: hidden !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong { display: block !important; color: var(--cw-accent-text) !important; font-size: 12.8px !important; line-height: 1.13 !important; font-weight: 740 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy b { display: block !important; color: var(--cw-text) !important; font-size: 13.2px !important; line-height: 1.15 !important; font-weight: 780 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy small { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; color: var(--cw-text-muted) !important; font-size: 10.4px !important; line-height: 1.2 !important; font-weight: 640 !important; white-space: normal !important; overflow: hidden !important; overflow-wrap: anywhere !important; } .collab-feed-item time { grid-column: 3 !important; grid-row: 1 !important; align-self: start !important; justify-self: end !important; max-width: 68px !important; color: var(--cw-text-muted) !important; font-size: 10px !important; line-height: 1.12 !important; font-weight: 760 !important; white-space: nowrap !important; text-align: right !important; overflow: hidden !important; text-overflow: ellipsis !important; } .collab-feed-empty { flex: 1 0 100% !important; height: 96px !important; min-height: 96px !important; align-items: center !important; padding: 0 18px !important; border-radius: 18px !important; border-color: rgba(203,213,225,.72) !important; background: rgba(255,255,255,.6) !important; display: flex !important; justify-content: center !important; text-align: center !important; font-size: 12px !important; line-height: 1.18 !important; font-weight: 760 !important; white-space: normal !important; overflow-wrap: anywhere !important; overflow: hidden !important; } @media (max-width: 760px) { .today-card.full-width-vantage.collaboration-inbox { grid-template-columns: minmax(0, 1fr) !important; height: 204px !important; min-height: 204px !important; max-height: 204px !important; gap: 12px !important; padding: 12px !important; border-radius: 20px !important; } .today-card.full-width-vantage.collaboration-inbox::after { top: 94px !important; right: 12px !important; bottom: 12px !important; width: 58px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { min-height: 70px !important; padding: 12px !important; grid-template-rows: 1fr auto auto 1fr !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { font-size: 12.8px !important; } .collab-inbox-feed { height: 104px !important; min-height: 104px !important; max-height: 104px !important; } .collab-feed-item { flex-basis: clamp(286px, 84vw, 340px) !important; width: clamp(286px, 84vw, 340px) !important; max-width: clamp(286px, 84vw, 340px) !important; height: 96px !important; min-height: 96px !important; max-height: 96px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-copy strong, .today-card.full-width-vantage.collaboration-inbox .collab-copy b { font-size: 12px !important; } } @media (max-width: 380px) { .today-card.full-width-vantage.collaboration-inbox { height: 202px !important; min-height: 202px !important; max-height: 202px !important; padding: 10px !important; } .collab-feed-item { flex-basis: clamp(268px, 84vw, 310px) !important; width: clamp(268px, 84vw, 310px) !important; max-width: clamp(268px, 84vw, 310px) !important; padding: 11px !important; } } .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded { height: 248px !important; min-height: 248px !important; max-height: 248px !important; } .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded .collab-inbox-feed { height: 184px !important; min-height: 184px !important; max-height: 184px !important; } .collab-feed-item { padding: 0 !important; overflow: hidden !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; } .collab-feed-item.is-expanded { flex-basis: clamp(326px, 28vw, 390px) !important; width: clamp(326px, 28vw, 390px) !important; max-width: clamp(326px, 28vw, 390px) !important; height: 176px !important; min-height: 176px !important; max-height: 176px !important; align-content: start !important; grid-template-rows: 88px auto !important; } .collab-feed-trigger { width: 100% !important; height: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: 8px minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; padding: 12px 12px 12px 13px !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; color: inherit !important; text-align: left !important; box-shadow: none !important; } .collab-feed-trigger:focus-visible { outline: 2px solid rgba(var(--brand-rgb),.34) !important; outline-offset: -3px !important; } .sny-expanded { display: grid !important; gap: 8px !important; padding: 0 12px 12px 29px !important; min-width: 0 !important; } .sny-expanded p { margin: 0 !important; color: var(--cw-text-muted) !important; font-size: 11.2px !important; line-height: 1.28 !important; font-weight: 640 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .sny-meta { color: var(--cw-text-muted) !important; font-size: 10px !important; font-weight: 760 !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .sny-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; min-width: 0 !important; } .sny-action { height: 30px !important; min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 820 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .sny-action.primary { border-color: transparent !important; background: linear-gradient(135deg, var(--vx-blue), var(--vx-violet)) !important; color: var(--cw-surface) !important; } .sny-action.secondary { border-color: rgba(203,213,225,.86) !important; background: rgba(255,255,255,.84) !important; color: var(--cw-text-muted) !important; } .collab-feed-item.invitation .collab-dot, .collab-feed-item.space_invitation .collab-dot, .collab-feed-item.team_invitation .collab-dot { background: linear-gradient(180deg, var(--cw-accent), var(--cw-accent)) !important; } .collab-feed-item.task_share_request .collab-dot, .collab-feed-item.task_assignment_request .collab-dot { background: linear-gradient(180deg, var(--cw-accent), var(--cw-accent)) !important; } .collab-feed-item.note_share .collab-dot, .collab-feed-item.note_mention .collab-dot, .collab-feed-item.note_attention .collab-dot { background: linear-gradient(180deg, var(--cw-warning), var(--cw-warning)) !important; } @media (max-width: 760px) { .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded { height: 286px !important; min-height: 286px !important; max-height: 286px !important; } .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded .collab-inbox-feed { height: 198px !important; min-height: 198px !important; max-height: 198px !important; } .collab-feed-item.is-expanded { flex-basis: clamp(292px, 86vw, 350px) !important; width: clamp(292px, 86vw, 350px) !important; max-width: clamp(292px, 86vw, 350px) !important; height: 190px !important; min-height: 190px !important; max-height: 190px !important; } .sny-actions { justify-content: flex-start !important; } } .reminder-form-mobile-title-row, .reminder-form-mobile-date-time, .reminder-form-mobile-meta-row, .reminder-form-mobile-notes-row, .reminder-form-mobile-actions, .reminder-form-mobile-action-buttons { display: contents; } .reminder-row.is-editing .reminder-check { grid-column: 1; grid-row: 1; } .reminder-row.is-editing .reminder-category-input { grid-column: 2; grid-row: 1; } .reminder-row.is-editing .reminder-date-input { grid-column: 3; grid-row: 1; } .reminder-row.is-editing .reminder-time-input { grid-column: 4; grid-row: 1; } .reminder-row.is-editing .reminder-title-cell { grid-column: 5; grid-row: 1; } .reminder-row.is-editing .reminder-notes-inline { grid-column: 6; grid-row: 1; } .reminder-row.is-editing .reminder-repeat-input { grid-column: 7; grid-row: 1; } .reminder-row.is-editing .reminder-custom-repeat { grid-column: 8; grid-row: 1; } .reminder-row.is-editing .reminder-done-btn { grid-column: 9; grid-row: 1; } .reminder-row.is-editing .reminder-cancel-btn { grid-column: 10; grid-row: 1; } .reminder-row.is-editing .reminder-delete-btn { grid-column: 11; grid-row: 1; } .reminder-row.is-editing .reminder-delete-confirm-cell { grid-column: 10 / span 2; grid-row: 1; } @media (max-width: 768px) { .reminder-form-mobile, .reminder-form-mobile * { box-sizing: border-box; min-width: 0; max-width: 100%; } .reminder-row.is-editing.reminder-form-mobile { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 100%; min-height: 0; padding: 14px; border: 1px dashed rgba(166, 116, 45, 0.26); border-radius: 20px; background: rgba(255, 250, 242, 0.78); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.035), 0 12px 24px rgba(143,92,34,.06); } .reminder-row.is-editing.reminder-form-mobile:hover { transform: none; } .reminder-row.is-editing .reminder-form-mobile-title-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 10px; align-items: center; width: 100%; } .reminder-row.is-editing.is-delete-pending .reminder-form-mobile-title-row { grid-template-columns: minmax(0, 1fr) auto; } .reminder-row.is-editing .reminder-form-mobile-date-time { display: grid; grid-template-columns: 1fr .75fr; gap: 10px; align-items: stretch; width: 100%; } .reminder-row.is-editing .reminder-form-mobile-meta-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px; width: 100%; } .reminder-row.is-editing .reminder-form-mobile-notes-row { display: block; width: 100%; } .reminder-row.is-editing .reminder-form-mobile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .reminder-row.is-editing .reminder-form-mobile-action-buttons { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; } .reminder-row.is-editing .reminder-title-cell, .reminder-row.is-editing .reminder-category-input, .reminder-row.is-editing .reminder-date-input, .reminder-row.is-editing .reminder-time-input, .reminder-row.is-editing .reminder-repeat-input, .reminder-row.is-editing .reminder-notes-inline, .reminder-row.is-editing .reminder-check, .reminder-row.is-editing .reminder-delete-btn, .reminder-row.is-editing .reminder-delete-confirm-cell, .reminder-row.is-editing .reminder-done-btn, .reminder-row.is-editing .reminder-cancel-btn, .reminder-row.is-editing .reminder-custom-repeat { grid-column: auto !important; grid-row: auto !important; } .reminder-row.is-editing .reminder-title-cell { width: 100%; } .reminder-row.is-editing .reminder-title-inline, .reminder-row.is-editing .reminder-category-input, .reminder-row.is-editing .reminder-date-input, .reminder-row.is-editing .reminder-time-input, .reminder-row.is-editing .reminder-repeat-input, .reminder-row.is-editing .reminder-notes-inline, .reminder-row.is-editing .reminder-custom-repeat input, .reminder-row.is-editing .reminder-custom-repeat select { display: block !important; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid rgba(166, 116, 45, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.72); color: var(--reminder-text); box-shadow: none; font-size: 13px; font-weight: 720; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; -webkit-appearance: none; appearance: none; } .reminder-row.is-editing .reminder-form-mobile-date-time input { display: flex !important; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 52px; min-height: 52px; padding: 0 14px; border: 1px solid rgba(166, 116, 45, 0.22); border-radius: 16px; background: rgba(255, 255, 255, 0.76); color: var(--cw-text); opacity: 1; box-sizing: border-box; font-size: 15px; font-weight: 700; line-height: 52px; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; } .reminder-row.is-editing .reminder-form-mobile-date-time input::placeholder { color: rgba(31, 27, 22, 0.62); opacity: 1; } .reminder-row.is-editing .reminder-form-mobile-date-time input[type="date"], .reminder-row.is-editing .reminder-form-mobile-date-time input[type="time"] { color: var(--cw-text); opacity: 1; -webkit-text-fill-color: var(--cw-text); } .reminder-row.is-editing .reminder-form-mobile-date-time input[type="date"]::-webkit-date-and-time-value, .reminder-row.is-editing .reminder-form-mobile-date-time input[type="time"]::-webkit-date-and-time-value { width: 100%; min-height: 52px; line-height: 52px; text-align: center; } .reminder-row.is-editing .reminder-form-mobile-date-time input[type="date"]::-webkit-datetime-edit, .reminder-row.is-editing .reminder-form-mobile-date-time input[type="time"]::-webkit-datetime-edit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; line-height: 52px; padding: 0; } .reminder-row.is-editing .reminder-form-mobile-date-time input[type="date"]::-webkit-datetime-edit-fields-wrapper, .reminder-row.is-editing .reminder-form-mobile-date-time input[type="time"]::-webkit-datetime-edit-fields-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; } .reminder-row.is-editing .reminder-form-mobile-date-time input[type="date"]::-webkit-calendar-picker-indicator, .reminder-row.is-editing .reminder-form-mobile-date-time input[type="time"]::-webkit-calendar-picker-indicator { opacity: .65; margin-left: 4px; } .reminder-row.is-editing .reminder-title-inline { height: 44px; font-size: 15px; font-weight: 760; } .reminder-row.is-editing .reminder-notes-inline { height: 78px; min-height: 78px; max-height: 128px; padding: 12px 14px; line-height: 1.35; resize: vertical; overflow: auto; } .reminder-row.is-editing .reminder-title-inline:focus, .reminder-row.is-editing .reminder-category-input:focus, .reminder-row.is-editing .reminder-date-input:focus, .reminder-row.is-editing .reminder-time-input:focus, .reminder-row.is-editing .reminder-repeat-input:focus, .reminder-row.is-editing .reminder-notes-inline:focus, .reminder-row.is-editing .reminder-custom-repeat input:focus, .reminder-row.is-editing .reminder-custom-repeat select:focus { outline: none; border-color: rgba(166, 116, 45, 0.45); box-shadow: 0 0 0 3px rgba(166, 116, 45, 0.08); } .reminder-row.is-editing .reminder-title-counter { display: none !important; } .reminder-row.is-editing .reminder-check { display: inline-block; width: 26px; min-width: 26px; height: 26px; min-height: 26px; align-self: center; justify-self: start; } .reminder-row.is-editing .reminder-delete-btn { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0 !important; border-radius: 50%; font-size: 20px; justify-self: end; } .reminder-row.is-editing .reminder-delete-confirm-cell { display: inline-flex; width: auto; justify-content: flex-end; gap: 6px; } .reminder-row.is-editing .reminder-delete-confirm-btn, .reminder-row.is-editing .reminder-delete-cancel-btn { height: 40px; min-height: 40px; min-width: 42px; padding: 0 10px; } .reminder-row.is-editing .reminder-cancel-btn, .reminder-row.is-editing .reminder-done-btn { width: auto; min-width: 74px; height: 42px; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 12px; box-shadow: none; } .reminder-row.is-editing .reminder-cancel-btn { border: 1px solid rgba(166, 116, 45, 0.22); background: rgba(255, 255, 255, 0.72); color: var(--reminder-muted); } .reminder-row.is-editing .reminder-done-btn { border-color: transparent; background: linear-gradient(135deg, var(--cw-warning), var(--cw-warning)); color: var(--cw-surface); box-shadow: 0 10px 20px rgba(166, 116, 45, 0.18); } .reminder-row.is-editing .reminder-custom-repeat { display: grid; grid-template-columns: auto minmax(72px, .7fr) minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; padding: 0; color: var(--reminder-muted); } .reminder-row.is-editing .reminder-custom-repeat[hidden] { display: none !important; } .reminder-row.is-editing .reminder-custom-repeat select[data-reminder-field="repeat_ends"], .reminder-row.is-editing .reminder-custom-repeat input[data-reminder-field="repeat_end_date"], .reminder-row.is-editing .reminder-custom-repeat input[data-reminder-field="repeat_count"] { grid-column: 1 / -1; } .reminder-row.is-editing .reminder-inline-error { width: 100%; padding-top: 0; font-size: 11.5px; } } @media (max-width: 360px) { .reminder-row.is-editing .reminder-form-mobile-date-time, .reminder-row.is-editing .reminder-form-mobile-meta-row, .reminder-row.is-editing .reminder-custom-repeat { grid-template-columns: 1fr; } .reminder-row.is-editing .reminder-form-mobile-actions { align-items: flex-start; flex-direction: column; } .reminder-row.is-editing .reminder-form-mobile-action-buttons { width: 100%; justify-content: flex-end; } } /* OTP login flow: compact secondary actions. */ .auth-link-row { display: flex; align-items: center; justify-content: center; min-height: 24px; margin: -2px 0 2px; } .auth-link-row .auth-link-btn { width: auto !important; height: auto !important; min-height: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: var(--google-blue) !important; box-shadow: none !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.4 !important; } .auth-link-row .auth-link-btn:hover { transform: none !important; box-shadow: none !important; color: var(--google-blue-dark) !important; text-decoration: underline; } .auth-link-row .auth-link-btn[hidden] { display: none !important; } /* hCaptcha security check for production OTP login. */ .security-widget-box { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(214, 220, 235, .9); border-radius: 12px; background: rgba(255,255,255,.72); } .security-widget-box.loading { border-color: rgba(var(--brand-rgb),.24); } .security-widget-box.ready { border-color: rgba(19,115,51,.22); background: rgba(237,248,243,.58); } .security-widget-box.error { border-color: rgba(179,38,30,.28); background: rgba(255,247,246,.7); } .security-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .security-widget-head span { color: var(--cw-text); font-size: 12px; font-weight: 780; } .security-widget-head small { min-width: 0; color: var(--cw-text-muted); font-size: 11px; line-height: 1.25; text-align: right; } .security-captcha-container { min-height: 78px; display: grid; align-items: center; justify-items: start; min-width: 0; overflow: hidden; } .security-captcha-container iframe, .security-captcha-container > * { max-width: 100% !important; } .security-retry-btn { justify-self: start; padding: 0 !important; min-height: auto !important; } @media (max-width: 560px) { .security-widget-head { align-items: flex-start; flex-direction: column; gap: 4px; } .security-widget-head small { text-align: left; } } .auth-field-label { margin: 0 0 -8px; color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 1.35; } .auth-form input#loginEmail { text-align: left; } .auth-form button:disabled { cursor: not-allowed; opacity: .68; transform: none !important; box-shadow: none !important; } .auth-message.success { border-color: var(--cw-success) !important; background: var(--google-green-soft) !important; color: var(--google-green) !important; } /* Dynamic workspace pills and compact management controls. */ .vx-space-pill-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 34px; border-radius: 999px; background: transparent; } .vx-space-pill-wrap.active { background: var(--cw-surface); box-shadow: 0 1px 2px rgba(60,64,67,.10), 0 8px 18px rgba(60,64,67,.08); } .vx-space-selector .vx-space-pill, .vx-space-selector .vx-space-menu-btn, .vx-space-selector .vx-space-add-btn { min-width: 0 !important; min-height: 34px !important; height: 34px !important; border-radius: 999px !important; box-shadow: none !important; } .vx-space-selector .vx-space-pill { max-width: 138px; padding: 0 10px 0 13px !important; } .vx-space-selector .vx-space-pill span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-space-selector .vx-space-pill-wrap.active .vx-space-pill { background: transparent !important; color: var(--text-primary) !important; } .vx-space-selector .vx-space-menu-btn { width: 28px !important; padding: 0 !important; color: var(--text-secondary) !important; font-size: 15px !important; font-weight: 700 !important; opacity: 0; } .vx-space-pill-wrap:hover .vx-space-menu-btn, .vx-space-pill-wrap.active .vx-space-menu-btn, .vx-space-menu-btn:focus-visible { opacity: 1; } .vx-space-selector .vx-space-add-btn { width: 34px !important; padding: 0 !important; border: 1px solid var(--border) !important; background: var(--cw-surface) !important; color: var(--google-blue) !important; font-size: 18px !important; font-weight: 500 !important; } .vx-workspace-menu { position: absolute; z-index: 1200; width: 178px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--cw-surface); box-shadow: var(--shadow-1); } .vx-workspace-menu button { display: flex; width: 100%; height: 34px; align-items: center; justify-content: flex-start; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 500; text-align: left; } .vx-workspace-menu button:hover, .vx-workspace-menu button:focus-visible { background: var(--surface-soft); outline: none; } .vx-workspace-menu button.danger { color: var(--google-red); } .workspace-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 18px; } .workspace-hidden { display: none !important; } .workspace-backdrop { position: absolute; inset: 0; background: rgba(32,33,36,.28); } .workspace-card { position: relative; z-index: 1; width: min(390px, 100%); padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--cw-surface); box-shadow: var(--shadow-1); } .workspace-card h2 { margin: 0; color: var(--text-primary); font-size: 20px; font-weight: 500; letter-spacing: 0; } .workspace-copy { margin: 8px 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; } .workspace-card input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; } .workspace-message { min-height: 20px; margin-top: 10px; color: var(--text-secondary); font-size: 12px; } .workspace-message.error { color: var(--google-red); } .workspace-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .workspace-dialog-actions button { height: 36px; min-width: 74px; padding: 0 14px; border-radius: 4px; font-weight: 500; } .workspace-secondary-btn { border: 1px solid var(--border); background: var(--cw-surface); color: var(--google-blue); } .workspace-primary-btn { border: 1px solid var(--google-blue); background: var(--google-blue); color: var(--cw-surface); } .workspace-modal.is-delete .workspace-primary-btn { border-color: var(--google-red); background: var(--cw-surface); color: var(--google-red); } body.workspace-open { overflow: hidden; } /* Workspace pills are the only horizontally scrolling part of the header. */ .vx-header-context.vx-space-context { flex: 0 1 min(520px, 100%) !important; min-width: min(320px, 100%) !important; max-width: min(520px, 100%) !important; overflow: hidden !important; justify-content: flex-start !important; } .vx-space-selector { display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 120px 0 0 !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-padding-inline: 8px 42px; scrollbar-width: thin !important; scrollbar-color: rgba(var(--brand-rgb),.28) transparent !important; white-space: nowrap !important; } .vx-space-selector::-webkit-scrollbar { display: block !important; height: 4px; } .vx-space-selector::-webkit-scrollbar-track { background: transparent; } .vx-space-selector::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb),.28); border-radius: 999px; } .vx-space-pill-wrap, .vx-space-selector .vx-space-pill, .vx-space-selector .vx-space-menu-btn, .vx-space-selector .vx-space-add-btn { flex: 0 0 auto !important; } .vx-space-selector .vx-space-pill { max-width: 116px !important; } .vx-space-selector .vx-space-add-btn { position: static; } @media (max-width: 900px) { .vx-header-context.vx-space-context { flex: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Profile & Security */ .vx-user-block.user-identity { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; height: var(--vx-header-pill-height) !important; min-height: var(--vx-header-pill-height) !important; appearance: none; box-sizing: border-box; cursor: pointer; } .vx-user-block.user-identity .vx-initials-avatar { grid-row: 1 / span 2; } .vx-initials-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--font-base); font-size: 11px; font-weight: 700; letter-spacing: 0; background: var(--cw-accent-tint); color: var(--cw-accent-text); border: 1px solid rgba(var(--brand-rgb),.12); flex: 0 0 auto; } .vx-avatar-blue { background: var(--cw-accent-tint); color: var(--cw-accent-text); border-color: rgba(var(--brand-rgb),.16); } .vx-avatar-green { background: var(--cw-success-bg); color: var(--cw-success); border-color: rgba(19,115,51,.16); } .vx-avatar-purple { background: var(--cw-accent-tint); color: var(--cw-accent-text); border-color: rgba(var(--brand-rgb),.16); } .vx-avatar-orange { background: var(--cw-warning-bg); color: var(--cw-warning); border-color: rgba(176,96,0,.16); } .vx-avatar-grey { background: var(--cw-accent-tint); color: var(--cw-text-muted); border-color: rgba(95,99,104,.18); } .vx-initials-avatar.has-photo { background-size: cover; background-position: center; color: transparent; border-color: var(--cw-border); } /* ---- Header account menu: logged-in user + dropdown (tokens; dark-legible) ---- */ .vx-account { position: relative; display: inline-flex; align-items: center; gap: 8px; } .vx-account[hidden] { display: none; } .vx-account-divider { width: 1px; height: 22px; background: var(--cw-border); flex: 0 0 auto; } .vx-account-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--vx-header-pill-height, 42px); padding: 0 10px 0 5px; border: 1px solid var(--cw-border); border-radius: 999px; background: var(--cw-surface); color: var(--cw-text); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .vx-account-btn:hover { background: var(--cw-surface-hover); border-color: var(--cw-border-strong); } .vx-account-btn .vx-initials-avatar { width: 28px; height: 28px; font-size: 10.5px; } .vx-account-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: .01em; } .vx-account-caret { width: 15px; height: 15px; color: var(--cw-text-muted); flex: 0 0 auto; transition: transform .15s ease; } .vx-account-btn[aria-expanded="true"] .vx-account-caret { transform: rotate(180deg); } .vx-account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; width: 250px; max-width: calc(100vw - 24px); padding: 8px; background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 14px; box-shadow: 0 18px 44px rgba(23, 23, 31, .16); display: flex; flex-direction: column; gap: 2px; } .vx-account-menu[hidden] { display: none; } .vx-account-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; } .vx-account-card .vx-initials-avatar { width: 40px; height: 40px; font-size: 14px; } .vx-account-card-id { display: flex; flex-direction: column; min-width: 0; } .vx-account-card-id strong { font-size: 14px; font-weight: 700; color: var(--cw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-account-card-id small { margin-top: 1px; font-size: 12px; color: var(--cw-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-account-card-id small[hidden] { display: none; } .vx-account-menu-sep { height: 1px; margin: 2px 6px; background: var(--cw-border); } .vx-account-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--cw-text); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; } .vx-account-item svg { width: 18px; height: 18px; color: var(--cw-text-muted); flex: 0 0 auto; } .vx-account-item:hover { background: var(--cw-accent-tint); color: var(--cw-accent-text); } .vx-account-item:hover svg { color: var(--cw-accent-text); } .vx-account-item-danger { color: var(--cw-danger); } .vx-account-item-danger svg { color: var(--cw-danger); } .vx-account-item-danger:hover { background: var(--cw-danger-bg); color: var(--cw-danger); } .vx-account-item-danger:hover svg { color: var(--cw-danger); } /* Mobile: collapse the trigger to just the avatar. */ @media (max-width: 720px) { .vx-account-name, .vx-account-caret, .vx-account-divider { display: none; } .vx-account-btn { padding: 0; border: 0; background: none; } .vx-account-btn:hover { background: none; } } .profile-security-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: start end; padding: 72px 18px 18px; } .profile-security-hidden { display: none !important; } .profile-security-backdrop { position: absolute; inset: 0; background: rgba(32,33,36,.18); } .profile-security-card { position: relative; width: min(392px, calc(100vw - 28px)); max-height: calc(100vh - 92px); overflow: auto; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface); box-shadow: 0 12px 36px rgba(60,64,67,.22); padding: 18px; font-family: var(--font-base); color: var(--cw-text); } .profile-security-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--cw-text-muted); font-size: 24px; cursor: pointer; } .profile-security-head { display: flex; gap: 14px; align-items: center; padding-right: 34px; } .profile-avatar-large { font-size: 22px; } .profile-security-head h2 { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: 0; } .profile-security-head strong { display: block; font-size: 14px; font-weight: 500; color: var(--cw-text); } .profile-security-head small { display: block; margin-top: 2px; color: var(--cw-text-muted); font-size: 12px; overflow-wrap: anywhere; } .profile-security-section { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--cw-accent-tint); } .profile-security-section h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--cw-text); letter-spacing: 0; } .profile-security-section label { display: block; margin: 10px 0 6px; font-size: 12px; color: var(--cw-text-muted); font-weight: 500; } .profile-contact-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; } .profile-contact-label-row label { margin: 0; } .profile-inline-btn { height: 28px; border: 1px solid var(--cw-border); border-radius: 6px; background: var(--cw-surface); color: var(--cw-accent-text); padding: 0 10px; font: 500 12px Roboto, Arial, sans-serif; cursor: pointer; } .profile-security-section input { width: 100%; height: 38px; box-sizing: border-box; border: 1px solid var(--cw-border); border-radius: 6px; padding: 0 10px; font: 400 13px Roboto, Arial, sans-serif; color: var(--cw-text); background: var(--cw-surface); } .profile-security-section input[readonly] { background: var(--cw-surface-muted); color: var(--cw-text-muted); } .profile-phone-note { margin: 7px 0 0; color: var(--cw-text-muted); font-size: 12px; line-height: 1.45; } .profile-email-edit-form { display: grid; gap: 8px; margin: 8px 0 2px; } .profile-email-edit-form[hidden] { display: none !important; } .profile-email-actions { display: flex; flex-wrap: wrap; gap: 8px; } .profile-email-helper { margin: 0; color: var(--cw-text-muted); font-size: 12px; line-height: 1.45; } .profile-security-section input.is-invalid { border-color: var(--cw-danger); } .profile-primary-btn, .profile-secondary-btn { height: 36px; border-radius: 6px; padding: 0 14px; font: 500 13px Roboto, Arial, sans-serif; cursor: pointer; } .profile-primary-btn { margin-top: 12px; border: 1px solid var(--cw-accent); background: var(--cw-accent); color: var(--cw-surface); } .profile-secondary-btn { border: 1px solid var(--cw-border); background: var(--cw-surface); color: var(--cw-accent-text); } .profile-primary-btn:disabled, .profile-secondary-btn:disabled { opacity: .66; cursor: wait; } .profile-security-message { min-height: 18px; margin-top: 12px; font-size: 12px; color: var(--cw-text-muted); } .profile-security-message.success { color: var(--cw-success); } .profile-security-message.error { color: var(--cw-danger); } .avatar-color-row { display: flex; gap: 8px; margin-top: 10px; } .avatar-color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; font-size: 10px; font-weight: 700; cursor: pointer; } .avatar-color-swatch.selected { outline: 2px solid var(--cw-accent); outline-offset: 2px; } .profile-password-form { display: grid; gap: 8px; margin-top: 12px; } @media (max-width: 640px) { .profile-security-modal { place-items: start center; padding-top: 64px; } .profile-security-card { max-height: calc(100vh - 78px); } .vx-user-block.user-identity { flex-basis: 126px; width: 126px; max-width: 126px; padding: 0 8px; } } /* Clik Work brand, hero modules, and Voice Notes */ .vx-logo-mark::before, .vx-footer-mark::before { content: "CP" !important; } .vx-logo-mark, .vx-footer-mark, .hero-vx-mark { display: inline-grid; place-items: center; color: var(--cw-surface); background: linear-gradient(135deg, var(--cw-accent), var(--cw-success) 54%, var(--cw-text)); box-shadow: 0 8px 22px rgba(var(--brand-rgb), .18); } .clik-hero { min-height: auto; display: grid !important; grid-template-columns: minmax(260px, .64fr) minmax(680px, 1.36fr) !important; grid-template-rows: auto minmax(0, 1fr); align-items: start !important; column-gap: clamp(20px, 3vw, 42px) !important; row-gap: 14px !important; padding: clamp(26px, 4vw, 56px) !important; border: 1px solid rgba(15, 23, 42, .08) !important; border-radius: 30px !important; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(251,250,247,.94) 56%, rgba(247,244,239,.88)) !important; box-shadow: 0 22px 58px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.92) !important; } .clik-hero::before { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.22), rgba(var(--brand-rgb),.16), transparent) !important; } .clik-hero::after { display: none !important; } .clik-hero-copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / span 2; align-self: center; min-width: 0; } .clik-hero .vx-brand-strip-kicker { color: var(--cw-success) !important; } .clik-hero .vx-brand-strip-kicker::before { background: var(--cw-success) !important; box-shadow: 0 0 0 5px rgba(24,164,111,.11) !important; } .clik-hero-title { max-width: 540px !important; margin: 9px 0 0 !important; color: var(--cw-text) !important; font-size: clamp(34px, 3.6vw, 50px) !important; line-height: 1.04 !important; letter-spacing: 0 !important; text-wrap: balance; } .clik-hero-copy-text { max-width: 560px !important; margin: 14px 0 0 !important; color: var(--cw-text-muted) !important; font-size: clamp(14px, 1.16vw, 16.5px) !important; line-height: 1.55 !important; font-weight: 560 !important; } .clik-hero-actions { margin-top: 22px !important; } .clik-hero-actions button, .clik-hero-actions .vx-brand-strip-help-link { min-height: 48px !important; } .clik-storage-cta { position: relative; z-index: 2; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--cw-text); box-shadow: none; font-size: 12.2px; font-weight: 780; line-height: 1; } .clik-storage-cta:hover, .clik-storage-cta:focus-visible { transform: translateY(-1px); background: transparent; color: var(--cw-accent-text); box-shadow: none; } .clik-storage-cta-icon { width: 17px; height: 17px; display: grid; place-items: center; color: var(--cw-accent-text); background: transparent; border: 0; } .clik-storage-cta-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .clik-hero-card-grid { position: relative; z-index: 1; grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; } .clik-feature-card { min-height: 136px; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto minmax(36px, 1fr) auto; gap: 7px 12px; align-items: start; padding: 15px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,247,.9)); color: var(--cw-text); text-align: left; box-shadow: var(--cw-shadow-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: all .2s ease; } .clik-feature-card-static { cursor: default; } .clik-feature-card:hover, .clik-feature-card:focus-visible { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.16); background: linear-gradient(180deg, var(--cw-surface), rgba(251,250,247,.98)); box-shadow: var(--cw-shadow-card-hover); } .clik-feature-icon { grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; color: var(--cw-accent-text); background: rgba(var(--brand-rgb),.08); border: 1px solid rgba(var(--brand-rgb),.11); } .clik-feature-card:nth-child(2n) { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,244,239,.9)); } .clik-feature-card:nth-child(3n) { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.9)); } .clik-feature-card:nth-child(2n) .clik-feature-icon { color: var(--cw-success); background: rgba(var(--brand-rgb),.08); border-color: rgba(var(--brand-rgb),.11); } .clik-feature-card:nth-child(3n) .clik-feature-icon { color: var(--cw-warning); background: rgba(183,121,31,.09); border-color: rgba(183,121,31,.12); } .clik-feature-card:nth-child(4n) .clik-feature-icon { color: var(--cw-accent-text); background: rgba(var(--brand-rgb),.07); border-color: rgba(var(--brand-rgb),.1); } .clik-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .voice-notes-mark svg, .voice-note-card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .clik-feature-card strong { min-width: 0; font-size: 13.2px; line-height: 1.22; font-weight: 800; } .clik-feature-desc { min-width: 0; color: var(--cw-text-muted); font-size: 11.8px; line-height: 1.42; font-weight: 560; } .clik-feature-status { grid-column: 2; align-self: end; justify-self: start; max-width: 100%; min-height: 24px; display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid rgba(15,23,42,.07); border-radius: 999px; background: rgba(255,255,255,.68); color: var(--cw-text-muted); font-size: 10.8px; line-height: 1.2; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 rgba(255,255,255,.82); } .storage-modal { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 24px; } .storage-hidden { display: none !important; } .storage-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .storage-card { position: relative; z-index: 1; width: min(760px, 100%); max-height: min(88vh, 780px); overflow: auto; padding: 30px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 34px 100px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255,255,255,.88); } .storage-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(15,23,42,.08); border-radius: 999px !important; background: rgba(255,255,255,.82); color: var(--cw-text-muted); font-size: 22px; line-height: 1; } .storage-lockup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px 7px 7px; border: 1px solid rgba(15,23,42,.07); border-radius: 999px; background: var(--cw-warning-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.86); } .storage-lockup-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--cw-accent-text); background: rgba(var(--brand-rgb),.08); border: 1px solid rgba(var(--brand-rgb),.11); } .storage-lockup-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .storage-lockup strong { display: block; color: var(--cw-text); font-size: 13px; line-height: 1.1; } .storage-lockup small { display: block; margin-top: 2px; color: var(--cw-text-muted); font-size: 11px; line-height: 1.2; } .storage-card h2 { max-width: 560px; margin: 22px 0 0; color: var(--cw-text); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: 0; } .storage-copy { max-width: 610px; margin: 10px 0 0; color: var(--cw-text-muted); font-size: 14.5px; line-height: 1.58; font-weight: 560; } .storage-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; } .storage-plan-card { min-width: 0; display: grid; grid-template-rows: auto auto minmax(64px, 1fr) auto; gap: 12px; padding: 18px; border: 1px solid rgba(15,23,42,.08); border-radius: 22px; background: linear-gradient(180deg, var(--cw-surface), var(--cw-warning-bg)); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 34px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.86); } .storage-plan-card.is-popular { border-color: rgba(var(--brand-rgb),.17); background: linear-gradient(180deg, var(--cw-surface), rgba(248,250,252,.96)); } .storage-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .storage-plan-card h3 { margin: 0; color: var(--cw-text); font-size: 20px; line-height: 1.1; letter-spacing: 0; } .storage-plan-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(var(--brand-rgb),.12); border-radius: 999px; background: rgba(var(--brand-rgb),.07); color: var(--cw-accent-text); font-size: 10.5px; font-weight: 820; line-height: 1.1; } .storage-plan-price { color: var(--cw-text); font-size: 24px; line-height: 1.05; letter-spacing: 0; } .storage-plan-card p { margin: 0; color: var(--cw-text-muted); font-size: 12.8px; line-height: 1.5; font-weight: 540; } .storage-plan-select { width: 100%; min-height: 42px; justify-content: center; border: 1px solid rgba(17,24,39,.12); border-radius: 999px; background: var(--cw-text); color: var(--cw-surface); font-size: 13px; font-weight: 780; } .storage-plan-select:hover, .storage-plan-select:focus-visible { background: var(--cw-text); border-color: rgba(17,24,39,.16); box-shadow: 0 12px 26px rgba(17,24,39,.14); } .storage-plan-message { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; background: var(--cw-warning-bg); color: var(--cw-text-muted); font-size: 13px; line-height: 1.5; font-weight: 600; } .storage-plan-message.success { border-color: rgba(var(--brand-rgb),.18); background: rgba(237,248,243,.72); color: var(--cw-success); } .storage-plan-message.error { border-color: rgba(214,69,61,.22); background: rgba(255,240,238,.72); color: var(--cw-danger); } .clik-plan-smarter { margin: 18px 0 20px; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(214, 220, 235, .82); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(31,43,76,.07); } .clik-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .clik-section-head span { color: var(--cw-success); font-size: 11px; font-weight: 820; letter-spacing: 0; text-transform: uppercase; } .clik-section-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; letter-spacing: 0; } .clik-help-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .clik-help-grid article { min-height: 126px; padding: 15px; border: 1px solid rgba(214,220,235,.84); border-radius: 8px; background: rgba(255,255,255,.84); } .clik-help-grid strong { display: block; color: var(--cw-text); font-size: 13.5px; line-height: 1.25; } .clik-help-grid p { margin: 8px 0 0; color: var(--cw-text-muted); font-size: 12.5px; line-height: 1.5; } .voice-notes-workspace { margin: 20px 0; border: 1px solid rgba(214,220,235,.86); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 20px 54px rgba(31,43,76,.08); } .voice-notes-shell { padding: clamp(18px, 3vw, 30px); } .voice-notes-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 18px; align-items: stretch; } .voice-notes-brand-line, .voice-recorder-top, .voice-detail-top, .voice-detail-meta, .voice-recorder-actions, .voice-detail-actions { display: flex; align-items: center; } .voice-notes-brand-line { gap: 12px; } .voice-notes-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--cw-accent-text); background: var(--cw-accent-tint); border: 1px solid rgba(var(--brand-rgb),.14); } .voice-notes-title-block h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.05; letter-spacing: 0; } .voice-notes-title-block p { margin: 6px 0 0; color: var(--cw-text-muted); font-weight: 600; line-height: 1.45; } .voice-notes-title-block small { display: block; margin-top: 11px; color: var(--cw-text-muted); font-size: 12.5px; font-weight: 620; } .voice-recorder { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(214,220,235,.9); border-radius: 8px; background: rgba(255,255,255,.9); } .voice-recorder-top { justify-content: space-between; gap: 12px; } .voice-recorder-label { display: block; color: var(--cw-text-muted); font-size: 11px; font-weight: 820; text-transform: uppercase; } .voice-recorder-top strong { display: block; margin-top: 3px; color: var(--cw-text); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } .voice-recorder input { width: 100%; height: 42px; border-radius: 8px; padding: 0 13px; } .voice-recorder-actions { gap: 8px; flex-wrap: wrap; } .voice-recorder-actions button { min-height: 40px; border-radius: 8px; padding: 0 15px; font-weight: 760; } .voice-record-btn { background: var(--cw-text); color: var(--cw-surface); border-color: var(--cw-text); } .voice-stop-btn { background: var(--cw-danger-bg); color: var(--cw-danger); border-color: rgba(179,38,30,.18); } .voice-save-btn { background: var(--cw-success-bg); color: var(--cw-success); border-color: rgba(19,115,51,.18); } .voice-recorder-actions button:disabled { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; } .voice-recorder-hint { min-height: 18px; color: var(--cw-text-muted); font-size: 12px; line-height: 1.45; } .voice-recorder-hint.error { color: var(--cw-danger); } .voice-recorder-hint.success { color: var(--cw-success); } .voice-wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--cw-surface-muted); border: 1px solid var(--cw-border); } .voice-wave span { width: 3px; height: 8px; border-radius: 999px; background: var(--cw-accent); opacity: .7; } .voice-wave.is-recording span { background: var(--cw-accent); animation: voicePulse 860ms ease-in-out infinite; } .voice-wave.is-recording span:nth-child(2n) { animation-delay: 120ms; } .voice-wave.is-recording span:nth-child(3n) { animation-delay: 220ms; } @keyframes voicePulse { 0%, 100% { height: 7px; opacity: .55; } 50% { height: 22px; opacity: 1; } } .voice-notes-layout { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 14px; margin-top: 18px; } .voice-notes-list { display: grid; gap: 10px; align-content: start; } .voice-note-card { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 14px; border: 1px solid rgba(214,220,235,.9); border-radius: 8px; background: rgba(255,255,255,.88); text-align: left; } .voice-note-card:hover, .voice-note-card.active { border-color: rgba(var(--brand-rgb),.38); background: var(--cw-surface); box-shadow: 0 12px 28px rgba(31,43,76,.1); } .voice-note-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: var(--cw-success); background: var(--cw-success-bg); border: 1px solid rgba(19,115,51,.14); } .voice-note-card-copy { display: grid; gap: 4px; min-width: 0; } .voice-note-card-copy strong { color: var(--cw-text); font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; } .voice-note-card-copy small { color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.35; } .voice-note-card-copy em { color: var(--cw-text-muted); font-size: 12.5px; line-height: 1.42; font-style: normal; } .voice-note-empty, .voice-note-detail-empty, .voice-note-detail { border: 1px solid rgba(214,220,235,.9); border-radius: 8px; background: rgba(255,255,255,.88); } .voice-note-empty { padding: 16px; color: var(--cw-text-muted); } .voice-note-empty strong { display: block; color: var(--cw-text); } .voice-note-empty p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; } .voice-note-detail-empty { min-height: 220px; display: grid; place-items: center; padding: 24px; color: var(--cw-text-muted); text-align: center; font-size: 13px; } .voice-note-detail { min-height: 320px; padding: 16px; color: var(--cw-text); } .voice-detail-top { justify-content: space-between; gap: 10px; margin-bottom: 10px; } .voice-detail-kicker { color: var(--cw-success); font-size: 11px; font-weight: 820; text-transform: uppercase; } .voice-delete-btn { min-height: 34px; padding: 0 12px; border-radius: 8px; color: var(--cw-danger); background: var(--cw-danger-bg); border-color: rgba(179,38,30,.18); } .voice-detail-title-input { width: 100%; min-height: 44px; border-radius: 8px; padding: 0 12px; font-size: 18px; font-weight: 720; } .voice-detail-meta { gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; color: var(--cw-text-muted); font-size: 12px; } .voice-detail-meta span { padding: 5px 9px; border-radius: 999px; background: var(--cw-surface-muted); border: 1px solid var(--cw-border); } .voice-detail-playback audio { width: 100%; max-width: 100%; } .voice-detail-playback button, .voice-detail-actions button { min-height: 36px; border-radius: 8px; padding: 0 12px; background: var(--cw-surface); color: var(--cw-accent-text); border-color: rgba(var(--brand-rgb),.22); font-weight: 700; } .voice-detail-actions { justify-content: flex-end; margin: 10px 0; } .voice-note-detail section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cw-border); } .voice-note-detail h3 { margin: 0 0 7px; font-size: 13px; line-height: 1.3; } .voice-note-detail p, .voice-note-detail li { color: var(--cw-text-muted); font-size: 13px; line-height: 1.55; } .voice-note-detail ul { margin: 0; padding-left: 18px; } .voice-transcript { margin-top: 14px; color: var(--cw-text-muted); font-size: 13px; } @media (max-width: 1180px) { .clik-hero { grid-template-columns: 1fr !important; min-height: auto; } .clik-hero-copy, .clik-storage-cta, .clik-hero-card-grid { grid-column: 1 !important; grid-row: auto !important; } .clik-hero-copy { align-self: start; } .clik-storage-cta { justify-self: start; } .clik-hero-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clik-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .clik-hero { padding: 26px !important; border-radius: 22px !important; } .clik-hero-title { font-size: clamp(30px, 8.6vw, 40px) !important; line-height: 1.06 !important; } .clik-help-grid { grid-template-columns: 1fr; } .voice-notes-head, .voice-notes-layout { grid-template-columns: 1fr; } } @media (max-width: 760px) { .clik-hero-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .storage-modal { align-items: end; padding: 12px; } .storage-card { width: 100%; max-height: calc(100dvh - 24px); padding: 24px 18px 18px; border-radius: 24px 24px 18px 18px; } .storage-plans-grid { grid-template-columns: 1fr; } .storage-plan-card { grid-template-rows: auto; } } @media (max-width: 560px) { .vx-footer-right { width: 100%; flex-direction: column; align-items: stretch; } .vx-footer-link { width: 100%; } .clik-hero { padding: 22px 16px !important; } .clik-storage-cta { width: auto; justify-content: flex-start; min-height: 30px; } .clik-hero-card-grid { grid-template-columns: 1fr; } .clik-feature-card { min-height: 118px; grid-template-columns: 36px minmax(0, 1fr); } .clik-feature-icon { grid-row: 1 / span 2; } .clik-hero-actions { align-items: stretch !important; } .clik-hero-actions button, .clik-hero-actions .vx-brand-strip-help-link { width: 100%; justify-content: center; } .clik-section-head { align-items: start; flex-direction: column; } .voice-recorder-actions button { flex: 1 1 94px; } .voice-note-detail { padding: 13px; } } /* Executive Assistant home experience */ .assistant-hero { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto auto !important; gap: clamp(14px, 2vw, 20px) !important; padding: clamp(22px, 3.5vw, 42px) !important; } .assistant-hero .clik-hero-title { max-width: none !important; margin-top: 8px !important; font-size: clamp(32px, 3.2vw, 48px) !important; } .assistant-hero-head { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 18px; min-width: 0; } .assistant-hero .clik-hero-actions { flex: 0 0 auto; margin-top: 0 !important; } .assistant-search-shell { position: relative; z-index: 6; width: min(720px, 100%); } .assistant-search-box { min-height: 54px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 11px; padding: 0 16px; border: 1px solid rgba(15,23,42,.09); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 14px 32px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.86); } .assistant-search-box svg { width: 21px; height: 21px; fill: none; stroke: var(--cw-text-muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .assistant-search-box input { width: 100%; min-width: 0; height: 50px; padding: 0; border: 0; background: transparent; color: var(--cw-text); font-size: 15px; font-weight: 650; outline: 0; } .assistant-search-box input::placeholder { color: var(--cw-accent-text); } .assistant-search-results { position: absolute; top: calc(100% + 8px); left: 0; width: min(620px, 100%); max-height: min(420px, 60vh); overflow: auto; display: grid; gap: 7px; padding: 9px; border: 1px solid rgba(15,23,42,.09); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 24px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.92); } .assistant-search-result { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--cw-text); text-align: left; } .assistant-search-result:hover, .assistant-search-result:focus-visible { border-color: rgba(var(--brand-rgb),.12); background: var(--cw-surface-muted); } .assistant-search-result strong, .assistant-search-result small { display: block; min-width: 0; } .assistant-search-result strong { font-size: 13px; line-height: 1.2; } .assistant-search-result small { margin-top: 3px; color: var(--cw-text-muted); font-size: 11.5px; line-height: 1.35; } .assistant-search-empty { padding: 13px 14px; color: var(--cw-text-muted); font-size: 13px; font-weight: 650; } .assistant-grid-view { position: relative; z-index: 1; display: grid; gap: 14px; min-width: 0; } .assistant-hero .clik-hero-card-grid { grid-column: auto !important; grid-row: auto !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .assistant-executive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; } .assistant-mobile-grid { display: none; } .assistant-executive-card { min-height: 154px; border-color: rgba(17,24,39,.1); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)); } .assistant-executive-card strong { font-size: 14.2px; } .assistant-executive-card .clik-feature-status { background: rgba(17,24,39,.04); } .assistant-focus-panel { position: relative; z-index: 2; display: grid; gap: 16px; min-width: 0; padding: clamp(16px, 2.4vw, 24px); border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 36px rgba(15,23,42,.06); } .assistant-back-btn { justify-self: start; min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(15,23,42,.08); border-radius: 999px; background: rgba(255,255,255,.9); color: var(--cw-text-muted); font-size: 12.5px; font-weight: 780; } .assistant-back-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .assistant-focus-head { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; gap: 13px; } .assistant-focus-head .clik-feature-icon { width: 50px; height: 50px; border-radius: 16px; } .assistant-focus-type { display: block; color: var(--cw-success); font-size: 11px; font-weight: 820; text-transform: uppercase; } .assistant-focus-head h2 { margin: 4px 0 0; color: var(--cw-text); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.08; letter-spacing: 0; } .assistant-focus-head p { max-width: 680px; margin: 7px 0 0; color: var(--cw-text-muted); font-size: 14px; line-height: 1.55; font-weight: 580; } .assistant-focus-content { display: grid; gap: 14px; min-width: 0; } .assistant-content-module { display: none !important; } .assistant-content-mounted.todo-workspace, .assistant-content-mounted.reminder-workspace, .assistant-content-mounted.voice-notes-workspace, .assistant-content-mounted.notes-workspace, .assistant-content-mounted.ai-command-centre, .assistant-content-mounted.team-panel, .assistant-content-mounted.flow-command-bar, .assistant-content-mounted.flow-workspace-head, .assistant-content-mounted.history-section { display: block !important; width: 100%; margin: 0 !important; } .assistant-content-mounted.toolbar { display: flex !important; width: 100%; margin: 0 !important; } .assistant-content-mounted.board { display: grid !important; width: 100%; margin: 0 !important; } .assistant-content-mounted.hero { display: grid !important; width: 100%; margin: 0 !important; } .assistant-focus-placeholder { display: grid; gap: 10px; max-width: 680px; padding: 18px; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; background: linear-gradient(180deg, var(--cw-surface), var(--cw-warning-bg)); } .assistant-focus-placeholder strong { color: var(--cw-text); font-size: 16px; line-height: 1.25; } .assistant-focus-placeholder p { margin: 0; color: var(--cw-text-muted); font-size: 13px; line-height: 1.55; } .assistant-focus-actions { display: flex; flex-wrap: wrap; gap: 9px; } .assistant-launch-btn { justify-self: start; min-height: 42px; padding: 0 16px; border: 1px solid rgba(17,24,39,.12); border-radius: 999px; background: var(--cw-text); color: var(--cw-surface); font-size: 13px; font-weight: 800; } .assistant-people-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .assistant-people-overview article { min-width: 0; padding: 14px; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; background: rgba(255,255,255,.88); } .assistant-people-overview span, .assistant-people-overview strong, .assistant-people-overview small { display: block; min-width: 0; } .assistant-people-overview span { color: var(--cw-success); font-size: 10.5px; font-weight: 820; text-transform: uppercase; } .assistant-people-overview strong { margin-top: 6px; color: var(--cw-text); font-size: 17px; line-height: 1.15; } .assistant-people-overview small { margin-top: 5px; color: var(--cw-text-muted); font-size: 11.8px; line-height: 1.35; } @media (max-width: 1120px) { .assistant-hero .clik-hero-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .assistant-executive-grid, .assistant-people-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .assistant-hero-head { align-items: start; flex-direction: column; } .assistant-hero .clik-hero-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .assistant-executive-grid, .assistant-people-overview { grid-template-columns: 1fr; } .assistant-content-mounted.toolbar { display: grid !important; } } @media (max-width: 380px) { .assistant-hero .clik-hero-card-grid { grid-template-columns: 1fr !important; } } /* Clik Work UI refinement: simplified nav, compact Voice Notes, and detail view. */ .clikplan-logo-mark::before { content: none !important; } .clikplan-logo-mark { width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: 0 12px 28px rgba(var(--brand-rgb), .18) !important; overflow: hidden; } .clikplan-logo-mark svg { display: block; width: 42px; height: 42px; } .vx-header-inner { flex-wrap: nowrap !important; gap: 10px !important; } .vx-brand { flex: 0 0 auto !important; min-width: 190px !important; max-width: 244px !important; } .vx-header-context.vx-space-context { flex: 1 1 min(430px, 36vw) !important; max-width: min(500px, 38vw) !important; } .vx-product-nav { flex: 0 0 auto !important; margin-left: auto !important; padding: 3px !important; gap: 6px !important; border: 1px solid rgba(226, 220, 211, .72) !important; border-radius: 999px !important; background: rgba(255, 253, 249, .62) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.76) !important; overflow: visible !important; } .vx-header-actions { flex: 0 0 auto !important; margin-left: 0 !important; gap: 6px !important; } .vx-nav-link, .vx-product-nav .vx-nav-link, .vx-header-actions .vx-nav-link { min-height: 36px !important; height: 36px !important; display: inline-flex; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 11px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: var(--cw-accent-text) !important; font-size: 12px !important; font-weight: 740 !important; letter-spacing: 0 !important; box-shadow: none !important; white-space: nowrap !important; } .vx-nav-link svg, .vx-product-nav .vx-nav-link svg, .vx-header-actions .vx-nav-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .vx-nav-link:hover, .vx-nav-link:focus-visible, .vx-product-nav .vx-nav-link:hover, .vx-product-nav .vx-nav-link:focus-visible, .vx-header-actions .vx-nav-link:hover, .vx-header-actions .vx-nav-link:focus-visible { color: var(--cw-accent-text) !important; border-color: rgba(var(--brand-rgb),.14) !important; background: rgba(237,244,255,.82) !important; outline: none !important; } .vx-header-actions .vx-user-block.user-identity, .vx-header-actions .vx-refresh-header-btn, body.is-authenticated .vx-header-actions .vx-refresh-header-btn { display: none !important; } .vx-header-actions .vx-login-btn, .vx-header-actions .vx-register-btn, .vx-header-actions .vx-logout-header-btn { min-width: 0 !important; } .vx-space-selector .vx-space-add-btn { width: auto !important; max-width: 182px !important; padding: 0 11px !important; gap: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .vx-space-add-symbol { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 999px; background: rgba(var(--brand-rgb),.10); font-size: 16px; line-height: 1; font-weight: 760; } .vx-space-add-label { display: inline-block; min-width: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 760; } .voice-notes-compact { margin: 18px 0 !important; border-radius: 20px !important; } .voice-notes-compact .voice-notes-shell { padding: 14px !important; } .voice-notes-row { display: grid; grid-template-columns: minmax(210px, .25fr) minmax(280px, .35fr) minmax(350px, .4fr); gap: 12px; align-items: stretch; } .voice-notes-intro, .voice-notes-compact .voice-recorder, .voice-notes-recent { min-width: 0; border: 1px solid rgba(214,220,235,.86); border-radius: 14px; background: rgba(255,255,255,.86); box-shadow: 0 10px 26px rgba(31,43,76,.055); } .voice-notes-intro { padding: 14px; display: flex; flex-direction: column; justify-content: center; } .voice-notes-compact .voice-notes-mark { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; } .voice-notes-compact .voice-notes-title-block h2 { font-size: 20px; line-height: 1.12; } .voice-notes-compact .voice-notes-title-block p { margin-top: 4px; font-size: 12.5px; line-height: 1.42; } .voice-notes-compact .voice-notes-title-block small { margin-top: 8px; font-size: 11.5px; } .voice-notes-compact .voice-recorder { padding: 12px !important; gap: 9px !important; } .voice-notes-compact .voice-recorder-top strong { font-size: 22px; } .voice-notes-compact .voice-recorder input { height: 38px; } .voice-notes-compact .voice-recorder-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .voice-notes-compact .voice-recorder-actions button { min-height: 38px; padding: 0 10px; } .voice-notes-compact .voice-recorder-hint { min-height: 16px; font-size: 11.5px; } .voice-notes-recent { padding: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; } .voice-notes-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .voice-notes-recent-head strong { color: var(--cw-text); font-size: 12.5px; font-weight: 800; } .voice-notes-recent-head span { color: var(--cw-text-muted); font-size: 11px; font-weight: 720; } .voice-notes-compact .voice-notes-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: stretch; } .voice-notes-compact .voice-note-card { position: relative; z-index: 1; min-height: 124px; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 11px; border-radius: 12px; cursor: pointer; touch-action: manipulation; } .voice-notes-compact .voice-note-card-icon { width: 32px; height: 32px; border-radius: 9px; } .voice-notes-compact .voice-note-card-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.2px; } .voice-notes-compact .voice-note-card-copy small { font-size: 10.8px; } .voice-notes-compact .voice-note-card-copy em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.4px; } .voice-notes-compact .voice-note-empty { min-height: 124px; display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 12px; } .voice-detail-view[hidden] { display: none !important; } .voice-detail-view { position: fixed; inset: 0; z-index: 190; height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 4vw, 42px) 16px 48px; background: linear-gradient(180deg, rgba(247,249,252,.98) 0%, rgba(238,244,255,.98) 100%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.is-voice-detail-route { overflow: hidden; } .voice-detail-page-shell { width: min(1120px, 100%); margin: 0 auto; } .voice-detail-page-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--cw-text-muted); font-size: 12px; font-weight: 760; } .voice-detail-back-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border-radius: 10px; border: 1px solid rgba(214,220,235,.9); background: rgba(255,255,255,.9); color: var(--cw-text); font-weight: 760; box-shadow: 0 10px 24px rgba(31,43,76,.06); } .voice-detail-back-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .voice-note-detail-page { min-height: auto !important; padding: clamp(18px, 3vw, 30px) !important; border-radius: 20px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 22px 58px rgba(31,43,76,.10), inset 0 1px 0 rgba(255,255,255,.9); } .voice-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .voice-detail-hero h1 { margin: 6px 0 0; color: var(--cw-text); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; letter-spacing: 0; overflow-wrap: anywhere; } .voice-note-detail-page .voice-detail-meta { margin: 12px 0 0; } .voice-note-detail-page .voice-detail-playback { padding: 14px; border: 1px solid rgba(214,220,235,.86); border-radius: 14px; background: var(--cw-surface-muted); } .voice-detail-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; } .voice-detail-title-row button, .voice-note-detail-page .voice-detail-playback button { min-height: 42px; border-radius: 10px; padding: 0 14px; background: var(--cw-surface); color: var(--cw-accent-text); border-color: rgba(var(--brand-rgb),.22); font-weight: 760; } .voice-note-detail-page .voice-detail-section { margin-top: 14px !important; padding: 15px !important; border: 1px solid rgba(214,220,235,.86) !important; border-radius: 14px; background: rgba(255,255,255,.78); } .voice-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .voice-detail-grid .voice-detail-section { margin-top: 0 !important; } .voice-note-detail-page h3 { margin: 0 0 8px; color: var(--cw-text); font-size: 13px; line-height: 1.28; font-weight: 820; } .voice-note-detail-page p, .voice-note-detail-page li, .voice-detail-muted { color: var(--cw-text-muted); font-size: 13px; line-height: 1.58; } .voice-note-detail-page p { margin: 0; } .voice-note-detail-page ul { margin: 0; padding-left: 18px; } .voice-transcript-section p { white-space: pre-wrap; } @media (max-width: 1120px) { .vx-header-inner { flex-wrap: wrap !important; } .vx-header-context.vx-space-context { order: 3; flex: 1 0 100% !important; max-width: 100% !important; } .vx-product-nav { margin-left: auto !important; } .voice-notes-row { grid-template-columns: 1fr; } .voice-notes-compact .voice-notes-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .vx-header-inner { width: min(100% - 20px, 1540px) !important; gap: 8px !important; } .vx-brand { min-width: 158px !important; max-width: calc(100% - 156px) !important; } .vx-product-nav, .vx-header-actions { gap: 4px !important; } .vx-nav-link, .vx-product-nav .vx-nav-link, .vx-header-actions .vx-nav-link { min-height: 38px !important; height: 38px !important; padding: 0 9px !important; font-size: 11.5px !important; } .vx-nav-link svg { width: 16px; height: 16px; } .voice-notes-compact .voice-notes-list { grid-auto-flow: column; grid-auto-columns: minmax(218px, 86%); grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 2px; } .voice-notes-compact .voice-note-card, .voice-notes-compact .voice-note-empty { scroll-snap-align: start; } .voice-detail-grid { grid-template-columns: 1fr; } .voice-detail-hero { flex-direction: column; } .voice-detail-title-row { grid-template-columns: 1fr; } } @media (max-width: 540px) { .clikplan-logo-mark, .clikplan-logo-mark svg { width: 38px !important; height: 38px !important; } .vx-brand { min-width: 150px !important; max-width: 100% !important; } .vx-product-nav { order: 2; margin-left: 0 !important; } .vx-header-actions { order: 2; margin-left: auto !important; } .vx-nav-link span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; } .vx-space-add-label { max-width: 80px; } .voice-notes-compact .voice-recorder-actions { grid-template-columns: 1fr; } } @media (max-width: 380px) { .vx-space-add-label { display: none; } .vx-space-selector .vx-space-add-btn { width: 40px !important; padding: 0 !important; } .vx-nav-link, .vx-product-nav .vx-nav-link, .vx-header-actions .vx-nav-link { padding: 0 8px !important; } } /* Final Clik Work header polish: single-colour brand and workspace strip. */ .vx-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; min-width: 212px !important; max-width: 268px !important; } .clikplan-logo-mark::before { content: none !important; } .clikplan-logo-mark { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; display: inline-grid !important; place-items: center !important; border: 1px solid rgba(17,24,39,.12) !important; border-radius: 13px !important; background: rgba(255,255,255,.84) !important; color: var(--cw-text) !important; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 26px rgba(16,24,40,.06) !important; } .clikplan-logo-mark svg { width: 28px !important; height: 28px !important; display: block; } .clikplan-logo-mark svg rect, .clikplan-logo-mark svg path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .vx-brand-text { display: grid !important; gap: 2px !important; min-width: 0 !important; } .vx-title { color: var(--cw-text) !important; font-size: 16px !important; line-height: 1.02 !important; font-weight: 820 !important; letter-spacing: 0 !important; } .vx-sub { color: var(--cw-text-muted) !important; font-size: 9.5px !important; line-height: 1.1 !important; font-weight: 760 !important; letter-spacing: .085em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } .vx-header-context.vx-space-context { padding: 2px !important; border: 1px solid rgba(226, 220, 211, .82) !important; border-radius: 16px !important; background: rgba(255, 253, 249, .7) !important; box-shadow: 0 1px 2px rgba(16,24,40,.035), inset 0 1px 0 rgba(255,255,255,.92) !important; } .vx-space-selector { gap: 4px !important; padding: 2px !important; scrollbar-width: none !important; } .vx-space-selector::-webkit-scrollbar { display: none !important; } .vx-space-pill-wrap { min-height: 34px !important; background: transparent !important; box-shadow: none !important; } .vx-space-pill-wrap.active { background: transparent !important; box-shadow: none !important; } .vx-space-selector .vx-space-pill { min-height: 34px !important; height: 34px !important; max-width: 154px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 11px !important; border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; color: var(--cw-text-muted) !important; font-size: 12px !important; font-weight: 760 !important; box-shadow: none !important; } .vx-space-selector .vx-space-pill:hover, .vx-space-selector .vx-space-pill:focus-visible { background: rgba(248,250,252,.96) !important; border-color: rgba(226,232,240,.94) !important; color: var(--cw-text) !important; outline: none !important; } .vx-space-selector .vx-space-pill[aria-pressed="true"] { background: var(--cw-surface) !important; border-color: rgba(17,24,39,.10) !important; color: var(--cw-text) !important; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 18px rgba(16,24,40,.055) !important; } .vx-space-pill-icon { width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 16px !important; overflow: visible !important; } .vx-space-pill-icon svg, .vx-space-add-symbol svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .vx-space-selector .vx-space-pill .vx-space-pill-label { display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .vx-space-selector .vx-space-menu-btn { height: 34px !important; width: 28px !important; border-radius: 10px !important; color: var(--cw-text-muted) !important; } .vx-space-selector .vx-space-add-btn { height: 34px !important; min-height: 34px !important; max-width: 190px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 12px 0 10px !important; border: 1px dashed rgba(17,24,39,.18) !important; border-radius: 12px !important; background: rgba(255,255,255,.74) !important; color: var(--cw-text) !important; font-size: 11.6px !important; font-weight: 760 !important; box-shadow: none !important; } .vx-space-selector .vx-space-add-btn:hover, .vx-space-selector .vx-space-add-btn:focus-visible { border-style: solid !important; border-color: rgba(17,24,39,.24) !important; background: var(--cw-surface) !important; outline: none !important; } .vx-space-add-symbol { width: 18px !important; height: 18px !important; display: inline-grid !important; place-items: center !important; flex: 0 0 18px !important; border: 1px solid rgba(17,24,39,.14) !important; border-radius: 7px !important; background: transparent !important; color: currentColor !important; font-size: 0 !important; } .vx-space-add-label { max-width: 138px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (max-width: 720px) { .vx-brand { min-width: 196px !important; max-width: 100% !important; } .vx-sub { font-size: 9px !important; } .vx-header-context.vx-space-context { border-radius: 15px !important; } .vx-space-selector { padding: 2px !important; } .vx-space-selector .vx-space-pill, .vx-space-selector .vx-space-add-btn { height: 38px !important; min-height: 38px !important; } } @media (max-width: 540px) { .vx-brand { flex: 1 1 100% !important; min-width: 0 !important; } .clikplan-logo-mark { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } .clikplan-logo-mark svg { width: 26px !important; height: 26px !important; } .vx-space-add-label { max-width: 96px !important; } } /* Header workspace rail alignment correction. */ @media (min-width: 1121px) { .vx-header-inner { position: relative !important; justify-content: flex-start !important; } .vx-header-context.vx-space-context { position: static !important; left: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 18px !important; transform: none !important; } .vx-space-selector { justify-content: center !important; } .vx-product-nav { margin-left: 0 !important; } } .vx-space-selector .vx-space-add-btn { min-width: 222px !important; max-width: 248px !important; padding-right: 24px !important; padding-left: 12px !important; } .vx-space-add-label { max-width: 176px !important; } @media (max-width: 1120px) { .vx-header-context.vx-space-context { position: static !important; left: auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; transform: none !important; } .vx-space-selector .vx-space-add-btn { min-width: 210px !important; max-width: 236px !important; padding-right: 20px !important; } } @media (max-width: 540px) { .vx-space-selector .vx-space-add-btn { min-width: 184px !important; max-width: 210px !important; padding-right: 16px !important; } .vx-space-add-label { max-width: 138px !important; } } @media (max-width: 380px) { .vx-space-selector .vx-space-add-btn { width: 44px !important; min-width: 44px !important; max-width: 44px !important; padding: 0 !important; } .vx-space-add-label { display: none !important; } } /* Header auth visibility guard: Login/Register and Logout are mutually exclusive. */ .vx-header-actions .vx-nav-link[hidden], .vx-header-actions .vx-login-btn[hidden], .vx-header-actions .vx-register-btn[hidden], .vx-header-actions .vx-logout-header-btn[hidden] { display: none !important; } body:not(.is-authenticated) .vx-header-actions .vx-logout-header-btn { display: none !important; } body:not(.is-authenticated) .vx-header-actions .vx-login-btn:not([hidden]), body:not(.is-authenticated) .vx-header-actions .vx-register-btn:not([hidden]), body.is-authenticated .vx-header-actions .vx-logout-header-btn:not([hidden]) { display: inline-flex !important; } body.is-authenticated .vx-header-actions .vx-login-btn, body.is-authenticated .vx-header-actions .vx-register-btn { display: none !important; } /* Main priority strip and module route pages. */ body:not(.is-detailed-route):not(.is-voice-detail-route):not(.is-ask-ai-route):not(.is-people-route):not(.is-lists-route):not(.is-lens-route):not(.is-attachi-route) #appShell { padding-top: 20px !important; } #appShell > #todayVantage { margin: 0 0 12px !important; } #appShell > #todayVantage + .clik-hero { margin-top: 0 !important; padding-top: clamp(20px, 3vw, 34px) !important; } .module-route-view[hidden] { display: none !important; } .module-route-view { position: relative; z-index: 1; width: min(1240px, 94vw); margin: 0 auto; padding: 22px 0 64px; } .module-route-shell { display: grid; gap: 14px; min-width: 0; } .module-route-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; } .module-route-topbar h1 { margin: 0; color: var(--cw-text); font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: 0; } .module-route-back { min-height: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(214, 220, 235, .9); border-radius: 8px; background: rgba(255,255,255,.9); color: var(--cw-text); font-size: 13px; font-weight: 760; box-shadow: 0 8px 18px rgba(31,43,76,.055); } .module-route-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ask-ai-route-view .flow-ai-hero { margin: 0 !important; } .people-hub-shell { gap: 18px; } .people-route-title { min-width: 0; text-align: right; } .people-route-title p { margin: 6px 0 0; color: var(--cw-text-muted); font-size: 14px; line-height: 1.45; font-weight: 600; } .people-connect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .people-sync-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .people-sync-row button { min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--cw-surface); color: var(--cw-accent-text); border-color: rgba(var(--brand-rgb),.22); font-size: 12px; font-weight: 760; } .people-sync-row button:disabled { color: var(--cw-text-muted); background: var(--cw-surface-muted); border-color: var(--cw-border); cursor: not-allowed; } .people-action-card { min-height: 126px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px 12px; align-content: start; padding: 16px; border: 1px solid rgba(214, 220, 235, .9); border-radius: 8px; background: rgba(255,255,255,.86); color: var(--cw-text); text-align: left; box-shadow: 0 12px 28px rgba(31,43,76,.07); } .people-action-card.primary, .people-action-card:hover, .people-action-card:focus-visible { border-color: rgba(var(--brand-rgb),.34); background: var(--cw-surface); transform: translateY(-2px); } .people-action-icon { grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; color: var(--cw-accent-text); background: var(--cw-accent-tint); border: 1px solid rgba(var(--brand-rgb),.14); } .people-action-icon svg, .people-source-badge + svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .people-action-card strong { font-size: 13.4px; line-height: 1.25; } .people-action-card small { color: var(--cw-text-muted); font-size: 12px; line-height: 1.42; } .contacts-csv-preview, .people-organizer, .people-list-panel, .people-detail-panel { border: 1px solid rgba(214, 220, 235, .9); border-radius: 8px; background: rgba(255,255,255,.88); box-shadow: 0 16px 36px rgba(31,43,76,.07); } .contacts-csv-preview { display: grid; gap: 12px; padding: 14px; } .contacts-csv-preview[hidden] { display: none !important; } .contacts-csv-preview strong, .people-list-head strong, .people-linked-work strong { display: block; color: var(--cw-text); font-size: 13.5px; } .contacts-csv-preview span, .people-list-head small { color: var(--cw-text-muted); font-size: 12px; } .contacts-csv-preview-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .contacts-csv-preview-list div { min-width: 0; padding: 10px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); } .people-organizer { padding: 14px; } .people-filter-row { display: grid; grid-template-columns: minmax(260px, 1fr) 150px 150px 170px; gap: 10px; margin-bottom: 14px; } .people-filter-row input, .people-filter-row select, .contact-form input, .contact-form textarea { width: 100%; border-radius: 8px; border: 1px solid var(--cw-accent-tint); background: var(--cw-surface); color: var(--cw-text); font: inherit; } .people-filter-row input, .people-filter-row select, .contact-form input { min-height: 42px; padding: 0 12px; } .contact-form textarea { min-height: 96px; padding: 12px; resize: vertical; } .people-layout { display: grid; grid-template-columns: minmax(320px, .88fr) minmax(360px, 1fr); gap: 14px; align-items: start; } .people-list-panel, .people-detail-panel { min-width: 0; padding: 14px; } .people-list-head, .people-detail-head, .people-inline-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .people-alpha-rail { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0; } .people-alpha-rail span { min-width: 24px; min-height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--cw-surface-muted); color: var(--cw-text-muted); font-size: 11px; font-weight: 800; } .people-contacts-list { max-height: 64vh; overflow-y: auto; display: grid; gap: 8px; padding-right: 3px; } .people-letter { margin-top: 6px; color: var(--cw-success); font-size: 11px; font-weight: 840; letter-spacing: 0; } .people-contact-row { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface); text-align: left; } .people-contact-row:hover, .people-contact-row.active { border-color: rgba(var(--brand-rgb),.34); box-shadow: 0 10px 22px rgba(31,43,76,.08); } .people-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 12px; font-weight: 820; } .people-contact-main { min-width: 0; display: grid; gap: 3px; } .people-contact-main strong, .people-contact-main small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .people-contact-main strong { color: var(--cw-text); font-size: 13.5px; } .people-contact-main small { color: var(--cw-text-muted); font-size: 12px; } .people-contact-main span { display: flex; gap: 5px; flex-wrap: wrap; } .people-contact-main em { padding: 3px 7px; border-radius: 999px; background: var(--cw-surface-muted); color: var(--cw-text-muted); font-size: 10.5px; font-style: normal; font-weight: 750; } .people-source-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--cw-surface-muted); color: var(--cw-text-muted); font-size: 10.5px; font-weight: 820; white-space: nowrap; } .people-source-badge.google { background: var(--cw-accent-tint); color: var(--cw-accent-text); } .people-source-badge.outlook { background: var(--cw-success-bg); color: var(--cw-success); } .people-source-badge.csv { background: var(--cw-warning-bg); color: var(--cw-warning); } .people-detail-head h2 { margin: 8px 0 0; font-size: 24px; line-height: 1.15; letter-spacing: 0; } .people-delete-btn { min-height: 34px; padding: 0 12px; border-radius: 8px; color: var(--cw-danger); background: var(--cw-danger-bg); border-color: rgba(179,38,30,.18); } .contact-form { display: grid; gap: 10px; margin-top: 14px; } .contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .people-tag-suggestions { display: flex; gap: 7px; flex-wrap: wrap; } .people-tag-suggestions button { min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--cw-surface-muted); color: var(--cw-text-muted); border-color: var(--cw-border); font-size: 11.5px; font-weight: 760; } .people-inline-actions { justify-content: flex-start; flex-wrap: wrap; } .people-inline-actions button { min-height: 38px; border-radius: 8px; padding: 0 14px; font-weight: 760; } .people-inline-actions .secondary, #resetContactForm { background: var(--cw-surface); color: var(--cw-accent-text); border-color: rgba(var(--brand-rgb),.25); } .contact-provider-info, .people-linked-work, .people-sync-back, .people-empty-state { margin-top: 12px; padding: 12px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); color: var(--cw-text-muted); font-size: 12.5px; line-height: 1.45; } .people-linked-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .people-linked-work strong { grid-column: 1 / -1; } .people-sync-back { width: 100%; min-height: 40px; color: var(--cw-text-muted); cursor: not-allowed; } .lists-route-view { background: var(--cw-surface-muted); } .lists-shell { max-width: 1120px; } .lists-topbar { display: grid; grid-template-columns: auto 1fr auto; } .lists-route-status, .smart-list-type-badge { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border: 1px solid var(--cw-border); border-radius: 999px; background: var(--cw-surface); color: var(--cw-accent-text); font-size: 12px; font-weight: 820; } .lists-picker-panel { display: grid; gap: 18px; } .lists-picker-panel[hidden] { display: none !important; } .lists-hero { max-width: 680px; padding: 16px 0 2px; } .lists-hero h2 { margin: 4px 0 6px; color: var(--cw-text); font-size: 42px; line-height: 1.04; letter-spacing: 0; } .lists-hero p { margin: 0; color: var(--cw-text-muted); line-height: 1.6; } .smart-list-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .smart-list-template-card, .saved-smart-list-card { min-width: 0; border: 1px solid var(--cw-accent-tint); border-radius: 8px; background: rgba(255,255,255,.92); color: var(--cw-text); cursor: pointer; text-align: left; box-shadow: 0 10px 30px rgba(17,24,39,.05); } .smart-list-template-card { min-height: 138px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-content: start; padding: 16px; } .smart-list-template-card:hover, .smart-list-template-card:focus-visible, .saved-smart-list-card:hover, .saved-smart-list-card:focus-visible { border-color: var(--cw-accent-text); box-shadow: 0 16px 38px rgba(31,111,235,.12); } .smart-list-template-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--cw-success-bg); color: var(--cw-success); } .smart-list-template-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .smart-list-template-card strong { align-self: end; font-size: 15px; font-weight: 840; } .smart-list-template-card small { grid-column: 2; color: var(--cw-text-muted); line-height: 1.45; } .smart-list-saved-section { display: grid; gap: 10px; padding-top: 8px; } .smart-list-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--cw-text); } .smart-list-section-head.compact { padding-bottom: 8px; border-bottom: 1px solid var(--cw-accent-tint); } .smart-list-section-head strong { font-size: 15px; font-weight: 840; } .smart-list-section-head span { color: var(--cw-text-muted); font-size: 13px; } .saved-smart-lists-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .saved-smart-list-card { min-height: 88px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; } .saved-smart-list-main { min-width: 0; display: grid; gap: 3px; } .saved-smart-list-main strong, .saved-smart-list-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-smart-list-main small { color: var(--cw-text-muted); } .saved-smart-list-card em { color: var(--cw-text-muted); font-size: 13px; font-style: normal; font-weight: 820; } .smart-list-empty-card, .smart-list-empty-items, .smart-list-suggestion-empty { padding: 18px; border: 1px dashed var(--cw-accent-tint); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text-muted); text-align: center; } .lists-editor-panel { display: grid; gap: 12px; } .lists-editor-panel[hidden] { display: none !important; } .lists-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lists-primary-btn, .lists-secondary-btn, .lists-danger-btn, .smart-list-add-form button { min-height: 40px; padding: 0 14px; border-radius: 8px; font-weight: 780; cursor: pointer; } .lists-primary-btn { border: 1px solid var(--cw-text); background: var(--cw-text); color: var(--cw-surface); } .lists-secondary-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cw-border); background: var(--cw-surface); color: var(--cw-text); } .lists-secondary-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lists-danger-btn { border: 1px solid var(--cw-danger-bg); background: var(--cw-danger-bg); color: var(--cw-danger); } .smart-list-notepad { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--cw-accent-tint); border-radius: 8px; background: var(--cw-surface); box-shadow: 0 18px 50px rgba(17,24,39,.08); } .smart-list-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } #smartListTitleInput { width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--cw-border); background: transparent; color: var(--cw-text); font-size: 30px; font-weight: 820; letter-spacing: 0; } #smartListTitleInput:focus { outline: 0; border-color: var(--cw-accent-text); } .smart-list-editor-grid { display: grid; grid-template-columns: minmax(220px, 32%) minmax(0, 1fr); gap: 14px; align-items: start; } .smart-list-suggestions-card, .smart-list-items-card { min-width: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); } .smart-list-suggestions { display: flex; flex-wrap: wrap; gap: 8px; } .smart-list-suggestion-pill { min-height: 34px; padding: 0 11px; border: 1px solid var(--cw-border); border-radius: 999px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-weight: 740; cursor: pointer; } .smart-list-suggestion-pill:hover { border-color: var(--cw-accent-text); background: var(--cw-accent-tint); color: var(--cw-accent-text); } .smart-list-items { display: grid; gap: 8px; } .smart-list-item-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 8px; align-items: center; min-height: 42px; padding: 6px; border: 1px solid var(--cw-accent-tint); border-radius: 8px; background: var(--cw-surface); } .smart-list-check { width: 24px; height: 24px; border: 1px solid var(--cw-accent-tint); border-radius: 7px; background: var(--cw-surface); cursor: pointer; } .smart-list-check[aria-pressed="true"] { border-color: var(--cw-success); background: var(--cw-success); color: var(--cw-surface); } .smart-list-check[aria-pressed="true"]::after { content: ""; display: block; width: 10px; height: 6px; margin: 6px auto 0; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); } .smart-list-item-row input { width: 100%; min-height: 30px; border: 0; background: transparent; color: var(--cw-text); font: inherit; } .smart-list-item-row input:focus { outline: 0; } .smart-list-item-row.is-checked input { color: var(--cw-accent-text); text-decoration: line-through; } .smart-list-item-delete { width: 28px; height: 28px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cw-text-subtle); font-size: 20px; cursor: pointer; } .smart-list-item-delete:hover { border-color: var(--cw-danger-bg); background: var(--cw-danger-bg); color: var(--cw-danger); } .smart-list-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 4px; } .smart-list-add-form input, .smart-list-notes-label textarea { width: 100%; border: 1px solid var(--cw-text-subtle); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text); font: inherit; } .smart-list-add-form input { min-height: 40px; padding: 0 12px; } .smart-list-add-form button { border: 1px solid var(--cw-border); background: var(--cw-surface); color: var(--cw-text); } .smart-list-notes-label { display: grid; gap: 7px; color: var(--cw-accent-text); font-size: 13px; font-weight: 820; } .smart-list-notes-label textarea { min-height: 88px; padding: 10px 12px; resize: vertical; } .smart-list-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .smart-list-editor-message { min-height: 22px; color: var(--cw-text-muted); font-size: 13px; } .smart-list-editor-message[data-type="success"] { color: var(--cw-success); } .smart-list-editor-message[data-type="error"] { color: var(--cw-danger); } .lens-route-view { background: var(--cw-surface-muted); } .lens-shell { max-width: 1180px; } .lens-topbar { display: grid; grid-template-columns: auto 1fr auto; } .lens-route-status { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border: 1px solid var(--cw-border); border-radius: 999px; background: var(--cw-surface); color: var(--cw-accent-text); font-size: 12px; font-weight: 820; } .lens-board { display: grid; gap: 18px; } .lens-hero { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 0 22px; border-bottom: 1px solid var(--cw-accent-tint); } .lens-hero h2 { max-width: 720px; margin: 4px 0 0; color: var(--cw-text); font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: 0; } .lens-hero-actions { display: grid; gap: 8px; justify-items: end; } #lensStatus { color: var(--cw-text-muted); } .lens-primary-btn, .lens-secondary-btn, .lens-scan-actions button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 8px; font-weight: 780; cursor: pointer; } .lens-primary-btn { border: 1px solid var(--cw-text); background: var(--cw-text); color: var(--cw-surface); } .lens-primary-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lens-secondary-btn, .lens-scan-actions button { border: 1px solid var(--cw-border); background: var(--cw-surface); color: var(--cw-text); } .lens-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lens-category-card { min-height: 128px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--cw-accent-tint); border-radius: 8px; background: rgba(255,255,255,.92); color: var(--cw-text); text-align: left; box-shadow: 0 10px 30px rgba(17,24,39,.05); } .lens-category-card:hover, .lens-category-card:focus-visible, .lens-category-card.is-selected { border-color: var(--cw-accent-text); box-shadow: 0 16px 38px rgba(31,111,235,.12); } .lens-category-icon, .lens-scan-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--cw-accent-tint); color: var(--cw-accent-text); } .lens-category-icon svg, .lens-scan-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .lens-category-card strong { align-self: end; font-size: 15px; font-weight: 840; } .lens-category-card small { grid-column: 2; color: var(--cw-text-muted); line-height: 1.45; } .lens-review-panel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--cw-accent-tint); border-radius: 8px; background: var(--cw-surface); box-shadow: 0 18px 50px rgba(17,24,39,.08); } .lens-review-panel[hidden] { display: none !important; } .lens-review-head, .lens-section-head, .lens-scan-main, .lens-review-actions, .lens-scan-actions, .lens-chip-row { display: flex; align-items: center; gap: 10px; } .lens-review-head, .lens-section-head { justify-content: space-between; } .lens-review-head strong, .lens-section-head strong { display: block; color: var(--cw-text); font-size: 15px; font-weight: 840; } .lens-review-head span, .lens-section-head span, .lens-review-help { color: var(--cw-text-muted); font-size: 13px; } .lens-review-help { margin: 0; } .lens-crop-stage { position: relative; min-height: 420px; overflow: hidden; touch-action: none; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-text); } .lens-crop-image { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: contain; background: var(--cw-text); user-select: none; } .lens-crop-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .lens-crop-overlay polygon { fill: rgba(31, 111, 235, .12); stroke: var(--cw-accent); stroke-width: 1.2; } .lens-crop-handle { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 2px solid var(--cw-surface); border-radius: 999px; background: var(--cw-accent); box-shadow: 0 4px 14px rgba(15,23,42,.28); cursor: grab; } .lens-crop-handle:active { cursor: grabbing; } .lens-processing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .lens-processing[hidden] { display: none !important; } .lens-processing span { padding: 9px 10px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); color: var(--cw-accent-text); font-size: 12px; font-weight: 760; } .lens-processing span.active { border-color: var(--cw-accent-text); background: var(--cw-accent-tint); color: var(--cw-accent-text); } .lens-processing span.done { border-color: var(--cw-success); background: var(--cw-success-bg); color: var(--cw-success); } .lens-review-actions { flex-wrap: wrap; } .lens-message { min-height: 22px; color: var(--cw-text-muted); font-size: 13px; } .lens-recent-section { display: grid; gap: 12px; } .lens-scan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lens-scan-card { min-width: 0; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface); box-shadow: 0 10px 28px rgba(17,24,39,.05); } .lens-scan-main { align-items: center; } .lens-scan-main div { min-width: 0; display: grid; gap: 3px; } .lens-scan-main strong, .lens-scan-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lens-scan-main strong { color: var(--cw-text); } .lens-scan-main small { color: var(--cw-text-muted); } .lens-chip-row, .lens-scan-actions { flex-wrap: wrap; } .lens-status-chip { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 12px; font-weight: 820; white-space: nowrap; } .lens-status-chip.processed, .lens-status-chip.pdf_ready { background: var(--cw-success-bg); color: var(--cw-success); } .lens-status-chip.failed, .lens-status-chip.pdf_pending, .lens-status-chip.ocr_failed { background: var(--cw-danger-bg); color: var(--cw-danger); } .lens-status-chip.needs_review, .lens-status-chip.not_configured { background: var(--cw-warning-bg); color: var(--cw-warning); } .lens-scan-actions button:disabled { cursor: not-allowed; opacity: .55; } .lens-danger-btn { border-color: var(--cw-danger-bg) !important; background: var(--cw-danger-bg) !important; color: var(--cw-danger) !important; } .lens-empty { padding: 28px; border: 1px dashed var(--cw-text-subtle); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text-muted); text-align: center; } .attachi-route-view { background: var(--cw-surface-muted); } .attachi-shell { max-width: 1180px; } .attachi-topbar { display: grid; grid-template-columns: auto 1fr auto; } .attachi-primary-btn, .attachi-upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--cw-text); border-radius: 8px; background: var(--cw-text); color: var(--cw-surface); font-weight: 780; cursor: pointer; } .attachi-primary-btn svg, .attachi-upload-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .attachi-board { display: grid; gap: 18px; } .attachi-hero { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 0 22px; border-bottom: 1px solid var(--cw-accent-tint); } .attachi-hero h2 { margin: 4px 0 6px; color: var(--cw-text); font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: 0; } .attachi-hero p { max-width: 620px; margin: 0; color: var(--cw-text-muted); line-height: 1.6; } .attachi-hero-actions { display: grid; gap: 8px; justify-items: end; } #attachiStatus { color: var(--cw-text-muted); } .attachi-controls { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, 180px)) auto; gap: 10px; align-items: center; } .attachi-controls input, .attachi-controls select, .attachi-review-form input, .attachi-review-form select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--cw-text-subtle); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text); font: inherit; } .attachi-controls button, .attachi-modal-actions button, .attachi-detail-actions button, .attachi-add-field { min-height: 40px; padding: 0 14px; border: 1px solid var(--cw-text-subtle); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text); font-weight: 760; cursor: pointer; } .attachi-review-count { justify-self: start; padding: 6px 12px; border: 1px solid var(--cw-warning); border-radius: 999px; background: var(--cw-warning-bg); color: var(--cw-warning); font-size: 13px; font-weight: 780; } .attachi-folder-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .attachi-folder-card { min-height: 132px; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text); text-align: left; cursor: pointer; } .attachi-folder-card:hover, .attachi-folder-card.active { border-color: var(--cw-accent-text); box-shadow: 0 12px 30px rgba(31, 111, 235, .12); } .attachi-folder-card span { font-size: 14px; font-weight: 820; } .attachi-folder-card strong { font-size: 30px; line-height: 1; } .attachi-folder-card small { color: var(--cw-text-muted); line-height: 1.45; } .attachi-list-section { display: grid; gap: 12px; } .attachi-list-head { display: flex; justify-content: space-between; align-items: center; color: var(--cw-text); } .attachi-document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .attachi-doc-card { min-height: 106px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface); text-align: left; cursor: pointer; } .attachi-doc-card:hover { border-color: var(--cw-success); box-shadow: 0 12px 28px rgba(33, 166, 122, .1); } .attachi-doc-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--cw-success-bg); color: var(--cw-success); } .attachi-doc-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .attachi-doc-main { min-width: 0; display: grid; gap: 3px; } .attachi-doc-main strong, .attachi-doc-main small, .attachi-doc-main em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachi-doc-main strong { color: var(--cw-text); } .attachi-doc-main small { color: var(--cw-text-muted); } .attachi-doc-main em { color: var(--cw-text-muted); font-size: 13px; font-style: normal; } .attachi-status-chip, .attachi-confidence { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; background: var(--cw-accent-tint); color: var(--cw-accent-text); font-size: 12px; font-weight: 820; white-space: nowrap; } .attachi-status-chip.saved { background: var(--cw-success-bg); color: var(--cw-success); } .attachi-status-chip.needs_review { background: var(--cw-warning-bg); color: var(--cw-warning); } .attachi-status-chip.ocr_failed { background: var(--cw-danger-bg); color: var(--cw-danger); } .attachi-empty { padding: 28px; border: 1px dashed var(--cw-text-subtle); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text-muted); text-align: center; } .attachi-modal.attachi-hidden { display: none; } .attachi-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; } .attachi-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .48); } .attachi-modal-card { position: relative; z-index: 1; width: min(1080px, 96vw); max-height: 92vh; overflow: auto; padding: 20px; border-radius: 8px; background: var(--cw-surface); box-shadow: 0 28px 80px rgba(15, 23, 42, .28); } .attachi-modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid var(--cw-accent-tint); border-radius: 8px; background: var(--cw-surface); font-size: 22px; cursor: pointer; } .attachi-modal-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 14px; padding-right: 46px; } .attachi-modal-head h2 { margin: 4px 0 0; font-size: 26px; letter-spacing: 0; } .attachi-processing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 8px 0 16px; } .attachi-processing[hidden] { display: none; } .attachi-processing span { padding: 9px 10px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); color: var(--cw-accent-text); font-size: 12px; font-weight: 760; } .attachi-processing span.active { border-color: var(--cw-accent-text); background: var(--cw-accent-tint); color: var(--cw-accent-text); } .attachi-processing span.done { border-color: var(--cw-success); background: var(--cw-success-bg); color: var(--cw-success); } .attachi-review-layout { display: grid; grid-template-columns: minmax(280px, 44%) minmax(0, 1fr); gap: 18px; } .attachi-preview { min-height: 420px; overflow: hidden; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); } .attachi-preview img, .attachi-preview iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; object-fit: contain; background: var(--cw-surface); } .attachi-preview-fallback { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--cw-text-muted); } .attachi-review-form { display: grid; gap: 12px; } .attachi-review-form label { display: grid; gap: 6px; color: var(--cw-accent-text); font-size: 13px; font-weight: 820; } .attachi-review-row, .attachi-metadata-fields, .attachi-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .attachi-add-field { grid-column: 1 / -1; } .attachi-message { min-height: 22px; color: var(--cw-text-muted); font-size: 13px; } .attachi-modal-actions, .attachi-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .attachi-danger-btn { border-color: var(--cw-danger-bg) !important; background: var(--cw-danger-bg) !important; color: var(--cw-danger) !important; } .attachi-detail-body { display: grid; align-content: start; gap: 16px; } .attachi-detail-meta div { min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface-muted); } .attachi-detail-meta span { color: var(--cw-text-muted); font-size: 12px; font-weight: 820; text-transform: capitalize; } .attachi-detail-meta strong { color: var(--cw-text); overflow-wrap: anywhere; } .attachi-ocr-details { padding: 12px; border: 1px solid var(--cw-border); border-radius: 8px; } .attachi-ocr-details summary { cursor: pointer; font-weight: 820; } .attachi-ocr-details pre { max-height: 260px; overflow: auto; color: var(--cw-text-muted); font-size: 13px; white-space: pre-wrap; } @media (max-width: 960px) { .lists-topbar, .lens-topbar, .smart-list-editor-grid { grid-template-columns: 1fr; } .smart-list-template-grid, .saved-smart-lists-grid, .lens-category-grid, .lens-scan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lens-hero { display: grid; align-items: start; } .lens-hero-actions { justify-items: stretch; } .lens-processing { grid-template-columns: 1fr; } .attachi-topbar, .attachi-hero, .attachi-controls, .attachi-review-layout { grid-template-columns: 1fr; } .attachi-hero { display: grid; align-items: start; } .attachi-hero-actions { justify-items: stretch; } .attachi-folder-grid, .attachi-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .attachi-processing, .attachi-detail-meta { grid-template-columns: 1fr; } } @media (max-width: 640px) { .smart-list-template-grid, .saved-smart-lists-grid, .lens-category-grid, .lens-scan-grid, .smart-list-title-row, .smart-list-add-form { grid-template-columns: 1fr; } .smart-list-notepad { padding: 14px; } .lists-hero h2 { font-size: 30px; } #smartListTitleInput { font-size: 24px; } .smart-list-template-card { min-height: 118px; } .saved-smart-list-card { grid-template-columns: 38px minmax(0, 1fr); } .saved-smart-list-card em { grid-column: 2; } .smart-list-editor-actions { align-items: stretch; flex-direction: column; } .attachi-folder-grid, .attachi-document-grid, .attachi-review-row, .attachi-metadata-fields { grid-template-columns: 1fr; } .attachi-modal { padding: 10px; } .attachi-modal-card { width: 100%; max-height: 96vh; padding: 16px; } .attachi-doc-card { grid-template-columns: 38px minmax(0, 1fr); } .attachi-doc-card .attachi-status-chip { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 760px) { body:not(.is-detailed-route):not(.is-voice-detail-route):not(.is-ask-ai-route):not(.is-people-route):not(.is-lists-route):not(.is-lens-route):not(.is-attachi-route) #appShell { padding-top: 14px !important; } #appShell > #todayVantage { margin-bottom: 10px !important; } #appShell > #todayVantage + .clik-hero { padding-top: 18px !important; } .module-route-view { width: min(100% - 24px, 1240px); padding-top: 14px; } .module-route-topbar { align-items: flex-start; flex-direction: column; } .module-route-back { width: 100%; justify-content: center; } .people-route-title { text-align: left; } .people-connect-grid, .contacts-csv-preview-list, .people-filter-row, .people-layout, .contact-form-grid { grid-template-columns: 1fr; } .people-contacts-list { max-height: none; } .people-contact-row { grid-template-columns: 42px minmax(0, 1fr); } .people-contact-row .people-source-badge { grid-column: 2; justify-self: start; } } /* Final assistant home guard: legacy section rules must not leak onto the clean home. */ #appShell > .assistant-content-module:not(.assistant-content-mounted) { display: none !important; } #assistantFocusContent > .assistant-content-mounted.todo-workspace, #assistantFocusContent > .assistant-content-mounted.reminder-workspace, #assistantFocusContent > .assistant-content-mounted.voice-notes-workspace, #assistantFocusContent > .assistant-content-mounted.notes-workspace, #assistantFocusContent > .assistant-content-mounted.ai-command-centre, #assistantFocusContent > .assistant-content-mounted.team-panel, #assistantFocusContent > .assistant-content-mounted.flow-command-bar, #assistantFocusContent > .assistant-content-mounted.flow-workspace-head, #assistantFocusContent > .assistant-content-mounted.history-section { display: block !important; } #assistantFocusContent > .assistant-content-mounted.toolbar { display: flex !important; } #assistantFocusContent > .assistant-content-mounted.board, #assistantFocusContent > .assistant-content-mounted.hero { display: grid !important; } /* Hero focus header already shows the To-Do title/icon/description — drop the duplicate */ #assistantFocusContent > .assistant-content-mounted.todo-workspace .todo-brand-line { display: none !important; } /* Clik Work executive white theme refinement */ :root { --cp-bg: var(--cw-surface); --cp-surface: var(--cw-surface); --cp-surface-soft: var(--cw-surface-muted); --cp-text: var(--cw-text); --cp-text-secondary: var(--cw-text-muted); --cp-text-muted: var(--cw-text-muted); --cp-border: rgba(24, 24, 27, 0.22); --cp-border-hover: rgba(24, 24, 27, 0.45); --cp-blue: var(--cw-accent); --cp-purple: var(--cw-accent); --cp-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06); } html, body, #appShell { background: var(--cp-bg) !important; color: var(--cp-text) !important; } .vx-header { background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid rgba(15, 23, 42, .10) !important; box-shadow: none !important; } .vx-product-nav, .vx-space-selector, .vx-nav-link, .vx-header-actions .vx-nav-link { background: var(--cp-surface) !important; border-color: var(--cp-border) !important; box-shadow: none !important; } .vx-nav-link:hover, .vx-nav-link:focus-visible, .vx-product-nav .vx-nav-link:hover, .vx-product-nav .vx-nav-link:focus-visible, .vx-header-actions .vx-nav-link:hover, .vx-header-actions .vx-nav-link:focus-visible { color: var(--cp-blue) !important; border-color: rgba(var(--brand-rgb), .34) !important; background: var(--cp-surface-soft) !important; box-shadow: none !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox, #assistantHero.assistant-hero, .assistant-focus-panel, .assistant-search-results, .assistant-focus-placeholder, .assistant-people-overview article { background: var(--cp-surface) !important; background-image: none !important; border: 1px solid var(--cp-border) !important; box-shadow: none !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox { border-radius: 20px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { color: var(--cp-text) !important; } .collab-signal-glyph, .collab-signal-glyph i { color: var(--cp-purple) !important; } .collab-feed-item, .collab-feed-trigger, .sny-expanded { background: var(--cp-surface) !important; border-color: var(--cp-border) !important; box-shadow: none !important; } .collab-feed-item:hover, .collab-feed-trigger:hover { border-color: var(--cp-border-hover) !important; box-shadow: var(--cp-shadow-soft) !important; } #assistantHero.assistant-hero { border-radius: 24px !important; } .assistant-hero .vx-brand-strip-kicker, .assistant-focus-type, .assistant-people-overview span { color: var(--cp-purple) !important; } .assistant-hero .clik-hero-title, .assistant-focus-head h2, .clik-feature-card strong, .assistant-focus-placeholder strong, .assistant-people-overview strong { color: var(--cp-text) !important; } .assistant-hero .clik-hero-title { font-family: var(--font-base) !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; letter-spacing: 0 !important; line-height: 1.02 !important; } .assistant-focus-head p, .clik-feature-desc, .assistant-focus-placeholder p, .assistant-people-overview small { color: var(--cp-text-muted) !important; } .assistant-search-box { background: var(--cp-surface) !important; border: 1px solid var(--cp-border) !important; box-shadow: none !important; } .assistant-search-box:focus-within { border-color: rgba(var(--brand-rgb), .58) !important; box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12) !important; } .assistant-search-box svg { stroke: var(--cp-blue) !important; } .assistant-search-box input { color: var(--cp-text) !important; } .assistant-search-box input::placeholder { color: var(--cp-text-muted) !important; } .assistant-search-result { background: var(--cp-surface) !important; border-color: transparent !important; } .assistant-search-result:hover, .assistant-search-result:focus-visible { background: var(--cp-surface-soft) !important; border-color: var(--cp-border-hover) !important; } #assistantHero .clik-feature-card, #assistantHero .clik-feature-card:nth-child(2n), #assistantHero .clik-feature-card:nth-child(3n) { background: var(--cp-surface) !important; background-image: none !important; border: 1px solid var(--cp-border) !important; box-shadow: none !important; } #assistantHero .clik-feature-card:hover, #assistantHero .clik-feature-card:focus-visible { transform: translateY(-1px) !important; border-color: var(--cp-border-hover) !important; background: var(--cp-surface) !important; box-shadow: var(--cp-shadow-soft) !important; } #assistantHero .clik-feature-icon, #assistantHero .clik-feature-card:nth-child(2n) .clik-feature-icon, #assistantHero .clik-feature-card:nth-child(3n) .clik-feature-icon, #assistantHero .clik-feature-card:nth-child(4n) .clik-feature-icon, .assistant-focus-head .clik-feature-icon, .assistant-search-result .clik-feature-icon { color: var(--cp-blue) !important; background: var(--cp-surface-soft) !important; border: 1px solid rgba(15, 23, 42, .12) !important; box-shadow: none !important; } #assistantHero .assistant-executive-card { position: relative; min-height: 150px; } #assistantHero .assistant-executive-card::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 999px; background: var(--cp-blue); } #assistantHero .assistant-executive-card:first-child::before, #assistantHero .assistant-executive-card:first-child .clik-feature-icon { color: var(--cp-purple) !important; } #assistantHero .assistant-executive-card:first-child::before { background: var(--cp-purple); } #assistantHero .assistant-executive-card:nth-child(3)::before { background: linear-gradient(90deg, var(--cp-purple), var(--cp-blue)); } #assistantHero .assistant-executive-card .clik-feature-icon { color: var(--cp-purple) !important; } .clik-feature-status { background: var(--cp-surface-soft) !important; border: 1px solid rgba(15, 23, 42, .12) !important; color: var(--cp-text-secondary) !important; box-shadow: none !important; } .assistant-back-btn, .vx-footer-link, .vx-footer-button { background: var(--cp-surface) !important; border: 1px solid var(--cp-border) !important; color: var(--cp-text) !important; box-shadow: none !important; } .assistant-back-btn svg { stroke: var(--cp-blue) !important; } .assistant-back-btn:hover, .assistant-back-btn:focus-visible, .vx-footer-link:hover, .vx-footer-link:focus-visible { border-color: var(--cp-border-hover) !important; color: var(--cp-blue) !important; background: var(--cp-surface-soft) !important; box-shadow: var(--cp-shadow-soft) !important; } .assistant-launch-btn, .vx-brand-strip-primary { background: var(--cp-blue) !important; border-color: var(--cp-blue) !important; color: var(--cw-surface) !important; box-shadow: none !important; } .vx-brand-strip-secondary { background: var(--cp-surface) !important; border-color: var(--cp-border) !important; color: var(--cp-text) !important; box-shadow: none !important; } .vx-footer { background: var(--cp-surface) !important; border-top: 1px solid rgba(15, 23, 42, .12) !important; box-shadow: none !important; } .vx-footer::before { display: none !important; } .vx-footer-inner { background: transparent !important; box-shadow: none !important; } .vx-footer-text { color: var(--cp-text-secondary) !important; } .vx-footer-mark, .vx-logo-mark, .hero-vx-mark { background: var(--cp-text) !important; box-shadow: none !important; } .assistant-executive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 1120px) { .assistant-executive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .assistant-executive-grid { grid-template-columns: 1fr !important; } } /* Final executive assistant home corrections: white page, favicon logo, focused-state guard. */ body::before, body::after, #appShell::before, #appShell::after { display: none !important; } html, body, #appShell, #todayVantage.today-card.full-width-vantage.collaboration-inbox, #assistantHero.assistant-hero, .assistant-hero-head, .assistant-grid-view, .assistant-executive-grid, .clik-hero-card-grid, .vx-footer { background: var(--cw-surface) !important; background-image: none !important; } img.clikplan-logo-mark, .vx-brand img.vx-logo-mark.clikplan-logo-mark { display: block !important; width: 31.5px !important; height: 31.5px !important; min-width: 31.5px !important; padding: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; } img.clikplan-logo-mark::before, img.clikplan-logo-mark::after { content: none !important; } #assistantFocusPanel[hidden], body:not(.is-assistant-focused) #assistantFocusPanel { display: none !important; } body:not(.is-assistant-focused) #assistantGridView { display: grid !important; } body.is-assistant-focused #assistantGridView[hidden], [hidden] { display: none !important; } #assistantHero .clik-hero-actions { display: none !important; } #assistantHero .clik-feature-card, #assistantHero .clik-feature-card:nth-child(2n), #assistantHero .clik-feature-card:nth-child(3n) { background: var(--cw-surface) !important; background-image: none !important; border: 1px solid rgba(24, 24, 27, 0.22) !important; box-shadow: none !important; } #assistantHero .clik-feature-card:hover, #assistantHero .clik-feature-card:focus-visible { border-color: rgba(24, 24, 27, 0.45) !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important; } #assistantHero .assistant-executive-card, #assistantHero .assistant-executive-card:nth-child(2n), #assistantHero .assistant-executive-card:nth-child(3n) { border: 2px solid rgba(var(--brand-rgb), 0.55) !important; } #assistantHero .assistant-executive-card:hover, #assistantHero .assistant-executive-card:focus-visible { border-color: var(--cw-accent-text) !important; } #assistantHero .assistant-executive-card::before { background: var(--cw-accent) !important; } #assistantHero .assistant-executive-card:nth-child(2)::before, #assistantHero .assistant-executive-card:nth-child(4)::before { background: var(--cw-accent) !important; } #assistantHero .assistant-executive-card:nth-child(3)::before { background: linear-gradient(90deg, var(--cw-accent), var(--cw-accent)) !important; } .assistant-search-box, .assistant-focus-panel, .assistant-focus-placeholder, .assistant-search-results { background: var(--cw-surface) !important; background-image: none !important; border-color: rgba(24, 24, 27, 0.22) !important; } #appShell > #todayVantage + .assistant-hero-title-row { margin: -2px 0 10px !important; } .assistant-hero-title-row { position: relative; z-index: 2; display: grid !important; justify-items: center !important; text-align: center !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .assistant-hero-title-row .clik-hero-title { position: relative !important; display: inline-block !important; max-width: none !important; margin: 0 !important; color: var(--cw-accent-text) !important; background: linear-gradient(90deg, var(--cw-accent-active) 0%, var(--cw-accent) 34%, var(--cw-accent) 52%, var(--cw-accent) 70%, var(--cw-accent-active) 100%) !important; background-size: 220% 100% !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-family: var(--font-base) !important; font-size: clamp(32px, 3.2vw, 48px) !important; font-weight: 700 !important; font-variation-settings: "wght" 700 !important; letter-spacing: 0 !important; line-height: 1.02 !important; filter: drop-shadow(0 8px 18px rgba(var(--brand-rgb), .14)) !important; animation: assistantTitleSheen 5.8s ease-in-out infinite !important; } .assistant-hero-title-row .clik-hero-title::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -10px !important; width: min(52%, 260px) !important; height: 3px !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(var(--brand-rgb), 0), rgba(var(--brand-rgb), .76), rgba(var(--brand-rgb), .76), rgba(var(--brand-rgb), 0)) !important; transform: translateX(-50%) scaleX(.82) !important; transform-origin: center !important; opacity: .72 !important; animation: assistantTitleUnderline 5.8s ease-in-out infinite !important; } @keyframes assistantTitleSheen { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 8px 18px rgba(var(--brand-rgb), .14)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 10px 24px rgba(var(--brand-rgb), .18)); } } @keyframes assistantTitleUnderline { 0%, 100% { transform: translateX(-50%) scaleX(.82); opacity: .56; } 50% { transform: translateX(-50%) scaleX(1); opacity: .9; } } @media (prefers-reduced-motion: reduce) { .assistant-hero-title-row .clik-hero-title, .assistant-hero-title-row .clik-hero-title::after { animation: none !important; } } @media (max-width: 640px) { .assistant-hero-title-row .clik-hero-title { background: linear-gradient(90deg, var(--cw-accent) 0%, var(--cw-accent) 38%, var(--cw-accent) 54%, var(--cw-accent) 100%) !important; background-size: 200% 100% !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: 760 !important; font-variation-settings: "wght" 760 !important; filter: drop-shadow(0 5px 12px rgba(var(--brand-rgb), .16)) !important; } .assistant-hero-title-row .clik-hero-title::after { bottom: -7px !important; width: min(64%, 176px) !important; height: 2px !important; opacity: .62 !important; } } #assistantHero .vx-brand-strip-kicker, #assistantHero .vx-brand-strip-kicker::before { display: none !important; content: none !important; } #assistantHero .assistant-search-shell { width: min(560px, 92vw) !important; margin-inline: auto !important; } @media (max-width: 640px) { #appShell { display: flex !important; flex-direction: column !important; align-items: stretch !important; } #appShell > * { order: 20; } #appShell > .assistant-hero-title-row { order: 2 !important; } #appShell > #todayVantage { order: 4 !important; } #assistantHero.assistant-hero { display: contents !important; } #assistantHero.assistant-hero { gap: 5px !important; padding: 8px !important; border-radius: 16px !important; } #appShell > #todayVantage + .assistant-hero-title-row { margin: 4px 0 6px !important; } .assistant-hero-title-row .clik-hero-title { color: var(--cw-accent-text) !important; font-size: 23px !important; line-height: 1 !important; } #assistantHero .assistant-search-shell { order: 3 !important; width: min(92%, 520px) !important; margin-inline: auto !important; margin-bottom: 8px !important; } #assistantHero .assistant-search-box { min-height: 36px !important; grid-template-columns: 16px minmax(0, 1fr) !important; gap: 7px !important; padding: 0 9px !important; border-radius: 12px !important; } #assistantHero .assistant-search-box svg { width: 16px !important; height: 16px !important; } #assistantHero .assistant-search-box input { height: 34px !important; font-size: 12px !important; } #assistantHero .assistant-grid-view { order: 5 !important; gap: 5px !important; padding: 8px !important; border: 1px solid rgba(24, 24, 27, 0.22) !important; border-radius: 16px !important; background: var(--cw-surface) !important; } #assistantHero .mobile-hero-workspace-tray { order: 1 !important; width: min(92%, 520px) !important; margin-inline: auto !important; } #assistantHero #assistantFocusPanel { order: 5 !important; } #assistantHero .assistant-executive-grid, #assistantHero .clik-hero-card-grid { display: none !important; } #assistantHero .assistant-mobile-grid { order: 5 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; min-width: 0 !important; } #assistantHero .assistant-executive-grid, #assistantHero .clik-hero-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; } #assistantHero .clik-feature-card, #assistantHero .assistant-executive-card { min-height: 0 !important; height: auto !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; align-content: center !important; justify-items: center !important; gap: 6px !important; padding: 12px 8px !important; border-radius: 16px !important; text-align: center !important; } #assistantHero .assistant-mobile-grid .clik-feature-card, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(2n), #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(3n), #assistantHero .assistant-mobile-grid .assistant-executive-card, #assistantHero .assistant-mobile-grid .assistant-executive-card:nth-child(2n), #assistantHero .assistant-mobile-grid .assistant-executive-card:nth-child(3n) { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #assistantHero .assistant-executive-card, #assistantHero .assistant-executive-card:nth-child(2n), #assistantHero .assistant-executive-card:nth-child(3n) { border-width: 1px !important; } #assistantHero .assistant-mobile-grid .assistant-executive-card::before { display: none !important; } #assistantHero .assistant-executive-card::before { left: 8px !important; right: 8px !important; height: 2px !important; } #assistantHero .clik-feature-icon { grid-row: auto !important; width: 46px !important; height: 46px !important; margin-bottom: 0 !important; border-radius: 13px !important; } #assistantHero .assistant-mobile-grid .clik-feature-icon, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(2n) .clik-feature-icon, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(3n) .clik-feature-icon, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(4n) .clik-feature-icon { background: rgba(248, 250, 252, .92) !important; border: 1px solid rgba(15, 23, 42, .08) !important; box-shadow: none !important; } #assistantHero .clik-feature-icon svg { width: 32px !important; height: 32px !important; stroke-width: 1.6 !important; } #assistantHero .clik-feature-card strong { display: -webkit-box !important; min-width: 0 !important; max-height: 2.4em !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 500 !important; overflow: hidden !important; overflow-wrap: anywhere !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #assistantHero .clik-feature-desc, #assistantHero .clik-feature-status { display: none !important; } } /* Mobile compact header and SNY strip. */ @media (max-width: 640px) { .vx-header-inner { width: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) !important; grid-auto-rows: 32px !important; grid-template-areas: none !important; align-items: center !important; gap: 4px !important; padding: 6px 8px !important; } .vx-brand { grid-column: 1 !important; grid-row: 1 !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; flex: 0 0 32px !important; gap: 0 !important; } .vx-brand-text { display: none !important; } img.clikplan-logo-mark, .vx-brand img.vx-logo-mark.clikplan-logo-mark, .clikplan-logo-mark { width: 30px !important; height: 30px !important; min-width: 30px !important; flex: 0 0 30px !important; margin: 0 !important; border-radius: 8px !important; transform: none !important; } .vx-header-context.vx-space-context { display: none !important; } .vx-header-actions, .vx-product-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: center !important; gap: 4px !important; grid-area: auto !important; order: 0 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .vx-header-actions { grid-column: 2 !important; grid-row: 1 !important; } .vx-product-nav { grid-column: 3 !important; grid-row: 1 !important; } #headerLoginBtn { grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; } #headerRegisterBtn { grid-column: 2 !important; grid-row: 1 !important; order: 0 !important; } #headerLogoutBtn { grid-column: 1 / -1 !important; grid-row: 1 !important; order: 0 !important; } #topTeamBtn { grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; } .vx-product-nav .vx-nav-link[data-module-route="ask-ai"] { grid-column: 2 !important; grid-row: 1 !important; order: 0 !important; } .vx-header-actions .vx-nav-link, .vx-product-nav .vx-nav-link { width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; gap: 3px !important; padding: 0 4px !important; border: 1px solid rgba(24, 24, 27, .18) !important; border-radius: 10px !important; background: var(--cw-surface) !important; color: var(--cw-text) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 760 !important; box-shadow: none !important; overflow: hidden !important; } .vx-header-actions .vx-nav-link svg, .vx-product-nav .vx-nav-link svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; } .vx-header-actions .vx-nav-link span, .vx-product-nav .vx-nav-link span { min-width: 0 !important; max-width: 100% !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .shell { width: min(100% - 16px, 1540px) !important; padding-top: 8px !important; padding-bottom: 12px !important; } #appShell > #todayVantage { margin-bottom: 8px !important; } .today-card.full-width-vantage.collaboration-inbox, .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded { height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: grid !important; grid-template-columns: minmax(88px, 30%) minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; padding: 5px 7px !important; border-radius: 14px !important; overflow: hidden !important; } .today-card.full-width-vantage.collaboration-inbox::before, .today-card.full-width-vantage.collaboration-inbox::after { display: none !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { min-height: 32px !important; height: 32px !important; display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; grid-template-rows: 1fr 1fr !important; align-items: center !important; gap: 0 5px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .collab-signal-glyph { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 22px !important; height: 22px !important; grid-template-columns: repeat(3, 4px) !important; gap: 2px !important; padding: 5px 4px !important; border-radius: 8px !important; } .collab-signal-glyph i { width: 4px !important; } .collab-signal-glyph i:nth-child(1) { height: 7px !important; } .collab-signal-glyph i:nth-child(2) { height: 12px !important; } .collab-signal-glyph i:nth-child(3) { height: 9px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head > span:not(.collab-signal-glyph) { grid-column: 2 !important; grid-row: 1 !important; font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head > span:not(.collab-signal-glyph)::after { content: "SNY"; color: var(--cw-text-muted); font-size: 9px; line-height: 1; font-weight: 850; letter-spacing: .08em; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { grid-column: 2 !important; grid-row: 2 !important; display: block !important; color: var(--cw-text-muted) !important; font-size: 9.5px !important; line-height: 1 !important; font-weight: 760 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: initial !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small::after { content: attr(data-mobile-summary); } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { color: transparent !important; position: relative !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small::after { position: absolute; inset: 0; color: var(--cw-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collab-inbox-feed, .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded .collab-inbox-feed { height: 32px !important; min-height: 32px !important; max-height: 32px !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } .collab-inbox-feed::-webkit-scrollbar { display: none !important; } .collab-feed-empty { height: 32px !important; min-height: 32px !important; flex: 1 0 100% !important; justify-content: flex-start !important; padding: 0 4px !important; border: 0 !important; background: transparent !important; color: var(--cw-text-muted) !important; font-size: 10.5px !important; text-align: left !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .collab-feed-item, .collab-feed-item.is-expanded { flex: 0 0 min(100%, 236px) !important; width: min(100%, 236px) !important; max-width: min(100%, 236px) !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; border-radius: 11px !important; transform: none !important; } .collab-feed-trigger { height: 32px !important; min-height: 32px !important; display: grid !important; grid-template-columns: 5px minmax(0, 1fr) !important; gap: 6px !important; padding: 0 8px !important; } .collab-feed-trigger::after { content: attr(data-sny-summary); grid-column: 2; min-width: 0; color: var(--cw-text); font-size: 10.8px; line-height: 1; font-weight: 760; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collab-dot { width: 5px !important; height: 18px !important; } .collab-copy, .collab-feed-item time, .sny-expanded { display: none !important; } } @media (max-width: 360px) { .vx-header-inner { grid-template-columns: 30px repeat(4, minmax(0, 1fr)) !important; gap: 3px !important; padding-inline: 6px !important; } .vx-header-actions .vx-nav-link, .vx-product-nav .vx-nav-link { font-size: 9.2px !important; gap: 2px !important; padding-inline: 3px !important; } .today-card.full-width-vantage.collaboration-inbox, .today-card.full-width-vantage.collaboration-inbox.has-sny-expanded { grid-template-columns: 82px minmax(0, 1fr) !important; } } .mobile-hero-workspace-tray { display: none; } .mobile-hero-icon-actions { display: none; } @media (max-width: 640px) { #assistantHero .mobile-hero-workspace-tray { position: relative; z-index: 3; width: 100%; min-width: 0; height: 32px; display: flex; align-items: center; gap: 5px; padding: 2px; overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(24, 24, 27, .12); border-radius: 12px; background: var(--cw-surface-muted); scrollbar-width: none; -webkit-overflow-scrolling: touch; } #assistantHero .mobile-hero-workspace-tray::-webkit-scrollbar { display: none; } #assistantHero .mobile-workspace-pill { flex: 0 0 auto; min-width: 58px; max-width: 116px; height: 26px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid rgba(24, 24, 27, .12); border-radius: 9px; background: var(--cw-accent-tint); color: var(--cw-text-muted); font-size: 11px; line-height: 1; font-weight: 760; letter-spacing: 0; box-shadow: none; } #assistantHero .mobile-workspace-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #assistantHero .mobile-workspace-pill[aria-pressed="true"] { background: var(--cw-surface); color: var(--cw-text); border-color: rgba(var(--brand-rgb), .46); box-shadow: inset 0 2px 0 var(--cw-accent), 0 1px 2px rgba(15, 23, 42, .04); } #assistantHero .mobile-workspace-add { color: var(--cw-accent-text); background: var(--cw-surface); border-style: dashed; border-color: rgba(var(--brand-rgb), .28); } #assistantHero.assistant-hero { margin-bottom: 8px !important; } .mobile-hero-icon-actions { width: min(100%, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: -12px 0 8px; } .mobile-hero-icon-action { min-width: 0; height: 42px; min-height: 42px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 1px solid rgba(24, 24, 27, .16); border-radius: 12px; background: var(--cw-surface); color: var(--cw-text); font: inherit; font-size: 10.5px; line-height: 1; font-weight: 760; text-decoration: none; box-shadow: none; overflow: hidden; } .mobile-hero-icon-action svg { width: 17px; height: 17px; fill: none; stroke: var(--cw-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mobile-hero-icon-action span { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-footer { margin-top: 0 !important; padding: 6px 0 8px !important; border-top: 1px solid rgba(24, 24, 27, .12) !important; } .vx-footer::before { display: none !important; } .vx-footer-inner { width: min(100% - 16px, 1540px) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; align-items: stretch !important; } .vx-footer-left { min-width: 0 !important; justify-content: center !important; gap: 8px !important; } .vx-footer-mark { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 9px !important; } .vx-footer-text { min-width: 0 !important; color: var(--cw-text-muted) !important; font-size: 11px !important; line-height: 1.15 !important; font-weight: 720 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vx-footer-right { display: none !important; } } @media (max-width: 360px) { #assistantHero .mobile-workspace-pill { min-width: 54px; max-width: 104px; padding-inline: 8px; font-size: 10.5px; } .mobile-hero-icon-action { grid-template-columns: 16px minmax(0, 1fr); gap: 4px; padding-inline: 5px; font-size: 9.8px; } .mobile-hero-icon-action svg { width: 16px; height: 16px; } } /* Desktop assistant layout guard: keep legacy responsive rules from collapsing the home grid. */ @media (min-width: 641px) { #assistantHero.assistant-hero { width: 100% !important; max-width: none !important; } body:not(.is-assistant-focused) #assistantHero .assistant-search-shell { display: block !important; visibility: visible !important; opacity: 1 !important; } #assistantHero .assistant-search-shell { width: min(640px, 100%) !important; margin: 0 auto 2px !important; justify-self: center !important; } #assistantHero .assistant-search-box { min-height: 52px !important; display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center !important; gap: 11px !important; padding: 0 16px !important; border-radius: 18px !important; } #assistantHero .assistant-grid-view { width: 100% !important; max-width: none !important; justify-self: stretch !important; } #assistantHero .assistant-mobile-grid { display: none !important; } .vx-space-selector { justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scroll-padding-inline: 8px 18px !important; scrollbar-width: none !important; } .vx-space-selector::-webkit-scrollbar { display: none !important; } .vx-space-pill-wrap, .vx-space-selector .vx-space-pill, .vx-space-selector .vx-space-menu-btn, .vx-space-selector .vx-space-add-btn { flex-shrink: 0 !important; } .vx-space-selector .vx-space-pill { width: auto !important; min-width: max-content !important; max-width: none !important; white-space: nowrap !important; } .vx-space-selector .vx-space-pill .vx-space-pill-label { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } .vx-space-selector .vx-space-add-btn { width: auto !important; min-width: max-content !important; max-width: none !important; padding-inline: 12px 16px !important; white-space: nowrap !important; } .vx-space-add-label { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox, #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-expanded { height: 108px !important; min-height: 108px !important; max-height: 108px !important; display: grid !important; grid-template-columns: minmax(168px, 210px) minmax(0, 1fr) !important; align-items: center !important; gap: 16px !important; padding: 14px !important; border-radius: 20px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { height: 80px !important; min-height: 80px !important; max-height: 80px !important; padding: 12px 14px !important; gap: 9px !important; border-radius: 16px !important; } .collab-signal-glyph { width: 34px !important; height: 34px !important; padding: 8px 7px !important; border-radius: 12px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head > span:not(.collab-signal-glyph) { font-size: 9px !important; line-height: 1.1 !important; letter-spacing: .08em !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { display: -webkit-box !important; color: var(--cw-text) !important; font-size: 13px !important; line-height: 1.28 !important; font-weight: 760 !important; overflow: hidden !important; text-overflow: clip !important; white-space: normal !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #todayVantage .collab-inbox-feed, #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-expanded .collab-inbox-feed { height: 80px !important; min-height: 80px !important; max-height: 80px !important; gap: 8px !important; } #todayVantage .collab-feed-item, #todayVantage .collab-feed-item.is-expanded { height: 72px !important; min-height: 72px !important; max-height: 72px !important; } #todayVantage .collab-feed-trigger { height: 72px !important; min-height: 72px !important; padding: 9px 10px !important; } #todayVantage .collab-feed-empty { height: 80px !important; min-height: 80px !important; max-height: 80px !important; padding: 0 12px !important; font-size: 12.5px !important; line-height: 1.3 !important; } } @media (min-width: 1121px) { #assistantHero .assistant-executive-grid, #assistantHero .clik-hero-card-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; } } @media (min-width: 700px) and (max-width: 1120px) { #assistantHero .assistant-executive-grid, #assistantHero .clik-hero-card-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; } #assistantHero.assistant-hero { padding: 18px !important; } #assistantHero .assistant-grid-view { gap: 10px !important; } #assistantHero .clik-feature-card, #assistantHero .assistant-executive-card { min-height: 120px !important; grid-template-columns: 30px minmax(0, 1fr) !important; grid-template-rows: auto minmax(30px, 1fr) auto !important; gap: 6px 9px !important; padding: 11px !important; border-radius: 16px !important; } #assistantHero .assistant-executive-card { min-height: 124px !important; } #assistantHero .assistant-executive-card::before { left: 12px !important; right: 12px !important; } #assistantHero .clik-feature-icon { width: 30px !important; height: 30px !important; border-radius: 11px !important; } #assistantHero .clik-feature-icon svg { width: 20px !important; height: 20px !important; } #assistantHero .clik-feature-card strong { font-size: 11.6px !important; line-height: 1.18 !important; } #assistantHero .clik-feature-desc { font-size: 10.6px !important; line-height: 1.32 !important; } #assistantHero .clik-feature-status { min-height: 23px !important; padding: 0 8px !important; font-size: 9.8px !important; line-height: 1 !important; } } @media (min-width: 641px) and (max-width: 1120px) { .vx-header-inner { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: min(100% - 24px, 1540px) !important; min-height: 0 !important; padding: 8px 0 !important; } .vx-brand { order: 1 !important; flex: 1 1 170px !important; min-width: 168px !important; max-width: none !important; } .vx-product-nav, .vx-header-actions { display: contents !important; } .vx-product-nav .vx-nav-link, .vx-header-actions .vx-nav-link { width: auto !important; min-width: 0 !important; min-height: 36px !important; height: 36px !important; flex: 0 0 auto !important; gap: 6px !important; padding: 0 11px !important; border: 1px solid rgba(24, 24, 27, .18) !important; border-radius: 13px !important; background: var(--cw-surface) !important; color: var(--cw-text) !important; font-size: 11.6px !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; } .vx-product-nav .vx-nav-link svg, .vx-header-actions .vx-nav-link svg { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; } .vx-product-nav .vx-nav-link span, .vx-header-actions .vx-nav-link span { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } .vx-product-nav .vx-nav-link[data-module-route="ask-ai"] { order: 2 !important; } #headerLoginBtn, #headerLogoutBtn { order: 3 !important; } #headerRegisterBtn { order: 4 !important; } #topTeamBtn { order: 5 !important; } .vx-header-actions .vx-user-block.user-identity { order: 4 !important; } .vx-header-context.vx-space-context { order: 10 !important; flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 2px 0 0 !important; } .vx-space-selector { gap: 5px !important; padding: 2px !important; } .vx-space-selector .vx-space-pill, .vx-space-selector .vx-space-add-btn { min-height: 32px !important; height: 32px !important; padding-inline: 10px !important; border-radius: 11px !important; font-size: 11.2px !important; } .vx-space-selector .vx-space-add-btn { padding-inline: 10px 13px !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox, #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-expanded { height: 88px !important; min-height: 88px !important; max-height: 88px !important; grid-template-columns: minmax(138px, 178px) minmax(0, 1fr) !important; gap: 10px !important; padding: 10px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding: 9px 10px !important; gap: 7px !important; border-radius: 14px !important; } .collab-signal-glyph { width: 30px !important; height: 30px !important; padding: 7px 6px !important; border-radius: 11px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head > span:not(.collab-signal-glyph) { font-size: 8.4px !important; } .today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { font-size: 11.8px !important; line-height: 1.26 !important; } #todayVantage .collab-inbox-feed, #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-expanded .collab-inbox-feed, #todayVantage .collab-feed-empty { height: 68px !important; min-height: 68px !important; max-height: 68px !important; } #todayVantage .collab-feed-item, #todayVantage .collab-feed-item.is-expanded, #todayVantage .collab-feed-trigger { height: 58px !important; min-height: 58px !important; max-height: 58px !important; } #todayVantage .collab-feed-trigger { padding: 7px 9px !important; } #todayVantage .collab-feed-empty { font-size: 11.5px !important; } } @media (min-width: 641px) and (max-width: 699px) { #assistantHero .assistant-executive-grid, #assistantHero .clik-hero-card-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (min-width: 641px) and (max-width: 820px) { .vx-brand { flex-basis: 150px !important; min-width: 150px !important; } .vx-title { font-size: 14px !important; } .vx-sub { font-size: 8.4px !important; } .vx-product-nav .vx-nav-link, .vx-header-actions .vx-nav-link { height: 34px !important; min-height: 34px !important; gap: 5px !important; padding: 0 9px !important; font-size: 10.8px !important; } .vx-product-nav .vx-nav-link svg, .vx-header-actions .vx-nav-link svg { width: 15px !important; height: 15px !important; flex-basis: 15px !important; } } /* ========================================================= LANDING REDESIGN — clean, whitespace-led, consistent with the To-Do / Notes / Reminders / Lists / Voice focus views. Style-only. Brand purple matches the module pages (var(--cw-accent)). ========================================================= */ :root { --lp-purple: var(--cw-accent); --lp-purple-tint: var(--cw-accent-tint); --color-background-primary: var(--cw-surface); --color-background-secondary: var(--cw-surface-muted); --color-text-primary: var(--cw-text); --color-text-secondary: var(--cw-text-muted); --color-text-tertiary: var(--cw-text-subtle); --color-border-tertiary: rgba(15, 23, 42, .08); --color-accent: var(--cw-accent); --color-accent-tint: var(--cw-accent-tint); } /* Desktop / tablet only — the ≤640px landing keeps its tuned app-icon layout */ @media (min-width: 641px) { /* Fluent canvas now painted by the fixed html::before layer (theme.css); keep these transparent so it shows through and never scrolls/tiles. */ html, body, #appShell { background: transparent !important; } /* The reskinned Clik Work home (#clikHome) supplies its own nav→hero gap via the hero's 84px padding-top, matching clikwork-home-final.html. The legacy landing this 20px once spaced is now retired/hidden, so zero it to avoid an extra gap below the nav. (Assistant-focus still sets its own 16px below.) */ #appShell { padding-top: 0 !important; } /* ---------- TOP NAV ---------- */ .vx-header { background: var(--cw-surface) !important; border-bottom: 1px solid var(--color-border-tertiary) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .vx-header-inner { min-height: 56px !important; } .vx-brand .vx-sub { display: none !important; } /* repeats the hero */ .vx-title { font-size: 16px !important; } /* Space-context loses its pill wrapper so tabs read as flat text */ .vx-header-context.vx-space-context { padding: 0 !important; border: 0 !important; background: transparent !important; } /* Workspace tabs → flat text with a purple underline when active */ .vx-space-selector .vx-space-pill { border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; box-shadow: none !important; color: var(--color-text-secondary) !important; font-weight: 600 !important; } .vx-space-selector .vx-space-pill:hover, .vx-space-selector .vx-space-pill:focus-visible { background: transparent !important; border-color: transparent !important; border-bottom-color: rgba(var(--brand-rgb), .30) !important; color: var(--cw-text) !important; } .vx-space-selector .vx-space-pill[aria-pressed="true"] { background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--lp-purple) !important; box-shadow: none !important; color: var(--cw-text) !important; } .vx-space-pill-wrap, .vx-space-pill-wrap.active { background: transparent !important; box-shadow: none !important; } /* + Create your workspace — lighter ghost pill */ .vx-space-selector .vx-space-add-btn { border: 1px solid var(--color-border-tertiary) !important; background: transparent !important; color: var(--color-text-secondary) !important; } .vx-space-selector .vx-space-add-btn:hover, .vx-space-selector .vx-space-add-btn:focus-visible { border-color: rgba(var(--brand-rgb), .35) !important; background: var(--lp-purple-tint) !important; color: var(--lp-purple) !important; } .vx-space-add-symbol { border-color: var(--color-border-tertiary) !important; } /* My Team / Ask AI — plain text + icon, no container or border */ .vx-product-nav { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .vx-product-nav .vx-nav-link { border: 0 !important; background: transparent !important; color: var(--cw-text-muted) !important; } .vx-product-nav .vx-nav-link:hover, .vx-product-nav .vx-nav-link:focus-visible { border: 0 !important; background: transparent !important; color: var(--lp-purple) !important; } /* Login / Register — outlined buttons */ .vx-header-actions .vx-login-btn, .vx-header-actions .vx-register-btn, .vx-header-actions .vx-logout-header-btn { border: 1px solid var(--color-border-tertiary) !important; border-radius: 999px !important; background: var(--cw-surface) !important; color: var(--cw-text) !important; box-shadow: none !important; } .vx-header-actions .vx-login-btn:hover, .vx-header-actions .vx-register-btn:hover, .vx-header-actions .vx-logout-header-btn:hover, .vx-header-actions .vx-login-btn:focus-visible, .vx-header-actions .vx-register-btn:focus-visible { border-color: rgba(var(--brand-rgb), .40) !important; background: var(--lp-purple-tint) !important; color: var(--lp-purple) !important; } /* ---------- ATTENTION BANNER ---------- */ #todayVantage.today-card.full-width-vantage.collaboration-inbox { border: 0 !important; border-radius: 12px !important; background: var(--lp-purple-tint) !important; box-shadow: none !important; padding: 10px 14px !important; margin: 0 0 6px !important; min-height: 0 !important; } .today-card.full-width-vantage.collaboration-inbox::before, .today-card.full-width-vantage.collaboration-inbox::after { display: none !important; content: none !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox .collab-inbox-head { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 9px !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox .collab-inbox-head > span:not(.collab-signal-glyph) { color: var(--lp-purple) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 700 !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox .collab-inbox-head small { color: var(--color-text-secondary) !important; font-size: 13px !important; font-weight: 500 !important; } .collab-signal-glyph, .collab-signal-glyph i { color: var(--lp-purple) !important; } .collab-inbox-feed .collab-feed-empty { display: none !important; } /* keep banner to one line when empty */ /* ---------- HERO ---------- */ .assistant-hero-title-row { margin: 6px 0 8px !important; } #appShell > #todayVantage + .assistant-hero-title-row { margin: 6px 0 8px !important; } /* SNY removed, so the "Get more done." heading would crowd the top nav — give its container breathing room above. (Beats the base `padding:0 !important` via id+class specificity.) Header is untouched. */ #appShell > .assistant-hero-title-row { padding-top: 64px !important; } @media (max-width: 640px) { #appShell > .assistant-hero-title-row { padding-top: 32px !important; } } .clik-hero-title, .assistant-hero .clik-hero-title { color: var(--lp-purple) !important; -webkit-text-fill-color: var(--lp-purple) !important; background: none !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; } .clik-hero-title::after, .clik-hero-title::before, .assistant-hero-title-row::after, .assistant-hero-title-row::before { display: none !important; content: none !important; } /* Hero container: no card — whitespace only */ #assistantHero.assistant-hero { border: 0 !important; border-radius: 0 !important; background: var(--cw-surface) !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; gap: 14px !important; } .assistant-search-shell { margin: 2px 0 !important; } /* Drop the "Ask anything" box down so it sits closer to the purple Executive Space cards below (more breathing room under the hero subtitle). */ #assistantHero .assistant-search-shell { margin-top: 32px !important; } /* ---------- MODULE CARDS — one unified clean style ---------- */ #assistantHero .clik-feature-card, #assistantHero .clik-feature-card:nth-child(2n), #assistantHero .clik-feature-card:nth-child(3n), #assistantHero .assistant-executive-card, #assistantHero .assistant-executive-card:nth-child(2n), #assistantHero .assistant-executive-card:nth-child(3n) { border: 1px solid var(--color-border-tertiary) !important; border-radius: 12px !important; background: var(--cw-surface) !important; background-image: none !important; box-shadow: none !important; padding: 16px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #assistantHero .clik-feature-card:hover, #assistantHero .clik-feature-card:focus-visible, #assistantHero .assistant-executive-card:hover, #assistantHero .assistant-executive-card:focus-visible { transform: none !important; border-color: var(--color-border-tertiary) !important; background: var(--color-background-secondary) !important; box-shadow: none !important; } #assistantHero .assistant-executive-card::before { display: none !important; content: none !important; } /* Unified purple icon, 20px glyph, light tint chip */ #assistantHero .clik-feature-icon, #assistantHero .clik-feature-card:nth-child(2n) .clik-feature-icon, #assistantHero .clik-feature-card:nth-child(3n) .clik-feature-icon, #assistantHero .clik-feature-card:nth-child(4n) .clik-feature-icon, #assistantHero .assistant-executive-card .clik-feature-icon, #assistantHero .assistant-executive-card:first-child .clik-feature-icon { width: 34px !important; height: 34px !important; border: 0 !important; border-radius: 9px !important; color: var(--lp-purple) !important; background: var(--lp-purple-tint) !important; box-shadow: none !important; } #assistantHero .clik-feature-icon svg { width: 20px !important; height: 20px !important; } /* Title 15 / 500 near-black */ #assistantHero .clik-feature-card strong { font-size: 15px !important; font-weight: 500 !important; color: var(--cw-text) !important; } /* Description 13, muted, 2-line clamp */ #assistantHero .clik-feature-desc { font-size: 13px !important; color: var(--color-text-secondary) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Status → plain purple text link (no pill) */ #assistantHero .clik-feature-status { border: 0 !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; color: var(--lp-purple) !important; font-size: 12.5px !important; font-weight: 600 !important; } body:not(.is-authenticated) #assistantHero .clik-feature-status::after { content: " →"; } /* ---------- FOOTER — plain text links with thin dividers ---------- */ .vx-footer { margin-top: 18px !important; padding: 16px 0 22px !important; border-top: 1px solid var(--color-border-tertiary) !important; background: var(--cw-surface) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .vx-footer::before { display: none !important; content: none !important; } .vx-footer-text { color: var(--color-text-secondary) !important; font-weight: 500 !important; } .vx-footer-text strong { color: var(--lp-purple) !important; } .vx-footer-right { gap: 0 !important; } .vx-footer-right > * { border-right: 1px solid var(--color-border-tertiary) !important; } .vx-footer-right > *:last-child { border-right: 0 !important; } .vx-footer-link, .vx-footer-button { border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--color-text-secondary) !important; box-shadow: none !important; min-height: 0 !important; padding: 0 14px !important; } .vx-footer-link:hover, .vx-footer-button:hover, .vx-footer-link:focus-visible, .vx-footer-button:focus-visible { border: 0 !important; background: transparent !important; color: var(--lp-purple) !important; box-shadow: none !important; } .vx-footer-right > *:not(:last-child) { border-right: 1px solid var(--color-border-tertiary) !important; } } /* end @media (min-width: 641px) landing redesign */ /* ---------- Bugfix: page footer was intercepting clicks on the module FABs (it hit-tests above the fixed overlay on short pages). Remove it from the focused module views, like the header. ---------- */ body.is-todo-focus .vx-footer, body.is-notes-focus .vx-footer, body.is-reminder-focus .vx-footer, body.is-calendar-focus .vx-footer, body.is-email-focus .vx-footer { display: none !important; } /* ============================================================ AUDIT PASS — Login / Register modal normalization (style-only) ============================================================ */ .auth-backdrop { background: rgba(0,0,0,.35) !important; } .auth-card, .auth-card.landing-login { background: var(--cw-surface) !important; background-image: none !important; border: 1px solid var(--color-border-tertiary) !important; box-shadow: 0 24px 60px rgba(15,23,42,.18) !important; } .auth-card .eyebrow.mini { display: none !important; } #authTitle { font-size: 18px !important; font-weight: 500 !important; } .close-auth { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cw-text-muted) !important; } .auth-tabs { background: var(--color-background-secondary) !important; border: 1px solid var(--color-border-tertiary) !important; box-shadow: none !important; } .auth-tab { background: transparent !important; color: var(--cw-text-muted) !important; font-weight: 500 !important; box-shadow: none !important; } .auth-tab.active { background: var(--lp-purple) !important; color: var(--cw-surface) !important; box-shadow: none !important; } #sendOtp, #verifyOtp { background: var(--lp-purple) !important; border-color: var(--lp-purple) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } .auth-link-btn { background: transparent !important; border: 0 !important; color: var(--lp-purple) !important; box-shadow: none !important; font-weight: 500 !important; } .security-retry-btn { border: 1px solid rgba(var(--brand-rgb),.30) !important; color: var(--lp-purple) !important; background: transparent !important; } .security-widget-box { background: var(--cw-surface-muted) !important; background-image: none !important; border: 1px solid var(--color-border-tertiary) !important; box-shadow: none !important; } .auth-message { background: transparent !important; border: 0 !important; box-shadow: none !important; } .auth-form input, .auth-form select { border: 1px solid var(--color-border-tertiary) !important; background: var(--cw-surface) !important; box-shadow: none !important; border-radius: 8px !important; } /* ============================================================ AUDIT PASS — unify in-app accent to brand purple + modal chrome (reference views use their own --todo/--notes/--rem accents) ============================================================ */ :root { --cp-blue: var(--cw-accent); /* aliases the brand emerald accent everywhere */ --cp-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06); } .auth-link-btn.security-retry-btn { background: transparent !important; border: 1px solid rgba(var(--brand-rgb), .30) !important; color: var(--cw-accent-text) !important; } /* Lighten every modal/route backdrop to the spec overlay */ .auth-backdrop, .storage-backdrop, .email-backdrop, .task-create-backdrop, .profile-security-backdrop, .workspace-backdrop, .attachi-backdrop, .contact-admin-backdrop, .lens-crop-overlay { background: rgba(0, 0, 0, .35) !important; } /* White modal/panel bodies, hairline border, lighter shadow — no beige/gradient */ .storage-modal .storage-card, .storage-card, .email-modal .email-card, .email-card, .task-create-modal .task-create-card, .task-create-card, .profile-security-modal, .profile-security-card, .workspace-modal .workspace-card, .workspace-card, .attachi-modal-card, .contact-admin-modal .admin-contact-card, .admin-contact-card { background: var(--cw-surface) !important; background-image: none !important; border: 1px solid var(--color-border-tertiary) !important; box-shadow: 0 24px 60px rgba(15, 23, 42, .18) !important; } /* ============================================================ AUDIT PASS — dark/gradient primary buttons → solid brand purple (the floating module FABs keep their purple fill; untouched here) ============================================================ */ .storage-plan-select, #sendContactAdmin, .email-modal #sendContactAdmin, .ask-ai-input-row button, .actions button.edit-task-btn, .edit-save, .auto-prioritize-btn, .assistant-launch-btn, .vx-brand-strip-primary, .vx-mindmap-widget-cta, .vx-simple-plan-new, .task-create-modal .primary, .task-create-submit, .workspace-modal .primary, .profile-security-modal .primary { background: var(--cw-accent) !important; background-image: none !important; border-color: var(--cw-accent-text) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } /* ============================================================ AUDIT PASS — in-app SPA routes + hero focus-panel views ============================================================ */ /* Eyebrows / micro-labels → sentence-case, muted, weight 500 (no ALL-CAPS) */ .eyebrow, .eyebrow.mini, .mini-label, .module-route-view .toolbar-title, .lens-route-view .eyebrow, .lists-route-view .eyebrow, .attachi-route-view .eyebrow, .ask-ai-route-view .eyebrow { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; } .eyebrow span, .eyebrow-dot { background: var(--cw-accent) !important; box-shadow: none !important; } /* Route hero headings → solid near-black, weight 500 (kill gold gradient text) */ .module-route-view h1 span, .flow-ai-hero h1 span, .lens-route-view h1 span, .lists-route-view h1 span, .attachi-route-view h1 span, .ask-ai-route-view h1 span, .module-route-topbar h1 span { background: none !important; -webkit-text-fill-color: var(--cw-text) !important; color: var(--cw-text) !important; font-weight: 500 !important; } /* Route hero panels → flat white, hairline, no gradient/shadow */ .flow-ai-hero, .hero-panel, .ask-ai-panel, .lens-route-hero, .attachi-route-hero, .lists-route-hero { background: var(--cw-surface) !important; background-image: none !important; border: 1px solid var(--color-border-tertiary) !important; box-shadow: none !important; } /* Focus-panel: remove "Assistant module / Executive panel" label + icon */ .assistant-focus-type { display: none !important; } .assistant-focus-head .clik-feature-icon, #assistantFocusIcon { display: none !important; } .assistant-focus-head { grid-template-columns: minmax(0, 1fr) !important; } /* Dark/colored route buttons → solid brand purple */ .voice-record-btn, .attachi-upload-btn, .intel-refresh, .lens-primary-btn, .voice-save-btn { background: var(--cw-accent) !important; background-image: none !important; border-color: var(--cw-accent-text) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } .lens-secondary-btn, .voice-stop-btn { background: var(--cw-surface) !important; border: 1px solid var(--color-border-tertiary) !important; color: var(--cw-text-muted) !important; box-shadow: none !important; } /* Green/teal route icons → brand purple */ .voice-note-card-icon, .voice-notes-mark { color: var(--cw-accent-text) !important; background: var(--cw-accent-tint) !important; border-color: rgba(var(--brand-rgb),.16) !important; } /* AUDIT PASS — route card icons & status chips → brand purple (no green/amber) */ .smart-list-template-icon, .lens-category-icon { color: var(--cw-accent-text) !important; background: var(--cw-accent-tint) !important; border-color: rgba(var(--brand-rgb), .16) !important; } .attachi-review-count, .lens-status-chip.needs_review, .attachi-status-chip.needs_review { background: var(--cw-accent-tint) !important; color: var(--cw-accent-text) !important; border-color: rgba(var(--brand-rgb), .20) !important; } /* AUDIT PASS — attachi upload buttons (both) → purple */ .attachi-primary-btn, .attachi-upload-btn { background: var(--cw-accent) !important; background-image: none !important; border-color: var(--cw-accent-text) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } /* AUDIT PASS — ask-ai heading weight + Flow lockup label case */ .top-ask-ai-panel h2, .ask-ai-panel h2 { font-weight: 500 !important; } .flow-lockup small { text-transform: none !important; letter-spacing: 0 !important; color: var(--color-text-secondary) !important; font-weight: 500 !important; } /* AUDIT PASS — final stragglers */ .lists-primary-btn { background: var(--cw-accent) !important; background-image: none !important; border-color: var(--cw-accent-text) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } .vx-login-btn:hover { background: var(--cw-accent-tint) !important; color: var(--cw-accent-text) !important; border-color: rgba(var(--brand-rgb), .40) !important; } /* ============================================================ AUDIT PASS — Detailed task view + task-create / workspace / profile ============================================================ */ #backToFlow { background: var(--cw-surface) !important; background-image: none !important; border: 1px solid var(--color-border-tertiary) !important; color: var(--cw-text-muted) !important; box-shadow: none !important; font-weight: 500 !important; } .detailed-view h1, .detail-topbar h1 { font-weight: 500 !important; } .detail-summary-card::before { display: none !important; } .detail-summary-card span { text-transform: none !important; letter-spacing: 0 !important; color: var(--color-text-secondary) !important; font-weight: 500 !important; } .detailed-table-wrap th, .detail-shell th, .detailed-view th { text-transform: none !important; letter-spacing: 0 !important; color: var(--color-text-secondary) !important; font-weight: 500 !important; } #addTask, .workspace-primary-btn, #saveProfileSecurity { background: var(--cw-accent) !important; background-image: none !important; border-color: var(--cw-accent-text) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } .workspace-secondary-btn, #editProfileEmail, #startProfilePasswordChange { background: transparent !important; background-image: none !important; color: var(--cw-accent-text) !important; box-shadow: none !important; } .workspace-secondary-btn { border: 1px solid var(--color-border-tertiary) !important; } /* AUDIT PASS — final CSS-uppercased micro-labels + task-email default button */ .voice-recorder-label, .voice-detail-kicker, .owner-label { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; } #sendTaskEmail { background: var(--cw-accent) !important; background-image: none !important; border-color: var(--cw-accent-text) !important; color: var(--cw-surface) !important; box-shadow: none !important; font-weight: 500 !important; } /* ============================================================ FLOW — KANBAN BOARD redesign (style-only, Apple-calm) ============================================================ */ /* Remove the persistent assistant search bar from focused module views */ body.is-assistant-focused .assistant-search-shell { display: none !important; } /* Page header (focus head): clean title/subtitle + borderless back arrow */ .assistant-focus-head h2 { font-weight: 500 !important; letter-spacing: -.01em !important; } .assistant-focus-head p { color: var(--color-text-secondary) !important; font-size: 14px !important; } .assistant-back-btn { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: var(--color-text-secondary) !important; } .assistant-back-btn svg { stroke: var(--cw-accent) !important; } .assistant-back-btn:hover, .assistant-back-btn:focus-visible { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--cw-accent-text) !important; } /* No heavy outer card around the whole board when the Flow view is mounted */ .assistant-focus-panel:has(.flow-command-bar) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* 1 — Command-bar banner: no card, drop the ALL-CAPS label, purple pill CTA, slim */ .flow-command-bar { border: 0 !important; border-radius: 0 !important; background: var(--cw-surface) !important; box-shadow: none !important; padding: 0 0 8px !important; margin: 0 0 6px !important; align-items: center !important; } .flow-command-bar span { display: none !important; } .flow-command-bar strong { margin-top: 0 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-secondary) !important; } .flow-command-bar button, .new-task-btn { background: var(--cw-accent) !important; background-image: none !important; border: 0 !important; border-radius: 999px !important; color: var(--cw-surface) !important; font-weight: 500 !important; box-shadow: none !important; padding: 0 16px !important; height: 38px !important; } /* 2 — Flow info row: no card, no logo, muted, purple pill toggles, slim */ .flow-workspace-head { border: 0 !important; border-radius: 0 !important; background: var(--cw-surface) !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 10px !important; align-items: center !important; } .flow-workspace-head .flow-logo-mark { display: none !important; } .flow-workspace-head .flow-lockup strong { font-size: 15px !important; font-weight: 500 !important; } .flow-workspace-head .flow-lockup small { text-transform: none !important; letter-spacing: 0 !important; font-size: 11px !important; font-weight: 500 !important; color: var(--color-text-tertiary) !important; } .flow-workspace-head p { text-align: left !important; font-size: 13px !important; color: var(--color-text-secondary) !important; } .flow-product-pills { justify-content: flex-start !important; gap: 8px !important; } .flow-product-pills span { padding: 5px 13px !important; border: 1px solid rgba(var(--brand-rgb),.30) !important; border-radius: 20px !important; background: var(--cw-surface) !important; color: var(--cw-accent-text) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; cursor: pointer; } .flow-product-pills span.active, .flow-product-pills span[aria-pressed="true"] { background: var(--cw-accent) !important; color: var(--cw-surface) !important; border-color: var(--cw-accent-text) !important; } /* 3 — Kanban columns: soft lanes, no hard boxes */ .board.scrollable-board { gap: 24px !important; } .scrollable-board .lane, .lane { border: 0 !important; border-radius: 12px !important; background: var(--color-background-secondary) !important; box-shadow: none !important; animation: none !important; min-height: 0 !important; } .lane::before { display: none !important; content: none !important; } .lane:hover { box-shadow: none !important; } .lane-head, .scrollable-board .lane-head { height: auto !important; flex: 0 0 auto !important; padding: 14px 16px 8px !important; border-bottom: 0 !important; } .lane-head span { font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-primary) !important; } .lane-head b { min-width: 22px !important; width: auto !important; height: 20px !important; padding: 0 7px !important; border-radius: 999px !important; border: 0 !important; background: rgba(15,23,42,.06) !important; color: var(--cw-text-muted) !important; font-size: 12px !important; font-weight: 500 !important; } .lane-add-btn { width: 24px !important; height: 24px !important; min-width: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--cw-accent-text) !important; box-shadow: none !important; opacity: 0; transition: opacity .15s ease; } .lane-head:hover .lane-add-btn, .lane:hover .lane-add-btn { opacity: 1; } .lane-add-btn:hover { background: rgba(var(--brand-rgb),.08) !important; color: var(--cw-accent-active) !important; box-shadow: none !important; } /* Column empty state: plain muted text, no dashed box */ .dropzone:empty::before { content: "No tasks yet" !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; min-height: 120px !important; color: var(--color-text-secondary) !important; font-size: 13px !important; font-weight: 400 !important; } /* 4 — Task cards (when data loads): clean, calm, hover-reveal shadow */ .scrollable-board .task, .task { border: 1px solid var(--color-border-tertiary) !important; border-radius: 10px !important; background: var(--cw-surface) !important; box-shadow: none !important; padding: 12px 14px !important; animation: none !important; min-height: 0 !important; } .task::before { display: none !important; content: none !important; } .task::after { display: none !important; content: none !important; } .task:hover, .scrollable-board .task:hover { transform: none !important; border-color: var(--color-border-tertiary) !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; } .task-title, .scrollable-board .task-title { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-primary) !important; } .task-desc, .scrollable-board .task-desc { font-size: 12px !important; color: var(--color-text-secondary) !important; } .task-topline, .scrollable-board .task-topline { border: 0 !important; background: transparent !important; background-image: none !important; padding: 0 !important; margin-bottom: 8px !important; min-height: 0 !important; } /* 5 — History section: no card, drop the eyebrow, calm heading + subtitle */ .history-section { border: 0 !important; border-radius: 0 !important; background: var(--cw-surface) !important; box-shadow: none !important; padding: 22px 0 0 !important; margin-top: 16px !important; } .history-head { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; margin-bottom: 14px !important; } .history-head .eyebrow, .history-head .eyebrow.mini { display: none !important; } .history-head h2 { margin: 0 !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-primary) !important; } .history-head small { font-size: 13px !important; font-weight: 400 !important; color: var(--color-text-secondary) !important; text-align: left !important; } /* ── Completed-task history cards: compact density ─────────────────────────── Scoped to the closure-history grid ONLY (.history-rail / .history-card). The active board cards use different classes and are left untouched. The card surface (border / radius / shadow / background) is unchanged — only the internals and density. Tokens only, no hardcoded colors. */ .history-rail { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 8px 12px !important; /* tighter row gap; more cards per row on wide screens */ } .history-card { padding: 0.65rem !important; /* ~half of the old 18px */ min-height: 0 !important; /* hug content */ } .history-card h3 { margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* clamp title to 2 lines */ overflow: hidden; } .history-card .history-meta { margin-top: 6px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--cw-text-muted) !important; } .history-empty { border: 0 !important; border-radius: 0 !important; background: transparent !important; min-height: 80px !important; color: var(--color-text-secondary) !important; font-weight: 400 !important; } /* ============================================================ FLOW — KANBAN focus-mode refinement (full-screen module page; reuses the body.is-assistant-focused class already toggled in JS, matching the To-Do/Notes/Reminder focus pattern) ============================================================ */ /* PROBLEM 1 — hide global chrome in any focused module view */ body.is-assistant-focused .vx-header, body.is-assistant-focused #todayVantage, body.is-assistant-focused .assistant-hero-title-row, body.is-assistant-focused .assistant-search-shell, body.is-assistant-focused .mobile-hero-icon-actions, body.is-assistant-focused .vx-footer { display: none !important; } body.is-assistant-focused #assistantHero, body.is-assistant-focused #assistantHero.assistant-hero { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; } body.is-assistant-focused #appShell { padding-top: 16px !important; } /* PROBLEM 2 — "Create focused task" becomes a floating FAB (its tagline block is dropped) */ .assistant-content-mounted.flow-command-bar { display: contents !important; } .flow-command-bar > div { display: none !important; } #openTaskCreateSecondary { position: fixed !important; right: 28px !important; bottom: 28px !important; z-index: 1000 !important; width: 48px !important; height: 48px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--cw-accent) !important; background-image: none !important; color: var(--cw-surface) !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; font-size: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; white-space: nowrap; cursor: pointer; transition: width .18s ease, border-radius .18s ease, box-shadow .18s ease; } #openTaskCreateSecondary::before { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; } #openTaskCreateSecondary:hover { width: 142px !important; border-radius: 999px !important; box-shadow: 0 6px 16px rgba(var(--brand-rgb),.32) !important; } #openTaskCreateSecondary:hover::after { content: "New task"; font-size: 13px; font-weight: 500; margin-left: 8px; } /* PROBLEM 3 — drop the redundant Flow sub-row; keep description + pills, flush left */ .flow-workspace-head { display: block !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 24px !important; /* PROBLEM 5 — 24px gap before columns */ } .flow-workspace-head .flow-lockup { display: none !important; } .flow-workspace-copy { display: block !important; } .flow-workspace-head p { max-width: none !important; margin: 0 0 12px !important; text-align: left !important; font-size: 13px !important; color: var(--color-text-secondary) !important; } .flow-workspace-head .flow-product-pills { justify-content: flex-start !important; } /* PROBLEM 4 — Previous Completed Tasks reads as a calm footer anchored by a hairline */ .history-section { border: 0 !important; border-top: 1px solid var(--color-border-tertiary) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin-top: 32px !important; padding: 24px 0 0 !important; } .history-head h2 { font-size: 16px !important; font-weight: 500 !important; } .history-empty { border: 0 !important; border-radius: 0 !important; background: transparent !important; min-height: 0 !important; padding: 24px 0 !important; color: var(--color-text-secondary) !important; font-size: 13px !important; font-weight: 400 !important; text-align: center; place-items: center; } /* FLOW Kanban — force banner hidden + left-aligned description/pills */ body.is-assistant-focused #todayVantage.today-card.full-width-vantage.collaboration-inbox { display: none !important; } #assistantFocusContent .flow-workspace-head { display: block !important; text-align: left !important; } #assistantFocusContent .flow-workspace-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-items: start !important; gap: 12px !important; text-align: left !important; } #assistantFocusContent .flow-workspace-head p { text-align: left !important; max-width: none !important; margin: 0 !important; } #assistantFocusContent .flow-product-pills { justify-content: flex-start !important; } /* FLOW Kanban — collapse the command-bar grid item (FAB child stays fixed) */ #assistantFocusContent > .assistant-content-mounted.flow-command-bar { display: contents !important; } /* FLOW Kanban — keep the head/board in normal flow (was position:sticky → overlap) */ #assistantFocusContent .flow-workspace-head { position: static !important; } /* FLOW Kanban — FAB sits above the board but below modals (task-create is z-152) */ #openTaskCreateSecondary { z-index: 40 !important; } /* ============================================================ EXECUTIVE SIGNALS — flatten cards, sentence-case, ghost buttons ============================================================ */ /* PROBLEM 5 — flatten the focus-panel card for every module focus view */ body.is-assistant-focused .assistant-focus-panel { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* PROBLEM 2 — remove the outer card wrappers + the purple gradient top line */ .ai-command-centre { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } .ai-command-centre::before { display: none !important; content: none !important; } .ai-command-detail { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* PROBLEM 3 — action buttons as a right-aligned ghost/pill row below the subtitle */ .ai-head.compact-ai-head { display: flex !important; justify-content: flex-end !important; align-items: center !important; margin: 0 0 18px !important; } .ai-actions-row { gap: 10px !important; flex-wrap: wrap !important; } .auto-prioritize-btn { background: var(--cw-accent) !important; background-image: none !important; border: 0 !important; border-radius: 20px !important; color: var(--cw-surface) !important; font-weight: 500 !important; box-shadow: none !important; padding: 0 18px !important; height: 38px !important; } .secondary-refresh { background: transparent !important; border: 1px solid rgba(var(--brand-rgb),.30) !important; border-radius: 20px !important; color: var(--cw-accent-text) !important; font-weight: 500 !important; box-shadow: none !important; padding: 0 18px !important; height: 38px !important; } .secondary-refresh:hover { background: var(--cw-accent-tint) !important; border-color: rgba(var(--brand-rgb),.45) !important; color: var(--cw-accent-active) !important; } /* PROBLEM 4 — signal cards: unified white card, sentence-case titles, 4-col / 16px */ .ai-command-centre .intel-grid, .intel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; } .ai-command-centre .intel-card, .intel-card { background: var(--cw-surface) !important; background-image: none !important; border: 1px solid var(--color-border-tertiary) !important; border-radius: 12px !important; padding: 16px !important; box-shadow: none !important; min-height: 0 !important; } .intel-card:hover { transform: none !important; background: var(--color-background-secondary) !important; border-color: var(--color-border-tertiary) !important; box-shadow: none !important; } .intel-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--color-text-primary) !important; } .intel-empty { font-size: 13px !important; font-weight: 400 !important; color: var(--color-text-secondary) !important; } /* ============================================================ NEXT 5 ACTIONS — flatten cards, calm rank slide, muted note ============================================================ */ /* PROBLEM 2 — remove the outer card wrappers + purple gradient top line */ .task-hero { display: block !important; grid-template-columns: none !important; gap: 0 !important; } .task-hero, .hero-copy.next-actions-panel, .next-actions-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; min-height: 0 !important; } .hero-copy.next-actions-panel::before, .next-actions-panel::before { display: none !important; content: none !important; } /* PROBLEM 3 — action card: unified white card with a left rank accent */ .next-action-slide { border: 1px solid var(--color-border-tertiary) !important; border-radius: 12px !important; background: var(--cw-surface) !important; background-image: none !important; box-shadow: none !important; padding: 16px !important; min-height: 0 !important; } .next-action-slide::before { inset: 0 auto 0 0 !important; /* keep the accent, as a left rank bar */ width: 4px !important; height: auto !important; background: var(--cw-accent) !important; } .next-action-slide.at_risk::before { background: var(--cw-warning) !important; } .next-action-slide.delayed::before { background: var(--cw-danger) !important; } .next-action-slide.completed::before { background: var(--cw-success) !important; } .slide-rank { height: 20px !important; min-width: 0 !important; padding: 0 8px !important; border-radius: 999px !important; background: rgba(15,23,42,.06) !important; color: var(--cw-text) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .04em !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; margin-bottom: 10px !important; } .slide-status { text-transform: none !important; letter-spacing: 0 !important; font-size: 11px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; } .next-action-slide h3 { margin: 0 0 6px !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-primary) !important; } .next-action-slide p { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--color-text-secondary) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slide-meta { margin-top: 12px !important; gap: 8px !important; } .slide-meta span { padding: 4px 9px !important; border: 0 !important; border-radius: 12px !important; background: rgba(15,23,42,.06) !important; color: var(--color-text-secondary) !important; font-size: 11px !important; font-weight: 400 !important; } /* PROBLEM 4 — bottom note: muted 13px, centered, not bold, no card */ .carousel-hint { margin-top: 16px !important; color: var(--color-text-secondary) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-align: center !important; } /* ============================================================ LISTS module — Apple Reminders-style redesign ============================================================ */ /* PROBLEM 1 — focus mode: hide nav + footer for the in-app routes (banner/hero/search live in #appShell which the route already hides) */ body.is-lists-route .vx-header, body.is-lists-route .vx-footer, body.is-lens-route .vx-header, body.is-lens-route .vx-footer, body.is-attachi-route .vx-header, body.is-attachi-route .vx-footer, body.is-vaia-route .vx-header, body.is-vaia-route .vx-footer, body.is-ask-ai-route .vx-header, body.is-ask-ai-route .vx-footer { display: none !important; } /* PROBLEM 2 — header: icon-only back arrow, title + subtitle, subtle status */ .lists-topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; } .lists-topbar .module-route-back { min-height: 40px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--color-text-secondary) !important; } .lists-topbar .module-route-back span { display: none !important; } .lists-topbar .module-route-back svg { width: 24px !important; height: 24px !important; stroke: var(--cw-accent) !important; } .lists-route-status { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--color-text-tertiary) !important; } .lists-page-title h1 { margin: 4px 0 0 !important; font-size: clamp(28px, 4vw, 40px) !important; font-weight: 500 !important; letter-spacing: -.01em !important; color: var(--color-text-primary) !important; } .lists-page-title p { margin: 5px 0 0 !important; font-size: 14px !important; color: var(--color-text-secondary) !important; } .lists-section-label { margin: 8px 0 0 !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-primary) !important; } /* PROBLEM 3 — list type cards → compact colored icon tiles */ .smart-list-template-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 760px !important; } .smart-list-template-card { min-height: 0 !important; aspect-ratio: 1 / 1; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 16px !important; border: 0 !important; border-radius: 16px !important; background: var(--cw-text-subtle) !important; background-image: none !important; box-shadow: none !important; text-align: center !important; transition: transform .15s ease, filter .15s ease; } .smart-list-template-card:hover, .smart-list-template-card:focus-visible { transform: scale(1.02) !important; filter: brightness(1.06) !important; border: 0 !important; box-shadow: none !important; } .smart-list-template-card .smart-list-template-icon { width: 32px !important; height: 32px !important; background: transparent !important; border: 0 !important; color: var(--cw-surface) !important; } .smart-list-template-card .smart-list-template-icon svg { width: 32px !important; height: 32px !important; stroke-width: 1.7 !important; } .smart-list-template-card strong { align-self: center !important; font-size: 13px !important; font-weight: 500 !important; color: var(--cw-surface) !important; } .smart-list-template-card small { display: none !important; } .smart-list-template-card[data-list-template="grocery-list"] { background: var(--cw-success) !important; } .smart-list-template-card[data-list-template="travel-packing"] { background: var(--cw-accent) !important; } .smart-list-template-card[data-list-template="shopping-list"] { background: var(--cw-warning) !important; } .smart-list-template-card[data-list-template="monthly-checklist"] { background: var(--cw-accent) !important; } .smart-list-template-card[data-list-template="relocation-list"] { background: var(--cw-accent) !important; } .smart-list-template-card[data-list-template="event-party-list"] { background: var(--cw-warning) !important; } .smart-list-template-card[data-list-template="home-maintenance"] { background: var(--cw-accent) !important; } .smart-list-template-card[data-list-template="health-checklist"] { background: var(--cw-danger) !important; } .smart-list-template-card[data-list-template="custom-list"] { background: var(--cw-text-subtle) !important; } /* PROBLEM 4 — saved lists: heading + count, borderless rows, plain empty state */ .smart-list-saved-section { padding-top: 4px !important; } .smart-list-saved-section > .smart-list-section-head { justify-content: flex-start !important; gap: 7px !important; } .smart-list-saved-section > .smart-list-section-head strong { font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-primary) !important; } #smartListsCount { font-size: 13px !important; font-weight: 400 !important; color: var(--color-text-secondary) !important; } #smartListsCount::before { content: "· "; } .saved-smart-lists-grid { display: block !important; grid-template-columns: none !important; } .saved-smart-list-card { width: 100% !important; min-height: 0 !important; grid-template-columns: 24px minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; padding: 12px 4px !important; border: 0 !important; border-bottom: 1px solid var(--color-border-tertiary) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .saved-smart-list-card:hover, .saved-smart-list-card:focus-visible { background: var(--color-background-secondary) !important; border-color: var(--color-border-tertiary) !important; box-shadow: none !important; } .saved-smart-list-card .smart-list-template-icon { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--cw-accent-tint) !important; border: 0 !important; color: var(--cw-accent-text) !important; } .saved-smart-list-card .smart-list-template-icon svg { width: 14px !important; height: 14px !important; } .saved-smart-list-main strong { font-size: 14px !important; font-weight: 500 !important; color: var(--color-text-primary) !important; } .saved-smart-list-main small { font-size: 12px !important; color: var(--color-text-secondary) !important; } .saved-smart-list-card em { font-size: 12px !important; font-weight: 400 !important; color: var(--color-text-secondary) !important; } .smart-list-empty-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 16px 0 !important; text-align: center !important; color: var(--color-text-secondary) !important; font-size: 13px !important; } /* New-list FAB (reuses the custom-list create handler) */ .lists-fab { position: fixed; right: 28px; bottom: 28px; z-index: 40; width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--cw-accent); color: var(--cw-surface); box-shadow: 0 12px 30px rgba(var(--brand-rgb),.36); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; } .lists-fab svg { width: 26px; height: 26px; } .lists-fab:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 38px rgba(var(--brand-rgb),.42); } @media (max-width: 640px) { .smart-list-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: none !important; } } /* LISTS — white page surface + remove the persistent "Loading lists" status */ #listsRouteView, .lists-route-view { background: transparent !important; background-image: none !important; } .lists-route-status { display: none !important; } /* ============================================================ LENS module — Apple document-scanner redesign ============================================================ */ #lensRouteView, .lens-route-view { background: transparent !important; background-image: none !important; } /* Header: icon-only back, title + subtitle, hidden status, section label */ .lens-topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; } .lens-topbar .module-route-back { min-height: 40px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--color-text-secondary) !important; } .lens-topbar .module-route-back span { display: none !important; } .lens-topbar .module-route-back svg { width: 24px !important; height: 24px !important; stroke: var(--cw-accent) !important; } .lens-route-status { display: none !important; } .lens-page-title h1 { margin: 4px 0 0 !important; font-size: clamp(28px,4vw,40px) !important; font-weight: 500 !important; letter-spacing: -.01em !important; color: var(--color-text-primary) !important; } .lens-page-title p { margin: 5px 0 0 !important; font-size: 14px !important; color: var(--color-text-secondary) !important; } .lens-section-label { margin: 0 !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--color-text-primary) !important; } .lens-board { display: grid !important; gap: 16px !important; } /* Scan-type tiles → compact colored icon squares */ .lens-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; max-width: 620px !important; } .lens-category-card { min-height: 0 !important; aspect-ratio: 1 / 1; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 14px !important; border: 0 !important; border-radius: 16px !important; background: var(--cw-text-subtle) !important; background-image: none !important; box-shadow: none !important; text-align: center !important; position: relative; transition: transform .15s ease, filter .15s ease; } .lens-category-card:hover, .lens-category-card:focus-visible { transform: scale(1.03) !important; filter: brightness(1.06) !important; border: 0 !important; box-shadow: none !important; } .lens-category-card.is-selected { border: 0 !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9) !important; } .lens-category-card.is-selected::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--cw-surface); color: var(--cw-text); font-size: 10px; font-weight: 700; line-height: 1; } .lens-category-card .lens-category-icon { width: 28px !important; height: 28px !important; background: transparent !important; border: 0 !important; color: var(--cw-surface) !important; } .lens-category-card .lens-category-icon svg { width: 28px !important; height: 28px !important; stroke-width: 1.7 !important; } .lens-category-card strong { align-self: center !important; font-size: 12px !important; font-weight: 500 !important; color: var(--cw-surface) !important; } .lens-category-card small { display: none !important; } .lens-category-card[data-lens-category="auto_detect"] { background: var(--cw-accent) !important; } .lens-category-card[data-lens-category="pan_card"] { background: var(--cw-warning) !important; } .lens-category-card[data-lens-category="aadhaar_card"] { background: var(--cw-accent) !important; } .lens-category-card[data-lens-category="driving_license"] { background: var(--cw-accent) !important; } .lens-category-card[data-lens-category="visiting_card"] { background: var(--cw-success) !important; } .lens-category-card[data-lens-category="receipt_invoice"] { background: var(--cw-danger) !important; } .lens-category-card[data-lens-category="prescription"] { background: var(--cw-accent) !important; } .lens-category-card[data-lens-category="health_report"] { background: var(--cw-accent) !important; } .lens-category-card[data-lens-category="other_document"] { background: var(--cw-text-subtle) !important; } /* Upload row — centered primary button + muted note, below the grid */ .lens-upload-row { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; margin: 6px 0 !important; } #lensUploadTop { width: auto !important; min-height: 48px !important; height: 48px !important; padding: 0 24px !important; border-radius: 999px !important; background: var(--cw-accent) !important; background-image: none !important; border: 0 !important; color: var(--cw-surface) !important; font-weight: 500 !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } #lensUploadTop svg { width: 18px !important; height: 18px !important; } #lensStatus { font-size: 12px !important; color: var(--color-text-secondary) !important; font-weight: 400 !important; text-align: center !important; } /* Recent scans — heading + count, borderless rows, plain empty */ .lens-recent-section > .lens-section-head { justify-content: flex-start !important; gap: 7px !important; } .lens-recent-section > .lens-section-head strong { font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-primary) !important; } #lensScanCount { font-size: 13px !important; font-weight: 400 !important; color: var(--color-text-secondary) !important; } #lensScanCount::before { content: "· "; } .lens-scan-grid { display: block !important; grid-template-columns: none !important; } .lens-scan-card { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 4px !important; border: 0 !important; border-bottom: 1px solid var(--color-border-tertiary) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .lens-scan-card .lens-scan-icon { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--cw-accent-tint) !important; border: 0 !important; color: var(--cw-accent-text) !important; } .lens-scan-card .lens-scan-icon svg { width: 14px !important; height: 14px !important; } .lens-scan-main strong { font-size: 14px !important; font-weight: 500 !important; } .lens-scan-main small { font-size: 12px !important; color: var(--color-text-secondary) !important; } .lens-empty { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 16px 0 !important; text-align: center !important; color: var(--color-text-secondary) !important; font-size: 13px !important; } @media (max-width: 640px) { .lens-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: none !important; } } /* ============================================================ ATTACHI MODULE REDESIGN — Apple Files-style document locker Style-only. No JS/data/upload/folder/OCR behavior changed. ============================================================ */ #attachiRouteView, #attachiRouteView .attachi-shell { background: transparent !important; grid-template-columns: minmax(0, 1fr) !important; } #attachiRouteView .attachi-topbar { max-width: 980px !important; width: 100% !important; margin: 0 auto !important; } #attachiRouteView .attachi-board { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; width: 100% !important; max-width: 980px !important; margin: 0 auto !important; display: block !important; } /* Topbar — icon-only back */ #attachiRouteView .attachi-topbar { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; border: none !important; padding: 0 0 4px !important; background: transparent !important; } #attachiRouteView .attachi-topbar h1 { display: none !important; } #attachiRouteView .attachi-topbar .module-route-back { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 6px 6px 6px 0 !important; color: var(--color-text-secondary) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; } #attachiRouteView .attachi-topbar .module-route-back:hover { color: var(--lp-purple) !important; } #attachiRouteView .attachi-topbar .module-route-back svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* Page title + subtitle + review pill */ #attachiRouteView .attachi-page-title { width: 100% !important; max-width: 980px !important; margin: 4px auto 22px !important; } #attachiRouteView .attachi-title-row { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; } #attachiRouteView .attachi-page-title h1 { margin: 0 !important; font-size: 30px !important; font-weight: 650 !important; letter-spacing: -0.02em !important; color: var(--color-text-primary) !important; line-height: 1.1 !important; } #attachiRouteView .attachi-page-title p { margin: 6px 0 0 !important; font-size: 15px !important; color: var(--color-text-secondary) !important; line-height: 1.5 !important; } /* "X need review" pill — calm amber */ #attachiRouteView .attachi-review-count { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 4px 11px !important; border-radius: 999px !important; background: var(--cw-warning-bg) !important; color: var(--cw-warning) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; border: none !important; line-height: 1.4 !important; white-space: nowrap !important; } /* Locker status note — kept for JS, visually quiet */ #attachiRouteView .attachi-status-note { display: none !important; } /* ---- Smart folder tiles ---- */ #attachiRouteView .attachi-folder-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 12px !important; margin: 0 0 28px !important; padding: 0 !important; background: transparent !important; border: none !important; } #attachiRouteView .attachi-folder-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; text-align: left !important; width: 100% !important; min-height: 0 !important; padding: 16px !important; background: var(--color-background-primary) !important; border: 1px solid var(--color-border-tertiary) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; cursor: pointer !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; } #attachiRouteView .attachi-folder-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(15,23,42,.08) !important; border-color: rgba(var(--brand-rgb),.28) !important; background: var(--color-background-primary) !important; } #attachiRouteView .attachi-folder-card.active { border-color: var(--lp-purple) !important; box-shadow: 0 0 0 1px var(--lp-purple) !important; background: var(--color-background-primary) !important; } /* folder icon via mask (cards have no icon element in markup) */ #attachiRouteView .attachi-folder-card::before { content: "" !important; display: block !important; width: 34px !important; height: 34px !important; margin-bottom: 8px !important; background-color: var(--cw-text-subtle); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h4l1.8 1.8H19.5A1.5 1.5 0 0 1 21 8.3v9.2A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h4l1.8 1.8H19.5A1.5 1.5 0 0 1 21 8.3v9.2A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* per-folder accent (fixed render order: IDs, Health, Money, Home & Family, Other) */ #attachiRouteView .attachi-folder-grid .attachi-folder-card:nth-child(1)::before { background-color: var(--cw-accent-text); } #attachiRouteView .attachi-folder-grid .attachi-folder-card:nth-child(2)::before { background-color: var(--cw-danger); } #attachiRouteView .attachi-folder-grid .attachi-folder-card:nth-child(3)::before { background-color: var(--cw-success); } #attachiRouteView .attachi-folder-grid .attachi-folder-card:nth-child(4)::before { background-color: var(--cw-warning); } #attachiRouteView .attachi-folder-grid .attachi-folder-card:nth-child(5)::before { background-color: var(--cw-text-subtle); } /* folder name (logged-out = , logged-in = ) */ #attachiRouteView article.attachi-folder-card strong, #attachiRouteView button.attachi-folder-card span { font-size: 14px !important; font-weight: 600 !important; color: var(--color-text-primary) !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } /* secondary line: "Login to view" (logged-out ) / count (logged-in ) */ #attachiRouteView article.attachi-folder-card span, #attachiRouteView button.attachi-folder-card strong { font-size: 12.5px !important; font-weight: 400 !important; color: var(--color-text-tertiary) !important; line-height: 1.4 !important; } #attachiRouteView button.attachi-folder-card strong::after { content: " in folder" !important; } #attachiRouteView button.attachi-folder-card strong { font-variant-numeric: tabular-nums !important; } #attachiRouteView button.attachi-folder-card small { display: none !important; } /* ---- Controls: search + filter as compact disclosure tools ---- */ #attachiRouteView .attachi-controls { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; background: transparent !important; border: none !important; } #attachiRouteView .attachi-tool { position: relative !important; } #attachiRouteView .attachi-tool > summary { list-style: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; border: 1px solid var(--color-border-tertiary) !important; background: var(--color-background-primary) !important; color: var(--color-text-secondary) !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; transition: color .15s ease, border-color .15s ease, background .15s ease !important; } #attachiRouteView .attachi-tool > summary::-webkit-details-marker { display: none !important; } #attachiRouteView .attachi-tool > summary:hover { color: var(--lp-purple) !important; border-color: rgba(var(--brand-rgb),.3) !important; } #attachiRouteView .attachi-tool[open] > summary { color: var(--lp-purple) !important; border-color: var(--lp-purple) !important; background: var(--lp-purple-tint) !important; } #attachiRouteView .attachi-tool > summary svg { width: 18px !important; height: 18px !important; } #attachiRouteView .attachi-tool-pop { position: absolute !important; top: calc(100% + 8px) !important; z-index: 40 !important; background: var(--color-background-primary) !important; border: 1px solid var(--color-border-tertiary) !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(15,23,42,.14) !important; padding: 14px !important; } #attachiRouteView .attachi-search-tool .attachi-tool-pop { left: 0 !important; width: 280px !important; } #attachiRouteView .attachi-filter-tool .attachi-tool-pop { right: 0 !important; width: 248px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } #attachiRouteView .attachi-search-pop input { width: 100% !important; height: 40px !important; padding: 0 14px !important; border: 1px solid var(--color-border-tertiary) !important; border-radius: 10px !important; background: var(--color-background-secondary) !important; font-size: 14px !important; color: var(--color-text-primary) !important; box-shadow: none !important; outline: none !important; } #attachiRouteView .attachi-search-pop input:focus { border-color: var(--lp-purple) !important; background: var(--color-background-primary) !important; } #attachiRouteView .attachi-filter-field { display: flex !important; flex-direction: column !important; gap: 5px !important; } #attachiRouteView .attachi-filter-field > span { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: var(--color-text-tertiary) !important; } #attachiRouteView .attachi-filter-field select { width: 100% !important; height: 38px !important; padding: 0 12px !important; border: 1px solid var(--color-border-tertiary) !important; border-radius: 10px !important; background: var(--color-background-secondary) !important; font-size: 13.5px !important; color: var(--color-text-primary) !important; box-shadow: none !important; appearance: auto !important; } #attachiRouteView .attachi-filter-field select:focus { border-color: var(--lp-purple) !important; outline: none !important; } #attachiRouteView .attachi-clear-link { align-self: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 0 !important; color: var(--lp-purple) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; } #attachiRouteView .attachi-clear-link:hover { text-decoration: underline !important; } /* ---- Recent uploads ---- */ #attachiRouteView .attachi-list-section { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } #attachiRouteView .attachi-list-head { display: flex !important; align-items: baseline !important; gap: 8px !important; padding: 0 4px 8px !important; border: none !important; } #attachiRouteView .attachi-list-head #attachiListTitle { font-size: 16px !important; font-weight: 650 !important; color: var(--color-text-primary) !important; letter-spacing: -0.01em !important; } #attachiRouteView .attachi-list-head #attachiListCount { font-size: 13px !important; color: var(--color-text-tertiary) !important; } #attachiRouteView .attachi-list-head #attachiListCount::before { content: "· " !important; } #attachiRouteView .attachi-document-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; background: var(--color-background-primary) !important; border: 1px solid var(--color-border-tertiary) !important; border-radius: 14px !important; padding: 4px 6px !important; overflow: hidden !important; } #attachiRouteView .attachi-doc-card { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; text-align: left !important; padding: 13px 12px !important; background: transparent !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; border-bottom: 1px solid var(--color-border-tertiary) !important; cursor: pointer !important; transition: background .12s ease !important; } #attachiRouteView .attachi-document-grid .attachi-doc-card:last-child { border-bottom: none !important; } #attachiRouteView .attachi-doc-card:hover { background: var(--color-background-secondary) !important; transform: none !important; } #attachiRouteView .attachi-doc-icon { flex: 0 0 auto !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: var(--lp-purple-tint) !important; } #attachiRouteView .attachi-doc-icon svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: var(--lp-purple) !important; stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } #attachiRouteView .attachi-doc-main { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; flex: 1 1 auto !important; } #attachiRouteView .attachi-doc-main strong { font-size: 14.5px !important; font-weight: 600 !important; color: var(--color-text-primary) !important; letter-spacing: -0.01em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #attachiRouteView .attachi-doc-main small { font-size: 12.5px !important; color: var(--color-text-secondary) !important; } #attachiRouteView .attachi-doc-main em { font-size: 12px !important; font-style: normal !important; color: var(--color-text-tertiary) !important; } #attachiRouteView .attachi-status-chip { flex: 0 0 auto !important; } /* Empty state — quiet, no card/box at all */ #attachiRouteView .attachi-document-grid:has(.attachi-empty) { border: none !important; background: transparent !important; padding: 0 !important; } #attachiRouteView .attachi-empty { background: transparent !important; border: none !important; padding: 28px 12px !important; text-align: center !important; color: var(--color-text-tertiary) !important; font-size: 13.5px !important; } /* ---- Single upload FAB ---- */ #attachiRouteView .attachi-fab { position: fixed !important; right: 28px !important; bottom: 28px !important; z-index: 60 !important; width: 56px !important; height: 56px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: var(--lp-purple) !important; color: var(--cw-surface) !important; box-shadow: 0 10px 26px rgba(var(--brand-rgb),.4) !important; cursor: pointer !important; transition: transform .15s ease, box-shadow .15s ease !important; } #attachiRouteView .attachi-fab:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 14px 32px rgba(var(--brand-rgb),.48) !important; } #attachiRouteView .attachi-fab svg { width: 24px !important; height: 24px !important; } /* ---- Google Drive connect prompt + "stored in Drive" badge ---- */ .attachi-drive-connect { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: 420px; margin: 24px auto; padding: 30px 24px; border: 1px solid var(--color-border-tertiary, rgba(0,0,0,.1)); border-radius: 18px; background: linear-gradient(180deg, var(--cw-accent-tint), var(--cw-surface) 70%); } .attachi-drive-connect[hidden] { display: none; } .attachi-drive-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--lp-purple, var(--cw-accent)); color: var(--cw-surface); box-shadow: 0 14px 32px rgba(var(--brand-rgb),.3); margin-bottom: 6px; } .attachi-drive-icon svg { width: 32px; height: 32px; } .attachi-drive-title { font-size: 21px; font-weight: 700; margin: 0; } .attachi-drive-sub { font-size: 14.5px; color: var(--color-text-secondary, var(--cw-text-muted)); margin: 0 0 12px; line-height: 1.5; } .attachi-drive-btn { border: 0; border-radius: 999px; padding: 12px 28px; font-size: 15px; font-weight: 600; color: var(--cw-surface); background: var(--lp-purple, var(--cw-accent)); box-shadow: 0 10px 26px rgba(var(--brand-rgb),.34); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease; } .attachi-drive-btn:hover { transform: translateY(-1px); } .attachi-drive-btn:disabled { opacity: .65; cursor: default; transform: none; } /* When Drive is not connected, the connect card replaces the locker tools. */ .attachi-board.attachi-needs-drive .attachi-folder-grid, .attachi-board.attachi-needs-drive .attachi-controls, .attachi-board.attachi-needs-drive .attachi-list-section, .attachi-board.attachi-needs-drive .attachi-fab { display: none !important; } .attachi-drive-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--lp-purple, var(--cw-accent)); } .attachi-drive-badge svg { width: 13px; height: 13px; } @media (max-width: 640px) { #attachiRouteView .attachi-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #attachiRouteView .attachi-page-title h1 { font-size: 26px !important; } #attachiRouteView .attachi-fab { right: 18px !important; bottom: 18px !important; } #attachiRouteView .attachi-search-tool .attachi-tool-pop { width: min(280px, 78vw) !important; } } /* ============================================================ PEOPLE HUB FOCUS REDESIGN — style-only, scoped to the People assistant-focus module. Targets the JS-built stat cards + "Open full People Hub" launch, and the Accountability toolbar + Members panel (which only carry .assistant-content-mounted while mounted in People focus — never the shared Flow view). No JS / HTML / data-binding changes. ============================================================ */ /* ---- 2. Stat cards: compact, number-first, no ALL-CAPS, no shadow ---- */ .assistant-people-overview { gap: 10px !important; } .assistant-people-overview article { display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 14px !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 12px !important; background: var(--cw-surface) !important; box-shadow: none !important; } .assistant-people-overview strong { order: 1 !important; margin: 0 !important; font-size: 24px !important; font-weight: 500 !important; color: var(--cw-text) !important; letter-spacing: -0.015em !important; line-height: 1.1 !important; } .assistant-people-overview span { order: 2 !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--cw-text-muted) !important; } .assistant-people-overview small { display: none !important; } /* Private View card (4th): shorter value, lock + prompt when logged out */ .assistant-people-overview article:nth-child(4) strong { font-size: 15px !important; } body:not(.is-authenticated) .assistant-people-overview article:nth-child(4) strong { font-size: 0 !important; line-height: 0 !important; } body:not(.is-authenticated) .assistant-people-overview article:nth-child(4) strong::before { content: "🔒 Login to unlock"; font-size: 13px; font-weight: 500; color: var(--cw-text-subtle); letter-spacing: 0; line-height: 1.2; } /* ---- 3. "Open full People Hub" → quiet right-aligned text link ---- */ .assistant-people-overview + .assistant-focus-actions { justify-content: flex-end !important; margin-top: 2px !important; } .assistant-people-overview + .assistant-focus-actions .assistant-launch-btn { min-height: 0 !important; padding: 4px 2px !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: var(--cw-accent-text) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; } .assistant-people-overview + .assistant-focus-actions .assistant-launch-btn:hover { text-decoration: underline !important; transform: none !important; } /* ---- 4 + 5. Accountability toolbar (mounted in People focus only) ---- */ .assistant-content-mounted.toolbar { position: static !important; top: auto !important; margin: 20px 0 0 !important; padding: 0 !important; grid-template-columns: 1fr !important; gap: 14px !important; background: transparent !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* line 17406 forces this mounted toolbar to display:flex (row) — stack it instead */ #assistantFocusContent > .assistant-content-mounted.toolbar { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } .assistant-content-mounted.toolbar .toolbar-title { text-transform: none !important; letter-spacing: -0.01em !important; font-size: 15px !important; font-weight: 500 !important; color: var(--cw-text) !important; } .assistant-content-mounted.toolbar #ownerSummary { margin-top: 8px !important; } /* logged-out: drop Guest Preview / Blank by Design, show muted empty line */ body:not(.is-authenticated) .assistant-content-mounted.toolbar #ownerSummary .owner-chip { display: none !important; } body:not(.is-authenticated) .assistant-content-mounted.toolbar #ownerSummary::after { content: "Login to see accountability signals and task ownership."; color: var(--cw-text-subtle) !important; font-size: 13px !important; font-weight: 500 !important; } /* logged-in: flatten the Private View chips */ .assistant-content-mounted.toolbar #ownerSummary .owner-chip, .assistant-content-mounted.toolbar #ownerSummary .owner-chip.secure { border: 1px solid rgba(15,23,42,.08) !important; background: var(--cw-surface) !important; color: var(--cw-text) !important; box-shadow: none !important; border-radius: 10px !important; } .assistant-content-mounted.toolbar #ownerSummary .owner-chip span, .assistant-content-mounted.toolbar #ownerSummary .owner-chip.secure span { color: var(--cw-text-muted) !important; } /* toolbar action row */ .assistant-content-mounted.toolbar .toolbar-actions { gap: 8px !important; justify-content: flex-start !important; align-items: center !important; } /* Signed-in status: muted inline text, not a pill */ .assistant-content-mounted.toolbar .session-pill { height: auto !important; padding: 0 4px 0 0 !important; border: none !important; background: transparent !important; border-radius: 0 !important; color: var(--cw-text-subtle) !important; font-size: 12px !important; font-weight: 500 !important; } .assistant-content-mounted.toolbar .session-pill strong { color: var(--cw-text-muted) !important; font-weight: 500 !important; } /* My tasks dropdown: ghost pill, purple text */ .assistant-content-mounted.toolbar #ownerFilter { height: 34px !important; border: 1px solid rgba(15,23,42,.08) !important; background: var(--cw-surface) !important; color: var(--cw-accent-text) !important; font-weight: 500 !important; font-size: 13px !important; box-shadow: none !important; border-radius: 999px !important; } /* New Task: purple pill CTA */ .assistant-content-mounted.toolbar .new-task-btn { height: 34px !important; background: var(--cw-accent) !important; background-image: none !important; border: 1px solid var(--cw-accent) !important; color: var(--cw-surface) !important; font-weight: 500 !important; font-size: 13px !important; box-shadow: none !important; border-radius: 999px !important; } /* Team / Detailed View / Download Excel: ghost (was dark-filled) */ .assistant-content-mounted.toolbar .team-open-btn, .assistant-content-mounted.toolbar .detailed-open-btn, .assistant-content-mounted.toolbar .download-btn { height: 34px !important; background: var(--cw-surface) !important; background-image: none !important; border: 1px solid rgba(15,23,42,.08) !important; color: var(--cw-text-muted) !important; font-weight: 500 !important; font-size: 13px !important; box-shadow: none !important; border-radius: 999px !important; } .assistant-content-mounted.toolbar .team-open-btn:hover, .assistant-content-mounted.toolbar .detailed-open-btn:hover, .assistant-content-mounted.toolbar .download-btn:hover { color: var(--cw-accent-text) !important; border-color: rgba(var(--brand-rgb),.3) !important; transform: none !important; } /* Logout: plain muted text link */ .assistant-content-mounted.toolbar .logout-btn { height: 34px !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--cw-text-subtle) !important; font-weight: 500 !important; font-size: 13px !important; padding: 0 6px !important; } .assistant-content-mounted.toolbar .logout-btn:hover { color: var(--cw-danger) !important; transform: none !important; } /* ---- 6. Members and assignment (mounted in People focus only) ---- */ #teamPanel.assistant-content-mounted { margin: 24px 0 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } #teamPanel.assistant-content-mounted .eyebrow { display: none !important; } #teamPanel.assistant-content-mounted .team-panel-head { border: none !important; padding: 0 !important; margin-bottom: 10px !important; } #teamPanel.assistant-content-mounted .team-panel-head h2 { font-size: 15px !important; font-weight: 500 !important; color: var(--cw-text) !important; letter-spacing: -0.01em !important; } #teamPanel.assistant-content-mounted .team-panel-head small { color: var(--cw-text-subtle) !important; font-size: 12px !important; } /* empty state: no box, muted, centered */ #teamPanel.assistant-content-mounted .team-empty { border: none !important; background: transparent !important; padding: 16px 0 !important; color: var(--cw-text-subtle) !important; font-size: 13px !important; text-align: center !important; } /* logged-in: render members as a clean vertical Apple-Contacts-style list */ #teamPanel.assistant-content-mounted .team-members-list { flex-direction: column !important; flex-wrap: nowrap !important; overflow-x: visible !important; gap: 0 !important; } #teamPanel.assistant-content-mounted .team-member-card { flex: 1 1 auto !important; width: 100% !important; border: none !important; border-bottom: 1px solid rgba(15,23,42,.06) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 4px !important; background: transparent !important; } #teamPanel.assistant-content-mounted .team-avatar { background: var(--cw-accent-tint) !important; color: var(--cw-accent-text) !important; } /* ---------- Executive Space row — SOLID brand fill, white content ---------- Was a pale --cw-accent-tint wash (the washed-out, unreadable look). Now a solid --cw-accent-deep (#0A6B49) fill so white title/link clear WCAG AA (~6.5:1) and the #CDEFE0 description clears AA (~5.3:1) — in light, dark, AND logged-out states alike. This is the authoritative 2-ID rule (it beats every single-ID card rule), and it's scoped to #assistantExecutiveGrid so the Communication/Execution/Capture rows and the mobile icon-tile grid are untouched. Vaia, Executive Signals, Next 5 Actions, Calendar. */ #assistantHero #assistantExecutiveGrid .clik-feature-card { background: var(--cw-accent-deep) !important; background-image: none !important; border: 1px solid var(--cw-accent-deep) !important; color: var(--cw-text-on-accent) !important; /* Same soft, neutral elevation as the white cards — NOT a heavier/green shadow. */ box-shadow: var(--cw-shadow-card) !important; transition: all .2s ease !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #assistantHero #assistantExecutiveGrid .clik-feature-card:hover, #assistantHero #assistantExecutiveGrid .clik-feature-card:focus-visible { background: var(--cw-accent-deep) !important; border-color: var(--cw-accent-deep) !important; transform: translateY(-2px); box-shadow: var(--cw-shadow-card-hover) !important; } /* White title, light-emerald (#CDEFE0) description, white "Login to view activity →". */ #assistantHero #assistantExecutiveGrid .clik-feature-card strong { color: var(--cw-text-on-accent) !important; } #assistantHero #assistantExecutiveGrid .clik-feature-desc { color: var(--cw-on-accent-soft) !important; } #assistantHero #assistantExecutiveGrid .clik-feature-card a, #assistantHero #assistantExecutiveGrid .clik-feature-link { color: var(--cw-text-on-accent) !important; text-decoration: none !important; } /* White icon + translucent-white chip on the fill. */ #assistantHero #assistantExecutiveGrid .clik-feature-icon { color: var(--cw-text-on-accent) !important; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.30) !important; } /* Status pill: white text on a translucent-white capsule — legible in every state. */ /* Plain white text — no pill/capsule enclosure (no bg, border, or padding). */ #assistantHero #assistantExecutiveGrid .clik-feature-status { color: var(--cw-text-on-accent) !important; font-weight: 600 !important; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Row group wayfinding labels — subtle, full-width grid items above each row */ .assistant-row-label { grid-column: 1 / -1; margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); } @media (max-width: 768px) { .assistant-row-label { display: none !important; } } /* ---------- Hero search bar — Ask AI entry point ---------- */ .assistant-search-box { position: relative; border: 1px solid var(--cw-accent-tint) !important; } .assistant-search-box:focus-within { border-color: var(--cw-accent-text) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1) !important; } .assistant-search-box input { color: var(--color-text-primary) !important; padding-right: 30px !important; /* room for the AI sparkle */ outline: none !important; /* the box's focus ring is the single focus indicator */ box-shadow: none !important; /* suppress the global input:focus ring (styles.css:83) */ -webkit-appearance: none !important; /* drop native type=search chrome */ appearance: none !important; } .assistant-search-box input::placeholder { color: var(--cw-text-subtle) !important; } .assistant-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* AI sparkle — appears at the input's right edge when the query will go to Ask AI */ .assistant-search-ai-hint { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cw-accent-text); display: grid; place-items: center; cursor: pointer; } .assistant-search-ai-hint[hidden] { display: none; } .assistant-search-ai-hint svg { width: 16px; height: 16px; fill: currentColor; } .assistant-search-ai-hint:hover { background: rgba(var(--brand-rgb), 0.1); } /* ============================================================================ MOBILE UI OVERHAUL — iPhone home-screen / iOS launcher language. Scoped to the existing phone breakpoint (<=640px), which is a subset of the requested <=768px range. The desktop + tablet landing (>=641px) is left 100% untouched. This block is intentionally LAST so it wins source-order ties over the earlier mobile rules it supersedes. ============================================================================ */ @media (max-width: 640px) { /* ---------- CHANGE 1 — slim 44px icon-only top bar ---------- */ .vx-header { background: var(--cw-surface) !important; box-shadow: none !important; border-bottom: 0.5px solid rgba(15, 23, 42, .14) !important; } .vx-header-inner { width: 100% !important; height: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; gap: 12px !important; grid-template-columns: none !important; grid-auto-rows: auto !important; padding: 0 16px !important; border: 0 !important; background: transparent !important; } .vx-brand { display: none !important; } .vx-mobile-menu-btn { order: 0 !important; margin-right: auto !important; display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--cw-accent-text) !important; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vx-mobile-menu-btn svg { width: 22px !important; height: 22px !important; } .vx-header-context.vx-space-context { display: none !important; } .vx-product-nav, .vx-header-actions { display: flex !important; align-items: center !important; gap: 12px !important; width: auto !important; min-width: 0 !important; grid-template-columns: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .vx-product-nav { order: 1 !important; } .vx-header-actions { order: 2 !important; } /* My Team + Ask AI become bare 32px tap targets, icon only */ .vx-product-nav .vx-nav-link { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; gap: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--cw-accent-text) !important; box-shadow: none !important; overflow: visible !important; } .vx-product-nav .vx-nav-link span { display: none !important; } .vx-product-nav .vx-nav-link svg { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } /* Hide the legacy text auth/refresh buttons; the avatar represents the user */ .vx-header-actions #headerLoginBtn, .vx-header-actions #headerRegisterBtn, .vx-header-actions #headerLogoutBtn, .vx-header-actions #headerRefreshBtn, .vx-header .momentum-strip { display: none !important; } /* Logged-out: person icon → opens login */ body:not(.is-authenticated) .vx-header-actions .vx-mobile-avatar-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--cw-accent-text) !important; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.is-authenticated .vx-header-actions .vx-mobile-avatar-btn { display: none !important; } .vx-mobile-avatar-btn svg { width: 22px !important; height: 22px !important; } /* Logged-in: colored initials circle (reuses the existing avatar block) */ body.is-authenticated .vx-header-actions #headerUserBlock { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; min-width: 30px !important; max-width: 30px !important; flex: 0 0 30px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; } body:not(.is-authenticated) .vx-header-actions #headerUserBlock { display: none !important; } .vx-header-actions #headerUserBlock strong, .vx-header-actions #headerUserBlock small { display: none !important; } .vx-header-actions #headerUserBlock .vx-initials-avatar { width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 50% !important; font-size: 12px !important; } /* ---------- CHANGE 2 — hamburger drawer (spaces + quick links) ---------- */ body.vx-drawer-open { overflow: hidden !important; } .vx-spaces-drawer { position: fixed !important; inset: 0 !important; z-index: 1300 !important; pointer-events: none; } .vx-spaces-drawer.is-open { pointer-events: auto; } .vx-spaces-drawer[hidden] { display: none !important; } .vx-drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .24s ease; } .vx-spaces-drawer.is-open .vx-drawer-overlay { opacity: 1; } .vx-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 280px; max-width: 84vw; display: flex; flex-direction: column; background: var(--cw-surface); box-shadow: 2px 0 26px rgba(15, 23, 42, .22); transform: translateX(-100%); transition: transform .24s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .vx-spaces-drawer.is-open .vx-drawer-panel { transform: translateX(0); } .vx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; flex: 0 0 auto; } .vx-drawer-head strong { font-size: 16px; font-weight: 500; color: var(--cw-text); } .vx-drawer-close { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--cw-text-muted); font-size: 24px; line-height: 1; cursor: pointer; } .vx-drawer-space-list { display: flex; flex-direction: column; padding: 0 8px; } .vx-drawer-space { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 8px; border: 0; background: transparent; color: var(--cw-text); font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vx-drawer-space-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--cw-text-subtle); } .vx-drawer-space.is-active .vx-drawer-space-dot { background: var(--cw-accent); } .vx-drawer-space.is-active .vx-drawer-space-name { font-weight: 600; color: var(--cw-text); } .vx-drawer-space-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vx-drawer-space-add { color: var(--cw-accent-text); } .vx-drawer-space-add .vx-drawer-space-name { color: var(--cw-accent-text); font-weight: 500; } .vx-drawer-space-dot-add { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: transparent; color: var(--cw-accent-text); font-size: 17px; font-weight: 600; line-height: 1; } .vx-drawer-divider { height: 1px; margin: 8px 16px; background: rgba(15, 23, 42, .1); } .vx-drawer-links { display: flex; flex-direction: column; padding: 0 8px 18px; } .vx-drawer-link { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 8px; border: 0; background: transparent; color: var(--cw-accent-text); font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vx-drawer-link svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--cw-text-muted); } body:not(.is-authenticated) .vx-drawer-auth-logout { display: none; } body.is-authenticated .vx-drawer-auth-login { display: none; } body.is-authenticated .vx-drawer-auth-logout { color: var(--cw-danger); } body.is-authenticated .vx-drawer-auth-logout svg { color: var(--cw-danger); } /* ---------- CHANGE 3 — SNY: hidden when empty, slim strip when active ---------- */ #appShell > #todayVantage.collaboration-inbox:not(.has-sny-items) { display: none !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items, #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items.has-sny-expanded { height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: flex !important; align-items: center !important; gap: 8px !important; grid-template-columns: none !important; margin-bottom: 12px !important; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important; background: var(--cw-accent-tint) !important; box-shadow: none !important; overflow: hidden !important; cursor: pointer; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items .collab-inbox-head { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; height: 40px !important; min-height: 40px !important; max-height: none !important; grid-template-columns: none !important; grid-template-rows: none !important; padding: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items .collab-signal-glyph { grid-row: auto !important; grid-column: auto !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; padding: 0 !important; grid-template-columns: repeat(3, 3px) !important; gap: 2px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items .collab-signal-glyph i { background: var(--cw-accent) !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items .collab-inbox-head > span:not(.collab-signal-glyph) { display: none !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items .collab-inbox-head small { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; height: auto !important; color: transparent !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items .collab-inbox-head small::after { content: attr(data-mobile-summary) !important; position: static !important; inset: auto !important; display: block !important; color: var(--cw-accent-text) !important; font-size: 13px !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* chevron at the right edge of the strip */ #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items::after { content: "" !important; display: block !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; margin: 0 !important; inset: auto !important; position: static !important; background-color: var(--cw-accent-text) !important; background-image: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } #todayVantage.has-sny-items .collab-inbox-feed { display: none !important; } /* Tap to expand → vertical item list drops below the strip */ #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items.mobile-sny-open { height: auto !important; max-height: none !important; flex-wrap: wrap !important; padding: 0 16px 8px !important; } #todayVantage.today-card.full-width-vantage.collaboration-inbox.has-sny-items.mobile-sny-open::after { transform: rotate(90deg) !important; } #todayVantage.has-sny-items.mobile-sny-open .collab-inbox-feed { display: flex !important; flex-direction: column !important; flex: 1 1 100% !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 244px !important; gap: 6px !important; padding: 2px 0 4px !important; overflow-y: auto !important; } #todayVantage.has-sny-items.mobile-sny-open .collab-feed-item, #todayVantage.has-sny-items.mobile-sny-open .collab-feed-item.is-expanded { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; border-radius: 12px !important; } #todayVantage.has-sny-items.mobile-sny-open .collab-feed-trigger { height: auto !important; min-height: 44px !important; } /* ---------- CHANGE 4 — colorful iOS app-icon module tiles ---------- */ #assistantHero .mobile-hero-workspace-tray { display: none !important; } #assistantHero .assistant-grid-view { padding: 6px 0 4px !important; border: 0 !important; background: transparent !important; } #assistantHero .assistant-mobile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px 8px !important; padding: 4px 12px 8px !important; justify-items: center !important; } /* row group wayfinding labels (re-shown — earlier 768px rule hides them) */ #assistantHero .assistant-mobile-grid .assistant-row-label { display: block !important; grid-column: 1 / -1 !important; justify-self: start !important; width: 100% !important; margin: 6px 0 0 !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-align: left !important; color: var(--cw-accent-text) !important; } #assistantHero .assistant-mobile-grid > .assistant-row-label:first-child { margin-top: 0 !important; } /* tile = transparent card, colored icon square, label beneath */ #assistantHero .assistant-mobile-grid .clik-feature-card { min-height: 0 !important; height: auto !important; width: 100% !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; justify-items: center !important; align-content: start !important; gap: 6px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transition: transform .12s ease !important; -webkit-tap-highlight-color: transparent; } #assistantHero .assistant-mobile-grid .clik-feature-card:active { transform: scale(0.96) !important; } #assistantHero .assistant-mobile-grid .clik-feature-icon, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(2n) .clik-feature-icon, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(3n) .clik-feature-icon, #assistantHero .assistant-mobile-grid .clik-feature-card:nth-child(4n) .clik-feature-icon { grid-row: auto !important; width: 100% !important; max-width: 72px !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; } #assistantHero .assistant-mobile-grid .clik-feature-icon svg { width: 28px !important; height: 28px !important; color: var(--cw-surface) !important; stroke: var(--cw-surface) !important; fill: none !important; stroke-width: 1.7 !important; } #assistantHero .assistant-mobile-grid .clik-feature-card strong { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box !important; max-height: 2.4em !important; margin: 0 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--cw-text) !important; text-align: center !important; overflow: hidden !important; overflow-wrap: anywhere !important; } /* per-module gradient identities */ #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="brief-me"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="executive-signals"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="next-actions"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="calendar"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="email"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-danger), var(--cw-danger)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="people"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-success), var(--cw-success)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="reminders"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-warning), var(--cw-warning)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="voice"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-danger), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="todos"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="flowTasks"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="plans"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="notes"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-warning), var(--cw-warning)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="lists"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-success), var(--cw-success)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="lens"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-tint)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="attachi"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent)) !important; } #assistantHero .assistant-mobile-grid .clik-feature-card[data-assistant-key="mindMaps"] .clik-feature-icon { background: linear-gradient(135deg, var(--cw-warning), var(--cw-warning)) !important; } /* ---------- CHANGE 5 — icon-only footer bar ---------- */ .mobile-hero-icon-actions { grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; margin: 10px 0 0 !important; padding: 8px 0 !important; background: var(--cw-surface) !important; border-top: 0.5px solid rgba(15, 23, 42, .14) !important; } .mobile-hero-icon-action { min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 4px 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cw-text-muted) !important; font-size: 10px !important; font-weight: 500 !important; } .mobile-hero-icon-action svg { width: 24px !important; height: 24px !important; stroke: var(--cw-accent) !important; } .mobile-hero-icon-action span { min-width: 0 !important; font-size: 10px !important; color: var(--cw-text-muted) !important; } /* ---------- CHANGE 6 — tighter hero heading + search ---------- */ .assistant-hero-title-row .clik-hero-title { margin: 12px 0 10px !important; font-size: 26px !important; line-height: 1.1 !important; text-align: center !important; color: var(--cw-accent-text) !important; } #assistantHero .assistant-search-shell { width: auto !important; margin: 0 12px 16px !important; } #assistantHero .assistant-search-box { min-height: 44px !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 9px !important; padding: 0 14px !important; border-radius: 14px !important; } #assistantHero .assistant-search-box svg { width: 18px !important; height: 18px !important; } #assistantHero .assistant-search-box input { height: 42px !important; font-size: 15px !important; } } /* ============================================================================ EXECUTIVE SIGNALS — mobile refinements. Scoped to <=768px; desktop unchanged. Appended last so it wins source-order ties over the earlier mobile rules. ============================================================================ */ @media (max-width: 768px) { /* FIX 1 — action buttons side by side (was a full-width stacked grid) */ .ai-head.compact-ai-head { margin: 0 0 20px !important; justify-content: stretch !important; } .ai-actions-row { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; gap: 10px !important; width: 100% !important; } .ai-actions-row button { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 40px !important; padding: 0 14px !important; font-size: 14px !important; } /* FIX 2 — signal cards stack to a 2x2 grid with room for clean text */ .ai-command-centre .intel-grid, .intel-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .ai-command-centre .intel-card, .intel-card { padding: 14px !important; border-radius: 12px !important; min-height: auto !important; } /* FIX 2 + FIX 5 — card header: dot + shortened single-line title */ .intel-card .intel-title { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; } .intel-card .intel-title .intel-title-text { display: none !important; } .intel-card .intel-title::after { content: attr(data-mobile-title); font-size: 13px !important; font-weight: 600 !important; color: var(--color-text-primary) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } .intel-card .intel-dot { flex: 0 0 8px !important; width: 8px !important; height: 8px !important; } /* FIX 2 — card body text */ .intel-card .intel-empty, .intel-card .intel-item span, .intel-card .ai-hint { font-size: 12px !important; line-height: 1.5 !important; color: var(--color-text-secondary) !important; } /* FIX 4 — subtitle: muted weight, not bold */ .assistant-focus-head p { font-weight: 400 !important; color: var(--color-text-secondary) !important; font-size: 14px !important; } /* FIX 6 — page spacing: 26px title, tighter title→content rhythm */ .assistant-focus-head h2 { font-size: 26px !important; } body.is-assistant-focused .assistant-focus-panel { gap: 12px !important; } } /* ============================================================================ MOBILE KANBAN — iOS app-switcher / Trello-mobile redesign. Scoped to <=768px. Desktop is untouched: the tab bar is display:none and the wrapper is display:contents, so the 3 lanes stay direct grid items of .board on desktop. ============================================================================ */ .kanban-mobile-tabs { display: none; } .kanban-mobile-wrapper { display: contents; } @media (max-width: 768px) { /* ---- CHANGE 6: shorten the page title to "Flow" ---- */ #assistantFocusTitle[data-mobile-title] { font-size: 0 !important; line-height: 0 !important; } #assistantFocusTitle[data-mobile-title]::after { content: attr(data-mobile-title); font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--color-text-primary); } /* ---- CHANGE 6: slim Flow header — drop description + sub-row, slim pills ---- */ #assistantFocusContent .flow-workspace-head p, .flow-workspace-head p { display: none !important; } .flow-workspace-head .flow-lockup { display: none !important; } .flow-workspace-head { margin: 0 0 8px !important; } .flow-product-pills span { height: 32px !important; display: inline-flex !important; align-items: center !important; padding: 0 14px !important; } /* ---- CHANGE 1: column tab bar ---- */ .kanban-mobile-tabs { display: flex !important; align-items: stretch; height: 40px; margin: 0 0 10px; background: var(--cw-surface); border-bottom: 0.5px solid rgba(15, 23, 42, .14); } .kanban-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 4px; border: 0; background: transparent; color: var(--color-text-tertiary); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .kanban-tab.active { color: var(--cw-accent-text); font-weight: 600; border-bottom-color: var(--cw-accent-text); } .kanban-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-tab-count { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(15, 23, 42, .07); color: var(--cw-text-muted); font-size: 11px; font-weight: 500; } .kanban-tab.active .kanban-tab-count { background: rgba(var(--brand-rgb), .12); color: var(--cw-accent-active); } /* drop-armed (during long-press drag): pulse the tabs */ .kanban-mobile-tabs.kanban-drop-armed .kanban-tab { animation: kanbanTabPulse 1s ease-in-out infinite; } .kanban-mobile-tabs.kanban-drop-armed .kanban-tab.kanban-drop-hover { background: rgba(var(--brand-rgb), .12); border-bottom-color: var(--cw-accent-text); animation: none; } @keyframes kanbanTabPulse { 0%,100% { background: transparent; } 50% { background: rgba(var(--brand-rgb),.06); } } /* ---- CHANGE 1 + 4: horizontal swipeable columns ---- */ /* Only restyle/show the board once it is actually mounted into the focus panel. Without the .assistant-content-mounted gate this rule would override the framework's "#appShell > .assistant-content-module:not(.assistant-content-mounted) { display:none }" guard and leak the board onto the landing page on mobile. */ .board.scrollable-board#flowBoard.assistant-content-mounted { display: block !important; gap: 0 !important; overflow: hidden !important; padding: 0 !important; min-height: 0 !important; } #flowBoard .kanban-mobile-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } #flowBoard .kanban-mobile-wrapper .lane, #flowBoard .scrollable-board .lane { flex: 0 0 100% !important; width: 100% !important; height: auto !important; min-height: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } /* each column scrolls naturally, padded so the FAB never covers the last card */ #flowBoard .dropzone { display: flex !important; flex-direction: column !important; gap: 8px !important; height: auto !important; min-height: calc(100vh - 250px) !important; max-height: none !important; overflow: visible !important; padding: 4px 16px 100px !important; scroll-padding-bottom: 100px !important; } /* ---- CHANGE 5: slim column header (count + add only) ---- */ #flowBoard .lane-head { height: 36px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border-bottom: 0 !important; } #flowBoard .lane-head > span { display: none !important; } /* tab bar already names it */ #flowBoard .lane-head .lane-head-actions { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; } #flowBoard .lane-head b { order: 0; margin-right: auto !important; background: transparent !important; color: var(--color-text-tertiary) !important; font-size: 12px !important; font-weight: 400 !important; padding: 0 !important; min-width: 0 !important; } #flowBoard .lane-head b::after { content: " tasks"; } #flowBoard .lane-add-btn { opacity: 1 !important; width: 28px !important; height: 28px !important; border-radius: 8px !important; color: var(--cw-accent-text) !important; font-size: 20px !important; } /* ---- CHANGE 2: COLLAPSED card (default ~72px, one scannable row) ---- */ #flowBoard .task { position: relative !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; min-height: 64px !important; max-height: 72px !important; padding: 12px 14px !important; border: 0.5px solid var(--color-border-tertiary) !important; border-radius: 12px !important; background: var(--cw-surface) !important; box-shadow: none !important; overflow: hidden !important; cursor: pointer !important; touch-action: pan-y !important; transition: max-height 0.2s ease, box-shadow 0.18s ease, transform 0.18s ease !important; } /* hide everything by default, then opt specific pieces back in */ #flowBoard .task .task-desc, #flowBoard .task .task-signal-row, #flowBoard .task .assignee-mini-row, #flowBoard .task .actions, #flowBoard .task .owner-label, #flowBoard .task .owner-phone { display: none !important; } /* avatar (from topline) stays as the leading element */ #flowBoard .task .task-topline { order: 0 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 8px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #flowBoard .task .owner-avatar { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 50% !important; font-size: 12px !important; } #flowBoard .task .task-topline > div:not(.owner-avatar) { display: none !important; } /* name block hidden collapsed; avatar stays */ #flowBoard .task .owner-name { font-size: 13px !important; font-weight: 600 !important; color: var(--color-text-primary) !important; } #flowBoard .task .task-title { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--color-text-primary) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-height: none !important; } /* status cluster (from .meta): collapsed shows a status dot + overdue pill only */ #flowBoard .task .meta { order: 2 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; } #flowBoard .task .meta .pill.status-on_track, #flowBoard .task .meta .pill.status-at_risk, #flowBoard .task .meta .pill.status-delayed { width: 8px !important; height: 8px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; border: 0 !important; line-height: 0 !important; overflow: hidden !important; } #flowBoard .task .meta .pill.status-on_track { background: var(--cw-success) !important; } #flowBoard .task .meta .pill.status-at_risk { background: var(--cw-warning) !important; } #flowBoard .task .meta .pill.status-delayed { background: var(--cw-danger) !important; } /* hide section pill, Simple Plan pill, and non-overdue due pills */ #flowBoard .task .meta .pill:not(.status-on_track):not(.status-at_risk):not(.status-delayed):not(.due-overdue) { display: none !important; } #flowBoard .task .meta .pill.due-pill.due-overdue { display: inline-flex !important; align-items: center !important; padding: 3px 8px !important; border-radius: 999px !important; background: var(--cw-danger-bg) !important; color: var(--cw-danger) !important; border: 0 !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; } /* chevron */ #flowBoard .task::after { content: "" !important; display: block !important; order: 3 !important; flex: 0 0 8px !important; width: 8px !important; height: 13px !important; position: static !important; background-color: var(--cw-text-subtle); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; } /* ---- CHANGE 2: EXPANDED card (tap to expand) ---- */ #flowBoard .task.kanban-expanded { flex-wrap: wrap !important; max-height: 460px !important; align-items: flex-start !important; cursor: default !important; box-shadow: 0 4px 16px rgba(15, 23, 42, .08) !important; } #flowBoard .task.kanban-expanded::after { transform: rotate(90deg) !important; } /* owner row: avatar + name + priority */ #flowBoard .task.kanban-expanded .task-topline { order: 0 !important; width: 100% !important; } #flowBoard .task.kanban-expanded .task-topline > div:not(.owner-avatar) { display: block !important; } #flowBoard .task.kanban-expanded .task-title { order: 1 !important; flex: 1 1 100% !important; white-space: normal !important; margin: 6px 0 0 !important; } #flowBoard .task.kanban-expanded .task-signal-row { order: 2 !important; display: flex !important; flex: 1 1 100% !important; align-items: center !important; gap: 8px !important; margin: 8px 0 0 !important; } #flowBoard .task.kanban-expanded .task-signal-row .priority-signal, #flowBoard .task.kanban-expanded .task-signal-row .assignee-state { padding: 3px 9px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 500 !important; } /* assignees: small initials only, no names (max 3 + overflow already handled by markup) */ #flowBoard .task.kanban-expanded .assignee-mini-row { order: 3 !important; display: flex !important; flex: 1 1 100% !important; flex-wrap: wrap !important; gap: 4px !important; margin: 8px 0 0 !important; } #flowBoard .task.kanban-expanded .assignee-mini-row.owner-mini-row { display: none !important; } /* no duplicate owner pills */ #flowBoard .task.kanban-expanded .assignee-mini { gap: 0 !important; padding: 3px !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; overflow: hidden !important; font-size: 0 !important; } #flowBoard .task.kanban-expanded .assignee-mini b { font-size: 10px !important; } #flowBoard .task.kanban-expanded .assignee-mini.empty { width: auto !important; height: auto !important; border-radius: 999px !important; padding: 3px 9px !important; font-size: 11px !important; } /* status row: full pills */ #flowBoard .task.kanban-expanded .meta { order: 4 !important; flex: 1 1 100% !important; flex-wrap: wrap !important; gap: 6px !important; margin: 8px 0 0 !important; } #flowBoard .task.kanban-expanded .meta .pill.status-on_track, #flowBoard .task.kanban-expanded .meta .pill.status-at_risk, #flowBoard .task.kanban-expanded .meta .pill.status-delayed { width: auto !important; height: auto !important; padding: 3px 9px !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.2 !important; color: var(--cw-surface) !important; } #flowBoard .task.kanban-expanded .meta .pill:not(.simple-plan-task-pill) { display: inline-flex !important; } #flowBoard .task.kanban-expanded .meta .pill.simple-plan-task-pill { display: none !important; } /* drop "Simple Plan" noise */ /* action row: icon-only buttons */ #flowBoard .task.kanban-expanded .actions.compact-actions { order: 5 !important; display: flex !important; flex: 1 1 100% !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; margin: 10px 0 0 !important; padding-top: 10px !important; border-top: 0.5px solid var(--color-border-tertiary) !important; } #flowBoard .task.kanban-expanded .compact-actions button { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--color-text-secondary) !important; font-size: 0 !important; box-shadow: none !important; } #flowBoard .task.kanban-expanded .compact-actions button:active { color: var(--cw-accent-text) !important; } #flowBoard .task.kanban-expanded .compact-actions button::before { font-size: 18px !important; line-height: 1 !important; } #flowBoard .task.kanban-expanded .compact-actions .task-note-link-btn::before { content: "📝"; } #flowBoard .task.kanban-expanded .compact-actions .task-linked-notes-btn::before { content: "📋"; } #flowBoard .task.kanban-expanded .compact-actions .edit-task-btn::before { content: "✏️"; } #flowBoard .task.kanban-expanded .compact-actions .email-task-btn::before { content: "✉️"; } #flowBoard .task.kanban-expanded .compact-actions .delete-task-btn::before { content: "🗑"; } /* ---- CHANGE 3: long-press drag lift + ghost placeholder ---- */ #flowBoard .task.kanban-dragging { max-height: 72px !important; opacity: 0.95 !important; transform: scale(1.05) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important; transition: none !important; pointer-events: none !important; } .kanban-drag-ghost { border: 1px dashed rgba(var(--brand-rgb), .5); border-radius: 12px; background: var(--cw-accent-tint); } /* ---- CHANGE 3: swipe-to-move action button ---- */ #flowBoard .task .kanban-swipe-action { position: absolute; top: 0; bottom: 0; width: 56%; display: flex; align-items: center; justify-content: center; border: 0; color: var(--cw-surface); font-size: 13px; font-weight: 600; z-index: 3; transition: transform 0.2s ease; } #flowBoard .task .kanban-swipe-left { right: 0; border-radius: 0 12px 12px 0; background: var(--cw-success); transform: translateX(100%); } #flowBoard .task .kanban-swipe-right { left: 0; border-radius: 12px 0 0 12px; background: var(--cw-text-muted); transform: translateX(-100%); } #flowBoard .task .kanban-swipe-action.revealed { transform: translateX(0); } /* keep the quick-add input usable on mobile */ #flowBoard .lane-quick-add { padding: 0 16px 8px !important; } } /* ============================================================================ KANBAN MOBILE — two surgical fixes. Scoped to <=768px; desktop untouched. ============================================================================ */ @media (max-width: 768px) { /* FIX 1 — reinforce focus-mode chrome hiding for the Flow/Kanban module. These already resolve to display:none via the shared body.is-assistant-focused mechanism (styles.css:19944-19949); restated here, inside the mobile breakpoint, so the Kanban page stays full-screen even if that global rule ever shifts. */ body.is-assistant-focused .vx-header, body.is-assistant-focused .vx-footer, body.is-assistant-focused .mobile-hero-icon-actions, body.is-assistant-focused #todayVantage, body.is-assistant-focused .assistant-hero-title-row, body.is-assistant-focused .assistant-search-shell { display: none !important; } /* FIX 2 — remove the Today / Deep work / Momentum filter pills on mobile. Container is .flow-product-pills (index.html:996). Desktop keeps them. */ .flow-product-pills { display: none !important; } /* FIX 3 — tighten the header: the Flow info block (.flow-workspace-head) now has no visible content on mobile (logo, description, and pills are all hidden), so collapse it entirely. Header then flows title → subtitle → column tab bar with only the focus-panel's 12px gap between the subtitle and the tab bar. */ .flow-workspace-head { display: none !important; } body.is-assistant-focused .assistant-focus-head p { margin-bottom: 12px !important; } } /* ============================================================================ MODULE ISOLATION — body scroll lock on mobile (STEP 5). The fixed full-screen overlay modules (To-Dos / Notes / Reminders / Calendar / Email) scroll their own content internally, so we lock the body to stop the landing page underneath from rubber-banding / scroll-chaining into view. NOTE: the in-flow assistant-focus modules (Kanban, Exec Signals, Next 5, People, Voice) are intentionally NOT locked — they use body scroll for their own content (e.g. Kanban columns + history), and for them the landing is already removed from layout (display:none via body.is-assistant-focused), so there is nothing underneath to scroll into. Routes (Lists/Lens/Attachi) also use body scroll and already display:none the landing #appShell. ============================================================================ */ @media (max-width: 768px) { body.is-todo-focus, body.is-notes-focus, body.is-reminder-focus, body.is-calendar-focus, body.is-email-focus { overflow: hidden !important; } } /* ============================================================================ Vaia — embedded virtual meeting workspace (three-panel focus view) ============================================================================ */ #vaiaRouteView { display: none; } body.is-vaia-route { overflow: hidden; } body.is-vaia-route #vaiaRouteView { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; background: var(--cw-surface); color: var(--cw-accent-text); } .vaia-header { flex: 0 0 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid rgba(var(--brand-rgb), 0.16); background: linear-gradient(180deg, var(--cw-accent-tint), var(--cw-accent-tint)); } .vaia-back { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--cw-accent-active); padding: 6px 8px; border-radius: 8px; } .vaia-back:hover { background: rgba(var(--brand-rgb), 0.1); } .vaia-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .vaia-header-actions { display: flex; align-items: center; gap: 8px; } .vaia-pill { border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, box-shadow 0.15s, opacity 0.15s; } .vaia-pill:disabled { opacity: 0.55; cursor: default; } .vaia-pill-primary { background: var(--cw-accent); color: var(--cw-surface); } .vaia-pill-primary:hover:not(:disabled) { background: var(--cw-accent); } .vaia-pill-ghost { background: rgba(var(--brand-rgb), 0.1); color: var(--cw-accent-active); } .vaia-pill-ghost:hover:not(:disabled) { background: rgba(var(--brand-rgb), 0.18); } .vaia-pill-danger { background: var(--cw-danger); color: var(--cw-surface); } .vaia-pill-danger:hover:not(:disabled) { background: var(--cw-danger); } .vaia-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; } /* Left panel — video / list */ .vaia-video { flex: 1 1 60%; min-width: 640px; /* room for the full 100ms toolbar */ margin: 12px; border-radius: 12px; overflow: hidden; background: var(--cw-surface); border: 1px solid rgba(var(--brand-rgb), 0.14); display: flex; flex-direction: column; min-height: 0; position: relative; /* containing block for the absolutely-filled iframe */ } .vaia-video.vaia-video-live { background: var(--cw-accent); border-color: transparent; } /* Absolutely fill the whole panel so the iframe can't be half-width or short (sidesteps flex sizing + the iframe's 300x150 intrinsic size). This keeps the full 100ms toolbar visible and edge-to-edge. */ .vaia-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; pointer-events: auto; /* 100ms toolbar auto-hides; it needs mouse events */ z-index: 1; } .vaia-list { display: flex; flex-direction: column; height: 100%; padding: 16px; overflow-y: auto; } .vaia-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .vaia-list-head strong { font-size: 15px; } .vaia-list-rows { display: flex; flex-direction: column; gap: 8px; } .vaia-list-loading { padding: 28px; text-align: center; color: var(--cw-text-subtle); } .vaia-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(var(--brand-rgb), 0.14); border-radius: 10px; background: var(--cw-accent-tint); } .vaia-row-ic { display: inline-flex; width: 34px; height: 34px; border-radius: 8px; background: rgba(var(--brand-rgb), 0.12); align-items: center; justify-content: center; flex: 0 0 auto; } .vaia-row-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--cw-accent); stroke-width: 1.7; } .vaia-row-main { flex: 1 1 auto; min-width: 0; } .vaia-row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vaia-row-meta { font-size: 12px; color: var(--cw-text-subtle); margin-top: 2px; } .vaia-status-tag { text-transform: capitalize; font-weight: 600; } .vaia-status-live { color: var(--cw-danger); } .vaia-status-scheduled { color: var(--cw-accent-text); } .vaia-status-ended { color: var(--cw-text-subtle); } .vaia-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } .vaia-empty-ic { width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--brand-rgb), 0.12); display: flex; align-items: center; justify-content: center; } .vaia-empty-ic svg { width: 28px; height: 28px; fill: none; stroke: var(--cw-accent); stroke-width: 1.6; } .vaia-empty h3 { margin: 4px 0 0; font-size: 17px; } .vaia-empty p { margin: 0; color: var(--cw-text-subtle); font-size: 13px; max-width: 320px; } .vaia-empty-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } .vaia-video-stub { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 32px; color: var(--cw-accent-tint); } .vaia-video-stub h3 { margin: 6px 0 0; font-size: 18px; color: var(--cw-surface); } .vaia-video-stub p { margin: 0; font-size: 13px; color: var(--cw-accent-text); max-width: 380px; } .vaia-video-stub code { background: rgba(255, 255, 255, 0.12); padding: 1px 6px; border-radius: 5px; font-size: 12px; } .vaia-stub-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-warning); background: rgba(255, 210, 125, 0.14); padding: 4px 10px; border-radius: 999px; } .vaia-video-stub-ready .vaia-stub-badge { color: var(--cw-success); background: rgba(126, 240, 184, 0.14); } /* Right panel — meeting intel */ .vaia-intel { flex: 1 1 40%; min-width: 340px; border-left: 1px solid rgba(var(--brand-rgb), 0.16); display: flex; flex-direction: column; padding: 16px; min-height: 0; } .vaia-intel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .vaia-intel-title { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vaia-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .vaia-badge-live { background: var(--cw-danger); color: var(--cw-surface); } .vaia-badge-ended { background: var(--cw-accent-tint); color: var(--cw-text-muted); } .vaia-badge-scheduled { background: rgba(var(--brand-rgb), 0.14); color: var(--cw-accent-active); } .vaia-tabs { display: flex; gap: 4px; margin: 14px 0 12px; border-bottom: 1px solid rgba(var(--brand-rgb), 0.14); } .vaia-tab { border: none; background: transparent; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--cw-text-subtle); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .vaia-tab.active { color: var(--cw-accent-active); border-bottom-color: var(--cw-accent-text); } .vaia-tab-body { flex: 1 1 auto; overflow-y: auto; font-size: 13px; line-height: 1.6; } .vaia-tab-empty { color: var(--cw-text-subtle); text-align: center; padding: 32px 12px; } .vaia-transcript { white-space: normal; } .vaia-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .vaia-actions li { padding-left: 22px; position: relative; } .vaia-actions li::before { content: "☐"; position: absolute; left: 0; color: var(--cw-accent-text); } .vaia-actions li.done { text-decoration: line-through; color: var(--cw-text-subtle); } .vaia-actions li.done::before { content: "☑"; } /* Interactive action items use real checkboxes (no ::before glyph). */ .vaia-actions-interactive li { padding-left: 0; } .vaia-actions-interactive li::before { content: none; } .vaia-actions-interactive label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .vaia-actions-interactive input[type="checkbox"] { margin-top: 2px; accent-color: var(--cw-accent-text); } .vaia-action-add { margin-top: 12px; } .vaia-action-add input { width: 100%; border: 1px solid rgba(var(--brand-rgb), 0.22); border-radius: 8px; padding: 8px 10px; font-size: 13px; } .vaia-action-add input:focus { outline: none; border-color: var(--cw-accent-text); } .vaia-actions-create { margin-top: 12px; } /* Transcript tab */ .vaia-transcript-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .vaia-transcript-hint { font-size: 11px; color: var(--cw-text-subtle); } .vaia-transcript-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; max-height: 100%; overflow-y: auto; } .vaia-interim { color: var(--cw-text-subtle); font-style: italic; } /* Summary tab */ .vaia-summary-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .vaia-summary-list li { font-size: 14px; line-height: 1.5; } .vaia-summary-empty { text-align: center; padding: 28px 12px; } /* Post-meeting actions */ .vaia-post-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; } .vaia-post-divider { height: 1px; background: rgba(var(--brand-rgb), 0.14); margin: 6px 0 8px; } .vaia-ghost-action { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--cw-accent-text); font-size: 13px; font-weight: 600; padding: 8px 6px; border-radius: 8px; cursor: pointer; text-align: left; } .vaia-ghost-action:hover { background: rgba(var(--brand-rgb), 0.08); } /* Ended summary card (left panel) */ .vaia-ended-card { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 32px; } .vaia-ended-card h3 { margin: 4px 0 0; font-size: 18px; } .vaia-ended-card p { margin: 0; color: var(--cw-text-subtle); font-size: 13px; } .vaia-stub-badge-ended { color: var(--cw-text-muted); background: var(--cw-accent-tint); } /* Bottom panel — participants */ .vaia-participants { flex: 0 0 72px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-top: 1px solid rgba(var(--brand-rgb), 0.16); overflow-x: auto; background: var(--cw-surface); } .vaia-part { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; } .vaia-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cw-surface); font-size: 13px; font-weight: 700; } .vaia-avatar .vaia-online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--cw-success); border: 2px solid var(--cw-surface); } .vaia-part-name { font-size: 11px; color: var(--cw-text-subtle); max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Live meeting → render the 100ms iframe as a FULL-VIEWPORT overlay, exactly like opening the room URL in its own browser tab (the proven-good condition). Giving the iframe the entire viewport height stops 100ms's top bar and bottom mic/camera/leave toolbar from being vertically clipped: a shorter embedded panel (viewport − header − participants − margins) doesn't leave the app enough height, so its content overflows and the ends are cut by the panel's overflow:hidden. The Vaia controls float over the top as a thin bar; Meeting Intel slides in as a right-side drawer above the video. */ .vaia-live .vaia-body { overflow: visible; } /* Video panel covers the whole viewport; .vaia-video iframe (position:absolute; inset:0) then fills it edge-to-edge — top bar and bottom toolbar included. */ .vaia-live .vaia-video.vaia-video-live { position: fixed; inset: 0; margin: 0; border: none; border-radius: 0; z-index: 1000; } /* Header → thin translucent control bar floating over the video. The empty middle lets pointer events fall through to the 100ms UI underneath; the actual controls re-enable pointer events. */ .vaia-live .vaia-header { position: fixed; top: 0; left: 0; right: 0; height: 46px; flex: none; padding: 0 12px; background: linear-gradient(180deg, rgba(15, 14, 26, 0.82), rgba(15, 14, 26, 0)); border-bottom: none; z-index: 1001; pointer-events: none; } .vaia-live .vaia-header .vaia-back, .vaia-live .vaia-header .vaia-header-actions { pointer-events: auto; } .vaia-live .vaia-back { color: var(--cw-surface); } .vaia-live .vaia-back:hover { background: rgba(255, 255, 255, 0.14); } /* Mid-call the header is just Back / Meeting intel / End meeting. */ .vaia-live #vaiaInstantBtn { display: none; } /* Participants strip isn't needed during a live call (everyone is in the 100ms tiles) and would otherwise steal viewport height from the iframe. */ .vaia-live .vaia-participants { display: none; } /* Meeting Intel drawer sits ABOVE the full-viewport video overlay. */ .vaia-live .vaia-intel { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 88%; background: var(--cw-surface); border-left: 1px solid rgba(var(--brand-rgb), 0.16); box-shadow: -10px 0 28px rgba(26, 22, 46, 0.16); transform: translateX(100%); transition: transform 0.22s ease; z-index: 1002; } .vaia-live .vaia-intel.open { transform: translateX(0); } #vaiaIntelToggle.active { background: var(--cw-accent); color: var(--cw-surface); } /* Below this the 640px video + 340px intel can't sit side-by-side comfortably, so stack them: the video takes full width (full toolbar) with a usable fixed height, and the page scrolls. */ @media (max-width: 1024px) { .vaia-body { flex-direction: column; overflow-y: auto; } .vaia-video { flex: 0 0 auto; min-width: 0; height: 56vh; margin: 8px; } .vaia-intel { flex: 1 1 auto; min-width: 0; border-left: none; border-top: 1px solid rgba(var(--brand-rgb), 0.16); } /* But a LIVE meeting stays a full-viewport overlay at every width — exactly like opening the 100ms room in its own tab. The 56vh panel rule above is only for the non-live stacked list/stub; letting it apply while live gives the fixed video box an explicit height:56vh, which over-constrains inset:0, shortens the iframe, and drops the 100ms bottom toolbar below the fold. */ .vaia-live .vaia-body { overflow: visible; } .vaia-live .vaia-video.vaia-video-live { inset: 0; height: auto; margin: 0; } } /* ===================================================================== MOBILE LANDING (≤640px) — AI-first home. Self-contained and fully gated: desktop/tablet never render any of this. Reproduces the premium spec palette exactly. Cross-browser safe (flexbox + CSS grid + standard properties only; safe-area insets; dvh with vh fallback; >=44px taps; :active press states; no hover dependency). ===================================================================== */ #mobileLanding { display: none; } /* >640px: never shown */ @media (max-width: 640px) { /* The new mobile home fully replaces the legacy stacked landing. */ .vx-header { display: none !important; } #appShell.shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #appShell > #todayVantage, #appShell > .assistant-hero-title-row, #appShell > .mobile-hero-icon-actions, #appShell > [data-assistant-content] { display: none !important; } /* The assistant hero stays in the DOM (voice/signals/flow/next-actions render their focus panel inside it). Collapse its landing chrome on the home view; when a module is focused it keeps its normal styling so the panel reads well. A mounted [data-assistant-content] node lives inside #assistantFocusPanel — no longer a direct child of #appShell — so the hide rule above stops applying and it shows. */ #assistantHero .assistant-search-shell, #assistantHero #mobileHeroWorkspaceTray, #assistantHero #assistantGridView { display: none !important; } body:not(.is-assistant-focused) #assistantHero.assistant-hero { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; } /* Mobile home steps aside whenever a module view is open. Route views hide #appShell on their own; these are the same-shell focus states. */ body.is-assistant-focused #mobileLanding, body.is-todo-focus #mobileLanding, body.is-reminder-focus #mobileLanding, body.is-notes-focus #mobileLanding, body.is-calendar-focus #mobileLanding, body.is-email-focus #mobileLanding, body.is-detailed-route #mobileLanding, body.is-voice-detail-route #mobileLanding { display: none !important; } #mobileLanding { display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; width: 100%; min-height: 100vh; /* fallback */ min-height: 100dvh; /* no iOS Safari address-bar jump */ background: var(--cw-surface); color: var(--cw-text); padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 28px) calc(env(safe-area-inset-left, 0px) + 18px); -webkit-tap-highlight-color: transparent; font-family: inherit; } #mobileLanding *, #mobileLanding *::before, #mobileLanding *::after { box-sizing: border-box; } #mobileLanding button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ---- 1. Top bar ---- */ .ml-topbar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .ml-topbar-lead { display: flex; align-items: center; gap: 4px; min-width: 0; } .ml-hamburger { margin-left: -10px; } /* optical-align the bars to the edge */ .ml-brand { display: flex; align-items: center; min-width: 0; } .ml-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--cw-text); } .ml-topbar-actions { display: flex; align-items: center; gap: 4px; } .ml-icon-btn { width: 44px; height: 44px; border: none; background: none; color: var(--cw-text-muted); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; } .ml-icon-btn svg { width: 23px; height: 23px; } .ml-icon-btn:active { background: var(--cw-accent-tint); color: var(--cw-accent-active); } /* ---- Profile / menu popover ---- */ .ml-menu { position: absolute; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 58px); right: calc(env(safe-area-inset-right, 0px) + 16px); width: 232px; max-width: calc(100vw - 32px); background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 16px; box-shadow: 0 18px 44px rgba(23, 23, 31, .16); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .ml-menu[hidden] { display: none; } .ml-menu-item { text-align: left; min-height: 44px; padding: 0 12px; border: none; background: none; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cw-text); touch-action: manipulation; } .ml-menu-item[hidden] { display: none; } .ml-menu-item:active { background: var(--cw-accent-tint); } .ml-menu-item-danger { color: var(--cw-danger); } /* ---- 2. Greeting ---- */ .ml-greeting { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; } .ml-greeting-title { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.3px; color: var(--cw-text); } .ml-greeting-sub { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--cw-text-muted); } .ml-attention { color: var(--cw-accent-text); font-weight: 600; } /* ---- 3. AI command bar (hero) ---- */ .ml-ask { display: flex; align-items: center; gap: 10px; background: var(--cw-surface); border: 1px solid rgba(var(--brand-rgb), .30); border-radius: 16px; padding: 0 12px; min-height: 56px; box-shadow: 0 6px 18px rgba(var(--brand-rgb), .08); } .ml-ask:focus-within { border-color: var(--cw-accent-text); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); } .ml-ask-spark { flex: 0 0 auto; color: var(--cw-accent-text); display: inline-flex; } .ml-ask-spark svg { width: 22px; height: 22px; } .ml-ask-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; height: 52px; padding: 0; font-size: 15px; color: var(--cw-text); font-family: inherit; } .ml-ask-input::placeholder { color: var(--cw-text-subtle); } .ml-ask-mic { flex: 0 0 auto; width: 40px; height: 40px; border: none; background: none; color: var(--cw-accent-text); border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; } .ml-ask-mic svg { width: 21px; height: 21px; } .ml-ask-mic:active { background: var(--cw-accent-tint); } .ml-ask-mic.listening { background: var(--cw-accent); color: var(--cw-surface); } /* ---- 4. Suggested prompt chips ---- */ .ml-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ml-chip { min-height: 36px; padding: 0 14px; background: var(--cw-accent-tint); border: 1px solid rgba(var(--brand-rgb), .2); color: var(--cw-accent-active); border-radius: 999px; font-size: 13px; font-weight: 600; touch-action: manipulation; } .ml-chip:active { background: var(--cw-accent-tint); } /* ---- 5. Up next intelligence card ---- */ .ml-upnext { display: flex; flex-direction: column; gap: 8px; background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 16px; padding: 14px 14px 6px; box-shadow: 0 4px 16px rgba(23, 23, 31, .04); } .ml-upnext[hidden] { display: none; } .ml-upnext-label { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--cw-text-muted); text-transform: uppercase; } .ml-upnext-body { display: flex; flex-direction: column; } .ml-upnext-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .ml-upnext-row-task { cursor: pointer; } .ml-upnext-divider { height: 1px; background: var(--cw-surface-muted); } .ml-upnext-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--cw-accent-tint); color: var(--cw-accent-text); display: inline-flex; align-items: center; justify-content: center; } .ml-upnext-ic svg { width: 20px; height: 20px; } .ml-upnext-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ml-upnext-title { font-size: 14.5px; font-weight: 600; color: var(--cw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-upnext-meta { font-size: 12.5px; color: var(--cw-text-muted); } .ml-join { flex: 0 0 auto; min-height: 36px; padding: 0 16px; background: var(--cw-accent); color: var(--cw-surface); border: none; border-radius: 10px; font-size: 13px; font-weight: 700; touch-action: manipulation; } .ml-join:active { background: var(--cw-accent-active); } /* ---- 6. Workspace section label ---- */ .ml-section-label { margin: 4px 0 -4px; font-size: 13px; font-weight: 600; color: var(--cw-text-muted); } /* ---- 7. Module grid (3 columns) ---- */ .ml-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ml-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 92px; padding: 14px 6px; background: var(--cw-accent-tint); border: 1px solid var(--cw-border); border-radius: 16px; color: var(--cw-text); text-align: center; touch-action: manipulation; -webkit-transition: -webkit-transform .08s ease, background .12s ease; transition: transform .08s ease, background .12s ease; } .ml-tile:active { -webkit-transform: scale(.96); transform: scale(.96); background: var(--cw-accent-tint); } .ml-tile-chip { width: 44px; height: 44px; border-radius: 13px; /* Strong filled chip — the brand app-icon gradient, same purple as the People Hub "Import contacts" button and the + FAB (not the pale tint). Icons render white via currentColor. Mobile-only; desktop tiles untouched. */ background: var(--cw-accent-gradient); color: var(--cw-text-on-accent); display: inline-flex; align-items: center; justify-content: center; } /* Crisp white glyphs inside the filled chip (icons are stroke-based). */ .ml-tile-chip svg { width: 23px; height: 23px; color: var(--cw-text-on-accent); stroke: var(--cw-text-on-accent); } .ml-tile-label { font-size: 12.5px; font-weight: 600; line-height: 1.1; color: var(--cw-text); } @media (hover: hover) { .ml-tile:hover { background: var(--cw-accent-tint); } .ml-chip:hover { background: var(--cw-accent-tint); } .ml-icon-btn:hover { color: var(--cw-accent-active); } } } /* 360px-class devices (Samsung/Android): tighten so 3 columns never overflow. */ @media (max-width: 380px) { #mobileLanding .ml-grid { gap: 8px; } #mobileLanding .ml-tile { min-height: 86px; padding: 12px 4px; } #mobileLanding .ml-tile-chip { width: 40px; height: 40px; } #mobileLanding .ml-tile-chip svg { width: 21px; height: 21px; } #mobileLanding .ml-tile-label { font-size: 11.5px; } } /* ========================================================================== THEME UNIFICATION — re-point every legacy global color variable to the canonical --cw-* tokens. Appended LAST so it overrides all earlier :root definitions (--vx-*, --cp-*, --google-*, --lp-*, --color-*, --reminder-*), making the whole app resolve to one calm purple theme. Scoped module vars (.todo/.notes/.reminder-focus-view) and the per-module CSS files are re-pointed in their own files. ========================================================================== */ :root { /* text */ --vx-ink: var(--cw-text); --vx-graphite: var(--cw-text); --vx-black: var(--cw-text); --cp-text: var(--cw-text); --text-primary: var(--cw-text); --color-text-primary: var(--cw-text); --vx-muted: var(--cw-text-muted); --cp-text-muted: var(--cw-text-muted); --cp-text-secondary: var(--cw-text-muted); --text-secondary: var(--cw-text-muted); --color-text-secondary: var(--cw-text-muted); --color-text-tertiary: var(--cw-text-subtle); /* borders / dividers */ --vx-line: var(--cw-border); --border: var(--cw-border); --border-soft: var(--cw-border); --cp-border: var(--cw-border); --google-blue-line: var(--cw-border); --color-border-tertiary: var(--cw-border); --vx-line-strong: var(--cw-border-strong); --cp-border-hover: var(--cw-border-strong); /* page background */ --vx-canvas: var(--cw-bg); --cp-bg: var(--cw-bg); --bg: var(--cw-bg); --color-background-primary: var(--cw-bg); /* card / panel surfaces */ --vx-card: var(--cw-surface); --vx-card-solid: var(--cw-surface); --vx-surface: var(--cw-surface); --vx-surface-strong: var(--cw-surface); --cp-surface: var(--cw-surface); --surface: var(--cw-surface); /* soft / muted lavender surfaces */ --cp-surface-soft: var(--cw-surface-muted); --surface-soft: var(--cw-surface-muted); --color-background-secondary: var(--cw-surface-muted); --google-blue-soft: var(--cw-surface-muted); /* accent — every legacy accent (purple/blue/gold/bronze) → ONE brand purple */ --vx-violet: var(--cw-accent); --vx-purple: var(--cw-accent); --vx-gold: var(--cw-accent); --vx-blue: var(--cw-accent); --vx-bronze: var(--cw-accent); --cp-blue: var(--cw-accent); --cp-purple: var(--cw-accent); --google-blue: var(--cw-accent); --google-blue-dark: var(--cw-accent-active); --lp-purple: var(--cw-accent); --color-accent: var(--cw-accent); --reminder-accent: var(--cw-accent); /* soft accent tints / chips */ --vx-violet-soft: var(--cw-accent-tint); --vx-blue-soft: var(--cw-accent-tint); --vx-champagne: var(--cw-accent-tint); --lp-purple-tint: var(--cw-accent-tint); --color-accent-tint: var(--cw-accent-tint); --reminder-chip: var(--cw-accent-soft-bg); /* reminders page chrome (was beige) → neutral surfaces/text */ --reminder-bg: var(--cw-bg); --reminder-border: var(--cw-border); --reminder-text: var(--cw-text); --reminder-muted: var(--cw-text-muted); /* focus tint */ --vx-focus: rgba(var(--brand-rgb), 0.25); /* semantic — keep meaning, use the tinted token palette */ --vx-green: var(--cw-success); --google-green: var(--cw-success); --vx-green-soft: var(--cw-success-bg); --google-green-soft: var(--cw-success-bg); --vx-yellow: var(--cw-warning); --vx-yellow-soft: var(--cw-warning-bg); --vx-red: var(--cw-danger); --google-red: var(--cw-danger); --vx-red-soft: var(--cw-danger-bg); --google-red-soft: var(--cw-danger-bg); } /* ============================================================ Kanban card: compact collapsed state + expandable details panel. Collapsed (desktop) = title + one meta row (priority + due + avatar stack) + footer chevron. Details panel holds owners, description, assignee chips, status pills and actions. Mobile (<=768px) keeps its existing tap-to-expand layer, so the new wrappers are made transparent (display:contents) or hidden there. Colors/spacing use --cw-* tokens. ============================================================ */ /* Collapsed meta row */ .task-collapsed-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Overlapping assignee avatars (collapsed) */ .assignee-stack { display: inline-flex; align-items: center; margin-left: auto; } .assignee-avatar-mini { width: 26px; height: 26px; margin-left: -8px; border-radius: var(--cw-radius-pill); display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--cw-accent-soft-text); background: var(--cw-accent-soft-bg); border: 2px solid var(--cw-surface); box-shadow: var(--cw-shadow-sm); } .assignee-avatar-mini:first-child { margin-left: 0; } .assignee-avatar-mini.overflow { color: var(--cw-text-muted); background: var(--cw-surface-muted); } /* Footer chevron toggle */ .task-footer { display: flex; justify-content: center; margin-top: 8px; } .task-details-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; padding: 0; border: 1px solid var(--cw-border); border-radius: var(--cw-radius-pill); background: var(--cw-surface-muted); color: var(--cw-text-muted); cursor: pointer; transition: background .18s ease, color .18s ease; } .task-details-toggle:hover { background: var(--cw-surface-hover); color: var(--cw-text); } .task-details-toggle:focus-visible { outline: none; box-shadow: var(--cw-focus-ring); } .task-details-toggle svg { transition: transform .24s ease; } /* chevron-down */ .task.details-open .task-details-toggle svg { transform: rotate(180deg); } /* chevron-up */ /* Collapsible panel + animation (desktop only) */ @media (min-width: 769px) { .task-details { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .28s ease, opacity .2s ease; } .task.details-open .task-details { max-height: 1200px; opacity: 1; } /* priority already shown in the collapsed meta row; details keeps "N assigned" */ .task-details .task-signal-row .priority-signal { display: none; } } /* Mobile keeps its own tap-to-expand layer untouched */ @media (max-width: 768px) { #flowBoard .task .task-details { display: contents !important; } #flowBoard .task .task-collapsed-meta, #flowBoard .task .task-footer { display: none !important; } } /* ============================================================ Clik Work Kanban — column color on the CARD + compact 3-row card. CHANGE 1: columns revert to neutral (no wash); column color now lives on the card (bg + border + 3px left rail), driven by data-column and --cw-* tokens. CHANGE 2: tighter 3-row card (~half height). Dark mode: token overrides keep tints, rails and text legible. ============================================================ */ :root { --cw-col-backlog-bg: #F4F6F8; --cw-col-backlog-border: #CDD5DF; --cw-col-backlog-rail: #64748B; --cw-col-backlog-tint: #E2E8F0; --cw-col-progress-bg: #FDF6EC; --cw-col-progress-border: #F3DCB5; --cw-col-progress-rail: #D97706; --cw-col-progress-tint: #FBEACB; --cw-col-done-bg: #F0FAF3; --cw-col-done-border: #BCE7C8; --cw-col-done-rail: #16A34A; --cw-col-done-tint: #D7F0DE; --cw-card-divider: rgba(15, 23, 42, .10); --cw-col-card-text: var(--cw-text); --cw-col-card-text-muted: var(--cw-text-muted); --cw-col-card-surface: var(--cw-surface); } @media (prefers-color-scheme: dark) { :root { /* Brand FLUENT PURPLE — dark ramp. Re-pointed to the dark-aware Fluent brand tokens (theme.css), which already brighten on dark surfaces. Kept distinct from the semantic "done"/success rail (#34D399). */ --cw-accent: var(--brand-primary); /* primary: CTA bg, active icon, hero accent */ --cw-accent-text: var(--brand-foreground);/* links + stat text (light purple on dark) */ --cw-accent-deep: var(--brand-pressed); /* solid-card fill stays deep so white text stays AA */ --cw-accent-hover: var(--brand-hover); --cw-accent-active: var(--brand-hover); /* hover / pressed */ --cw-accent-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-hover)); --cw-accent-soft: var(--brand-primary); /* soft accent: focus rings, borders, soft icons */ --cw-accent-soft-bg: var(--bg-card-accent); /* dark tinted panel (where light uses --brand-tint) */ --cw-accent-soft-border: rgba(var(--brand-rgb), 0.30); --cw-accent-soft-text: var(--brand-foreground);/* light-purple deep text on dark tinted fills */ --cw-accent-tint: var(--bg-card-accent); /* active nav, soft icon chips (dark fill) */ --cw-accent-tint-hover: #343048; /* hover fill on dark tinted elements */ --cw-focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.40); --cw-shadow-accent: 0 8px 24px rgba(var(--brand-rgb), 0.22); --cw-col-backlog-bg: #1B212B; --cw-col-backlog-border: #39434F; --cw-col-backlog-rail: #94A3B8; --cw-col-backlog-tint: #2A323D; --cw-col-progress-bg: #2A2012; --cw-col-progress-border: #56401E; --cw-col-progress-rail: #FBBF24; --cw-col-progress-tint: #3D2F17; --cw-col-done-bg: #122319; --cw-col-done-border: #2C4A37; --cw-col-done-rail: #34D399; --cw-col-done-tint: #1C3A29; --cw-card-divider: rgba(255, 255, 255, .14); --cw-col-card-text: #E8EAF1; --cw-col-card-text-muted: #B7BCC8; --cw-col-card-surface: #1A1D24; /* Notes paper flips to a soft WARM dark sheet (not a glaring cream sheet), with warm off-white ink. Same token names → the surface flips with theme. */ --cw-paper-bg: #211F1B; --cw-paper-page: #17150F; --cw-paper-ink: #EDE7DA; --cw-paper-ink-soft: #BCB4A4; --cw-paper-rule: rgba(237,231,218,0.08); --cw-paper-margin: rgba(216,150,140,0.20); --cw-paper-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.55); /* Apple Notes' flat soft-dark writing surface — no shadow, no card. */ --cw-note-surface: #1C1C1E; /* Date-group header — flat Apple-style on dark: legible muted-grey ink on a faint white hairline divider (no purple, no fill). */ --cw-date-bar-text: #B7BCC8; --cw-date-bar-border: rgba(255,255,255,0.12); } /* Keep the Notes view coherent in dark mode: the warm dark sheet sits on a deeper warm-dark page, with the focus-view chrome re-pointed to warm ink. (Scoped to the Notes focus view only — the rest of the app is unchanged.) */ body.is-notes-focus .notes-focus-view { background: var(--cw-note-surface); --notes-ink: var(--cw-paper-ink); --notes-muted: var(--cw-paper-ink-soft); --notes-sep: rgba(237,231,218,0.12); /* Brand accent pops on the warm-dark sheet (dark-aware purple). */ --notes-accent: var(--cw-accent); } body.is-notes-focus .notes-focus-view .notes-icon-btn, body.is-notes-focus .notes-focus-view .notes-focus-back { color: var(--cw-paper-ink-soft); } body.is-notes-focus .notes-focus-view .note-row-act { color: var(--cw-paper-ink-soft); } body.is-notes-focus .notes-focus-view .note-row-act:hover { background: rgba(237,231,218,0.10); color: var(--cw-paper-ink); } } /* --- CHANGE 1a: columns neutral (remove the faint column wash) --- */ #flowBoard .lane { background: transparent !important; } /* Per-column color vars (drive header dot/title/count badge). */ #flowBoard .lane[data-section="backlog"] { --cw-col-rail: var(--cw-col-backlog-rail); --cw-col-tint: var(--cw-col-backlog-tint); } #flowBoard .lane[data-section="in_progress"]{ --cw-col-rail: var(--cw-col-progress-rail); --cw-col-tint: var(--cw-col-progress-tint); } #flowBoard .lane[data-section="completed"] { --cw-col-rail: var(--cw-col-done-rail); --cw-col-tint: var(--cw-col-done-tint); } /* --- CHANGE 1b: keep colored dot + colored title + tinted count in header --- */ #flowBoard .lane-head span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--cw-col-rail, var(--cw-text-subtle)); vertical-align: middle; } #flowBoard .lane-head span { color: var(--cw-col-rail) !important; font-weight: 650 !important; } #flowBoard .lane-head b { background: var(--cw-col-tint) !important; color: var(--cw-col-rail) !important; } /* --- Card sits on a near-white surface; the ONLY treatment is the 2px column rail --- */ #flowBoard .task { padding: 8px 8px 8px 11px !important; border: 1px solid var(--cw-card-divider) !important; border-radius: 10px !important; background: var(--cw-col-card-surface) !important; box-shadow: none !important; min-height: 0 !important; } #flowBoard .task[data-column="backlog"] { border-left: 2px solid var(--cw-col-backlog-rail) !important; } #flowBoard .task[data-column="progress"] { border-left: 2px solid var(--cw-col-progress-rail) !important; } #flowBoard .task[data-column="done"] { border-left: 2px solid var(--cw-col-done-rail) !important; } /* Row 1 — title only, tight, 2-line clamp */ #flowBoard .task-title { font-size: 12.5px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: 0 !important; margin: 0 0 5px !important; padding-right: 2px !important; color: var(--cw-col-card-text) !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Row 2 — owner avatar + priority pill + note icon, one tight line */ #flowBoard .task-collapsed-meta { margin-top: 0 !important; gap: 6px !important; flex-wrap: nowrap !important; } #flowBoard .task-collapsed-meta .owner-avatar-mini { width: 18px !important; height: 18px !important; min-width: 18px !important; flex: 0 0 18px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0 !important; color: var(--cw-accent-soft-text) !important; background: var(--cw-accent-soft-bg) !important; border: 0 !important; } #flowBoard .task-collapsed-meta .priority-signal { padding: 1px 8px !important; font-size: 10.5px !important; border-radius: var(--cw-radius-pill) !important; } #flowBoard .task-note-icon-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; min-width: 22px; padding: 0; border: 0; background: none; color: var(--cw-col-card-text-muted); border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; } #flowBoard .task-note-icon-btn:hover { background: var(--cw-surface-hover); color: var(--cw-accent-text); } #flowBoard .task-note-icon-btn svg { width: 15px; height: 15px; } /* Row 3 — chevron only, thin 0.5px top divider */ #flowBoard .task-footer { margin-top: 6px !important; padding-top: 5px !important; border-top: 0.5px solid var(--cw-card-divider) !important; justify-content: center !important; } #flowBoard .task-details-toggle { width: 22px !important; height: 16px !important; border: 0 !important; background: none !important; color: var(--cw-col-card-text-muted) !important; } #flowBoard .task-details-toggle:hover { background: none !important; color: var(--cw-text) !important; } #flowBoard .task-details-toggle svg { width: 13px !important; height: 13px !important; } /* Keep expanded body text legible on the tint, incl. dark mode */ #flowBoard .task-desc { color: var(--cw-col-card-text-muted) !important; } /* ============================================================ Kanban card redesign — icons + text, NO inner boxes. Card = column flex; only treatment is the 2px column rail. ============================================================ */ #flowBoard .task { display: flex !important; flex-direction: column; gap: 0; color: var(--cw-col-card-text) !important; align-items: flex-start !important; text-align: left !important; } #flowBoard .task .cw-ic { width: 15px; height: 15px; flex: 0 0 auto; } /* Row 1 title — always left-aligned (don't inherit any centered context) */ #flowBoard .task-title { color: var(--cw-col-card-text) !important; text-align: left !important; } #flowBoard .task-desc, #flowBoard .task-collapsed-meta { text-align: left !important; } /* Row 2 (collapsed): avatar · flag+text · note icon · chevron (pushed right) */ #flowBoard .task-collapsed-meta { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; } #flowBoard .task-collapsed-meta .owner-avatar-mini { width: 18px !important; height: 18px !important; min-width: 18px !important; flex: 0 0 18px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0 !important; color: var(--cw-accent-soft-text) !important; background: var(--cw-accent-soft-bg) !important; border: 0 !important; } #flowBoard .task-collapsed-meta .task-details-toggle { margin-left: auto !important; } #flowBoard .task.details-open .task-collapsed-meta { display: none !important; } /* Flag + priority text (no pill) — colour by priority via tokens */ #flowBoard .task-flag { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font-size: 11px; font-weight: 600; color: var(--cw-col-card-text-muted); } #flowBoard .task-flag.priority-critical { color: var(--cw-danger); } #flowBoard .task-flag.priority-high { color: var(--cw-warning); } #flowBoard .task-flag.priority-medium { color: var(--cw-accent-text); } #flowBoard .task-flag.priority-low { color: var(--cw-text-subtle); } /* Bare note icon (collapsed) */ #flowBoard .task-note-icon-btn { display: inline-grid !important; place-items: center !important; width: 22px !important; height: 22px !important; min-width: 22px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--cw-col-card-text-muted) !important; border-radius: 6px !important; cursor: pointer; transition: background .15s ease, color .15s ease; } #flowBoard .task-note-icon-btn:hover { background: var(--cw-surface-hover) !important; color: var(--cw-accent-text) !important; } /* Chevron toggle (collapsed + expanded), bare */ #flowBoard .task-details-toggle { display: inline-grid !important; place-items: center !important; width: 24px !important; height: 20px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--cw-col-card-text-muted) !important; border-radius: 6px !important; cursor: pointer; transition: background .15s ease, color .15s ease; } #flowBoard .task-details-toggle:hover { background: var(--cw-surface-hover) !important; color: var(--cw-col-card-text) !important; } #flowBoard .task-details-toggle .cw-ic { width: 16px; height: 16px; transition: transform .24s ease; } #flowBoard .task.details-open .task-details-toggle .cw-ic { transform: rotate(180deg); } /* Expanded panel — column flow, no boxes */ #flowBoard .task-details { gap: 8px; } #flowBoard .task.details-open .task-details { display: flex; flex-direction: column; } #flowBoard .task-meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; font-size: 11.5px; color: var(--cw-col-card-text-muted); } #flowBoard .task-meta-owner { display: inline-flex; align-items: center; gap: 6px; } #flowBoard .owner-avatar-sm { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 22px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; font-size: 9px !important; font-weight: 800 !important; border: 0 !important; color: var(--cw-accent-soft-text) !important; background: var(--cw-accent-soft-bg) !important; } #flowBoard .task-owner-name { font-weight: 600; color: var(--cw-col-card-text); } #flowBoard .task-meta-item { display: inline-flex; align-items: center; gap: 5px; } /* Description — plain muted text, no box */ #flowBoard .task-details .task-desc { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--cw-col-card-text-muted) !important; } /* Status line — icon + text, no pills */ #flowBoard .task-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--cw-col-card-text-muted); } #flowBoard .task-status-state, #flowBoard .task-status-item { display: inline-flex; align-items: center; gap: 5px; } #flowBoard .task-status-state.status-on_track { color: var(--cw-success); } #flowBoard .task-status-state.status-at_risk { color: var(--cw-warning); } #flowBoard .task-status-state.status-delayed { color: var(--cw-danger); } /* Assignee avatars — overlapping circles, not boxed chips */ #flowBoard .task-avatar-row { display: inline-flex; align-items: center; } #flowBoard .task-avatar { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--cw-accent-soft-text); background: var(--cw-accent-soft-bg); border: 2px solid var(--cw-col-card-surface); } #flowBoard .task-avatar:first-child { margin-left: 0; } #flowBoard .task-avatar.overflow { color: var(--cw-col-card-text-muted); background: var(--cw-card-divider); } /* Actions — bare icon row, no boxes/fills */ #flowBoard .task .actions.compact-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; margin-top: 4px !important; padding: 0 !important; border: 0 !important; background: none !important; grid-template-columns: none !important; } #flowBoard .task-actions-left, #flowBoard .task-actions-right { display: inline-flex; align-items: center; gap: 2px; } #flowBoard .task-icon-btn { display: inline-grid !important; place-items: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--cw-col-card-text-muted) !important; border-radius: 6px !important; cursor: pointer; transition: background .15s ease, color .15s ease; } #flowBoard .task-icon-btn::before { content: none !important; } #flowBoard .task-icon-btn:hover { background: var(--cw-surface-hover) !important; color: var(--cw-accent-text) !important; } #flowBoard .task-icon-btn .cw-ic { width: 17px; height: 17px; } #flowBoard .task-icon-danger { color: var(--cw-danger) !important; } #flowBoard .task-icon-danger:hover { background: var(--cw-danger-bg) !important; color: var(--cw-danger) !important; } /* CHANGE 1 — dotted vertical dividers between columns (inner edges only) */ @media (min-width: 769px) { #flowBoard .lane + .lane { border-left: 1.5px dotted var(--cw-border) !important; } } /* ============================================================ Notes detail pane — concrete top-down height chain + paper body. The base `.notes-focus-inner { display: grid }` is declared LATER in the stylesheet than the split-view overrides, so it was winning and leaving the inner as a grid with flex-grow:0 — the broken link that stopped the body from growing and left dead space below the footer. Re-establish an explicit height chain with winning specificity (scoped to body.is-notes-focus, which the app sets while the Notes view is open). Desktop only; mobile untouched. ============================================================ */ @media (min-width: 769px) { /* Top container: a real height + flex column so children can flex. */ body.is-notes-focus .notes-focus-view { height: 100vh; /* fallback for browsers without dvh */ height: 100dvh; display: flex; flex-direction: column; } /* Every wrapper between the container and the pane: grow + allow shrink. */ body.is-notes-focus .notes-focus-inner { flex: 1 1 auto; min-height: 0; height: auto; display: flex; flex-direction: column; padding-bottom: clamp(16px, 2.4vw, 28px); } body.is-notes-focus #notesSplit { flex: 1 1 auto; min-height: 0; } body.is-notes-focus #noteDetailPane { min-height: 0; } body.is-notes-focus #noteEditorPanel { flex: 1 1 auto; min-height: 0; height: auto; display: flex; flex-direction: column; } /* The body shell + textarea are the ONLY growing child. */ body.is-notes-focus #noteEditorPanel .note-body-shell { flex: 1 1 auto; min-height: 0; display: flex; } body.is-notes-focus #noteEditorPanel .note-body-input { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; /* Kill the box: borderless, transparent, no rounding, no shadow/ring. */ border: 0; background: none; border-radius: 0; box-shadow: none; resize: none; } body.is-notes-focus #noteEditorPanel .note-body-input:focus { outline: none; box-shadow: none; } /* WYSIWYG editor mount is the growing canvas: flex-fill the shell, scroll inside. */ body.is-notes-focus #noteEditorPanel .note-body-editor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 14px; } body.is-notes-focus #noteEditorPanel .note-body-editor.ql-container { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; position: relative; } body.is-notes-focus #noteEditorPanel .note-body-editor .ql-editor { flex: 1 1 auto; min-height: 0; height: 100%; overflow: auto; padding: 6px 32px 6px 2px; } /* Footer + status + toolbar pinned at natural height around the canvas. */ body.is-notes-focus #noteEditorPanel .note-fmt-toolbar, body.is-notes-focus #noteEditorPanel .note-editor-actions, body.is-notes-focus #noteEditorPanel .note-editor-message { flex: 0 0 auto; } } /* ============================================================ Reminders inline composer — title leads, icon meta controls, full-width description below. Tokens only; dark-mode legible. ============================================================ */ .reminder-row.reminder-composer { display: flex; align-items: flex-start; gap: 10px; grid-template-columns: none; padding: 10px 6px; background: none; } .reminder-composer .reminder-check { flex: 0 0 auto; margin-top: 3px; } .reminder-composer-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .reminder-composer-top { display: flex; align-items: center; gap: 8px; } .reminder-composer .cw-ic { width: 16px; height: 16px; } /* Title — dominant, borderless, transparent */ .reminder-composer .reminder-title-inline { flex: 1 1 auto; min-width: 0; height: auto; border: 0 !important; background: none !important; box-shadow: none !important; padding: 4px 2px; font-size: 15px; font-weight: 600; color: var(--rem-ink); } .reminder-composer .reminder-title-inline:focus { outline: none; border: 0 !important; box-shadow: none !important; } .reminder-composer .reminder-title-counter { display: none; } /* Meta as compact icon chips */ .reminder-composer-meta { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .reminder-meta-ctl { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 7px; border-radius: var(--cw-radius-pill); color: var(--rem-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .reminder-meta-ctl:hover { background: var(--cw-surface-hover); color: var(--rem-ink); } .reminder-meta-ctl.is-set, .reminder-meta-ctl.is-on { color: var(--rem-accent); background: var(--cw-accent-soft-bg); } .reminder-meta-val { font-size: 12px; font-weight: 600; white-space: nowrap; } /* Native control overlaid transparently so the whole chip is the trigger */ .reminder-composer .reminder-overlay-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; opacity: 0; cursor: pointer; } /* Category — colored dot + minimal editable label */ .reminder-cat-ctl { cursor: text; } .reminder-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rem-accent); flex: 0 0 auto; } .reminder-composer .reminder-cat-ctl .reminder-category-input { width: 7ch; min-width: 0; height: auto; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0; font-size: 12px; font-weight: 600; color: var(--rem-ink); } .reminder-composer .reminder-cat-ctl .reminder-category-input:focus { outline: none; box-shadow: none !important; } /* Thin divider before the actions */ .reminder-composer-divider { width: 1px; align-self: stretch; margin: 5px 4px; background: var(--rem-sep); } /* Bare icon action buttons */ .reminder-composer .reminder-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--rem-muted); border-radius: var(--cw-radius-pill); cursor: pointer; transition: background .15s ease, color .15s ease; } .reminder-composer .reminder-icon-btn:hover { background: var(--cw-surface-hover); color: var(--rem-ink); } .reminder-composer .reminder-save-icon { color: var(--rem-accent); } .reminder-composer .reminder-save-icon:hover { background: var(--cw-accent-soft-bg); color: var(--rem-accent); } .reminder-composer .reminder-del-icon { color: var(--cw-danger); } .reminder-composer .reminder-del-icon:hover { background: var(--cw-danger-bg); color: var(--cw-danger); } .reminder-composer .reminder-icon-btn[disabled] { opacity: .5; cursor: default; } /* Description — full-width line below the title (indented under it by the toggle) */ .reminder-composer-desc-row { display: flex; } .reminder-composer .reminder-notes-inline { flex: 1 1 auto; width: 100%; min-height: 0; border: 0 !important; background: none !important; box-shadow: none !important; padding: 2px 2px 4px; font-size: 13px; line-height: 1.5; color: var(--rem-muted); resize: none; } .reminder-composer .reminder-notes-inline:focus { outline: none; box-shadow: none !important; color: var(--rem-ink); } .reminder-compose-hint { margin: 10px 6px 0; color: var(--cw-text-subtle); font-size: 12.5px; } @keyframes rem-spin { to { transform: rotate(360deg); } } .rem-spin { animation: rem-spin .8s linear infinite; } /* Mobile: stack the meta row beneath the title */ @media (max-width: 768px) { .reminder-composer-top { flex-wrap: wrap; } .reminder-composer .reminder-title-inline { flex: 1 1 100%; } .reminder-composer-meta { width: 100%; flex-wrap: wrap; } } /* ====================================================================== Inline emerald logo mark (header brand). The element IS the /outline mark — a white box + `color: var(--cw-text)` (which made the mark render BLACK) — must be neutralised. Drive the fill from the brand token: currentColor ← --cw-accent, so the mark is emerald in light, the brighter primary on dark, and re-colours with the theme. The square uses fill="currentColor"; the check stays white. Higher specificity (.vx-brand + svg + 2 classes) beats the legacy single-class !important rules. ====================================================================== */ .vx-brand svg.vx-logo-mark.clikplan-logo-mark { color: var(--cw-accent) !important; /* currentColor → brand emerald (theme-aware) */ background: transparent !important; /* drop the legacy white box… */ border: 0 !important; box-shadow: none !important; /* …and its frame */ overflow: visible !important; padding: 0 !important; display: block !important; /* svg-as-element (legacy rule set inline-grid for a child svg) */ } /* Landing (logged-out) header: render the brand mark a touch larger. Scoped to :not(.is-authenticated) and matching the canonical svg selector so it out-specifies the legacy 38px !important sizing. */ body:not(.is-authenticated) .vx-brand svg.vx-logo-mark.clikplan-logo-mark { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; /* .vx-brand is flex; flex-basis drives the width, not the width prop */ } /* ====================================================================== Module-card shadows — unify on the soft --cw-shadow-card tokens. Communication / Execution / Capture cards live in #assistantCoreGrid; this 2-ID rule overrides the legacy `box-shadow: none !important` (and the old heavy hover shadow) so they match the Executive cards' soft elevation. Scoped to the core grid so the mobile icon-tile grid stays flat/transparent. ====================================================================== */ #assistantHero #assistantCoreGrid .clik-feature-card { box-shadow: var(--cw-shadow-card) !important; transition: all .2s ease !important; } #assistantHero #assistantCoreGrid .clik-feature-card:hover, #assistantHero #assistantCoreGrid .clik-feature-card:focus-visible { box-shadow: var(--cw-shadow-card-hover) !important; transform: translateY(-2px) !important; } /* ===== Phase 4 (DISABLE_WORKSPACES) — hide the Spaces/Workspaces tenancy UI ===== Reversible: nothing is removed from the DOM. When the runtime flag is OFF the body class is absent and all of this UI shows exactly as before. The unrelated UI panels that merely use the word "workspace" (flow-workspace, voice-notes-workspace) are NOT targeted — only the space switcher, the mobile space list/tray, and the create/manage-workspace dialog. */ body.workspaces-disabled #vxSpaceSelector, body.workspaces-disabled #vxDrawerSpaceList, body.workspaces-disabled #mobileHeroWorkspaceTray, body.workspaces-disabled #workspaceDialog { display: none !important; } /* ===== Flow multi-board switcher + Save to Drive (kanban boards) ===== */ /* The switcher lives in the assistant focus head: it replaces the static module title for Flow, so its label matches .assistant-focus-head h2. */ .assistant-focus-title-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-width: 0; } .assistant-focus-title-row > h2 { flex: 0 1 auto; } .flow-board-switch { position: relative; min-width: 0; } .flow-board-current { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 2px 6px 2px 2px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--cw-text, #1f2330); font: inherit; } .flow-board-current:hover { background: var(--cw-surface-2, #f4f5f9); } .flow-board-title { display: block; margin: 4px 0 0; color: var(--cw-text, #1f2330); font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flow-board-chevron { flex: 0 0 18px; margin-top: 5px; color: var(--cw-text-muted, #6b7280); transition: transform .15s ease; } .flow-board-current[aria-expanded="true"] .flow-board-chevron { transform: rotate(180deg); } .flow-header-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* Flow has no mobile FAB — the header "New board" button shows at all widths. Two-class selector beats module-shell.css's mobile display:none (it loads last). */ .flow-header-actions .flow-new-board-btn { display: inline-flex; } .flow-board-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 240px; padding: 6px; border: 1px solid var(--cw-border, #e2e4ea); border-radius: 14px; background: var(--cw-surface, #fff); box-shadow: 0 18px 44px rgba(15,23,42,.16); } .flow-board-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: var(--cw-text, #1f2330); font: inherit; font-size: 13.5px; text-align: left; } .flow-board-menu-item:hover { background: var(--cw-surface-2, #f4f5f9); } .flow-board-menu-item.is-current { background: rgba(var(--brand-rgb), .08); font-weight: 700; } .flow-board-menu-item small { margin-left: auto; color: var(--cw-text-muted, #6b7280); font-size: 11.5px; } .flow-board-menu-item.is-action { color: var(--cw-accent, #5b5fc7); font-weight: 600; } .flow-board-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flow-board-menu-divider { margin: 6px 4px; border-top: 1px solid var(--cw-border, #e2e4ea); } .flow-board-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--cw-accent, #5b5fc7); } .flow-save-drive-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 1px solid var(--cw-border, #e2e4ea); border-radius: 999px; background: var(--cw-surface, #fff); cursor: pointer; color: var(--cw-text, #1f2330); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; } .flow-save-drive-btn:hover { border-color: var(--cw-accent, #5b5fc7); color: var(--cw-accent, #5b5fc7); } .flow-save-drive-btn.is-saved { border-color: rgba(var(--brand-rgb), .3); background: rgba(var(--brand-rgb), .07); color: var(--cw-accent-text, #4448a8); } .flow-save-drive-btn:disabled { opacity: .6; cursor: default; } .vx-toast-link { margin-left: 4px; color: var(--cw-accent, #5b5fc7); font-weight: 700; text-decoration: underline; } /* Board prompt + "All boards" manager overlays */ .cw-board-overlay { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.5); } .cw-board-card { width: 100%; max-width: 380px; box-sizing: border-box; padding: 22px; border-radius: 16px; background: var(--cw-surface, #fff); box-shadow: 0 20px 60px rgba(0,0,0,.3); color: var(--cw-text, #1f2330); } .cw-board-card-wide { max-width: 560px; } .cw-board-card h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; } .cw-board-card input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--cw-border, #e2e4ea); border-radius: 10px; font: inherit; } .cw-board-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .cw-board-primary { padding: 9px 18px; border: 0; border-radius: 10px; background: var(--cw-accent, #5b5fc7); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .cw-board-list { display: grid; gap: 4px; max-height: 52vh; overflow: auto; } .cw-board-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; } .cw-board-row:hover { background: var(--cw-surface-2, #f4f5f9); } .cw-board-row.is-archived { opacity: .62; } .cw-board-row-name { border: 0; background: none; padding: 0; cursor: pointer; color: var(--cw-text, #1f2330); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-board-row small { color: var(--cw-text-muted, #6b7280); font-size: 11.5px; white-space: nowrap; } .cw-board-row-actions { display: inline-flex; gap: 6px; margin-left: auto; } .cw-board-close { margin-top: 14px; } @media (max-width: 720px) { .flow-board-menu { min-width: 210px; } /* Action group wraps to its own line below the switcher; never overlaps the Today / Deep work / Momentum chips (those live in the content band). */ .flow-header-actions { margin-left: 0; flex-basis: 100%; } .flow-board-title { font-size: 24px; } } /* Board delete (destructive) — confirm dialog + red action in All boards */ .cw-board-confirm-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cw-text, #1f2330); } .cw-board-danger { padding: 9px 18px; border: 0; border-radius: 10px; background: var(--cw-danger, #dc2626); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .cw-board-danger:hover { filter: brightness(1.06); } .cw-board-row-actions .cw-board-delete { color: var(--cw-danger, #dc2626); } .cw-board-row-actions .cw-board-delete:disabled { opacity: .45; cursor: not-allowed; } /* ===== To-Do multi-list switcher (reuses the flow-board-* chrome) ===== */ .todo-focus-title-row { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; } .todo-list-lockup { min-width: 0; flex: 1 1 auto; } .todo-eyebrow { display: block; margin-bottom: 2px; color: var(--cw-text-muted, #6b7280); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .todo-list-title { font-size: clamp(22px, 2.2vw, 30px); max-width: 40ch; } .todo-focus-title-row .flow-header-actions { flex: 0 0 auto; } .todo-focus-title-row .flow-header-actions { margin-left: auto; } .todo-gsync-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px; background: #e8f0fe; color: #1a73e8; font-size: 10px; font-weight: 800; } .todo-drive-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: rgba(var(--brand-rgb), .1); color: var(--cw-accent-text, #4448a8); font-size: 10px; font-weight: 700; } /* New-list modal: Google sync section */ .cw-todo-sync-section { margin-top: 14px; display: grid; gap: 8px; } .cw-todo-sync-head { font-size: 12px; font-weight: 700; color: var(--cw-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .06em; } .cw-todo-sync-option { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--cw-text, #1f2330); cursor: pointer; } .cw-todo-sync-select { width: 100%; box-sizing: border-box; margin-left: 22px; max-width: calc(100% - 22px); padding: 7px 10px; border: 1px solid var(--cw-border, #e2e4ea); border-radius: 9px; font: inherit; font-size: 13px; } .cw-todo-sync-select:disabled { opacity: .55; } .cw-todo-sync-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--cw-text-muted, #6b7280); } /* "All lists" gallery */ .cw-todo-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 56vh; overflow: auto; } .cw-todo-list-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border: 1px solid var(--cw-border, #e2e4ea); border-radius: 13px; background: var(--cw-surface, #fff); text-align: left; } .cw-todo-list-card.is-archived { opacity: .6; } .cw-todo-list-card small { color: var(--cw-text-muted, #6b7280); font-size: 11.5px; } .cw-todo-list-card-top { display: flex; align-items: center; gap: 7px; position: relative; } .cw-todo-list-card-name { border: 0; background: none; padding: 0; cursor: pointer; color: var(--cw-text, #1f2330); font: inherit; font-size: 14px; font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .cw-todo-list-card-badges { display: inline-flex; gap: 5px; } .cw-todo-list-dots { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: 6px; background: none; color: var(--cw-text-muted, #9aa3af); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .cw-todo-list-dots:hover { background: var(--cw-surface-2, #f4f5f9); color: var(--cw-text, #1f2330); } .cw-todo-list-menu { position: absolute; top: 28px; right: 0; z-index: 30; min-width: 150px; padding: 5px; border: 1px solid var(--cw-border, #e2e4ea); border-radius: 10px; background: var(--cw-surface, #fff); box-shadow: 0 10px 30px rgba(0,0,0,.14); display: grid; } .cw-todo-list-menu button { border: 0; background: none; padding: 8px 11px; border-radius: 7px; cursor: pointer; color: var(--cw-text, #1f2330); font: inherit; font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; } .cw-todo-list-menu button:hover { background: var(--cw-surface-2, #f4f5f9); } .cw-todo-list-menu button.danger { color: var(--cw-danger, #dc2626); } .cw-todo-list-menu button:disabled { opacity: .45; cursor: not-allowed; } .cw-todo-list-card-new { align-items: center; justify-content: center; min-height: 64px; border-style: dashed; border-width: 1.6px; cursor: pointer; color: var(--cw-accent, #5b5fc7); font: inherit; font-size: 13.5px; font-weight: 700; background: none; } .cw-todo-list-card-new:hover { background: rgba(var(--brand-rgb), .05); } @media (max-width: 720px) { .todo-focus-title-row .flow-header-actions { margin-left: 0; flex-basis: 100%; } .todo-list-title { font-size: 22px; } }