/* FollowerCRM — the workspace app. A quiet, professional working surface: white cards on a soft neutral ground, one accent, real typography, drawn icons. Nothing decorative that the task does not need. Four themes ship as a user preference — light and warm, dark and midnight — via [data-theme] on . Components name roles, never a theme. Plain CSS on Propshaft: no build step, no framework. */ /* ---------- Themes ---------- */ :root, [data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f4f5f7; --surface-3: #eceef1; --border: #e6e8ec; --border-strong: #d3d7de; --text: #101828; --muted: #525b68; --subtle: #656e7a; --accent: #6d28d9; --accent-hover: #5b21b6; --accent-text: #5b21b6; --accent-soft: #f3eefc; --accent-line: #ddd0f7; --on-accent: #ffffff; --focus: #6d28d9; --field-border: #868f9c; --ring: rgba(109, 40, 217, .22); --success: #027a48; --success-soft: #e7f6ef; --warning: #b54708; --warning-soft: #fdf1e3; --danger: #b42318; --danger-soft: #fdeceb; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06); --tag-slate: #eef0f3; --tag-slate-ink: #3f4854; --tag-rose: #fdeaf1; --tag-rose-ink: #a11a4d; --tag-amber: #fdf1e3; --tag-amber-ink: #92400e; --tag-emerald: #e7f6ef; --tag-emerald-ink: #036640; --tag-sky: #e8f1fe; --tag-sky-ink: #0b5cad; --tag-violet: #f3eefc; --tag-violet-ink: #5b21b6; } [data-theme="warm"] { color-scheme: light; --bg: #faf8f5; --surface: #ffffff; --surface-2: #f6f2ed; --surface-3: #efe9e1; --border: #eae3da; --border-strong: #d8cec2; --text: #1c1917; --muted: #57514b; --subtle: #6b635b; --accent: #6d28d9; --accent-hover: #5b21b6; --accent-text: #5b21b6; --accent-soft: #f4eefb; --accent-line: #e0d2f5; --on-accent: #ffffff; --focus: #6d28d9; --field-border: #8b8378; --ring: rgba(109, 40, 217, .22); --success: #04704a; --success-soft: #e8f4ee; --warning: #a8480a; --warning-soft: #fbeee0; --danger: #ad2b1d; --danger-soft: #fbeae6; --shadow-xs: 0 1px 2px rgba(60, 45, 30, .05); --shadow-sm: 0 1px 3px rgba(60, 45, 30, .08), 0 1px 2px rgba(60, 45, 30, .04); --shadow-md: 0 8px 20px -6px rgba(60, 45, 30, .12), 0 2px 6px -2px rgba(60, 45, 30, .06); --tag-slate: #f0ece6; --tag-slate-ink: #4a443c; --tag-rose: #fbe9ec; --tag-rose-ink: #9c2444; --tag-amber: #fbeede; --tag-amber-ink: #8a3d09; --tag-emerald: #e8f4ec; --tag-emerald-ink: #0a5f3e; --tag-sky: #e9f0f8; --tag-sky-ink: #135691; --tag-violet: #f4eefb; --tag-violet-ink: #5b21b6; } [data-theme="dark"] { color-scheme: dark; --bg: #0f1319; --surface: #161b23; --surface-2: #1d232d; --surface-3: #242b37; --border: #262d38; --border-strong: #38404e; --text: #e8eaee; --muted: #a2abb8; --subtle: #8b95a3; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-text: #c4b5fd; --accent-soft: #221c38; --accent-line: #3a2f63; --on-accent: #ffffff; --focus: #a78bfa; --field-border: #6b7280; --ring: rgba(167, 139, 250, .35); --success: #4ade80; --success-soft: #10291d; --warning: #fbbf24; --warning-soft: #2c2312; --danger: #fca5a5; --danger-soft: #2e1a1a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow-md: 0 10px 26px -8px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5); --tag-slate: #262d38; --tag-slate-ink: #c2cad6; --tag-rose: #3a1f2b; --tag-rose-ink: #f9a8d4; --tag-amber: #33270f; --tag-amber-ink: #fcd34d; --tag-emerald: #12301f; --tag-emerald-ink: #6ee7b7; --tag-sky: #12283f; --tag-sky-ink: #93c5fd; --tag-violet: #271f45; --tag-violet-ink: #c4b5fd; } [data-theme="midnight"] { color-scheme: dark; /* Dark is a neutral slate. Midnight is the night sky: a deeper, bluer ground with an indigo accent, so the two never read as the same theme. */ --bg: #05060f; --surface: #0c0e1e; --surface-2: #12152a; --surface-3: #191d36; --border: #1d2140; --border-strong: #2d3358; --text: #e7e9f7; --muted: #9ea6c8; --subtle: #858dae; --accent: #5a62e6; --accent-hover: #4b52d4; --accent-text: #a5b4fc; --accent-soft: #151a3c; --accent-line: #2a3068; --on-accent: #ffffff; --focus: #818cf8; --field-border: #626a94; --ring: rgba(129, 140, 248, .38); --success: #34d399; --success-soft: #0a2a27; --warning: #fbbf24; --warning-soft: #2a2314; --danger: #fca5a5; --danger-soft: #2b1a2a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .6); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .7); --shadow-md: 0 12px 30px -8px rgba(0, 0, 0, .9), 0 2px 6px -2px rgba(0, 0, 0, .7); --tag-slate: #1d2140; --tag-slate-ink: #bcc3e0; --tag-rose: #2f1c3a; --tag-rose-ink: #f0a8e0; --tag-amber: #2b2412; --tag-amber-ink: #fcd34d; --tag-emerald: #0b2b28; --tag-emerald-ink: #5eead4; --tag-sky: #0f2544; --tag-sky-ink: #93c5fd; --tag-violet: #1f1f4c; --tag-violet-ink: #b4b8fd; } /* ---------- Constants ---------- */ :root { --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --r-lg: 14px; --r: 10px; --r-sm: 8px; --r-xs: 6px; --rail-w: 252px; --page-max: 1280px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @supports (font-variation-settings: normal) { body { font-feature-settings: "cv11", "ss01"; } } /* ---------- Type ---------- */ h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.25; letter-spacing: -.017em; color: var(--text); } h1 { font-size: 1.55rem; font-weight: 640; letter-spacing: -.022em; } h2 { font-size: 1.2rem; font-weight: 620; } h3 { font-size: .95rem; font-weight: 620; letter-spacing: -.01em; margin: 0; } p { margin: 0 0 1rem; } a { color: var(--accent-text); text-decoration: none; text-underline-offset: .18em; } a:hover { text-decoration: underline; } strong, b { font-weight: 600; } code { font-family: var(--mono); font-size: .88em; } .muted { color: var(--muted); } .subtle { color: var(--subtle); } .tiny { font-size: .8rem; } .nowrap { white-space: nowrap; } .center { text-align: center; } .right { text-align: right; } .mono { font-family: var(--mono); } .stat-value, .pipeline-count, td.right, .tabular { font-variant-numeric: tabular-nums; } .stack { display: flex; flex-direction: column; gap: 1rem; } .stack-sm { display: flex; flex-direction: column; gap: .5rem; } .row { display: flex; align-items: center; gap: .75rem; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Browser surfaces ---------- */ ::selection { background: var(--accent-soft); color: var(--accent-text); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--subtle); } .icon { flex: none; width: 1.05rem; height: 1.05rem; display: inline-block; vertical-align: -.18em; } .icon-lg { width: 1.65rem; height: 1.65rem; } /* ---------- Layout ---------- */ .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem .7rem; overflow-y: auto; min-width: 0; background: var(--surface); border-right: 1px solid var(--border); } .main { min-width: 0; display: flex; flex-direction: column; } .page { width: 100%; max-width: var(--page-max); padding: 1.9rem 2rem 4.5rem; } .page-header { margin-bottom: 1.5rem; } .page-header h1 + p, .page-header > div > p { margin: .35rem 0 0; max-width: 70ch; color: var(--muted); } /* ---------- Rail ---------- */ .brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .6rem; font-size: 1rem; font-weight: 640; letter-spacing: -.015em; color: var(--text); } .brand:hover { text-decoration: none; color: var(--text); } .brand-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: .8rem; font-weight: 700; letter-spacing: -.02em; } /* The chip holds either a workspace's initial or the product's own mark. The mark is a single evenodd path, so the person in it is a hole and the chip's accent shows through -- no second fill to keep in step with the theme. */ .brand-glyph { width: 58%; height: auto; fill: currentColor; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-label { padding: .95rem .6rem .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); } .nav-item { display: flex; align-items: center; gap: .6rem; padding: .48rem .6rem; border-radius: var(--r-sm); font-size: .92rem; font-weight: 500; color: var(--muted); transition: background .12s ease, color .12s ease; } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .nav-icon { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; flex: none; color: var(--subtle); } .nav-item:hover .nav-icon { color: var(--muted); } .nav-item.active .nav-icon { color: var(--accent-text); } .nav-item .count { margin-left: auto; padding: .05rem .4rem; font-size: .74rem; font-weight: 640; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--accent); border-radius: 999px; } .nav-item.active .count { background: var(--accent); } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; } .rail-user { display: flex; align-items: center; gap: .55rem; padding: .65rem .5rem .1rem; border-top: 1px solid var(--border); } .rail-keys { display: flex; gap: .3rem; } .rail-keys > *, .rail-keys form { flex: 1; } .rail-keys .btn { width: 100%; } .rail-sync .btn { gap: .4rem; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-xs); } .card-pad { padding: 1.1rem 1.25rem; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); } .card-body { padding: 1.1rem 1.25rem; } .card-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); } .card-list > * { padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); } .card-list > *:last-child { border-bottom: 0; } .card-list > a:hover { background: var(--surface-2); text-decoration: none; } .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 1.25rem; align-items: start; } /* ---------- Stats ---------- */ .stat { padding: 1.05rem 1.25rem; display: block; color: inherit; } a.stat:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .stat-value { font-size: 1.9rem; font-weight: 660; line-height: 1.1; letter-spacing: -.03em; color: var(--text); } .stat-label { margin-top: .2rem; font-size: .82rem; color: var(--muted); } /* The queue is the one number that decides what to do next. */ .stat-lead .stat-value { color: var(--accent-text); } .stat-lead { border-color: var(--accent-line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .85rem; font-family: inherit; font-size: .875rem; font-weight: 560; line-height: 1.2; white-space: nowrap; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease; -webkit-appearance: none; appearance: none; } .btn:hover { background: var(--surface-2); text-decoration: none; color: var(--text); } .btn:active { box-shadow: none; } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-primary, .btn-accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-xs); } .btn-primary:hover, .btn-accent:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); background: var(--surface); } .btn-danger:hover { background: var(--danger-soft); color: var(--danger); } .btn-ghost { color: var(--muted); background: transparent; border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-sm { padding: .34rem .62rem; font-size: .82rem; } .btn-lg { padding: .66rem 1.15rem; font-size: .95rem; } .btn-block { width: 100%; } /* The one button that leaves the app wears where it goes. Its colours are Instagram's own and stay put in all four themes -- the white on it is the mark's white, not a token of ours. */ .btn-instagram { color: #fff; border-color: transparent; background: linear-gradient(74deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); } .btn-instagram:hover { color: #fff; background: linear-gradient(74deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); filter: brightness(1.07) saturate(1.05); } /* A rule with a word in it, telling the two ways in apart without a heading. */ .or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--subtle); font-size: .78rem; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---------- Fields ---------- */ .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; } .field label, label { font-size: .84rem; font-weight: 540; color: var(--muted); } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], select, textarea { width: 100%; padding: .52rem .7rem; font-family: inherit; font-size: .92rem; color: var(--text); background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); transition: border-color .12s ease, box-shadow .12s ease; } input::placeholder, textarea::placeholder { color: var(--subtle); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); } input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; } textarea { resize: vertical; min-height: 84px; line-height: 1.55; } select { -webkit-appearance: none; appearance: none; padding-right: 1.9rem; background-image: linear-gradient(45deg, transparent 50%, var(--subtle) 50%), linear-gradient(135deg, var(--subtle) 50%, transparent 50%); background-position: right 1rem top 53%, right .65rem top 53%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); } .checkbox { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 400; color: var(--muted); } .field-error { color: var(--danger); font-size: .82rem; } .form-errors { margin-bottom: 1rem; padding: .7rem .9rem; font-size: .88rem; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: var(--r-sm); } .form-errors ul { margin: .3rem 0 0; padding-left: 1.1rem; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: .28rem; padding: .14rem .5rem; font-size: .75rem; font-weight: 560; line-height: 1.45; white-space: nowrap; border-radius: 999px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .badge .icon { width: .82rem; height: .82rem; } .badge-brand, .stage-engaged { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; } .badge-success, .stage-customer { color: var(--success); background: var(--success-soft); border-color: transparent; } .badge-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; } .badge-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; } .badge-accent, .stage-advocate { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); } .stage-archived { opacity: .7; } .tag-slate { color: var(--tag-slate-ink); background: var(--tag-slate); border-color: transparent; } .tag-rose { color: var(--tag-rose-ink); background: var(--tag-rose); border-color: transparent; } .tag-amber { color: var(--tag-amber-ink); background: var(--tag-amber); border-color: transparent; } .tag-emerald { color: var(--tag-emerald-ink); background: var(--tag-emerald); border-color: transparent; } .tag-sky { color: var(--tag-sky-ink); background: var(--tag-sky); border-color: transparent; } .tag-violet { color: var(--tag-violet-ink); background: var(--tag-violet); border-color: transparent; } .kbd { display: inline-grid; place-items: center; min-width: 1.5rem; padding: .08rem .32rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); } /* ---------- Avatars ---------- */ .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: .78rem; font-weight: 620; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .avatar-sm { width: 28px; height: 28px; font-size: .66rem; } .avatar-lg { width: 60px; height: 60px; font-size: 1.1rem; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; } thead th { padding: .65rem 1.25rem; text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; color: var(--subtle); background: var(--surface-2); border-bottom: 1px solid var(--border); } thead th:first-child { border-top-left-radius: var(--r); } thead th:last-child { border-top-right-radius: var(--r); } /* Sortable headers stay quiet until you go looking: the caret only appears under the cursor, or on the column actually doing the sorting. */ .sort-header { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; white-space: nowrap; } .sort-header:hover { color: var(--text); text-decoration: none; } .sort-header.active { color: var(--text); } th.right .sort-header { flex-direction: row-reverse; } .sort-caret { width: 14px; height: 14px; opacity: 0; transition: opacity .12s ease, transform .12s ease; } .sort-header:hover .sort-caret { opacity: .45; } .sort-header.active .sort-caret { opacity: 1; } .sort-caret-up { transform: rotate(180deg); } tbody td { padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: middle; } /* A five-column ledger cannot fit a phone. It scrolls inside its own card rather than dragging the whole page sideways. */ .table-scroll { overflow-x: auto; border-radius: 0 0 var(--r) var(--r); } .table-scroll table { min-width: 40rem; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } tbody a { color: inherit; } tbody a:hover { text-decoration: none; color: var(--accent-text); } /* ---------- Flashes ---------- */ .flashes { position: sticky; top: 0; z-index: 30; padding: .75rem 2rem 0; } .flash { display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; font-size: .9rem; font-weight: 500; border: 1px solid transparent; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .flash .flash-lamp { flex: none; } .flash-notice { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 22%, transparent); } .flash-alert { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); } .flash .btn-ghost { color: inherit; opacity: .7; } .flash .btn-ghost:hover { opacity: 1; background: transparent; color: inherit; } /* ---------- Empty states ---------- */ .empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); } .empty-icon { display: grid; place-items: center; margin: 0 auto .8rem; color: var(--subtle); } .empty h2 { color: var(--text); margin-bottom: .35rem; } .empty p { max-width: 46ch; margin-inline: auto; } .empty .btn { margin-top: .5rem; } /* ---------- Dashboard ---------- */ .queue-item { display: flex; align-items: flex-start; gap: .75rem; } .queue-item .avatar { margin-top: .1rem; } .queue-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; } .queue-handle { font-size: .875rem; font-weight: 600; color: var(--text); } .queue-text { margin: .1rem 0 0; font-size: .875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pipeline-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .75rem; padding: .4rem 0; color: inherit; } .pipeline-row:hover { text-decoration: none; } .pipeline-row > .badge { justify-self: start; } .pipeline-row:hover .pipeline-count { color: var(--accent-text); } .pipeline-track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .pipeline-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .pipeline-fill.is-empty { background: var(--border-strong); } .pipeline-count { text-align: right; font-size: .875rem; font-weight: 600; color: var(--text); } /* ---------- Inbox ---------- */ .inbox-progress { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .progress-track { flex: 1; min-width: 160px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } /* No transition: the app has no Turbo Streams or morphing, so this bar is a brand-new element on every render and would never have a value to animate from. Width is also the wrong property to animate, and scaleX would squash the pill's end caps. */ .progress-fill { height: 100%; border-radius: 999px; background: var(--accent); } .comment-card { overflow: hidden; } .comment-post { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .post-thumb { flex: none; width: 46px; height: 46px; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); } .comment-thread { padding: .9rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .thread-header { margin-bottom: .5rem; } .thread-item { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); } .thread-item:last-child { border-bottom: 0; padding-bottom: 0; } .thread-item.is-reply { padding-left: 1.4rem; } .thread-item.is-current { color: var(--accent-text); } .thread-text { margin: .15rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; } .comment-body { padding: 1.35rem 1.25rem; } .comment-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--subtle); } .comment-text { margin: .9rem 0 0; font-size: 1.2rem; line-height: 1.5; letter-spacing: -.011em; color: var(--text); overflow-wrap: anywhere; } .quick-replies { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; } .reply-form textarea { min-height: 96px; font-size: .96rem; } .reply-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; } .up-next-item { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--border); } .up-next-item:last-child { border-bottom: 0; } .up-next-item:hover { text-decoration: none; } /* ---------- Timeline ---------- */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: 0; } .timeline-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--subtle); background: var(--surface-2); border: 1px solid var(--border); } /* ---------- Contact detail ---------- */ .back-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--subtle); } .back-link:hover { color: var(--text); text-decoration: none; } .back-arrow { width: .9rem; height: .9rem; transform: rotate(180deg); } .contact-name { margin-bottom: .2rem; overflow-wrap: anywhere; } .contact-bio { margin: .9rem 0 0; max-width: 68ch; font-size: .875rem; } /* button_to wraps its button in a form, and a block form in this row would drop the chip after it onto its own line. */ .contact-chips { gap: .4rem; } .contact-chips form { display: inline-flex; margin: 0; } /* Stage is the one judgment this page exists to record, so it is editable where it is displayed: a real