/* ========================================================= FIELD STUDIO — design system Dark + light themes via [data-theme] on ========================================================= */ :root, [data-theme="dark"] { --bg: #0b0c10; --surface: #0b0c10; --surface-raised: #14161c; --surface-hover: rgba(255,255,255,0.05); --surface-active: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.18); --text: #f3f5f9; --text-dim: #a3aab6; --text-muted: #6f7682; --accent: #6366f1; --accent-hover: #4f46e5; --accent-fg: #ffffff; --accent-soft: rgba(99,102,241,0.16); --danger: #f87171; --danger-soft: rgba(248,113,113,0.14); --success: #34d399; --success-soft: rgba(52,211,153,0.14); --warning: #fbbf24; --warning-soft: rgba(251,191,36,0.14); --info: #60a5fa; --info-soft: rgba(96,165,250,0.14); --purple: #a78bfa; --purple-soft: rgba(167,139,250,0.16); --winner: #a78bfa; --status-prospect: #94a3b8; --status-contacted: #60a5fa; --status-agreed: #34d399; --status-scheduled: #fbbf24; --status-shot: #a78bfa; --status-in_lab: #fbbf24; --status-scored: #818cf8; --status-finalized: #34d399; --status-submitted: #a78bfa; --status-published: #94a3b8; --status-declined: #f87171; --shadow-sm: 0 1px 0 rgba(0,0,0,0.4); --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } [data-theme="light"] { --bg: #f6f7f9; --surface: #f6f7f9; --surface-raised: #ffffff; --surface-hover: rgba(15,23,42,0.04); --surface-active: rgba(15,23,42,0.07); --border: rgba(15,23,42,0.08); --border-strong: rgba(15,23,42,0.20); --text: #0a0b10; --text-dim: #475569; --text-muted: #94a3b8; --accent: #4f46e5; --accent-hover: #4338ca; --accent-fg: #ffffff; --accent-soft: rgba(79,70,229,0.10); --danger: #dc2626; --danger-soft: rgba(220,38,38,0.10); --success: #059669; --success-soft: rgba(5,150,105,0.10); --warning: #d97706; --warning-soft: rgba(217,119,6,0.10); --info: #2563eb; --info-soft: rgba(37,99,235,0.10); --purple: #7c3aed; --purple-soft: rgba(124,58,237,0.10); --winner: #7c3aed; --status-prospect: #64748b; --status-contacted: #2563eb; --status-agreed: #059669; --status-scheduled: #d97706; --status-shot: #7c3aed; --status-in_lab: #d97706; --status-scored: #4f46e5; --status-finalized: #059669; --status-submitted: #7c3aed; --status-published: #64748b; --status-declined: #dc2626; --shadow-sm: 0 1px 0 rgba(0,0,0,0.04); --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; } a { color: inherit; } /* ===== App shell: sidebar + main ===== */ .app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; } aside.rail { background: var(--surface-raised); border-right: 1px solid var(--border); padding: 18px 12px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; } .rail .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; } .rail .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-fg); font-family: var(--font-display); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } .rail .brand-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.2px; } .rail nav { display: flex; flex-direction: column; gap: 1px; } .rail .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text-dim); background: transparent; border: 0; font-family: inherit; text-align: left; width: 100%; transition: background 120ms ease, color 120ms ease; } .rail .nav-item:hover { background: var(--surface-hover); color: var(--text); } .rail .nav-item.active { background: var(--surface-active); color: var(--text); } .rail .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 1; color: var(--text); } [data-theme="light"] .rail .nav-item svg { color: #0a0b10; } [data-theme="dark"] .rail .nav-item svg { color: var(--text); } .rail-spacer { flex: 1; } .rail-footer { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); } .rail-footer .icon-btn { display:flex; align-items:center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12px; color: var(--text-dim); background: transparent; border: 0; cursor:pointer; font-family: inherit; } .rail-footer .icon-btn:hover { background: var(--surface-hover); color: var(--text); } .rail-footer .icon-btn svg { width: 14px; height: 14px; color: var(--text); opacity: 0.95; } .rail-footer .user-row { display:flex; align-items:center; gap:10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; } .rail-footer .user-row:hover { background: var(--surface-hover); } .user-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; } main.content { min-width: 0; } .panel { display: none; } .panel.active { display: block; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); } .topbar .crumb { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.2px; } .topbar .crumb .crumb-dim { color: var(--text-dim); font-family: var(--font-sans); font-size: 13px; margin-left: 10px; } .cmdk-trigger { display: flex; align-items: center; gap: 10px; background: var(--surface-raised); border: 1px solid var(--border); padding: 6px 10px 6px 12px; border-radius: var(--radius); color: var(--text-dim); font-size: 13px; cursor: pointer; min-width: 320px; font-family: inherit; transition: border-color 120ms ease; } .cmdk-trigger:hover { border-color: var(--border-strong); } .cmdk-trigger svg { width: 14px; height: 14px; color: var(--text); opacity: 0.7; } .cmdk-trigger .cmdk-spacer { flex: 1; } kbd { font-family: var(--font-mono); font-size: 11px; background: var(--bg); color: var(--text-dim); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); } .container { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; } @media (max-width: 880px) { .app { grid-template-columns: 1fr; } aside.rail { position: static; height: auto; flex-direction: column; } .topbar { padding: 12px 16px; } .cmdk-trigger { min-width: 0; } .container { padding: 16px; } } /* ===== Typography ===== */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.3px; margin: 0; } h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14px; } .section-title { font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.7px; margin: 32px 0 14px; display: flex; align-items: baseline; gap: 10px; } .section-title .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .text-dim { color: var(--text-dim); font-size: 13px; } .text-muted { color: var(--text-muted); font-size: 12px; } .help-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .divider { height: 1px; background: var(--border); margin: 22px 0; border: 0; } /* ===== Buttons ===== */ button, .btn { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-family: inherit; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; line-height: 1.4; } button:not(.btn-ai):hover, .btn:not(.btn-ai):hover { background: var(--surface-hover); border-color: var(--border-strong); } button:disabled { opacity: 0.5; cursor: not-allowed; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 500; } .btn-primary:hover { filter: brightness(1.08); background: var(--accent); border-color: var(--accent); } .btn-ghost { border-color: transparent; color: var(--text-dim); } .btn-ghost:hover { color: var(--text); border-color: var(--border); background: transparent; } .btn-danger { color: var(--danger); border-color: var(--border); } .btn-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); } /* AI actions: blue → purple → green gradient. Reads as a special action class. */ .btn-ai { position: relative; color: #fff; border: 1px solid transparent; background-image: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%); background-size: 180% 180%; background-position: 0% 50%; font-weight: 500; transition: background-position 320ms ease, filter 160ms ease, transform 160ms ease; box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 0 0 1px rgba(255,255,255,0.06) inset; } .btn-ai:hover { background-position: 100% 50%; filter: brightness(1.05); } .btn-ai:active { transform: translateY(0.5px); } .btn-ai:disabled { opacity: 0.65; } [data-theme="dark"] .btn-ai { background-image: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; } .btn-sm { padding: 4px 9px; font-size: 12px; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ===== Inputs ===== */ input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="password"], input[type="search"], textarea, select { width: 100%; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 13px; font-family: inherit; resize: vertical; transition: border-color 120ms ease, background 120ms ease; } input:hover, textarea:hover, select:hover { border-color: var(--border-strong); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } textarea { min-height: 70px; line-height: 1.5; } label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.2px; } /* ===== Cards ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .card-clickable { cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .card-clickable:hover { border-color: var(--border-strong); background: var(--surface-hover); } .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .row.row-3 { grid-template-columns: repeat(3, 1fr); } .row.row-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 880px) { .row, .row.row-3 { grid-template-columns: 1fr 1fr; } .row.row-2 { grid-template-columns: 1fr; } } .stat-card { position: relative; overflow: hidden; background: var(--surface-raised); --stat-accent: var(--accent); border-color: color-mix(in srgb, var(--stat-accent) 22%, var(--border)); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--stat-accent), color-mix(in srgb, var(--stat-accent) 35%, transparent)); } .stat-card::after { content: ''; position: absolute; inset: 0 0 auto auto; width: 120px; height: 120px; background: radial-gradient(circle at top right, color-mix(in srgb, var(--stat-accent) 14%, transparent), transparent 70%); pointer-events: none; } .stat-card .label { color: var(--stat-accent); font-size: 11px; letter-spacing: 0.4px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; position: relative; z-index: 1; } .stat-card .value { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.1; color: var(--text); position: relative; z-index: 1; } .stat-card .sub { color: var(--text-muted); font-size: 12px; margin-top: 6px; position: relative; z-index: 1; } .stat-card.stat-indigo { --stat-accent: #4f46e5; } .stat-card.stat-purple { --stat-accent: #7c3aed; } .stat-card.stat-amber { --stat-accent: #d97706; } .stat-card.stat-emerald { --stat-accent: #059669; } [data-theme="dark"] .stat-card.stat-indigo { --stat-accent: #818cf8; } [data-theme="dark"] .stat-card.stat-purple { --stat-accent: #a78bfa; } [data-theme="dark"] .stat-card.stat-amber { --stat-accent: #fbbf24; } [data-theme="dark"] .stat-card.stat-emerald { --stat-accent: #34d399; } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .flex-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ===== Status pills (soft pastel chips, SaaS-CRM style) ===== */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px; border: 0; background: var(--surface-hover); color: var(--text-dim); letter-spacing: 0; text-transform: none; white-space: nowrap; } .pill .dot { display: none; } .pill.solid { background: var(--surface-raised); border: 1px solid var(--border); } .pill-prospect { background: rgba(100,116,139,0.12); color: var(--status-prospect); } .pill-contacted { background: var(--info-soft); color: var(--info); } .pill-agreed { background: var(--success-soft); color: var(--success); } .pill-scheduled { background: var(--warning-soft); color: var(--warning); } .pill-shot { background: var(--purple-soft); color: var(--purple); } .pill-in_lab { background: var(--warning-soft); color: var(--warning); } .pill-scored { background: var(--accent-soft); color: var(--accent); } .pill-finalized { background: var(--success-soft); color: var(--success); } .pill-submitted { background: var(--purple-soft); color: var(--purple); } .pill-published { background: rgba(100,116,139,0.12); color: var(--status-published); } .pill-declined { background: var(--danger-soft); color: var(--danger); } [data-theme="dark"] .pill-prospect, [data-theme="dark"] .pill-published { background: rgba(148,163,184,0.14); } /* ===== Series cards ===== */ .series-card { position: relative; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 16px; cursor: pointer; transition: border-color 120ms ease, transform 160ms ease, box-shadow 160ms ease; display: flex; flex-direction: column; gap: 10px; min-height: 150px; --card-accent: var(--accent); } .series-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 40%, transparent)); } .series-card::after { content: ''; position: absolute; top: 0; right: 0; width: 140px; height: 140px; background: radial-gradient(circle at top right, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 70%); pointer-events: none; } .series-card:hover { border-color: color-mix(in srgb, var(--card-accent) 50%, var(--border)); transform: translateY(-1px); box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--card-accent) 50%, transparent); } .series-card.accent-1 { --card-accent: #4f46e5; } /* indigo */ .series-card.accent-2 { --card-accent: #7c3aed; } /* purple */ .series-card.accent-3 { --card-accent: #059669; } /* emerald */ .series-card.accent-4 { --card-accent: #2563eb; } /* blue */ .series-card.accent-5 { --card-accent: #d97706; } /* amber */ [data-theme="dark"] .series-card.accent-1 { --card-accent: #818cf8; } [data-theme="dark"] .series-card.accent-2 { --card-accent: #a78bfa; } [data-theme="dark"] .series-card.accent-3 { --card-accent: #34d399; } [data-theme="dark"] .series-card.accent-4 { --card-accent: #60a5fa; } [data-theme="dark"] .series-card.accent-5 { --card-accent: #fbbf24; } .series-card .series-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.2px; } .series-card .series-thesis { color: var(--text-dim); font-size: 13px; line-height: 1.5; flex: 1; } .series-progress-track { background: var(--surface-hover); border-radius: 999px; height: 4px; overflow: hidden; margin-top: 4px; } .series-progress-fill { height: 100%; background: var(--accent); transition: width 200ms ease; } /* ===== Moodboard ===== */ .moodboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; } .moodboard-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); cursor: zoom-in; } .moodboard-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 220ms ease; } .moodboard-tile:hover img { transform: scale(1.03); } .moodboard-remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: 0; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms ease; } .moodboard-tile:hover .moodboard-remove { opacity: 1; } /* ===== Subject list rows ===== */ .sitter-row { display: grid; grid-template-columns: 1fr 200px 140px 120px; gap: 14px; align-items: center; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .sitter-row:hover { border-color: var(--border-strong); background: var(--surface-hover); } .sitter-row .name { font-weight: 500; font-size: 14px; margin-bottom: 2px; } .sitter-row .meta { color: var(--text-dim); font-size: 12px; } .sitter-row .right { text-align: right; } .sitter-row-head { background: transparent !important; border: 0 !important; padding: 8px 16px; margin-bottom: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); cursor: default !important; } .sitter-row-head:hover { background: transparent !important; border: 0 !important; } .sitter-row-head .sortable { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; padding: 2px 6px; margin: -2px -6px; transition: background 120ms ease, color 120ms ease; } .sitter-row-head .sortable:hover { background: var(--surface-hover); color: var(--text); } .sitter-row-head .right.sortable { justify-content: flex-end; float: right; } .sort-ind { font-size: 9px; color: var(--text-muted); opacity: 0.4; font-family: var(--font-mono); min-width: 8px; } .sort-ind.sort-active { color: var(--accent); opacity: 1; } @media (max-width: 880px) { .sitter-row { grid-template-columns: 1fr auto; } .sitter-row .meta-col-series, .sitter-row .meta-col-contact { display: none; } } /* ===== Kanban ===== */ .kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .kanban-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-height: 120px; } .kanban-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .kanban-col-head .col-name { font-size: 12px; font-weight: 500; color: var(--text-dim); } .kanban-col-head .col-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .kanban-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 7px; cursor: pointer; transition: border-color 120ms ease; font-size: 13px; } .kanban-card:hover { border-color: var(--border-strong); } .kanban-card .card-name { font-weight: 500; margin-bottom: 3px; } .kanban-card .card-meta { color: var(--text-muted); font-size: 11px; } /* ===== Modal ===== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 100; overflow-y: auto; backdrop-filter: blur(2px); } [data-theme="light"] .modal-backdrop { background: rgba(20,22,26,0.32); } .modal-backdrop.active { display: flex; } /* In-modal section headers (Subject quotes / Attachments / Release form etc.) */ .modal-body > strong, .modal-body .flex-between > div > strong { color: var(--text); font-weight: 700; letter-spacing: -0.1px; } .modal-body label { color: var(--text); font-weight: 600; } .modal { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 880px; box-shadow: var(--shadow-lg); } .modal-wide { max-width: 1100px; } .modal-narrow { max-width: 540px; } .modal-header { padding: 16px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-header strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.2px; } .modal-body { padding: 22px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .modal-footer .spacer { flex: 1; } .form-group { margin-bottom: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } @media (max-width: 880px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } } /* ===== Coverage / dimensions ===== */ .dimension-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .dimension-block .dim-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; } .dim-name { font-weight: 500; font-size: 14px; } .dim-type-pill { font-size: 10px; background: transparent; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); letter-spacing: 0.2px; } .option-row { display: grid; grid-template-columns: 1fr 100px 80px; gap: 8px; margin-bottom: 6px; align-items: center; } .option-row input { padding: 6px 9px; font-size: 12px; } .coverage-bar-wrap { background: var(--surface-hover); border-radius: 999px; height: 6px; overflow: hidden; margin-top: 4px; } .coverage-bar { height: 100%; background: var(--accent); transition: width 200ms ease; } .coverage-bar.over-target { background: var(--success); } .coverage-bar.under-target { background: var(--warning); } .coverage-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 5px; } .coverage-label .label-name { font-weight: 500; } .coverage-label .label-meta { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; } /* ===== Activity / deadlines ===== */ .activity-item { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; align-items: flex-start; gap: 12px; } .activity-item:last-child { border-bottom: none; } .activity-item .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; } .activity-item .activity-meta { color: var(--text-muted); font-size: 11px; margin-top: 2px; font-family: var(--font-mono); } .deadline-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: border-color 120ms ease; } .deadline-item:hover { border-color: var(--border-strong); } .deadline-item .deadline-date { background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--purple, #7c3aed))); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; min-width: 56px; box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--accent) 50%, transparent); } .deadline-item .deadline-date .day { font-family: var(--font-display); font-size: 18px; font-weight: 700; display: block; line-height: 1; color: #fff; } .deadline-item .deadline-date .month { font-size: 10px; color: rgba(255,255,255,0.85); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; } .deadline-item .deadline-body { flex: 1; } .deadline-item .deadline-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; } .deadline-item .deadline-meta { color: var(--text-dim); font-size: 12px; } /* ===== Note banners ===== */ .note-banner { background: color-mix(in srgb, var(--info) 8%, transparent); border-left: 2px solid var(--info); padding: 12px 14px; margin: 16px 0; border-radius: var(--radius-sm); font-size: 13px; } .note-banner.warning { background: color-mix(in srgb, var(--warning) 8%, transparent); border-left-color: var(--warning); } .note-banner.success { background: color-mix(in srgb, var(--success) 8%, transparent); border-left-color: var(--success); } .gap-suggestion { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-top: 12px; } .gap-suggestion .gap-title { font-size: 11px; font-weight: 500; color: var(--accent); margin-bottom: 8px; letter-spacing: 0.3px; } /* ===== Empty / details ===== */ .empty { text-align: center; padding: 60px 20px; color: var(--text-dim); } .empty h3 { color: var(--text); margin-bottom: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 600; } details { margin-top: 14px; } summary { cursor: pointer; color: var(--text-dim); font-size: 13px; user-select: none; padding: 6px 0; } summary:hover { color: var(--text); } .tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 24%, transparent); margin-right: 4px; margin-bottom: 3px; } .search-input { width: 240px; } .menu-list { padding: 0; list-style: none; margin: 0; } .menu-list li { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 120ms ease; } .menu-list li:last-child { border-bottom: none; } .menu-list li:hover { background: var(--surface-hover); } .menu-list li.active { background: var(--surface-active); color: var(--text); } .contact-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; margin-top: 4px; } .contact-block .contact-row { display: flex; gap: 8px; margin-bottom: 3px; } .contact-block .contact-row .ct-label { color: var(--text-muted); width: 50px; } /* ===== Command palette ===== */ .cmdk-backdrop { padding-top: 12vh; } .cmdk { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); overflow: hidden; } .cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .cmdk-input-wrap svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; } .cmdk-input { width: 100%; background: transparent; border: 0; padding: 0; color: var(--text); font-size: 15px; font-family: inherit; outline: none; } .cmdk-list { max-height: 340px; overflow-y: auto; padding: 6px; } .cmdk-section-title { font-size: 10px; letter-spacing: 0.5px; color: var(--text-muted); padding: 10px 10px 4px; text-transform: uppercase; } .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text); } .cmdk-item .cmdk-spacer { flex: 1; } .cmdk-item.active { background: var(--surface-active); } .cmdk-item:hover { background: var(--surface-hover); } .cmdk-item .cmdk-meta { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); } .cmdk-item svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; } .cmdk-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13px; } /* ===== Toasts ===== */ .toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 40px); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-lg); min-width: 280px; animation: toast-in 180ms ease; } .toast.leaving { animation: toast-out 160ms ease forwards; } .toast .toast-msg { flex: 1; } .toast .toast-undo { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; padding: 0; } .toast .toast-undo:hover { text-decoration: underline; background: transparent; border-color: transparent; } .toast .toast-close { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toast-out { to { transform: translateY(8px); opacity: 0; } } /* ===== Streaming AI output ===== */ .ai-stream { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; min-height: 60px; } .ai-stream::after { content: '▍'; display: inline-block; color: var(--accent); animation: blink 1s steps(2) infinite; margin-left: 1px; } .ai-stream.done::after { display: none; } @keyframes blink { 50% { opacity: 0; } }