/* Next Target — the "Persona Leads" design system. A deep navy header over a light grey page, white cards with 22px corners and a soft lift, one green accent, pill chips and 14px-radius buttons, Plus Jakarta Sans throughout. Two themes, light and dark, driven entirely by the tokens below; the choice sets data-next-target-theme on and is remembered in localStorage. Never hard-code a colour that has a token; the only literals sit on fixed fills (white on the brand, on the navy). Type: Plus Jakarta Sans for everything (self-hosted, 400–800). JetBrains Mono only for genuinely monospaced data — phone numbers, identifiers, code, SQL. */ /* ---------- tokens ---------- */ :root{ --bg:#F4F5F7; /* page; also input backgrounds */ --surface:#FFFFFF; /* cards, panels, menus, modals */ --surface2:#EBEEF2; /* soft fills: chips, icon tiles, empty bars */ --ink:#0F1B2D;--ink-rgb:15,27,45; --muted:#5F6B7A; --line:rgba(15,27,45,.09); --brand:#12A67A; --brand-soft:rgba(18,166,122,.12); --brand-ink:#FFFFFF; /* text on a solid --brand fill */ --shadow:0 10px 30px rgba(15,27,45,.08); --nav:#0F1B2D;--nav-ink:#FFFFFF; --overlay:rgba(15,27,45,.5); } :root[data-next-target-theme="dark"]{ --bg:#0A1220;--surface:#121C2F;--surface2:#1B2740; --ink:#F1F4F8;--ink-rgb:241,244,248; --muted:#98A3B5; --line:rgba(255,255,255,.09); --brand:#2FC495;--brand-soft:rgba(47,196,149,.16);--brand-ink:#06261C; --shadow:0 12px 34px rgba(0,0,0,.4); --nav:#060B14;--nav-ink:#FFFFFF; --overlay:rgba(0,0,0,.6); } /* Semantic and categorical colours, tints and the derived names the components read. Persona colours are hues: oklch(0.72 0.14 ). */ :root{ --soft:var(--surface2); --ok:#16a34a;--danger:#D64545;--warn:#ea580c; --c-purple:#7c3aed;--c-blue:#2563eb;--c-green:#16a34a;--c-orange:#ea580c; --navy:linear-gradient(135deg,var(--nav),#1B2740); --avatar-grad:linear-gradient(140deg,#12A67A,#2FC495); --brand-tint:var(--brand-soft); --brand-border:color-mix(in srgb,var(--brand) 40%,var(--surface)); --brand-hover:color-mix(in srgb,var(--brand) 86%,var(--ink)); --ok-tint:color-mix(in srgb,var(--ok) 14%,var(--surface)); --danger-tint:color-mix(in srgb,var(--danger) 12%,var(--surface)); --danger-border:color-mix(in srgb,var(--danger) 35%,var(--surface)); --warn-tint:color-mix(in srgb,var(--warn) 12%,var(--surface)); --purple-tint:color-mix(in srgb,var(--c-purple) 12%,var(--surface)); /* a colour used as small text on its own tint, pulled toward the ink so it reads at 4.5:1 on either paper */ --ink-mix:76%; --focus:0 0 0 3px var(--brand-soft); --shadow-card:var(--shadow); --shadow-menu:0 8px 24px rgba(15,27,45,.12); --shadow-modal:var(--shadow); --sidebar-w:230px;--header-h:64px; } :root[data-next-target-theme="dark"]{ --ink-mix:64%; --shadow-menu:0 8px 24px rgba(0,0,0,.45); } /* ---------- base ---------- */ *{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;height:100%} body{background:var(--bg);color:var(--ink); font:14px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .35s,color .35s} /* form controls do not inherit the body font by default */ input,select,textarea,button{font-family:inherit} a{color:var(--brand);text-decoration:none} a:hover{color:var(--ink)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px} ::selection{background:var(--brand-soft)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:8px} h1,h2,h3{text-wrap:pretty} .mono{font-family:'JetBrains Mono',monospace} .muted{color:var(--muted)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0} /* The eyebrow label — card kickers, field labels, table headers. */ .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* icon sizing (outline Lucide sprite, stroke = currentColor) */ .ic14{width:14px;height:14px} .ic16{width:16px;height:16px} .ic18{width:18px;height:18px} .ic19{width:19px;height:19px} .ic20{width:20px;height:20px} .ic22{width:22px;height:22px} .ic28{width:28px;height:28px} svg[class^="ic"]{flex:none} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} @keyframes drift{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(0,-120vh) rotate(200deg)}} /* ---------- app shell: navy header, side menu, page column ---------- */ .app{min-height:100vh;display:flex;flex-direction:column} .topbar-nav{position:sticky;top:0;z-index:30;height:var(--header-h);background:var(--nav);color:var(--nav-ink); display:flex;align-items:center;gap:24px;padding:0 24px 0 20px} .brand{display:flex;align-items:center;gap:10px;color:var(--nav-ink);text-decoration:none;flex:none; font-weight:800;font-size:17px;letter-spacing:-.01em} .brand:hover{color:var(--nav-ink)} .brand-mark{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff; display:inline-grid;place-items:center;flex:none} .brand-mark-lg{width:52px;height:52px;border-radius:14px} .brand-mark-lg svg{width:28px;height:28px} .topbar-center{flex:1;min-width:0;display:flex;justify-content:center;align-items:center} .topbar-right{display:flex;align-items:center;gap:14px;flex:none} /* the light / dark switch: a pill with a knob carrying the sun or the moon */ .theme-switch{width:52px;height:28px;border-radius:14px;border:none;padding:0;position:relative;cursor:pointer; background:rgba(255,255,255,.14);transition:background .3s} .theme-switch:hover{background:rgba(255,255,255,.22)} .theme-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;color:#0F1B2D; display:grid;place-items:center;transition:left .3s cubic-bezier(.2,.8,.2,1)} .theme-moon{display:none} :root[data-next-target-theme="dark"] .theme-knob{left:27px} :root[data-next-target-theme="dark"] .theme-sun{display:none} :root[data-next-target-theme="dark"] .theme-moon{display:block} /* account menu */ details.menu{position:relative} details.menu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center} details.menu > summary::-webkit-details-marker{display:none} details.menu > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:99px} .account-trigger{gap:6px;font-size:12.5px;font-weight:600;color:var(--nav-ink);opacity:.8;min-height:34px; padding:4px 4px 4px 0} .account-trigger:hover{opacity:1} .account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface); border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-menu);padding:6px;z-index:40; color:var(--ink)} .user-panel{min-width:230px;padding:12px 12px 6px} .user-panel-name{font-size:13.5px;font-weight:700} .user-panel-email{font-size:12px;color:var(--muted);word-break:break-all} .user-panel-role{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); margin-top:6px} .menu-item{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 6px;min-height:44px; border-top:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13px;text-decoration:none} .menu-item:hover{color:var(--brand)} /* the frame under the header: the side menu and the page */ .frame{flex:1;display:flex;align-items:stretch;min-height:0} .sidebar{width:var(--sidebar-w);flex:none;position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h)); overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);padding:22px 14px 24px; display:flex;flex-direction:column;gap:22px;scrollbar-width:thin} .side-nav{display:flex;flex-direction:column;gap:2px} .side-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); padding:0 12px 8px} .side-link{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:12px; color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none; transition:background .15s,color .15s} .side-link:hover{background:var(--surface2);color:var(--ink)} .side-link.active{background:var(--brand-soft);color:var(--brand)} .side-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)} .side-link.active .side-count{color:var(--brand)} .side-count-bad{color:var(--danger)} .main{flex:1;min-width:0;display:flex;flex-direction:column} .content{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:44px 32px 80px} /* Page actions (search, buttons): a row above the page header, rendered only when the page fills the page_actions block. */ .topbar{max-width:1180px;margin:0 auto;width:100%;display:flex;align-items:center;gap:16px;padding:28px 32px 0} .topbar:not(:has(.topbar-actions > *)){display:none} .topbar:has(.topbar-actions > *) + .content{padding-top:18px} .topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end} .topbar-search{flex:none;width:260px;min-width:0;max-width:none} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap} .page-head h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1} .page-head .sub{font-size:15px;color:var(--muted);margin-top:8px;max-width:72ch;text-wrap:pretty} .lead-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap} @media (max-width:900px){ /* the side menu becomes a strip of pills under the header */ .frame{flex-direction:column} .sidebar{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:nowrap;gap:0 18px; padding:10px 16px;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .sidebar::-webkit-scrollbar{display:none} .side-nav{flex-direction:row;flex-wrap:nowrap;gap:4px;align-items:center} .side-link{white-space:nowrap} .side-label{padding:0 6px 0 0;white-space:nowrap} .side-link{min-height:44px;padding:8px 12px;border-radius:99px} .topbar-nav{padding:0 16px;gap:12px} .account-name{display:none} .content{padding:24px 16px 60px} .topbar{padding:20px 16px 0} .page-head h1{font-size:28px} } /* ---------- avatars ---------- */ /* Tone comes from the avatar_color filter as --ac / --at custom props. */ .avatar{border-radius:10px;background:var(--at,var(--brand-tint));color:var(--ac,var(--brand)); display:flex;align-items:center;justify-content:center;font-weight:700;flex:none} .avatar-36{width:34px;height:34px;font-size:12px} /* ---------- buttons ---------- Every button is a pill. Primary is inked (and so inverts in dark mode), secondary is outlined, danger is solid red for destructive confirms, the tinted variants carry a colour lightly, and text links end in an arrow. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px; padding:0 22px;border-radius:14px;border:1px solid var(--line);background:var(--surface); color:var(--ink);font:700 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer;white-space:nowrap; text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s} .btn:hover{background:var(--surface2);color:var(--ink);border-color:var(--line)} .btn-primary{border-color:transparent;background:var(--brand);color:var(--brand-ink)} .btn-primary:hover{background:var(--brand);color:var(--brand-ink);border-color:transparent;transform:translateY(-2px)} .btn-pill{border-radius:999px} .btn-danger{border-color:transparent;background:var(--danger);color:#fff} .btn-danger:hover{background:color-mix(in srgb,var(--danger) 85%,var(--ink));color:#fff;border-color:transparent} .btn-tint{background:var(--brand-tint);border-color:var(--brand-border); color:color-mix(in srgb,var(--brand) var(--ink-mix),var(--ink))} .btn-tint:hover{background:color-mix(in srgb,var(--brand) 18%,var(--surface)); color:color-mix(in srgb,var(--brand) var(--ink-mix),var(--ink));border-color:var(--brand-border)} .btn-tint-danger{background:var(--danger-tint);border-color:var(--danger-border); color:color-mix(in srgb,var(--danger) var(--ink-mix),var(--ink))} .btn-tint-danger:hover{background:color-mix(in srgb,var(--danger) 18%,var(--surface)); color:color-mix(in srgb,var(--danger) var(--ink-mix),var(--ink));border-color:var(--danger-border)} .btn-on-dark{background:#fff;border-color:transparent;color:#0F1B2D} .btn-on-dark:hover{background:#EBEEF2;color:#0F1B2D;border-color:transparent} .btn-sm{min-height:36px;padding:0 16px;font-size:12.5px} .btn-lg{min-height:48px;padding:0 26px;font-size:15px;font-weight:800} .btn[disabled],.btn:disabled{background:var(--soft);border-color:transparent;color:var(--muted); cursor:not-allowed} .btn-block{width:100%} .icon-btn{width:34px;height:34px;border-radius:12px;border:1px solid var(--line); background:transparent;color:var(--muted);display:inline-flex;align-items:center; justify-content:center;cursor:pointer;flex:none;transition:color .15s,border-color .15s} .icon-btn:hover{color:var(--ink);border-color:var(--muted);background:transparent} .icon-btn.small{width:28px;height:28px} .btn-link{background:none;border:none;padding:0;cursor:pointer; font:600 13px 'Plus Jakarta Sans',sans-serif;color:var(--brand)} .btn-link:hover{color:var(--brand-hover)} /* a row of actions at the end of a table row or card */ .row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center} /* ---------- form controls ---------- */ .input{min-height:46px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line); background:var(--bg);color:var(--ink);font:400 14.5px/1.5 'Plus Jakarta Sans',sans-serif; outline:none;width:100%;transition:border-color .15s,box-shadow .15s} .input:focus{border-color:var(--brand);box-shadow:var(--focus)} .input::placeholder{color:var(--muted)} select.input{cursor:pointer} .input[readonly]{background:var(--soft);color:var(--muted);border-style:dashed;cursor:not-allowed} .input[readonly]:focus{border-color:var(--line);box-shadow:none} .input[aria-invalid="true"],.input.is-invalid{border-color:var(--danger)} textarea.input{min-height:66px;padding:13px 15px;resize:vertical;line-height:1.5} textarea.input.mono{font:400 12.5px/1.6 'JetBrains Mono',monospace} .w-auto{width:auto} .lock-badge{display:inline-flex;align-items:center;gap:4px;margin-left:7px; padding:2px 8px;border-radius:99px;vertical-align:1px; background:var(--soft);color:var(--muted);font:600 10.5px 'Plus Jakarta Sans',sans-serif} /* Password-manager overlays: LastPass ignores data-lpignore and injects its own icon element into the field's label. This app has no password fields — sign-in is Google OIDC — so suppress it. (Inline !important on the icon root beats stylesheet display:none; hide with inherited properties.) */ div[data-lastpass-icon-root], div[data-lastpass-root], [data-lastpass-infield], com-1password-button{ visibility:hidden!important;opacity:0!important;pointer-events:none!important; width:0!important;height:0!important} input.input,input.chip-input{background-image:none!important} .field{display:block;min-width:0} .field > span:first-child{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-bottom:10px} .field-hint{display:block;font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5} .field-error{display:block;font-size:12px;color:var(--danger);margin-top:8px} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;align-items:start} .form-row{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap} .form-section{margin-top:26px} .section-head{display:flex;align-items:center;gap:9px;margin-bottom:12px; font:800 14px 'Plus Jakarta Sans',sans-serif;color:var(--ink)} .section-head .section-head-note{font:500 12px 'Plus Jakarta Sans',sans-serif;color:var(--muted)} .search-wrap{position:relative;flex:1;min-width:240px;max-width:340px} .search-wrap svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)} .search-wrap .input{padding-left:40px} .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .toolbar-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)} /* choice cards in modals: a checkbox with a title and a line of help */ .cap-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line); border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s} .cap-option input{margin-top:3px;accent-color:var(--brand)} .cap-option b{font-size:13px;color:var(--ink)} .cap-option small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px} .cap-option:has(input:checked){border-color:var(--brand);background:var(--brand-tint)} input[type=checkbox],input[type=radio]{accent-color:var(--brand)} /* toggle switch — a real checkbox, restyled. The input keeps its own focus, keyboard and screen-reader behaviour; only its appearance is replaced, and it stays in the layout (not display:none) so it is still focusable. */ .switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer; min-height:44px;font-size:13px;font-weight:600;color:var(--ink);user-select:none} .switch input{position:absolute;width:1px;height:1px;opacity:0;margin:0} .switch-track{position:relative;flex:none;width:34px;height:18px;border-radius:99px; background:var(--line);transition:background .16s ease} .switch-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%; background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .16s ease} .switch input:checked + .switch-track{background:var(--brand)} .switch input:checked + .switch-track .switch-knob{transform:translateX(16px)} .switch input:focus-visible + .switch-track{outline:2px solid var(--brand);outline-offset:2px} .switch:hover .switch-track{background:var(--muted)} .switch:hover input:checked + .switch-track{background:var(--brand)} /* range slider */ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px; background:var(--line);outline:none;margin:0;cursor:pointer} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%; background:var(--brand);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(13,17,48,.3)} input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brand); border:3px solid var(--surface)} input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:6px} /* ---------- cards ---------- */ .card{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)} .card-pad{padding:24px 26px} .card-title{font-weight:800;font-size:18px;letter-spacing:-.01em;margin:0 0 14px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:16px 20px;border-bottom:1px solid var(--line);font:800 15px 'Plus Jakarta Sans',sans-serif} .card-head a{font:600 13px 'Plus Jakarta Sans',sans-serif} .card-lift{box-shadow:var(--shadow-card)} /* section header inside a page: heavy H2 left, text link right */ .section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px; font-weight:800;font-size:18px;margin:30px 0 14px} .section-title a{font:600 13px 'Plus Jakarta Sans',sans-serif} /* Destructive card (the clear-all zone): tinted border only — a filled panel would shout louder than an action you rarely want. */ .card-danger{border-color:var(--danger-border)} .clear-tables{display:grid;gap:10px 32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .clear-row{display:flex;justify-content:space-between;gap:12px; padding:6px 0;border-bottom:1px solid var(--line);font-size:13px} .clear-row:last-child{border-bottom:none} /* stat cards: eyebrow over a heavy figure */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px; margin:0 0 26px} .stat-tile{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:20px; background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)} .stat-tile .num{font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1.2; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stat-tile .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);order:-1} /* key / value rows: side panels, receipts, detail views */ .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px} .kv span{color:var(--muted)} .kv b{text-align:right} .kv-list{display:flex;flex-direction:column;gap:10px} table.kv{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed} table.kv td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere} table.kv tr:last-child td{border-bottom:none} table.kv td:first-child{color:var(--muted);width:38%;padding-right:12px} table.kv td:last-child{font-weight:600} /* ---------- list cards (data tables) ---------- The table element stays for its semantics and for htmx, which swaps whole rows; the look is the design's list card: a 14px container, eyebrow headers, roomy rows, soft hover, no zebra. */ .table-card{overflow:hidden;border-radius:20px} .table-scroll{overflow-x:auto} table.data{width:100%;border-collapse:collapse;font-size:13.5px} table.data th{font:700 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);text-align:left;padding:12px 20px;border-bottom:1px solid var(--line); white-space:nowrap} table.data td{padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:middle; color:var(--ink)} table.data td:first-child{font-weight:600} table.data td.mono,table.data td .mono{font-size:12.5px;font-family:'JetBrains Mono',monospace; font-weight:400} table.data td .muted,table.data td.muted{font-weight:400} table.data tbody tr:hover{background:var(--soft)} table.data tbody tr:last-child td{border-bottom:none} table.data tbody tr.is-selected{background:color-mix(in srgb,var(--brand) 6%,var(--surface))} /* import history: one import is three stacked tiers — when/what, the figures under the headings, then source | mapping — with no separator between them; the divider falls between imports only */ .ib-table .ib-batch td{border-bottom:none!important} .ib-table .ib-batch{border-bottom:1px solid var(--line)} .ib-table .ib-batch:last-child{border-bottom:none} /* twelve columns have to fit the card: tighter cells and header tracking */ .ib-table th{padding:12px 10px;letter-spacing:.04em} .ib-table .ib-head td{padding:12px 10px 0;font-weight:400} .ib-head-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ib-table .ib-actions{text-align:right} .ib-table .ib-when{font-size:11.5px;color:var(--muted)} .ib-table .ib-file{color:var(--ink);font-weight:500;overflow-wrap:anywhere} .ib-table .ib-figures td{padding:4px 10px;white-space:nowrap} .ib-table .ib-figures td:first-child{font-weight:400} .ib-table .ib-foot td{padding:0 10px 12px;font-size:12px;font-weight:400;color:var(--muted)} .ib-table .ib-sep{opacity:.45;margin:0 4px} .ib-table tbody tr:hover{background:transparent} .ib-table .ib-batch:hover{background:var(--soft)} /* whole-row click target (import issues summary) — the row's own button stays the keyboard-reachable control */ table.data tbody tr.issue-row{cursor:pointer} /* same, for the lead explorer's field list — the field name is a button so the row stays keyboard-operable, styled to read as the link it replaces */ table.data tbody tr.field-row{cursor:pointer} /* a field the current filter uses — accent edge and tint, so the filter's fields are findable in the list itself, not only in the chips above it */ table.data tbody tr.field-row.is-filtered{background:var(--brand-tint)} table.data tbody tr.field-row.is-filtered:hover{background:color-mix(in srgb,var(--brand) 18%,var(--surface))} table.data tbody tr.field-row.is-filtered td:first-child{box-shadow:inset 3px 0 0 var(--brand)} table.data tbody tr.field-row.is-filtered button{font-weight:700} table.data tbody tr.field-row.is-filtered .pill{margin-left:8px;vertical-align:1px} table.data tr.field-row button{background:none;border:none;padding:0;font:inherit;font-weight:600; color:var(--brand);cursor:pointer;text-align:left} table.data tr.field-row:hover button{color:var(--brand-hover)} /* grouped tables (data dictionary by use type): a full-width band opens each group, so the row block underneath reads as one section */ table.data tbody tr.group-row td{padding:0;border-bottom:1px solid var(--line);font-weight:400} table.data tbody tr.group-row:hover{background:none} table.data tbody + tbody tr.group-row td{border-top:1px solid var(--line)} .group-band{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 17px; border-left:3px solid var(--brand);background:var(--soft)} .group-title{font:800 13.5px 'Plus Jakarta Sans',sans-serif;color:var(--ink)} .group-scope{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);white-space:nowrap} .group-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap} /* the group with no use type set is a gap in the dictionary, not a vertical */ .group-band.group-band-none{border-left-color:var(--muted)} /* the lead / user cell: avatar beside a name and a sub-line */ .lead-cell{display:flex;align-items:center;gap:12px;min-width:0} .cell-main{font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .cell-sub{font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} /* empty and loading states inside a container */ .empty{padding:40px 24px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5} .empty-icon{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--brand); display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px} .empty b{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px} .load-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px; color:var(--brand);cursor:pointer} .load-more::after{content:'→'} /* ---------- filterable field picker (partials/field_picker_js.html) ---------- Wraps a