/* Anuvaad CRM — design system. * * Ported from `Anuvaad CRM v2.dc.html`, which used inline styles throughout. * Every colour, radius and size here is taken from that file unchanged; the * only change is that they now live in one place with names. * * Section index (search for the banner comment): * TOKENS · RESET · BUTTONS · PILLS & BADGES · CARDS · APP SHELL · SIDEBAR * TOPBAR · DASHBOARD · JOB BOARD · KANBAN · TABLES · JOB DETAIL * EXCEPTIONS · CERTIFICATION · DRAWER · TOAST · MOTION · UTILITIES * * Two deliberate departures from the source design, both documented at the * point of change: the text scale is solid and keyed to APCA Lc rather than * opacity-based (see TOKENS), and the type floor is 12px — APCA rates 12px * as the absolute concession floor at any weight, and the design shipped * most of its UI at 9.5-11px. */ /* ============================ TOKENS ============================ */ :root { /* Surfaces, darkest first */ --bg: #0b0c10; --surface: #15161c; /* cards */ --surface-2: #101117; /* inset panels, sidebar */ --surface-3: #1a1c23; /* secondary buttons */ --surface-4: #23262e; /* avatars, hover */ --surface-5: #181a21; /* kanban cards */ --pop: #1d1f26; /* popovers, toast */ /* Text — a five-step SOLID scale. * * The source design set text with opacity (rgba(242,243,245,.4) and friends, * 63 uses). Two problems: the result depends on whatever happens to be * behind it, so it is not checkable; and .4/.45 on #15161c computes to about * 3.4:1, which fails WCAG AA badly — at 10px, which was most of the UI. * * Values are keyed to APCA Lc, not the WCAG 2 ratio. WCAG 2 is known to * overstate contrast on near-black — the old `.5` token "passed AA" at * 4.86:1 while sitting at Lc 36, below APCA's Lc 60 floor for content text. * On this surface family the WCAG number is not a safe guide. * * Measured against --surface (#15161c): * --t1 Lc 93 primary — body, table values, anything read closely * --t2 Lc 82 strong secondary — email previews, quoted copy * --t3 Lc 68 secondary — labels, captions, supporting text * --t4 Lc 60 meta — timestamps, table headers, counts. * Lc 60 is APCA's floor for non-body content text. * --t5 Lc 45 DECORATIVE ONLY — dividers, placeholder glyphs. * Never put a word the user needs in --t5. * * --t1 is deliberately not #f2f3f5 (Lc 99): on dark backgrounds very high * contrast causes halation, which is worst for astigmatic readers. */ --t1: #e8e9ec; --t2: #d7d8da; --t3: #c0c1c3; --t4: #b2b3b5; --t5: #969799; --text: var(--t1); --muted: var(--t3); --dim: var(--t4); --faint: var(--t5); /* Hairlines */ --line: rgba(255, 255, 255, .05); --line-2: rgba(255, 255, 255, .08); --line-3: rgba(255, 255, 255, .1); /* Accents */ --lime: #cdf463; /* primary action */ --lime-hi: #dcf77e; --on-lime: #12140a; --green: #8be28b; /* success, on-track */ --green-lt: #e2f78d; --green-xlt: #e9f9a0; --purple: #a78bfa; /* job ids, automation */ --purple-lt: #cfc3fc; --violet: #8a6ff0; --teal: #63d5c0; --blue: #7db4f5; --orange: #f2b263; /* internal notes, client review */ --amber: #f2a35e; /* at risk */ --red: #f47b7b; /* breached, destructive */ --yellow: #e8cf6a; /* warnings */ --mono: ui-monospace, Menlo, monospace; /* Spacing — a 4pt scale. * * Measured before writing this: 35 distinct padding/margin/gap values were * in use across the stylesheet and 605 inline styles, including every * integer from 1 to 20. 145 of those uses were odd numbers, which is the * clearest possible evidence that no scale existed — a real scale is even * or ratio-derived. Five card components had five different paddings and no * two were alike. * * Six values absorb roughly 470 of ~600 occurrences with a maximum shift of * 2px, which is below what anyone can see. --s0 exists for the genuinely * hairline gaps (a glyph beside its number) where 4px is visibly loose. */ --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* Type — six sizes where there were 21. * * Seven of the old sizes lived inside a 3px range (12, 12.5, 13, 13.5, 14, * 14.5, 15) across 167 uses. The just-noticeable difference for text size is * about 10%; a 0.5px step at this size is 3%, so six of those seven were * indistinguishable in pairs — 21 sizes that read as about four. * * 12px is the floor and not negotiable (test_type_floor_holds); APCA rates * anything smaller as unusable at any weight. */ --fs-meta: 12px; /* timestamps, table headers, counts, captions */ --fs-sm: 13px; /* dense table cells, secondary copy */ --fs-body: 15px; /* default reading size */ --fs-lg: 19px; /* sub-heads, secondary figures */ --fs-head: 21px; /* the screen heading */ --fs-hero: 27px; /* the one big number on a screen */ /* Line height. The old file had 13 distinct values, five of them * (1.45–1.65) serving one intent. Nastaliq and Devanagari genuinely need * more leading than Latin and keep their own values further down. */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55; /* Radius. The old tokens (12/16/20/36) shared not one value with what the * app actually drew (5/8/14/18/22/34): six components overrode --r-lg with * a literal 18px. These describe the app as built. */ --r-xs: 5px; /* meters, fills, keycaps */ --r-sm: 8px; --r-md: 14px; --r-lg: 18px; /* the card radius, at last honestly named */ --r-xl: 22px; --r-shell: 36px; --r-pill: 999px; } /* ============================ RESET ============================ */ * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', 'Noto Sans Gurmukhi', 'Noto Sans Devanagari', system-ui, sans-serif; overflow: hidden; background: linear-gradient(150deg, #dcd5ec, #c6bcdf 45%, #d3d7ea); min-height: 100vh; color: var(--text); font-size: 15px; line-height: 1.55; } a { color: var(--lime); } a:hover { color: var(--lime-hi); } /* Anchors used as surfaces (cards, rows, buttons) rather than as links. * Declared HERE, in the reset, and not in UTILITIES — it has to lose to the * component classes that set their own colour. When this lived at the bottom * of the file it silently overrode .stat-hero and .btn-primary, painting * light text onto the lime cards. */ .link { cursor: pointer; text-decoration: none; color: inherit; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } ::selection { background: rgba(205, 244, 99, .28); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #2a2d36; border-radius: 5px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; } table { width: 100%; border-collapse: collapse; } .num { font-variant-numeric: tabular-nums; } /* ============================ BUTTONS ============================ */ .btn { font-family: inherit; cursor: pointer; border: 0; border-radius: var(--r-pill); padding: var(--s2) var(--s4); font-size: 13px; font-weight: 600; background: var(--surface-3); color: var(--text); white-space: nowrap; transition: background .12s, filter .12s; } .btn:hover { background: #232630; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--lime); color: var(--on-lime); font-weight: 700; } .btn-primary:hover { background: var(--lime-hi); } .btn-outline { border: 1px solid var(--line-3); background: var(--surface-3); } .btn-ghost { background: transparent; color: var(--t3); font-weight: 500; padding: var(--s2) var(--s3); } .btn-ghost:hover { background: rgba(255, 255, 255, .06); } .btn-warn { background: var(--orange); color: #161006; } .btn-warn:hover { background: #f7c37e; } .btn-danger { background: var(--red); color: #180a0a; } .btn-danger:hover { background: #f79191; } /* Confirm & stamp — the one high-emphasis action in the batch */ .btn-stamp { padding: var(--s3) var(--s5); font-size: 15px; font-weight: 700; background: linear-gradient(135deg, var(--green-lt), var(--green)); color: var(--on-lime); box-shadow: 0 4px 24px rgba(139, 226, 139, .25); } .btn-stamp:hover { filter: brightness(1.06); } .btn-sm { padding: var(--s1) var(--s4); font-size:12px; } .btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line-3); background: var(--surface-3); font-size: 15px; display: grid; place-items: center; } .btn-icon.sm { width: 32px; height: 32px; } .kbd { font-family: var(--mono); font-size:12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; padding: 0 var(--s1); color: var(--muted); margin-left: var(--s1); } /* ============================ PILLS & BADGES ============================ */ .pill { display: inline-flex; align-items: center; gap: var(--s2); font-size:12px; font-weight: 600; padding: var(--s0) var(--s3); border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; } .pill-glyph { font-size:12px; } .pill-auto { background: rgba(167, 139, 250, .16); color: var(--purple-lt); font-weight: 700; font-size:12px; padding: var(--s0) var(--s2); } .pill-ok { background: rgba(139, 226, 139, .14); color: var(--green); font-weight: 700; font-size:12px; padding: var(--s0) var(--s3); } .pill-warn { background: rgba(232, 207, 106, .13); color: var(--yellow); font-weight: 700; font-size:12px; padding: var(--s0) var(--s3); } .pill-bad { background: rgba(244, 123, 123, .13); color: var(--red); font-weight: 700; font-size:12px; padding: var(--s0) var(--s3); } .pill-neutral { background: rgba(255, 255, 255, .07); color: var(--t2); font-weight: 700; font-size:12px; padding: var(--s0) var(--s3); } .pill-edited { border: 1px solid rgba(205, 244, 99, .4); color: var(--lime); font-size:12px; font-weight: 600; padding: var(--s0) var(--s2); background: transparent; } .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .dot-unread { background: var(--lime); } .avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-4); font-size:12px; font-weight: 700; flex: none; } .avatar.sm { width: 26px; height: 26px; } .avatar.xs { width: 19px; height: 19px; font-size:12px; } .avatar.lg { width: 34px; height: 34px; font-size:12px; font-weight: 800; border: 2px solid var(--line-3); } .avatar-purple { background: #2b2440; color: var(--purple-lt); } .avatar-teal { background: #12352c; color: var(--teal); } .avatar-lime { background: #2c3312; color: var(--lime); } .avatar-blue { background: #122536; color: var(--blue); } /* Three-bar confidence meter — 1 bar Low, 2 Medium, 3 High */ .conf { display: inline-flex; align-items: center; gap: var(--s1); flex: none; } .conf-bars { display: inline-flex; gap: var(--s0); align-items: flex-end; } .conf-bars span { width: 3px; border-radius: 2px; } .conf-bars span:nth-child(1) { height: 5px; } .conf-bars span:nth-child(2) { height: 8px; } .conf-bars span:nth-child(3) { height: 11px; } .conf-label { font-size:12px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ============================ CARDS ============================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s4); } .card-sm { border-radius: var(--r-lg); padding: var(--s4) var(--s5); gap: var(--s3); } .card-label { font-size:12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--dim); } .card-head { display: flex; align-items: center; gap: var(--s2); } .card-title { font-size: 13px; font-weight: 700; white-space: nowrap; } .card-chip { margin-left: auto; font-size:12px; font-weight: 600; padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--t3); } /* ============================ APP SHELL ============================ */ .shell { display: flex; height: calc(100vh - 36px); margin: var(--s4); border-radius: var(--r-shell); overflow: hidden; background: var(--bg); color: var(--text); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(25, 18, 50, .5), 0 4px 14px rgba(25, 18, 50, .3); } .shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .screen { flex: 1; overflow: auto; padding: var(--s6) var(--s6); } .screen-center { flex: 1; display: grid; place-items: center; } /* ============================ SIDEBAR ============================ */ .sidebar { width: 212px; flex: none; display: flex; flex-direction: column; gap: var(--s0); padding: var(--s4) var(--s3); background: var(--surface-2); border-right: 1px solid var(--line); overflow: auto; } .brand { padding: var(--s0) var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s2); } .brand-mark { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--green-lt), var(--green)); display: grid; place-items: center; color: var(--on-lime); font-weight: 700; font-size: 13px; } .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .brand-sub { font-size:12px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .nav-item { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-pill); cursor: pointer; font-size: 13px; text-decoration: none; } .nav-item:hover { background: rgba(255, 255, 255, .07); } .nav-badge { font-size:12px; font-variant-numeric: tabular-nums; padding: var(--s0) var(--s2); border-radius: var(--r-pill); font-weight: 700; } .sidebar-user { margin-top: auto; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); } /* ============================ TOPBAR ============================ */ .topbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); flex: none; } .search { font: inherit; font-size: 13px; max-width: 400px; flex: 1; background: var(--surface); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-pill); color: var(--text); padding: var(--s2) var(--s4); } .health-btn { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: var(--s2) var(--s4); font-size: 12px; font-weight: 500; background: var(--surface); color: var(--text); white-space: nowrap; cursor: pointer; font-family: inherit; } .health-btn:hover { background: var(--pop); } .health-dot { width: 8px; height: 8px; border-radius: 50%; } .popover { position: absolute; right: 0; top: 44px; z-index: 40; width: 290px; background: var(--pop); border: 1px solid var(--line-3); box-shadow: 0 16px 44px rgba(0, 0, 0, .6); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); } /* Poller-stopped banner. Deliberately loud: nothing is being ingested. */ .banner-stopped { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); background: rgba(244, 123, 123, .1); border-bottom: 1px solid rgba(244, 123, 123, .35); flex: none; } /* ============================ DASHBOARD ============================ */ /* Revenue bar chart */ .chart-bar.hi { background: linear-gradient(180deg, #e6ddfd, var(--purple)); box-shadow: 0 6px 22px rgba(167, 139, 250, .35); } .chart-bar.now { background: linear-gradient(180deg, var(--green-xlt), var(--green)); box-shadow: 0 8px 26px rgba(139, 226, 139, .35); } /* Revenue split donut. The conic-gradient stops are set inline from the view model — they are data. A hardcoded ring next to real percentages is a chart that lies. */ /* Top-clients podium — stacked cards, best on top */ /* ============================ JOB BOARD ============================ */ .board-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); flex-wrap: wrap; } .segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: var(--s0); } .segmented button { border: 0; cursor: pointer; padding: var(--s1) var(--s4); font-size: 13px; font-weight: 600; font-family: inherit; border-radius: var(--r-pill); background: transparent; color: var(--t3); } .segmented button.on { background: var(--lime); color: var(--on-lime); } .stat-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s4); margin-bottom: var(--s5); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s0); } .stat-link { cursor: pointer; } .stat-link:hover { border-color: rgba(205, 244, 99, .4); } .stat-hero { background: linear-gradient(135deg, var(--green-lt), var(--green)); color: #161a08; border: 0; cursor: pointer; } .stat-hero:hover { filter: brightness(1.04); } .stat-key { font-size:12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; } .stat-num { font-size: 27px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat-hero .stat-num { font-size: 27px; font-weight: 800; line-height: 1.1; } .stat-sub { font-size: 12px; color: var(--muted); } /* ============================ KANBAN ============================ */ .kanban { display: flex; gap: var(--s3); align-items: flex-start; } .kanban-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: var(--s3); } .kanban-head { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s1); } .kanban-name { font-size:12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .kanban-card { cursor: pointer; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s3); background: var(--surface-5); border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; text-decoration: none; color: inherit; } .kanban-card:hover { border-color: rgba(205, 244, 99, .5); } /* Five columns on a 1440px screen leaves ~200px per card. The footer row * (deadline · stage · owner) has to survive that, so the stage label gives up * its space first — it is the one item also shown in the column header. */ .kanban-card .stage-label { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:12px; color: var(--t4); } .kanban-foot { display: flex; align-items: center; gap: var(--s2); min-width: 0; } .kanban-col { min-width: 168px; } /* Below this the board stops being a board. Scroll rather than crush it. */ .kanban { min-width: 900px; } /* ============================ TABLES ============================ */ .table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s2) var(--s5) var(--s3); overflow-x: auto; } .table-wrap.tight { border-radius: var(--r-lg); padding: var(--s2) var(--s5) var(--s3); } .tbl { font-size: 13px; } .tbl th { text-align: left; font-size:12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: var(--s4) var(--s2); font-weight: 600; } .tbl td { padding: 14px var(--s3); } .tbl tbody tr { cursor: pointer; border-top: 1px solid rgba(255, 255, 255, .04); } .tbl tbody tr:hover { background: rgba(255, 255, 255, .03); } .tbl .chev { text-align: right; color: var(--faint); font-size: 13px; padding: var(--s3) var(--s1); } .tbl-compact { font-size: 13px; } .tbl-compact th { padding: var(--s3) var(--s2); } .tbl-compact td { padding: var(--s2) var(--s2); } .job-id { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--purple); } .job-meta { font-size: 12px; color: var(--t4); margin-top: var(--s0); font-variant-numeric: tabular-nums; } /* ============================ JOB DETAIL ============================ */ .job-head { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); } .job-cols { display: flex; gap: var(--s4); align-items: flex-start; } .job-timeline { flex: 62; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; } .job-rail { flex: 38; display: flex; flex-direction: column; gap: var(--s3); min-width: 280px; } /* 12 segments, one per stage. Filled = done, white = current. */ .stage-dots { display: flex; align-items: center; gap: var(--s1); } .stage-dots span { height: 5px; flex: 1; border-radius: 3px; } .tl-mail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); } .tl-line { display: flex; align-items: center; gap: var(--s2); padding: var(--s0) var(--s4); font-size: 12px; color: var(--t3); } .tl-subj { font-size: 13px; font-weight: 600; } .tl-body { font-size: 13px; color: var(--t2); line-height: 1.55; } .tl-prov { font-size:12px; color: var(--dim); } .attachment { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--surface-3); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-sm); align-self: flex-start; } .doc-thumb { background: repeating-linear-gradient(45deg, var(--surface-4) 0 6px, var(--surface-3) 6px 12px); border-radius: 6px; flex: none; } /* Internal notes are visually unlike anything sendable — they must never be mistaken for client-facing copy in a screenshot. */ .tl-note { border: 1px dashed rgba(242, 178, 99, .45); border-radius: var(--r-md); padding: var(--s3) var(--s4); background: rgba(242, 178, 99, .05); display: flex; flex-direction: column; gap: var(--s1); } .note-proof { font-size:12px; font-weight: 800; letter-spacing: .12em; color: #161006; background: repeating-linear-gradient(45deg, var(--orange) 0 10px, #df9c4b 10px 20px); border-radius: var(--r-pill); padding: var(--s0) var(--s3); align-self: flex-start; } .next-action { background: linear-gradient(135deg, var(--green-lt), var(--green)); border-radius: 18px; padding: var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); color: #161a08; } .next-action .btn { background: #161a08; color: var(--lime); align-self: flex-start; font-size: 13px; padding: var(--s2) var(--s4); } .next-action .btn:hover { background: #242a10; } .progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); } .progress > span { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green-lt), var(--green)); } /* ============================ EXCEPTIONS ============================ */ .ex-screen { flex: 1; overflow: auto; padding: var(--s5) 0 66px; } .ex-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); padding: 0 var(--s5); } .ex-card { background: var(--surface); border-radius: 18px; padding: var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); border: 1.5px solid var(--line); } /* pre-line: the classifier's extraction arrives as a second line and the "Ask the client:" prompt as a third — collapsing them defeats the point. */ .ex-reason { font-size: 15px; font-weight: 600; line-height: 1.55; white-space: pre-line; } /* Native dropdown menu: a
wearing a button. No JS, closes on outside click via the toggle, keyboard for free. */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; gap: var(--s0); min-width: 240px; background: var(--surface); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: var(--s2); box-shadow: 0 12px 32px rgba(0,0,0,.45); } .menu-item { width: 100%; text-align: left; padding: var(--s2) var(--s3); border: 0; border-radius: 8px; background: transparent; color: var(--t1); font-size: 13px; font-weight: 500; cursor: pointer; } .menu-item:hover { background: rgba(255,255,255,.07); } /* Work in flight. Calm, not alarming: this is the system doing its job. */ .working-bar { display: flex; flex-direction: column; gap: var(--s2); margin: 0 var(--s5) var(--s3); padding: var(--s3) var(--s4); background: rgba(205,244,99,.06); border: 1px solid rgba(205,244,99,.22); border-radius: 14px; } .work-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; min-width: 90px; } .work-track > span { display: block; height: 100%; background: #cdf463; border-radius: 3px; transition: width .8s var(--ease-standard, ease); } .spinner { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid rgba(205,244,99,.25); border-top-color: #cdf463; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } /* Rail cards are
: closed = a label and one number. Open only what is waiting on a decision. */ .rail-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s2); } .rail-fold > summary::-webkit-details-marker { display: none; } .rail-fold > summary::after { content: "▸"; color: var(--t4); font-size: 12px; margin-left: auto; } .rail-fold[open] > summary::after { content: "▾"; } /* Timeline emails are
: closed = a one-line header. */ .tl-mail > summary { list-style: none; cursor: pointer; } .tl-mail > summary::-webkit-details-marker { display: none; } .tl-mail > summary::after { content: "▸"; color: var(--t4); font-size: 12px; margin-left: var(--s1); } .tl-mail[open] > summary::after { content: "▾"; } .ex-evidence { background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; padding: var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s1); } .ex-cand { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: 14px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface-2); width: 100%; text-align: left; font-family: inherit; color: inherit; } .ex-cand:hover { border-color: rgba(205, 244, 99, .6); } .ex-key { font-size:12px; padding: var(--s0) var(--s2); border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; font-family: var(--mono); color: var(--muted); } .ex-why { font-size:12px; color: var(--muted); flex: 1; line-height: 1.35; } .ex-actions { display: flex; gap: var(--s2); align-items: center; } .hotkeys { position: fixed; left: 231px; right: 19px; bottom: 19px; border-radius: 0 0 34px 34px; display: flex; gap: var(--s4); justify-content: center; padding: var(--s2); background: rgba(11, 12, 16, .92); backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, .06); font-size:12px; color: var(--muted); font-variant-numeric: tabular-nums; z-index: 5; } .hotkeys b { font-family: var(--mono); font-weight: 600; color: var(--lime); } .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: 64px 0; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; } .check-circle { border-radius: 50%; background: linear-gradient(135deg, var(--green-lt), var(--green)); color: var(--on-lime); display: grid; place-items: center; font-weight: 700; } /* ============================ CERTIFICATION ============================ */ /* Full-bleed batch mode — the sidebar is hidden so one document fills the screen. PRD §4 stage 10: one batched session, not fifteen interruptions. */ .cert { height: calc(100vh - 36px); margin: var(--s4); border-radius: var(--r-shell); overflow: hidden; display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(25, 18, 50, .5), 0 4px 14px rgba(25, 18, 50, .3); } .cert-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid rgba(255, 255, 255, .06); flex: none; } .cert-progress { width: 150px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); } .cert-progress > span { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--green-lt), var(--green)); } .cert-panes { flex: 1; display: flex; min-height: 0; gap: var(--s0); } .cert-pane { flex: 1; overflow: auto; padding: var(--s5); } .cert-pane + .cert-pane { border-left: 1px solid rgba(255, 255, 255, .06); } .cert-stack { display: flex; flex-direction: column; align-items: center; gap: var(--s3); } .cert-eyebrow { font-size:12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); } .cert-page { max-width: 96%; background: var(--surface); border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 40px 36px; min-height: 600px; display: flex; flex-direction: column; gap: var(--s1); } .cert-page.translated { background: #191b22; border-color: rgba(255, 255, 255, .09); } .cert-src-line { font-size: 15px; line-height: 2.2; color: var(--t2); } .cert-dst-line { font-size: 13px; line-height: 2.36; color: var(--t1); } .cert-placeholder { margin-top: auto; padding-top: var(--s6); font-family: var(--mono); font-size:12px; color: var(--t5); text-align: center; } .cert-declaration { margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--line-3); font-size:12px; line-height: 1.7; color: var(--muted); } .cert-actions { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-top: 1px solid rgba(255, 255, 255, .06); flex: none; } .cert-reason { position: fixed; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 60; background: var(--pop); border: 1px solid var(--line-3); box-shadow: 0 16px 44px rgba(0, 0, 0, .6); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); width: 460px; } .cert-done { display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; background: var(--surface); border: 1px solid rgba(255, 255, 255, .06); border-radius: 24px; padding: 44px 56px; } .cert-tally { display: flex; gap: var(--s6); font-variant-numeric: tabular-nums; } .cert-tally-num { font-size: 27px; font-weight: 700; } .cert-tally-lbl { font-size: 12px; color: var(--muted); } /* ============================ DRAWER ============================ */ .scrim { position: fixed; inset: 0; background: rgba(5, 6, 9, .6); z-index: 50; border: 0; } .drawer { position: fixed; top: 26px; right: 26px; bottom: 26px; width: 600px; max-width: 92vw; z-index: 51; background: var(--surface); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r-lg); box-shadow: -16px 0 44px rgba(0, 0, 0, .6); display: flex; flex-direction: column; color: var(--text); overflow: hidden; } .drawer-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .07); } .drawer-body { flex: 1; overflow: auto; padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .drawer-foot { display: flex; gap: var(--s2); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid rgba(255, 255, 255, .07); } .field-label { display: block; font-size:12px; color: var(--muted); margin-bottom: var(--s1); font-weight: 500; } .field { font: inherit; font-size: 13px; width: 100%; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); padding: var(--s2) var(--s3); } .field-area { font-size: 13px; line-height: 1.55; min-height: 210px; resize: vertical; padding: var(--s3) var(--s3); } /* Send is red-outlined and two-step: arming turns it solid. Sending is the one action with no undo (PRD §5 — client-facing actions are capped at A2). */ .btn-send { font-size: 13px; font-weight: 700; padding: var(--s2) var(--s5); border-radius: var(--r-pill); border: 1px solid var(--red); font-family: inherit; cursor: pointer; } .att-card { width: 180px; border: 1px solid var(--line-3); border-radius: 14px; overflow: hidden; } .att-thumb { height: 118px; background: repeating-linear-gradient(45deg, var(--surface-4) 0 8px, var(--surface-3) 8px 16px); display: grid; place-items: center; color: var(--dim); font-family: var(--mono); font-size:12px; text-align: center; padding: var(--s3); } .att-meta { padding: var(--s2) var(--s3); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--s0); } .att-chip { display: inline-flex; gap: var(--s2); align-items: center; padding: var(--s1) var(--s3); background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r-pill); font-size: 12px; } /* ============================ TOAST ============================ */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: var(--s3); background: var(--pop); border: 1px solid var(--line-3); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); border-radius: var(--r-pill); padding: var(--s3) var(--s5); font-size: 13px; color: var(--text); animation: toastin .15s ease; } @keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } .toast-undo { border: 0; background: transparent; color: var(--lime); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; padding: var(--s0) var(--s2); cursor: pointer; font-family: inherit; } .toast-undo:hover { color: var(--lime-hi); } /* ======================= MULTI-SCRIPT TYPOGRAPHY ======================= * Gurmukhi and Devanagari carry marks above AND below the baseline; Nastaliq * cascades diagonally and needs far more leading than anything Latin. These * are keyed off `lang`, so the rule follows the content rather than the * component — set lang/dir on any element holding client text. * * Each script also gets its own block container in the certification pane * rather than being mixed inline: a line box takes the height of the tallest * font on it, so one Urdu word inside a Latin sentence would otherwise blow * out the whole paragraph. */ [lang="pa"], [lang="hi"] { line-height: 1.55; } [lang="ur"] { line-height: 2.2; } /* Isolate inline runs of unknown direction — a client name or filename next * to RTL text reorders the whole line without this. */ bdi, [dir="auto"] { unicode-bidi: isolate; } /* ============================ MOTION ============================ * * Rules this follows, so motion stays useful rather than decorative: * * 1. Motion explains a change — where a thing came from, what just * happened, what is still loading. It never plays for its own sake. * 2. Durations are short. 120-260ms for anything the user is waiting on; * only ambient loops go longer. This is a tool people use all day. * 3. Nothing important is *only* communicated by motion. * 4. Every single rule below is inside the reduced-motion guard at the * bottom of this section. Vestibular disorders are real and this app is * used for hours at a time. */ :root { /* Durations and curves are IBM Carbon's `productive` set — the ones Carbon * specifies for data-dense work, as opposed to its `expressive` set for * marketing surfaces. Nothing here exceeds 240ms: in a keyboard-driven * triage queue every millisecond of animation is latency for a power user. */ --ease: cubic-bezier(0, 0, .38, .9); /* entrance — decelerate in */ --ease-in: cubic-bezier(.2, 0, 1, .9); /* exit — accelerate out */ --ease-move: cubic-bezier(.2, 0, .38, .9); /* standard — moves in place */ --dur-1: 90ms; /* state flips: hover, press, colour */ --dur-2: 160ms; /* elements entering: rows, cards */ --dur-3: 240ms; /* larger moves: drawer, screen change */ } /* --- Screen transitions ------------------------------------------------- * htmx swaps the whole #root, which without this reads as a hard cut. The * View Transitions API cross-fades it. Enabled globally in app.js. */ @keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } } ::view-transition-old(root) { animation: vt-out var(--dur-1) var(--ease-in) both; } ::view-transition-new(root) { animation: vt-in var(--dur-2) var(--ease) both; } /* --- List entrance ------------------------------------------------------ * Rows arrive in sequence so the eye can follow the list forming instead of * being handed a finished block. --i is set per row in the template; the * stagger is capped so a long table never feels slow. */ @keyframes row-in { from { opacity: 0; transform: translateY(6px); } } .tbl tbody tr, .kanban-card, .ex-card, .pay-row, .payout-row, .tl-mail, .tl-line, .tl-note { animation: row-in var(--dur-2) var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 22ms); } /* --- Bars and meters ---------------------------------------------------- * Growth is the point of these, so they grow. Chart bars scale from their * baseline; progress fills animate their width whenever it changes. */ @keyframes bar-grow { from { transform: scaleY(0); } } .progress > span, .cert-progress > span { transition: width var(--dur-3) var(--ease); } /* --- Interactive feedback ----------------------------------------------- */ .btn, .btn-send, .ex-cand, .nav-item, .health-btn { transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); } .btn:active:not(:disabled), .btn-send:active, .ex-cand:active { transform: scale(.975); } /* Cards lift toward the cursor. 1px, not 4 — this is a dense tool. */ .kanban-card, .stat-link, .stat-hero { transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); } .kanban-card:hover, .stat-link:hover, .stat-hero:hover { transform: translateY(-1px); } .tbl tbody tr { transition: background var(--dur-1) var(--ease); } /* The exception queue's focus ring travels between cards as J/K move. */ .ex-card { transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .ex-card:has(+ .ex-card) { will-change: border-color; } /* --- In-flight ---------------------------------------------------------- * A determinate-looking bar across the top while a request is out. Every * action here is a round-trip; without this the UI just looks frozen. */ #htmx-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--lime), var(--green)); box-shadow: 0 0 10px var(--lime); z-index: 200; opacity: 0; transition: width 200ms var(--ease), opacity 150ms; pointer-events: none; } #htmx-progress.on { opacity: 1; width: 70%; } #htmx-progress.done { width: 100%; opacity: 0; transition: width 120ms var(--ease), opacity 250ms 100ms; } /* --- Toast -------------------------------------------------------------- */ .toast { animation: toastin var(--dur-2) var(--ease); } .toast.leaving { animation: toastout 160ms var(--ease-in) both; } @keyframes toastout { to { opacity: 0; transform: translate(-50%, 8px); } } /* --- Armed send --------------------------------------------------------- * The one irreversible action in the app. Once armed it breathes, so an * armed button is never mistaken for a resting one — and it reverts after * 3.5s (app.js §4) rather than sitting there primed. */ @keyframes armed { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 123, 123, .45); } 50% { box-shadow: 0 0 0 5px rgba(244, 123, 123, 0); } } .btn-send.armed { animation: armed 1.6s ease-out infinite; } /* --- Batch completion --------------------------------------------------- * Finishing the certification batch is the one genuinely good moment in the * day's work. It gets a beat. */ @keyframes pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } .cert-done .check-circle { animation: pop 420ms var(--ease) both; } .cert-done .cert-tally > div { animation: vt-in var(--dur-3) var(--ease) both; } .cert-done .cert-tally > div:nth-child(1) { animation-delay: 140ms; } .cert-done .cert-tally > div:nth-child(2) { animation-delay: 220ms; } .cert-done .cert-tally > div:nth-child(3) { animation-delay: 300ms; } .empty-state .check-circle { animation: pop 420ms var(--ease) both; } /* --- Off switch --------------------------------------------------------- * Honoured properly: animations are removed, not merely shortened, and * everything still lands in its final state. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .kanban-card:hover, .stat-link:hover, .stat-hero:hover { transform: none; } } /* ============================ UTILITIES ============================ */ .row { display: flex; align-items: center; gap: var(--s2); } .col { display: flex; flex-direction: column; } .spacer { flex: 1; } .muted { color: var(--muted); } .dim { color: var(--dim); } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wrap { flex-wrap: wrap; } /* .link lives in RESET — see the note there. */ /* Named for the role, not for a size they had stopped being: `.f11` rendered * 12px and `.f12` — the most-used class in the app, 131 consumers — rendered * 12.5px. `.f14` had none at all. A class whose name contradicts its value is * a class nobody can reason about. */ .t-meta { font-size: var(--fs-meta); } .t-sm { font-size: var(--fs-sm); } .t-body { font-size: var(--fs-body); } .b6 { font-weight: 600; } .b7 { font-weight: 700; } .b8 { font-weight: 800; } /* ============================ FORMS ============================ * Data entry. `.field` is defined in the DRAWER section above; everything here * builds rows and grids out of it. Native controls throughout — a