/* ───────────────────────────────────────────────────────────── BRAND VOICE ARCHITECTURE — DESIGN SYSTEM HSL token system mirrored from /opt/melvinos/client/src/index.css. Light, dark, and system modes. Inter + Space Grotesk + ui-monospace. ───────────────────────────────────────────────────────────── */ /* ── DARK MODE (default + explicit .dark on ) ────────── */ :root, html.dark { --background: 222 47% 5%; --foreground: 210 40% 96%; --border: 217 32% 14%; --input: 217 32% 16%; --card: 220 40% 8%; --card-foreground: 210 40% 96%; --card-border: 217 32% 15%; --sidebar: 222 47% 6%; --sidebar-foreground: 210 40% 92%; --sidebar-border: 217 32% 12%; --popover: 220 40% 9%; --popover-foreground: 210 40% 96%; --popover-border: 217 32% 16%; --primary: 217 91% 60%; --primary-foreground: 222 47% 5%; --secondary: 220 40% 12%; --secondary-foreground: 210 40% 90%; --accent-violet: 262 83% 68%; --muted: 220 30% 12%; --muted-foreground: 215 20% 60%; --accent: 220 40% 14%; --accent-foreground: 210 40% 96%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --success: 142 71% 45%; --warn: 38 92% 50%; --ring: 217 91% 60%; --grid-line: rgba(110, 168, 255, 0.08); --glow-1: rgba(59, 130, 246, 0.18); --glow-2: rgba(168, 85, 247, 0.18); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4); --shadow-md: 0 4px 8px rgba(0,0,0,0.4), 0 12px 24px rgba(0,0,0,0.3); --shadow-lg: 0 8px 16px rgba(0,0,0,0.5), 0 24px 40px rgba(0,0,0,0.3); --sidebar-w: 280px; --topbar-h: 56px; color-scheme: dark; } /* ── LIGHT MODE ───────────────────────────────────────────── */ html.light { --background: 210 20% 98%; --foreground: 222 47% 10%; --border: 210 30% 88%; --input: 210 30% 84%; --card: 0 0% 100%; --card-foreground: 222 47% 10%; --card-border: 210 30% 90%; --sidebar: 210 20% 96%; --sidebar-foreground: 222 47% 10%; --sidebar-border: 210 30% 86%; --popover: 0 0% 100%; --popover-foreground: 222 47% 10%; --popover-border: 210 30% 88%; --primary: 217 91% 55%; --primary-foreground: 0 0% 100%; --secondary: 210 20% 92%; --secondary-foreground: 222 47% 12%; --accent-violet: 262 83% 58%; --muted: 210 20% 90%; --muted-foreground: 215 15% 38%; --accent: 210 20% 86%; --accent-foreground: 222 47% 10%; --destructive: 0 84% 55%; --destructive-foreground: 0 0% 100%; --success: 142 71% 38%; --warn: 32 95% 44%; --ring: 217 91% 55%; --grid-line: rgba(59, 130, 246, 0.06); --glow-1: rgba(59, 130, 246, 0.12); --glow-2: rgba(168, 85, 247, 0.12); --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.06); --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.08); --shadow-lg: 0 8px 16px rgba(0,0,0,0.08), 0 24px 40px rgba(0,0,0,0.1); color-scheme: light; } /* ── SYSTEM MODE — resolve via OS when no explicit class set ─ */ @media (prefers-color-scheme: light) { html.system { --background: 210 20% 98%; --foreground: 222 47% 10%; --border: 210 30% 88%; --input: 210 30% 84%; --card: 0 0% 100%; --card-foreground: 222 47% 10%; --card-border: 210 30% 90%; --sidebar: 210 20% 96%; --sidebar-foreground: 222 47% 10%; --sidebar-border: 210 30% 86%; --popover: 0 0% 100%; --popover-foreground: 222 47% 10%; --popover-border: 210 30% 88%; --primary: 217 91% 55%; --primary-foreground: 0 0% 100%; --secondary: 210 20% 92%; --secondary-foreground: 222 47% 12%; --accent-violet: 262 83% 58%; --muted: 210 20% 90%; --muted-foreground: 215 15% 38%; --accent: 210 20% 86%; --accent-foreground: 222 47% 10%; --destructive: 0 84% 55%; --destructive-foreground: 0 0% 100%; --success: 142 71% 38%; --warn: 32 95% 44%; --ring: 217 91% 55%; --grid-line: rgba(59, 130, 246, 0.06); --glow-1: rgba(59, 130, 246, 0.12); --glow-2: rgba(168, 85, 247, 0.12); color-scheme: light; } } /* ── Reset + base ─────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; background: hsl(var(--background)); } body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; overscroll-behavior-y: none; min-height: 100dvh; transition: background-color 0.3s ease, color 0.2s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } /* iOS form-zoom prevention */ input, textarea, select, button { font-family: inherit; font-size: 16px; } @media (min-width: 768px) { input, textarea, select, button { font-size: 14px; } } /* ── Topbar (mobile-only) ─────────────────────────────────── */ .topbar { display: none; align-items: center; gap: 10px; padding-top: max(env(safe-area-inset-top, 0px) + 10px, 12px); padding-bottom: 10px; padding-left: max(env(safe-area-inset-left, 0px) + 16px, 16px); padding-right: max(env(safe-area-inset-right, 0px) + 16px, 16px); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--sidebar)); position: sticky; top: 0; z-index: 50; min-height: var(--topbar-h); } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .brand h1 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; } .topbar-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } /* ── Icon buttons ─────────────────────────────────────────── */ .icon-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: hsl(var(--foreground)); cursor: pointer; padding: 0; } .icon-btn:hover { background: hsl(var(--accent)); border-color: hsl(var(--border)); } /* ── Buttons ──────────────────────────────────────────────── */ .btn { background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s; white-space: nowrap; min-height: 38px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { background: hsl(var(--accent)); border-color: hsl(var(--ring) / 0.4); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.primary { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent-violet))); border-color: transparent; color: hsl(var(--primary-foreground)); font-weight: 600; box-shadow: 0 0 0 1px hsl(var(--primary) / 0.5), 0 4px 12px hsl(var(--primary) / 0.25); } .btn.primary:hover { filter: brightness(1.08); } .btn.link { background: transparent; border: none; color: hsl(var(--primary)); padding: 0; text-decoration: underline; min-height: auto; } .btn.danger { color: hsl(var(--destructive)); } .btn.save-reqs { margin-top: 10px; } /* Build buttons sit side-by-side and don't span the full card width on * desktop — they wrap on mobile via flex-wrap. */ .build-row { gap: 12px; flex-wrap: wrap; } .build-row .btn { flex: 0 1 240px; padding: 12px 16px; } /* ── User pill + role badge ───────────────────────────────── */ .user-pill { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border: 1px solid hsl(var(--border)); border-radius: 999px; font-size: 12.5px; color: hsl(var(--muted-foreground)); max-width: 240px; overflow: hidden; background: hsl(var(--card)); } .user-pill .email { color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .user-pill .role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); padding: 1px 6px; border-radius: 999px; flex-shrink: 0; font-weight: 600; } /* ── Theme toggle ─────────────────────────────────────────── */ .theme-toggle { display: inline-flex; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 2px; gap: 0; } .theme-toggle button { width: 28px; height: 28px; border-radius: 999px; background: transparent; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle button:hover { color: hsl(var(--foreground)); } .theme-toggle button.active { background: hsl(var(--background)); color: hsl(var(--primary)); box-shadow: var(--shadow-sm); } .theme-toggle svg { width: 14px; height: 14px; } /* ── Main layout ──────────────────────────────────────────── */ /* Fixed-height layout so the sidebar and workspace each scroll * independently — sidebar nav stays visible while the workspace * content scrolls. */ #main { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar { border-right: 1px solid hsl(var(--sidebar-border)); background: hsl(var(--sidebar)); padding: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; } /* Sidebar brand block — top of the sidebar, replaces the desktop topbar */ .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 6px; padding-top: max(env(safe-area-inset-top, 0px) + 16px, 18px); padding-left: max(env(safe-area-inset-left, 0px) + 16px, 16px); padding-right: max(env(safe-area-inset-right, 0px) + 16px, 16px); min-width: 0; } .sidebar-brand-icon { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 12px hsl(var(--primary) / 0.18); } .sidebar-brand-text { min-width: 0; flex: 1; overflow: hidden; } .sidebar-brand-text h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-brand-text h1 { font-family: var(--font-display); margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: hsl(var(--foreground)); line-height: 1.2; } .sidebar-brand-tagline { margin: 1px 0 0; font-size: 11.5px; color: hsl(var(--muted-foreground)); font-style: italic; } .sidebar-brand-tagline strong { font-style: normal; font-weight: 600; color: hsl(var(--foreground)); } .sidebar-workspace { margin: 2px 16px 14px; margin-left: max(env(safe-area-inset-left, 0px) + 16px, 16px); font-size: 12px; color: hsl(var(--muted-foreground)); } .sidebar-section-label { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); margin: 6px 16px 8px; margin-left: max(env(safe-area-inset-left, 0px) + 16px, 16px); } .sidebar > .sidebar-cta { margin: 0 16px 14px; margin-left: max(env(safe-area-inset-left, 0px) + 16px, 16px); margin-right: max(env(safe-area-inset-right, 0px) + 16px, 16px); } .sidebar > .project-list { margin: 0 8px; padding-left: max(env(safe-area-inset-left, 0px) + 8px, 8px); padding-right: max(env(safe-area-inset-right, 0px) + 8px, 8px); } /* The CTA used to set width: 100%, but combined with the parent's 16px * left/right margins that produced a button wider than its container * (margins are outside the box). Switching to display: flex (block-level) * + no explicit width lets it fill the parent column safely. */ .sidebar-cta { display: flex; justify-content: center; padding: 10px 14px; } .project-list { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 0; } .project-list li { display: flex; align-items: center; gap: 6px; padding: 10px 6px 10px 12px; border-radius: 8px; margin-bottom: 4px; border: 1px solid transparent; color: hsl(var(--sidebar-foreground)); min-width: 0; overflow: hidden; } .project-list li:hover { background: hsl(var(--accent)); } .project-list li.active { background: hsl(var(--accent)); border-color: hsl(var(--border)); } .project-list .project-row-main { flex: 1; min-width: 0; cursor: pointer; overflow: hidden; } .project-list .name { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-list .meta { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-row-del { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: hsl(var(--muted-foreground)); cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; padding: 0; } .project-list li:hover .project-row-del, .project-list li.active .project-row-del { opacity: 1; } .project-row-del:hover { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } /* On touch devices there's no hover — always show the delete affordance. */ @media (hover: none) { .project-row-del { opacity: 0.75; } } /* ── Mobile homepage accordion (Your projects) ────────────── */ .home { width: 100%; display: flex; flex-direction: column; gap: 14px; } .home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .home-head h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .home-head .hint { margin: 0; } .home-list { display: flex; flex-direction: column; gap: 10px; } .home-card { background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .home-card[open] { border-color: hsl(var(--primary) / 0.4); box-shadow: var(--shadow-md); } .home-card-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; } .home-card-summary::-webkit-details-marker { display: none; } .home-card-summary:hover { background: hsl(var(--accent) / 0.5); } .home-card-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .home-card-title strong { font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-card-meta { font-size: 12px; color: hsl(var(--muted-foreground)); } .home-card-chevron { color: hsl(var(--muted-foreground)); transition: transform 0.18s ease-out; flex-shrink: 0; } .home-card[open] .home-card-chevron { transform: rotate(180deg); } .home-card-body { padding: 0 16px 16px; border-top: 1px solid hsl(var(--border)); padding-top: 14px; } .home-card-reqs { margin: 0 0 12px; font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.55; white-space: pre-wrap; } .home-card-actions { margin: 0; } .home-card-actions .btn { padding: 9px 14px; } .sidebar-footer { margin-top: 12px; padding: 12px 16px; padding-left: max(env(safe-area-inset-left, 0px) + 16px, 16px); padding-right: max(env(safe-area-inset-right, 0px) + 16px, 16px); padding-bottom: max(env(safe-area-inset-bottom, 0px) + 12px, 12px); border-top: 1px solid hsl(var(--sidebar-border)); display: flex; flex-direction: column; gap: 10px; } /* Labeled theme toggle — Memos style. min-width: 0 on the grid + button so * the "System" label doesn't overflow a narrow sidebar. */ .sidebar-theme-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 3px; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); border-radius: 999px; min-width: 0; overflow: hidden; } .sidebar-theme-row button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 6px; border-radius: 999px; background: transparent; border: none; color: hsl(var(--muted-foreground)); font-size: 11px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.12s, color 0.12s; min-width: 0; overflow: hidden; } .sidebar-theme-row button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-theme-row button:hover { color: hsl(var(--foreground)); } .sidebar-theme-row button.active { background: hsl(var(--background)); color: hsl(var(--primary)); box-shadow: var(--shadow-sm); } .sidebar-theme-row button svg { width: 12px; height: 12px; flex-shrink: 0; } /* User pill is the dropdown trigger; sibling .user-menu is the popup. * The wrapper exists because nested