/* hq-clients.css — Inkara HQ → Client progress (views-hq-clients.js). Everything is scoped under .hqc (the page) or .hqc-modal (the edit dialog), so nothing here can reach the rest of the dashboard. Its own file, like the view, so it never conflicts with the churn in style.css. Two brand tokens are deliberately NOT used as text colours, because they fail WCAG AA on paper (carried over from the artifact's audit): --muted #8a8477 is 3.53:1 → text uses --hqc-muted #6b665b (5.42:1) --warning #f39c12 is 2.08:1 → text uses --hqc-warm #8a5a12 (5.50:1); the amber stays for fills and marks. */ /* Modals are appended to , outside .hqc, so they get the tokens too. */ .hqc, .hqc-modal { --hqc-muted: #6b665b; --hqc-ink-2: #3f3f57; --hqc-surface-2: #f6f4ef; --hqc-rule-2: #efebe4; --hqc-live: var(--success); --hqc-live-soft: #e5efe9; --hqc-warm: #8a5a12; --hqc-warm-soft: #fdf3e0; --hqc-cold: var(--danger); --hqc-cold-soft: #f9e7e4; --hqc-idle-soft: #efece6; --hqc-shadow: 0 1px 2px rgba(26,26,46,.05), 0 6px 18px -10px rgba(26,26,46,.20); } .hqc .hqc-vh { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* hero */ .hqc-hero-actions { display:flex; gap:8px; flex-wrap:wrap; } .hqc-hero-actions .btn svg { width:14px; height:14px; vertical-align:-2px; margin-right:2px; } .hqc-hero-actions .btn[disabled] { opacity:.55; cursor:default; } .hqc-lede { margin:-.6rem 0 .35rem; } .hqc-sources { font-size:.78rem; color:var(--hqc-muted); margin:-.4rem 0 .9rem; } .hqc-sources .hqc-bad, .hqc .hqc-bad { color:var(--hqc-cold); font-weight:600; } .hqc-scan-note { font-size:.8rem; line-height:1.55; margin:0 0 14px; padding:9px 13px; border:1px solid var(--border); border-left:3px solid var(--hqc-muted); border-radius:var(--radius); background:#fff; color:var(--hqc-ink-2); } .hqc-scan-note.ok { border-left-color:var(--hqc-live); } .hqc-scan-note.bad { border-left-color:var(--hqc-cold); } /* stats */ /* Flex, not grid: a wrapped last tile stretches to fill its row instead of leaving a hole the size of a tile. */ .hqc-stats { display:flex; flex-wrap:wrap; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:0 0 18px; } .hqc-stat { background:#fff; padding:13px 15px; display:flex; flex-direction:column; gap:2px; flex:1 1 130px; } .hqc-stat .n { font-family:var(--font-serif); font-size:1.85rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); } .hqc-stat .k { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hqc-muted); font-weight:600; } .hqc-stat.is-cold .n { color:var(--hqc-cold); } .hqc-stat.is-warm .n { color:var(--hqc-warm); } /* controls */ .hqc-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; } .hqc-seg { display:inline-flex; flex-wrap:wrap; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .hqc-seg button { font:inherit; font-size:.78rem; font-weight:500; padding:6px 11px; background:none; border:0; border-right:1px solid var(--border); color:var(--hqc-muted); cursor:pointer; } .hqc-seg button:last-child { border-right:0; } .hqc-seg button[aria-pressed="true"] { background:var(--accent-light); color:var(--accent); } .hqc-seg button:hover { color:var(--ink); } .hqc-spacer { flex:1 1 auto; } .hqc input[type="search"] { font:inherit; font-size:.82rem; padding:6px 11px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--ink); min-width:0; flex:1 1 180px; max-width:280px; } .hqc button:focus-visible, .hqc input:focus-visible, .hqc tr.hqc-row:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } /* table */ .hqc-tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--hqc-shadow); } .hqc-table { border-collapse:collapse; width:100%; min-width:760px; } .hqc-table thead th { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hqc-muted); font-weight:600; text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--hqc-surface-2); white-space:nowrap; } .hqc-table thead th.num { text-align:right; } .hqc-table td { padding:10px 12px; vertical-align:top; } .hqc-row { border-bottom:1px solid var(--hqc-rule-2); cursor:pointer; } .hqc-row:hover { background:var(--hqc-surface-2); } .hqc-table td.hqc-stripe { padding:0; width:3px; background:var(--border); } .hqc-row.sev-act td.hqc-stripe { background:var(--hqc-cold); } .hqc-row.sev-slip td.hqc-stripe { background:var(--warning); } .hqc-row.sev-ok td.hqc-stripe { background:var(--hqc-live); } .hqc-name { font-weight:600; font-size:.92rem; display:block; color:var(--ink); } .hqc-sub { font-size:.72rem; color:var(--hqc-muted); } .hqc-flag { font-size:.64rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--hqc-muted); border:1px solid var(--border); border-radius:3px; padding:1px 5px; margin-left:6px; white-space:nowrap; } .hqc-next { font-size:.82rem; color:var(--hqc-ink-2); max-width:34ch; } .hqc-next.empty { color:var(--hqc-muted); font-style:italic; } .hqc-days { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; font-size:.82rem; } .hqc-days b { font-weight:500; } .hqc-days.act b { color:var(--hqc-cold); } .hqc-days.slip b { color:var(--hqc-warm); } .hqc-days.ok b { color:var(--hqc-live); } .hqc-days small { display:block; color:var(--hqc-muted); font-size:.68rem; } .hqc-empty td { padding:26px 14px; text-align:center; color:var(--hqc-muted); font-size:.85rem; } /* band headings */ .hqc-bandhead td { padding:16px 12px 7px; border-bottom:1px solid var(--border); background:#fff; } .hqc-bandhead:first-child td { padding-top:11px; } .hqc-bandhead .bh-n { font-family:var(--font-serif); font-size:1.05rem; color:var(--ink); } .hqc-bandhead .bh-c { display:inline-block; margin-left:8px; font-size:.7rem; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--hqc-idle-soft); color:var(--hqc-muted); font-variant-numeric:tabular-nums; } .hqc-bandhead .bh-d { display:block; font-size:.74rem; color:var(--hqc-muted); margin-top:1px; } .band-act .bh-n { color:var(--hqc-cold); } .band-act .bh-c { background:var(--hqc-cold-soft); color:var(--hqc-cold); } .band-slip .bh-n { color:var(--hqc-warm); } .band-slip .bh-c { background:var(--hqc-warm-soft); color:var(--hqc-warm); } .band-ok .bh-n { color:var(--hqc-live); } .band-ok .bh-c { background:var(--hqc-live-soft); color:var(--hqc-live); } /* pills, owner, ball */ .hqc-pill { display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:999px; white-space:nowrap; } .hqc-pill.live { background:var(--hqc-live-soft); color:var(--hqc-live); } .hqc-pill.onboarding { background:var(--accent-light); color:var(--accent); } .hqc-pill.discussion { background:var(--hqc-warm-soft); color:var(--hqc-warm); } .hqc-pill.arrange, .hqc-pill.unknown { background:var(--hqc-idle-soft); color:var(--hqc-muted); } .hqc-pill.dormant { background:var(--hqc-idle-soft); color:var(--hqc-muted); } .hqc-pill.lapsed { background:var(--hqc-cold-soft); color:var(--hqc-cold); } .hqc-owner { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--hqc-ink-2); white-space:nowrap; } .hqc-ini { width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; font-weight:600; color:#fff; background:var(--hqc-muted); flex:0 0 auto; } .hqc-ini-none { background:var(--border); color:var(--hqc-muted); } .hqc-ball { display:inline-block; font-size:.63rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:3px; margin-right:7px; vertical-align:1px; white-space:nowrap; } .hqc-ball.b-us { background:var(--hqc-cold-soft); color:var(--hqc-cold); } .hqc-ball.b-them { background:var(--hqc-idle-soft); color:var(--hqc-muted); } .hqc-ball.b-both { background:var(--hqc-warm-soft); color:var(--hqc-warm); } .hqc-ball.b-none { background:transparent; color:var(--hqc-muted); border:1px solid var(--border); } /* gear */ .hqc-table td.hqc-gearcell { width:34px; padding:8px 10px 8px 0; text-align:right; } .hqc-gear { background:none; border:0; padding:4px; cursor:pointer; color:var(--hqc-muted); line-height:0; border-radius:var(--radius); opacity:0; transition:opacity .13s, color .13s; } .hqc-gear svg { width:15px; height:15px; } .hqc-row:hover .hqc-gear, .hqc-gear:focus-visible { opacity:1; } .hqc-gear:hover { color:var(--accent); background:var(--hqc-surface-2); } @media (hover:none), (max-width:768px) { .hqc-gear { opacity:1; } } /* client detail (the modal a row opens) */ .hqc-panel { display:flex; flex-direction:column; gap:16px; } .hqc-panel-cols { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:22px; } @media (max-width:720px) { .hqc-panel-cols { grid-template-columns:1fr; gap:16px; } } .hqc-field { margin-bottom:13px; } .hqc-label { font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hqc-muted); font-weight:600; display:block; margin-bottom:4px; } .hqc-val { font-size:.85rem; color:var(--hqc-ink-2); } .hqc-quote { font-size:.9rem; line-height:1.6; color:var(--ink); max-width:68ch; } .hqc-contacts { display:flex; flex-wrap:wrap; gap:5px; min-width:0; margin-top:4px; } .hqc-contact { font-size:.7rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2px 6px; color:var(--hqc-ink-2); max-width:100%; overflow-wrap:anywhere; } .hqc-none { font-size:.74rem; color:var(--hqc-muted); font-style:italic; } .hqc-people { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:3px; } .hqc-pcard { border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; background:#fff; } .hqc-pcard.is-quiet { opacity:.62; } .hqc-pcard-h { display:flex; align-items:center; gap:6px; margin-bottom:5px; } .hqc-pcard-n { font-size:.82rem; font-weight:600; color:var(--ink); } .hqc-pcard-d { font-size:.68rem; color:var(--hqc-muted); margin-left:auto; font-variant-numeric:tabular-nums; } .hqc-pcard-m { font-size:.74rem; color:var(--hqc-muted); line-height:1.45; } .hqc-pcard-src { font-size:.68rem; color:var(--hqc-muted); margin-top:4px; line-height:1.4; } /* how it works */ .hqc-how { margin-top:22px; font-size:.8rem; color:var(--hqc-muted); line-height:1.6; max-width:78ch; } .hqc-how summary { cursor:pointer; font-family:var(--font-serif); font-size:1.05rem; color:var(--ink); } .hqc-how b { color:var(--hqc-ink-2); } /* edit dialog */ .hqc-modal { max-width:560px; } .hqc-modal .form-group { margin-bottom:.75rem; } .hqc-modal .hqc-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .hqc-modal .hqc-row2 .form-group { margin-bottom:.75rem; } .hqc-modal textarea { width:100%; font:inherit; resize:vertical; } .hqc-modal .hqc-checks { display:flex; flex-direction:column; gap:6px; font-size:.85rem; margin-top:.25rem; } .hqc-modal .hqc-checks input { margin-right:6px; } .hqc-modal .hqc-archive { color:var(--danger); border-color:var(--danger); background:#fff; } .hqc-modal .hqc-archive:hover { background:var(--danger); color:#fff; } /* client detail modal */ .hqc-modal.hqc-detail-modal { max-width:860px; width:92%; } .hqc-dm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; } .hqc-dm-head h3 { margin:0 0 6px; } .hqc-dm-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:.8rem; } .hqc-dm-meta .hqc-days { text-align:left; } .hqc-dm-close { background:none; border:0; cursor:pointer; color:var(--muted); padding:4px; border-radius:var(--radius); line-height:0; } .hqc-dm-close:hover { color:var(--ink); background:#f6f4ef; } .hqc-dm-close svg { width:18px; height:18px; } .hqc-dm-next { font-size:.88rem; color:#3f3f57; background:#f6f4ef; border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin:6px 0 18px; } .hqc-detail-modal .modal-actions { margin-top:18px; } .hqc-detail-modal .modal-actions .btn svg { width:14px; height:14px; vertical-align:-2px; } /* scan-created rows */ .hqc-flag.hqc-flag-new { color:var(--accent); border-color:var(--accent-light); background:var(--accent-light); } /* contacts as people */ .hqc-cp { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 16px; } .hqc-cp li { font-size:.8rem; line-height:1.4; min-width:0; } .hqc-cp-name { font-weight:600; color:var(--ink); display:block; overflow-wrap:anywhere; } .hqc-cp-email { display:block; font-size:.72rem; color:var(--hqc-muted); overflow-wrap:anywhere; } .hqc-cp-meta { display:block; font-size:.7rem; color:var(--hqc-muted); } .hqc-tag { display:inline-block; font-size:.62rem; font-weight:600; letter-spacing:.03em; padding:0 5px; border-radius:3px; background:var(--hqc-idle-soft); color:var(--hqc-muted); } .hqc-tag.hqc-tag-login { background:var(--hqc-live-soft); color:var(--hqc-live); } /* "New in your mail" */ .hqc-sugg { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); background:#fff; margin:0 0 18px; padding:12px 14px; } .hqc-sugg-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:6px; } .hqc-sugg-t { font-family:var(--font-serif); font-size:1.05rem; color:var(--ink); } .hqc-sugg ul { list-style:none; margin:0; padding:0; } .hqc-sugg li { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--hqc-rule-2); } .hqc-sugg li:first-child { border-top:0; } .hqc-sugg-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; } .hqc-sugg-d { font-weight:600; font-size:.88rem; color:var(--ink); } .hqc-sugg-p { font-size:.74rem; color:var(--hqc-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hqc-sugg-act { display:flex; gap:6px; flex:0 0 auto; } .hqc-sugg-more { background:none; border:0; padding:6px 0 0; font:inherit; font-size:.78rem; color:var(--accent); cursor:pointer; } .hqc-sugg-more:hover { text-decoration:underline; } .hqc-auto-note { margin:4px 0 0; font-size:.72rem; }