/* Vivo staff assistant — black + lime design system. Lime is an accent, never a surface: it marks the one thing that matters on screen (send, focus, a source, a warning dot) and nothing else. */ /* Dark is the base theme - it is the brand, and it is what the app has always looked like, so anything that fails to resolve a theme still lands here. Light lives in one block below; the inline script in the page resolves the system preference into an explicit data-theme before first paint, so there is exactly one place to edit a colour and no flash on load. */ :root { color-scheme: dark; --bg: #050505; --surface: #0D0D0D; --raised: #141414; --raised-hover: #1A1A1A; --border: #242424; --border-strong: #333333; --hairline: rgba(36, 36, 36, 0.6); --text: #F6F6F6; --text-2: #A0A0A0; --text-3: #666666; --text-strong: #FFFFFF; /* Three different jobs, which is why lime is three tokens. --lime is a SURFACE (send button, a filled bar); --on-lime is what sits on top of it; --lime-text is lime used AS TEXT and has to stay readable against --bg. In dark mode the first and third are the same colour. In light mode they cannot be: #B7FF00 on white is about 1.1:1, which is invisible. */ --lime: #B7FF00; --lime-text: #B7FF00; --on-lime: #050505; --lime-dim: #8FCC00; --lime-ghost: rgba(183, 255, 0, 0.10); --lime-edge: rgba(183, 255, 0, 0.28); --warn: #FFB020; --warn-ghost: rgba(255, 176, 32, 0.10); --warn-edge: rgba(255, 176, 32, 0.30); --danger: #FF5F52; --danger-ghost: rgba(255, 95, 82, 0.10); --danger-edge: rgba(255, 95, 82, 0.32); --danger-text: #FFB4AE; --scrim: rgba(5, 5, 5, 0.86); /* sticky bars sitting over content */ --scrim-0: rgba(5, 5, 5, 0); /* transparent end of the composer fade */ --overlay: rgba(0, 0, 0, 0.66); /* drawer backdrop */ --log-bg: #000000; --log-text: #D6D6D6; --r-sm: 10px; --r: 14px; --r-lg: 20px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Light theme. Only the palette changes - every rule below this point reads tokens, so there is no second set of layout rules to keep in step. Contrast against --bg was checked for each text colour; the ratios in the comments are what keeps this usable on a phone held under a service light. */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --surface: #F7F7F4; --raised: #F1F1EC; --raised-hover: #E7E7E1; --border: #E3E3DD; --border-strong: #C7C7C0; --hairline: rgba(0, 0, 0, 0.10); --text: #121212; /* 17.9:1 */ --text-2: #5A5A56; /* 6.9:1 */ --text-3: #6E6E68; /* 5.1:1 - hints are still body text */ --text-strong: #000000; --lime: #B7FF00; /* unchanged: still the brand surface colour */ --lime-text: #4F7000; /* 5.7:1 - lime itself is unreadable on white */ --on-lime: #0A0A0A; --lime-dim: #6E9900; --lime-ghost: rgba(122, 168, 0, 0.12); --lime-edge: rgba(122, 168, 0, 0.40); --warn: #8A5A00; /* 5.9:1 */ --warn-ghost: rgba(180, 120, 0, 0.12); --warn-edge: rgba(180, 120, 0, 0.38); --danger: #C42B1C; /* 5.6:1 */ --danger-ghost: rgba(196, 43, 28, 0.09); --danger-edge: rgba(196, 43, 28, 0.30); --danger-text: #A32216; --scrim: rgba(255, 255, 255, 0.88); --scrim-0: rgba(255, 255, 255, 0); --overlay: rgba(20, 20, 18, 0.42); --log-bg: #14140F; /* a log pane reads as a terminal in both themes */ --log-text: #D6D6D6; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } body { min-height: 100dvh; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: var(--lime-text); text-decoration: none; } :focus-visible { outline: 2px solid var(--lime-text); outline-offset: 2px; border-radius: 4px; } /* ---------- wordmark ---------- */ .wordmark { font-weight: 700; letter-spacing: 0.16em; font-size: 15px; color: var(--text); } .wordmark .dot { color: var(--lime-text); } /* ---------- app shell ---------- */ .app { display: flex; flex-direction: column; height: 100dvh; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(var(--safe-top) + 12px) 16px 12px; border-bottom: 1px solid var(--border); background: var(--scrim); backdrop-filter: saturate(140%) blur(14px); position: sticky; top: 0; z-index: 20; } .topbar-meta { display: flex; align-items: center; gap: 10px; min-width: 0; } .chip { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border); padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-2); border: 1px solid var(--border); background: var(--surface); transition: color .15s, border-color .15s; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } /* ---------- theme switch ---------- */ /* The icon shows the theme you would move TO, so the button reads as an action. Driven by the attribute rather than by JS, so it is correct on first paint. */ .theme-toggle .i-sun, .theme-toggle .i-moon { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="light"] .theme-toggle .i-moon { display: block; } /* The admin nav scrolls horizontally; the switch must not be shrunk by it. */ .admin-top .theme-toggle { flex: none; margin-bottom: 10px; } /* ---------- scroll area ---------- */ .stream { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px 8px; } .stream-inner { max-width: 720px; margin: 0 auto; } /* ---------- home / empty state ---------- */ .home { padding: 8vh 0 0; text-align: left; } .home h1 { font-size: 30px; line-height: 1.15; margin: 0 0 10px; font-weight: 600; letter-spacing: -0.02em; } .home p { color: var(--text-2); margin: 0 0 26px; font-size: 15px; max-width: 36ch; } .home .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lime-text); margin-bottom: 14px; font-weight: 600; } .suggest-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } .suggestions { display: flex; flex-wrap: wrap; gap: 8px; } .suggestion { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 14px; transition: border-color .15s, color .15s, background .15s; } .suggestion:active, .suggestion:hover { color: var(--text); border-color: var(--lime-edge); background: var(--lime-ghost); } /* ---------- messages ---------- */ .msg { margin-bottom: 22px; } .msg-user { display: flex; justify-content: flex-end; } .msg-user .bubble { background: var(--raised); border: 1px solid var(--border); padding: 11px 15px; border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg); max-width: 86%; font-size: 15.5px; } .msg-bot .answer { font-size: 16px; } .msg-bot .answer p { margin: 0 0 12px; } .msg-bot .answer p:last-child { margin-bottom: 0; } .msg-bot .answer ol, .msg-bot .answer ul { margin: 0 0 12px; padding-left: 22px; } .msg-bot .answer li { margin-bottom: 7px; } .msg-bot .answer strong { color: var(--text-strong); font-weight: 600; } .msg-bot .answer code { background: var(--raised); padding: 1px 6px; border-radius: 5px; font-size: 14px; } /* Tap-to-call / tap-to-email. Underlined on purpose: a phone number styled like the surrounding text does not read as tappable to someone mid-shift, and the whole point is that they call the supplier instead of copying the number out by hand. Padding gives it a finger-sized target without changing line height. */ .msg-bot a.contact { color: var(--lime-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 3px 1px; margin: -3px -1px; border-radius: 4px; word-break: break-word; /* long supplier addresses must not overflow */ -webkit-tap-highlight-color: transparent; } .msg-bot a.contact:active { background: var(--lime-ghost); } /* safety banner */ .safety { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); background: var(--warn-ghost); border: 1px solid var(--warn-edge); padding: 6px 11px; border-radius: 999px; margin-bottom: 12px; } .safety::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; } /* withheld / refusal */ .withheld { border-left: 2px solid var(--warn); background: var(--surface); padding: 14px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text); font-size: 15.5px; } /* ---------- sources ---------- */ .sources { margin-top: 14px; } .sources-label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .source { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; margin-bottom: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color .15s, background .15s; } .source:hover, .source:active { border-color: var(--lime-edge); background: var(--raised); } .source .marker { width: 5px; height: 5px; border-radius: 50%; background: var(--lime-text); margin-top: 8px; flex: none; } .source .doc { font-size: 13.5px; color: var(--text); font-weight: 500; } .source .loc { font-size: 12px; color: var(--text-3); margin-top: 1px; } /* ---------- message actions ---------- */ .actions { display: flex; gap: 6px; margin-top: 12px; align-items: center; } .action { font-size: 12px; color: var(--text-3); padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid transparent; transition: color .15s, border-color .15s; } .action:hover { color: var(--text-2); border-color: var(--border); } .action.on { color: var(--lime-text); border-color: var(--lime-edge); background: var(--lime-ghost); } /* ---------- thinking ---------- */ .thinking { display: flex; align-items: center; gap: 9px; color: var(--text-3); font-size: 14px; } .thinking .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lime-text); animation: pulse 1.15s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:.25; transform: scale(.8);} 50% { opacity:1; transform: scale(1);} } /* ---------- composer ---------- */ .composer { position: sticky; bottom: 0; z-index: 20; padding: 10px 16px calc(var(--safe-bottom) + 12px); background: linear-gradient(to bottom, var(--scrim-0) 0%, var(--bg) 22%); } .composer-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: flex-end; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 7px 7px 7px 15px; transition: border-color .18s; } .composer-inner:focus-within { border-color: var(--lime-edge); } .composer textarea { flex: 1; border: none; background: none; resize: none; outline: none; max-height: 132px; padding: 9px 0; font-size: 16px; /* 16px avoids iOS zoom */ line-height: 1.45; } .composer textarea::placeholder { color: var(--text-3); } .send { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--lime); color: var(--on-lime); display: grid; place-items: center; transition: opacity .15s, transform .1s; } .send:disabled { opacity: .25; } .send:active:not(:disabled) { transform: scale(.94); } .composer-note { max-width: 720px; margin: 8px auto 0; text-align: center; font-size: 11px; color: var(--text-3); } /* ---------- source drawer ---------- */ .drawer-backdrop { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--surface); border-top: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 20px calc(var(--safe-bottom) + 24px); max-height: 78dvh; overflow-y: auto; transform: translateY(101%); transition: transform .26s cubic-bezier(.32,.72,0,1); } .drawer.open { transform: translateY(0); } .drawer .grab { width: 34px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 16px; } .drawer h3 { margin: 0 0 3px; font-size: 17px; font-weight: 600; } .drawer .sub { color: var(--text-2); font-size: 13.5px; margin-bottom: 16px; } .drawer .excerpt { background: var(--bg); border: 1px solid var(--border); border-left: 2px solid var(--lime-text); padding: 15px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14.5px; color: var(--text-2); line-height: 1.65; white-space: pre-wrap; } /* ---------- feedback reasons ---------- */ .reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .reason { font-size: 12px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); } .reason:hover { border-color: var(--lime-edge); color: var(--text); } /* ---------- auth screens ---------- */ .auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 32px 22px calc(var(--safe-bottom) + 32px); max-width: 420px; margin: 0 auto; width: 100%; } .auth-brand { margin-bottom: 34px; } .auth-brand .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lime-text); font-weight: 600; margin-top: 12px; } .auth-wrap h1 { font-size: 25px; margin: 0 0 6px; font-weight: 600; letter-spacing: -.02em; } .auth-wrap .lede { color: var(--text-2); font-size: 14.5px; margin: 0 0 26px; } .field { margin-bottom: 15px; } .field label { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; } .field input { width: 100%; padding: 13px 15px; font-size: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); outline: none; transition: border-color .15s; } .field input:focus { border-color: var(--lime-edge); } .btn-primary { width: 100%; padding: 14px; border-radius: var(--r-sm); background: var(--lime); color: var(--on-lime); font-weight: 650; font-size: 15px; margin-top: 8px; transition: opacity .15s, transform .08s; } .btn-primary:active { transform: scale(.99); } .btn-primary:disabled { opacity: .4; } .flash { padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); } .flash-error { border-color: var(--danger-edge); color: var(--danger-text); background: var(--danger-ghost); } .flash-success { border-color: var(--lime-edge); color: var(--lime-text); background: var(--lime-ghost); } .foot { margin-top: 26px; text-align: center; font-size: 12px; color: var(--text-3); } @media (min-width: 768px) { .home { padding-top: 12vh; } .home h1 { font-size: 36px; } } /* ================= ADMIN ================= */ .admin { min-height: 100dvh; } .admin-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(var(--safe-top) + 14px) 22px 0; background: var(--scrim); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .admin-top .brandline { display: flex; align-items: baseline; gap: 11px; padding-bottom: 14px; } .admin-top .role { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-text); } .admin-nav { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 0; } .admin-nav a { padding: 10px 13px 13px; font-size: 13.5px; color: var(--text-3); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s; } .admin-nav a:hover { color: var(--text-2); } .admin-nav a.on { color: var(--text); border-bottom-color: var(--lime-text); } .admin-body { max-width: 1080px; margin: 0 auto; padding: 26px 22px 80px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 26px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 15px 16px; } .kpi .n { font-size: 25px; font-weight: 600; letter-spacing: -.02em; display: block; } .kpi .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; } .kpi.alert { border-color: var(--warn-edge); } .kpi.alert .n { color: var(--warn); } .kpi.good .n { color: var(--lime-text); } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; } .panel h2 { font-size: 15px; margin: 0 0 4px; font-weight: 600; } .panel .hint { font-size: 13px; color: var(--text-3); margin: 0 0 16px; } .panel h3 { font-size: 13px; margin: 20px 0 9px; color: var(--text-2); font-weight: 600; } table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.grid th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 9px 0; border-bottom: 1px solid var(--border); font-weight: 600; } table.grid td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; } table.grid tr:last-child td { border-bottom: none; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .tag { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .tag.lime { border-color: var(--lime-edge); color: var(--lime-text); background: var(--lime-ghost); } .tag.warn { border-color: var(--warn-edge); color: var(--warn); background: var(--warn-ghost); } .tag.off { color: var(--text-3); } .btn { padding: 9px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 550; border: 1px solid var(--border); background: var(--raised); color: var(--text); transition: border-color .15s, background .15s; } .btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--raised-hover); } .btn:disabled { opacity: .35; cursor: not-allowed; } .btn-lime { background: var(--lime); color: var(--on-lime); border-color: var(--lime); font-weight: 650; } .btn-lime:hover:not(:disabled) { background: var(--lime-dim); border-color: var(--lime-dim); } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-danger { color: var(--danger); border-color: var(--danger-edge); background: transparent; } .btn-danger:hover { background: var(--danger-ghost); } .row { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; } .inp, select.inp, textarea.inp { width: 100%; padding: 10px 13px; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); outline: none; transition: border-color .15s; } .inp:focus { border-color: var(--lime-edge); } .lbl { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .fieldset { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; margin-bottom: 14px; } .dz { border: 1.5px dashed var(--border-strong); border-radius: var(--r); padding: 26px 20px; text-align: center; background: var(--bg); transition: .15s; } .dz.over { border-color: var(--lime-text); background: var(--lime-ghost); } .dz .main { font-size: 14.5px; margin: 0; } .dz .sub { font-size: 12.5px; color: var(--text-3); margin: 6px 0 0; } .linkish { background: none; border: 0; padding: 0; color: var(--lime-text); text-decoration: underline; } .filelist { list-style: none; margin: 13px 0 0; padding: 0; text-align: left; } .filelist li { font-size: 12.5px; padding: 7px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; } .joblog { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-top: 16px; } .joblog-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--raised); border-bottom: 1px solid var(--border); font-size: 13px; } .joblog pre { margin: 0; padding: 14px; background: var(--log-bg); color: var(--log-text); font-size: 12px; line-height: 1.6; max-height: 300px; overflow: auto; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; } .spinner { width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--lime-text); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .stage { border-left: 2px solid var(--border); padding: 2px 0 2px 15px; margin-bottom: 18px; } .stage.hit { border-left-color: var(--lime-text); } .stage .name { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; } .scorebar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 5px; max-width: 220px; } .scorebar > i { display: block; height: 100%; background: var(--lime); } .empty { color: var(--text-3); font-style: italic; font-size: 13.5px; } @media (max-width: 700px) { .admin-body { padding: 20px 14px 70px; } .panel { padding: 16px; } table.grid { font-size: 12.5px; } .hide-sm { display: none; } } /* ---------- Google sign-in ---------- */ .btn-google { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 13px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 550; transition: border-color .15s, background .15s; } .btn-google:hover { border-color: var(--border-strong); background: var(--raised-hover); } .btn-google svg { flex: none; } .divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 20px; color: var(--text-3); font-size: 11.5px; letter-spacing: .04em; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---------- open source document ---------- */ .open-doc { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; padding: 13px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font-size: 14.5px; font-weight: 550; text-decoration: none; transition: border-color .15s, background .15s; } .open-doc:hover { border-color: var(--lime-edge); background: var(--raised-hover); } .open-doc svg { flex: none; color: var(--lime-text); } /* ---------- invite link row ---------- */ .copyrow { display: flex; gap: 9px; align-items: stretch; } .copyrow .inp { flex: 1; font-size: 13px; } .copyrow .btn { white-space: nowrap; } @media (max-width: 560px) { .copyrow { flex-direction: column; } } /* inline role selector in the user list */ .rolebox { display: inline-block; } .inp-sm { padding: 5px 9px; font-size: 12.5px; width: auto; min-width: 104px; } /* ================= OPERATING DASHBOARD ================= */ .ops { margin-bottom: 22px; } .ops-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .metric { background: var(--surface); padding: 16px 18px; } .metric-k { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .metric-n { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .metric-sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; } .callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--r); border: 1px solid var(--lime-edge); background: var(--lime-ghost); margin-bottom: 18px; } .callout p { margin: 5px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 62ch; } .callout strong { font-size: 15px; } .callout .btn { flex: none; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .panel-head h2 { margin-bottom: 4px; } .listrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .listrow:last-child { border-bottom: none; } .listrow-main { font-size: 14px; font-weight: 500; line-height: 1.4; } .listrow-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; } .count-pill { flex: none; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--raised); color: var(--text-2); font-variant-numeric: tabular-nums; } .count-pill.hot { background: var(--warn-ghost); color: var(--warn); border: 1px solid var(--warn-edge); } .coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .cov { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; } .cov-label { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; } .cov-n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } .cov-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .cov-empty { border-style: dashed; } .cov-empty .cov-n { color: var(--text-3); } /* filters */ .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; } .filters .f { display: flex; flex-direction: column; gap: 5px; } .filters select, .filters input { min-width: 130px; } .chipbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .chip-link { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); text-decoration: none; } .chip-link:hover { border-color: var(--border-strong); color: var(--text); } .chip-link.on { border-color: var(--lime-edge); color: var(--lime-text); background: var(--lime-ghost); } /* status pills */ .status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .status-new { background: var(--lime-ghost); color: var(--lime-text); } .status-reviewing { background: var(--warn-ghost); color: var(--warn); } .status-documentation_needed { background: var(--danger-ghost); color: var(--danger); } .status-resolved { background: var(--raised); color: var(--text-3); } .status-ignored { background: var(--raised); color: var(--text-3); } /* mobile: tables become cards */ @media (max-width: 700px) { .ops-row { grid-template-columns: repeat(2, 1fr); } .callout { flex-direction: column; align-items: stretch; } .callout .btn { width: 100%; text-align: center; } table.grid.stack thead { display: none; } table.grid.stack tr { display: block; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; } table.grid.stack td { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border: none; text-align: right; } table.grid.stack td::before { content: attr(data-label); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: left; flex: none; } table.grid.stack td:first-child { text-align: left; } table.grid.stack td:first-child::before { display: none; } } /* ================= HEALTH ================= */ .overall { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--border); background: var(--bg); } .overall strong { font-size: 15px; } .overall .dot-lg { width: 11px; height: 11px; border-radius: 50%; flex: none; } .overall-healthy { border-color: var(--lime-edge); } .overall-healthy .dot-lg { background: var(--lime-text); box-shadow: 0 0 0 4px var(--lime-ghost); } .overall-warning { border-color: var(--warn-edge); } .overall-warning .dot-lg { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-ghost); } .overall-down { border-color: var(--danger-edge); } .overall-down .dot-lg { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-ghost); } .hstate { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 3px; white-space: nowrap; } .hstate-healthy { background: var(--lime-ghost); color: var(--lime-text); } .hstate-warning { background: var(--warn-ghost); color: var(--warn); } .hstate-down { background: var(--danger-ghost); color: var(--danger); } .hstate-skipped { background: var(--raised); color: var(--text-3); } /* ---------- answer outcomes ---------- */ /* A refusal is not an error and not an answer. It reads as a deliberate, useful response: what we could not confirm, and who to ask. */ .refusal { border: 1px solid var(--warn-edge); border-radius: var(--r-sm); background: var(--warn-ghost); overflow: hidden; } .refusal-head { display: flex; align-items: center; gap: 8px; padding: 10px 15px; border-bottom: 1px solid var(--warn-edge); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); } .refusal-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; } .refusal-body { padding: 14px 15px; font-size: 15.5px; } .refusal-body p:last-child { margin-bottom: 0; } .unavailable { border-left: 2px solid var(--border-strong); background: var(--surface); padding: 14px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-2); font-size: 15px; } /* ---------- document status + empty states ---------- */ .status-ok { background: var(--lime-ghost); color: var(--lime-text); } .status-warn { background: var(--warn-ghost); color: var(--warn); } .status-bad { background: var(--danger-ghost); color: var(--danger); } .emptystate { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 26px 24px; text-align: left; background: var(--bg); } .emptystate strong { font-size: 15px; display: block; margin-bottom: 6px; } .emptystate p { color: var(--text-2); font-size: 14px; margin: 0; max-width: 60ch; } .emptystate .btn { margin-top: 16px; } /* ---------- who asked a knowledge gap ---------- */ .askers { font-size: 13px; } .who-detail { margin-top: 6px; } .who-detail summary { font-size: 11.5px; color: var(--text-3); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 2px; } .who-detail summary::-webkit-details-marker { display: none; } .who-detail summary:hover { color: var(--text-2); } .who-list { margin-top: 8px; border-left: 2px solid var(--border); padding-left: 11px; display: flex; flex-direction: column; gap: 7px; min-width: 210px; } .who-row { display: flex; flex-direction: column; gap: 1px; } .who-name { font-size: 12.5px; font-weight: 550; } .who-meta, .who-when { font-size: 11px; color: var(--text-3); }