/* * Backstage design system — the app's paper-and-ink direction, in CSS. * * Every token here is a transcription of recolomind-ai-app/src/theme.ts, so the * console and the phone read as one product. The non-obvious decision: the dark * palette is written out twice — once under `prefers-color-scheme` guarded by * `:root:not([data-theme="light"])`, once under `:root[data-theme="dark"]` — because * CSS has no way to reuse a block of custom properties, and a single * `[data-theme]`-only rule would lose the system default. * * Pages load this file, then ui.js. The boot snippet documented at the top of * ui.js must sit in so the theme and the rail width are right before paint. */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Newsreader:opsz,wght@6..72,300;6..72,400&family=Ubuntu:wght@700&display=swap'); /* ── tokens: light ─────────────────────────────────────────────────────────── */ :root { --bg: #FFFFFF; --bg-deep: #F6F6F4; --surface: rgba(255, 255, 255, 0.92); --surface-solid: #FBFBFA; --raised: #F3F3F1; --border: rgba(17, 17, 17, 0.10); --border-bright: rgba(23, 112, 144, 0.35); --scrim: rgba(17, 17, 17, 0.45); --outline: #8A8A86; --ink: #111111; --on-ink: #FFFFFF; --primary: #177090; --on-primary: #FFFFFF; --powder: #9CC8D8; --on-pastel: #111111; --deep: #14607A; --navy: #0E3A4C; --cyan: #177090; --cyan-bright: #14607A; --glow: #2A94BA; --sky: #CFE6EC; --tint: #E6F2F5; --teal: #1F7F76; --violet: #7A4CAE; --indigo: #1A78A8; --amber: #8F5D0E; --gold: #F2A93B; --emerald: #0B7A55; --green: #1F9D57; --rose: #B84A2E; --fuchsia: #9A2CAB; --pink: #B7337A; --danger: #C8322B; --danger-deep: #A3241E; --danger-tint: #FBECEB; --fill-lilac: #DFC3EA; --fill-butter: #ECE57A; --fill-mint: #8FE0B0; --fill-peach: #F6A05A; --text-hi: #111111; --text: #3A3A38; --text-mid: #565654; --text-low: #6E6E6B; /* shadows are neutral, never coloured */ --shadow-card: 0 8px 14px rgba(17, 17, 17, 0.09); --shadow-paper: 0 16px 22px rgba(17, 17, 17, 0.16); --shadow-pill: 0 5px 10px rgba(17, 17, 17, 0.09); --shadow-ink: 0 10px 12px rgba(17, 17, 17, 0.22); --shadow-sheet: 0 2px 5px rgba(17, 17, 17, 0.08); /* radii — paper is cut, not moulded */ --r-paper: 3px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* spacing */ --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 20px; --s-xxl: 24px; --s-xxxl: 32px; --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-brand: 'Ubuntu', var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --rail-w: 232px; --rail-pad: 232px; --gutter: 32px; --page-max: 1180px; } /* ── tokens: dark (system default, unless the page is pinned to light) ─────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #111314; --bg-deep: #0A0B0C; --surface: rgba(27, 29, 31, 0.78); --surface-solid: #1B1D1F; --raised: #25282A; --border: rgba(255, 255, 255, 0.12); --border-bright: rgba(156, 200, 216, 0.42); --scrim: rgba(0, 0, 0, 0.62); --outline: #7F8488; --ink: #F4F2EE; --on-ink: #111314; --primary: #2A7F9F; --on-primary: #FFFFFF; --powder: #9CC8D8; --on-pastel: #0C1A20; --deep: #BFE0EA; --navy: #0B2A38; --cyan: #8ECBE0; --cyan-bright: #BFE0EA; --glow: #5CC0E6; --sky: #1E3540; --tint: rgba(156, 200, 216, 0.14); --teal: #5FD0C3; --violet: #CFA8EE; --indigo: #2A7F9F; --amber: #FFD977; --gold: #FBBF24; --emerald: #34D399; --green: #4ADE80; --rose: #F29A80; --fuchsia: #E08AF0; --pink: #F08FC0; --danger: #F4766B; --danger-deep: #D9483B; --danger-tint: rgba(244, 118, 107, 0.14); --text-hi: #F4F2EE; --text: #D6D4CF; --text-mid: #AAA8A3; --text-low: #94928D; --shadow-card: 0 8px 14px rgba(0, 0, 0, 0.5); --shadow-paper: 0 16px 22px rgba(0, 0, 0, 0.6); --shadow-pill: 0 5px 10px rgba(0, 0, 0, 0.45); --shadow-ink: 0 10px 12px rgba(0, 0, 0, 0.55); --shadow-sheet: 0 2px 5px rgba(0, 0, 0, 0.4); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #111314; --bg-deep: #0A0B0C; --surface: rgba(27, 29, 31, 0.78); --surface-solid: #1B1D1F; --raised: #25282A; --border: rgba(255, 255, 255, 0.12); --border-bright: rgba(156, 200, 216, 0.42); --scrim: rgba(0, 0, 0, 0.62); --outline: #7F8488; --ink: #F4F2EE; --on-ink: #111314; --primary: #2A7F9F; --on-primary: #FFFFFF; --powder: #9CC8D8; --on-pastel: #0C1A20; --deep: #BFE0EA; --navy: #0B2A38; --cyan: #8ECBE0; --cyan-bright: #BFE0EA; --glow: #5CC0E6; --sky: #1E3540; --tint: rgba(156, 200, 216, 0.14); --teal: #5FD0C3; --violet: #CFA8EE; --indigo: #2A7F9F; --amber: #FFD977; --gold: #FBBF24; --emerald: #34D399; --green: #4ADE80; --rose: #F29A80; --fuchsia: #E08AF0; --pink: #F08FC0; --danger: #F4766B; --danger-deep: #D9483B; --danger-tint: rgba(244, 118, 107, 0.14); --text-hi: #F4F2EE; --text: #D6D4CF; --text-mid: #AAA8A3; --text-low: #94928D; --shadow-card: 0 8px 14px rgba(0, 0, 0, 0.5); --shadow-paper: 0 16px 22px rgba(0, 0, 0, 0.6); --shadow-pill: 0 5px 10px rgba(0, 0, 0, 0.45); --shadow-ink: 0 10px 12px rgba(0, 0, 0, 0.55); --shadow-sheet: 0 2px 5px rgba(0, 0, 0, 0.4); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ── ground ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16.5px/23px var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; } a { color: var(--cyan); text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } ::selection { background: var(--tint); color: var(--text-hi); } /* every figure in the console is tabular */ .num, .kpi-value, table.data, .data-num, .legend, .tag, .bar-value, .mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .mono { font-family: var(--font-mono); font-size: 14px; } /* ── type scale ───────────────────────────────────────────────────────────── */ .display { margin: 0; font-family: var(--font-serif); font-weight: 300; font-variation-settings: 'opsz' 72; font-size: 40px; line-height: 47px; letter-spacing: -1px; color: var(--text-hi); } .serif-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'opsz' 40; font-size: 24px; line-height: 31px; letter-spacing: -0.24px; color: var(--text-hi); } .title { margin: 0; font: 700 22px/28px var(--font-sans); letter-spacing: -0.44px; color: var(--text-hi); } .heading { margin: 0; font: 700 19.5px/24px var(--font-sans); letter-spacing: -0.2px; color: var(--text-hi); } .body { margin: 0; font: 400 16.5px/23px var(--font-sans); color: var(--text); } .small { margin: 0; font: 400 14.5px/19px var(--font-sans); color: var(--text-mid); } .micro { margin: 0; font: 700 12px/14px var(--font-sans); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-low); } .quiet { color: var(--text-mid); } .low { color: var(--text-low); } .hi { color: var(--text-hi); } /* ── rail ─────────────────────────────────────────────────────────────────── */ html.rail-collapsed { --rail-w: 64px; --rail-pad: 64px; } body.has-rail { padding-left: var(--rail-pad); transition: padding-left .2s ease; } .rail { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--rail-w); display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-lg) var(--s-md) var(--s-md); background: var(--bg-deep); border-right: 1px solid var(--border); transition: width .2s ease; overflow: hidden; } .rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; color: inherit; text-decoration: none; min-height: 46px; } .rail-mark { width: 30px; height: 30px; flex: none; } .rail-brand-text { display: flex; flex-direction: column; min-width: 0; } .rail-word { font-family: var(--font-brand); font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: -0.4px; color: var(--text-hi); } .rail-sub { font: 700 10px/13px var(--font-sans); letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-low); } .rail-nav { display: flex; flex-direction: column; gap: 2px; } .rail-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: var(--r-md); color: var(--text-mid); font: 400 15.5px/20px var(--font-sans); text-decoration: none; white-space: nowrap; } .rail-link svg { width: 20px; height: 20px; flex: none; } .rail-link:hover { background: var(--raised); color: var(--text-hi); } .rail-link[aria-current="page"] { background: var(--surface-solid); color: var(--text-hi); font-weight: 700; box-shadow: var(--shadow-pill); border: 1px solid var(--border); } .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-sm); padding-top: var(--s-md); } .rail-id { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--border); min-width: 0; } .rail-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--powder); color: var(--on-pastel); display: grid; place-items: center; font: 900 11px/1 var(--font-sans); letter-spacing: 0.3px; } .rail-id-text { min-width: 0; display: flex; flex-direction: column; } .rail-name { font: 700 13.5px/17px var(--font-sans); color: var(--text-hi); } .rail-mail { font: 400 12px/15px var(--font-sans); color: var(--text-low); } .rail-name, .rail-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rail-btn { appearance: none; border: 0; background: transparent; color: var(--text-mid); width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; } .rail-btn svg { width: 19px; height: 19px; } .rail-cur { font: 900 15px/19px var(--font-sans); letter-spacing: 0.2px; } .rail-btn:hover { background: var(--raised); color: var(--text-hi); } html.rail-collapsed .rail-brand-text, html.rail-collapsed .rail-link span, html.rail-collapsed .rail-id-text { display: none; } html.rail-collapsed .rail { padding-left: 10px; padding-right: 10px; } html.rail-collapsed .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; } html.rail-collapsed .rail-link { justify-content: center; padding: 0; } html.rail-collapsed .rail-tools { flex-direction: column; gap: 2px; } html.rail-collapsed .rail-id { justify-content: center; padding-left: 0; padding-right: 0; } /* Under 900px the page keeps the narrow gutter whatever the rail does, so an expanded rail floats over the content instead of squeezing it off-screen. */ @media (max-width: 900px) { :root { --rail-pad: 64px; --gutter: 16px; } html.rail-collapsed { --rail-pad: 64px; } .rail { box-shadow: var(--shadow-paper); } html.rail-collapsed .rail { box-shadow: none; } } /* ── page ─────────────────────────────────────────────────────────────────── */ .page { max-width: var(--page-max); margin: 0 auto; padding: var(--s-xxxl) var(--gutter) 64px; } .page-head { display: flex; align-items: flex-end; gap: var(--s-lg); flex-wrap: wrap; margin-bottom: var(--s-xxl); } .page-head .display { margin-top: 6px; } .page-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); margin: var(--s-xxl) 0 var(--s-md); } .section-head .heading { font-size: 18.5px; } .grid { display: grid; gap: var(--s-lg); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* cards in a stretched grid share the row's height; a .paper-foot pins to the bottom */ .grid.stretch { align-items: stretch; } .grid.stretch > .paper { display: flex; flex-direction: column; } .grid.stretch > .paper > .paper-foot { margin-top: auto; padding-top: 12px; } @media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid.cols-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); } .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .display { font-size: 32px; line-height: 38px; letter-spacing: -0.7px; } .page { padding-top: var(--s-xl); } } .stack-v { display: flex; flex-direction: column; gap: var(--s-lg); } .row-h { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; } /* ── paper ────────────────────────────────────────────────────────────────── */ .paper { position: relative; background: var(--surface-solid); border-radius: var(--r-paper); box-shadow: var(--shadow-card); padding: var(--s-lg); } /* The one hero per page: two sheets fanned behind the top sheet. They are negative-z pseudos and .paper.stack deliberately never becomes a stacking context, so the opaque top sheet paints over them. */ .paper.stack { padding: var(--s-xxl); box-shadow: var(--shadow-paper); } .paper.stack::before, .paper.stack::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-paper); box-shadow: var(--shadow-sheet); pointer-events: none; } .paper.stack::before { transform: rotate(-1.5deg) translate(-5px, 2px); } .paper.stack::after { transform: rotate(1.1deg) translate(5px, 6px); } /* linen wash, rising from the bottom-left corner */ .paper.wash { background-image: linear-gradient( to bottom left, color-mix(in srgb, var(--sky) 0%, transparent) 45%, color-mix(in srgb, var(--sky) 55%, transparent) 80%, var(--sky) 100% ); } .paper > .wash { position: absolute; inset: 0; border-radius: var(--r-paper); pointer-events: none; background-image: linear-gradient( to bottom left, color-mix(in srgb, var(--sky) 0%, transparent) 45%, color-mix(in srgb, var(--sky) 55%, transparent) 80%, var(--sky) 100% ); } .paper > .wash ~ * { position: relative; } .paper-head { display: flex; align-items: baseline; gap: var(--s-sm); margin-bottom: var(--s-md); } .paper-head .micro { margin-right: auto; } /* ── groups and rows ──────────────────────────────────────────────────────── */ .group { background: var(--raised); border-radius: var(--r-lg); overflow: hidden; } .row { display: flex; align-items: center; gap: var(--s-md); min-height: 60px; padding: var(--s-lg) var(--s-xl); width: 100%; text-align: left; background: transparent; border: 0; color: inherit; font: inherit; text-decoration: none; } .row + .row { border-top: 1px solid var(--border); } a.row, button.row { cursor: pointer; } a.row:hover, button.row:hover { background: color-mix(in srgb, var(--text-hi) 4%, transparent); } .row[disabled], .row.disabled { opacity: .45; pointer-events: none; } .row .lead { width: 28px; flex: none; display: grid; place-items: center; color: var(--text-mid); } .row .lead svg { width: 20px; height: 20px; } .row-text { flex: 1; min-width: 0; } /* block, so a title and caption stack the way a
pair would */ .row-title { display: block; font: 400 18px/23px var(--font-sans); letter-spacing: -0.18px; color: var(--text-hi); } .row-cap { display: block; margin-top: 2px; font: 400 14.5px/19px var(--font-sans); color: var(--text-mid); } .row-trail { margin-left: auto; display: flex; align-items: center; gap: var(--s-sm); color: var(--text-mid); } .row-trail svg { width: 22px; height: 22px; } /* ── KPI ──────────────────────────────────────────────────────────────────── */ .kpi { background: var(--surface-solid); border-radius: var(--r-paper); box-shadow: var(--shadow-card); padding: var(--s-lg) var(--s-xl); display: flex; flex-direction: column; gap: 4px; min-width: 0; } .kpi-value { margin: 0; font: 700 30px/36px var(--font-sans); letter-spacing: -0.8px; color: var(--text-hi); overflow-wrap: anywhere; } .kpi-sub { margin: 0; font: 400 14px/19px var(--font-sans); color: var(--text-mid); } /* the converted amount and the rate that made it are one line, not two */ .fx-line { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; } .fx-line > .tag { flex: none; } .kpi-delta { align-self: flex-start; margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font: 700 12px/16px var(--font-sans); background: var(--raised); color: var(--text-mid); } .kpi-delta.up { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .kpi-delta.down { background: var(--danger-tint); color: var(--danger); } /* ── buttons ──────────────────────────────────────────────────────────────── */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm); height: 44px; padding: 0 22px; border-radius: var(--r-pill); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-pill); color: var(--text-hi); font: 700 16px/20px var(--font-sans); letter-spacing: -0.18px; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn svg { width: 18px; height: 18px; flex: none; } .btn:hover { background: color-mix(in srgb, var(--surface-solid) 92%, var(--text-hi)); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn-ink { background: var(--ink); color: var(--on-ink); border-color: transparent; box-shadow: var(--shadow-ink); height: 52px; padding: 0 28px; font-size: 18px; line-height: 22px; } .btn-ink:hover { background: color-mix(in srgb, var(--ink) 88%, var(--bg)); } .btn-powder { background: var(--powder); color: var(--on-pastel); border-color: transparent; box-shadow: none; font: 900 15px/18px var(--font-sans); letter-spacing: 0.15px; text-transform: uppercase; } .btn-powder:hover { background: color-mix(in srgb, var(--powder) 88%, var(--ink)); } .btn-ghost { background: var(--tint); color: var(--deep); border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: color-mix(in srgb, var(--tint) 84%, var(--deep)); } .btn-danger { background: var(--danger-tint); color: var(--danger); border-color: transparent; box-shadow: none; } .btn-danger:hover { background: color-mix(in srgb, var(--danger-tint) 84%, var(--danger)); } .btn-sm { height: 34px; padding: 0 14px; font-size: 14.5px; line-height: 18px; } .btn-sm.btn-powder { font-size: 13px; line-height: 16px; } .btn-sm svg { width: 16px; height: 16px; } .btn.block { width: 100%; } /* a round control holding one icon */ .icon-btn { appearance: none; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-pill); color: var(--text-hi); cursor: pointer; } .icon-btn svg { width: 19px; height: 19px; } .icon-btn.quiet { background: var(--raised); border-color: transparent; box-shadow: none; } .icon-btn.plain { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-mid); } .icon-btn.sm { width: 30px; height: 30px; } .icon-btn.sm svg { width: 16px; height: 16px; } /* the busy spinner inside any button */ .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── fields ───────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: var(--s-sm); min-width: 0; } .field > label { padding: 0 var(--s-xl); font: 700 14.5px/19px var(--font-sans); color: var(--text-hi); } .pill-input { display: flex; align-items: center; gap: var(--s-md); height: 52px; padding: 0 6px 0 var(--s-xl); border-radius: var(--r-pill); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-pill); min-width: 0; } /* the ink ring sits 2px outside the pill */ .pill-input:focus-within { box-shadow: var(--shadow-pill), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); } .pill-input .glyph { width: 20px; height: 20px; flex: none; color: var(--text-low); display: grid; place-items: center; } .pill-input .glyph svg { width: 20px; height: 20px; } .pill-input:focus-within .glyph { color: var(--text-hi); } .pill-input input, .pill-input select { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text-hi); font: 400 17px/22px var(--font-sans); padding: 0 var(--s-lg) 0 0; } .pill-input input::placeholder { color: var(--text-low); } .pill-input input:-webkit-autofill { -webkit-text-fill-color: var(--text-hi); transition: background-color 9999s; } .pill-input .trail { appearance: none; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--text-mid); display: grid; place-items: center; cursor: pointer; } .pill-input .trail svg { width: 20px; height: 20px; } .pill-input .trail:hover { background: var(--raised); color: var(--text-hi); } .field.invalid .pill-input { border: 1.5px solid var(--danger); } .msg { margin: 0; display: flex; align-items: flex-start; gap: 6px; padding: 0 var(--s-xl); font: 400 14.5px/19px var(--font-sans); color: var(--text-mid); } .msg svg { width: 14px; height: 14px; flex: none; margin-top: 3px; } .msg.error { color: var(--danger); } /* pill search box */ .search { display: flex; align-items: center; gap: var(--s-sm); height: 44px; padding: 0 var(--s-lg); border-radius: var(--r-pill); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-pill); min-width: 0; } .search svg { width: 18px; height: 18px; flex: none; color: var(--text-low); } .search:focus-within { box-shadow: var(--shadow-pill), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); } .search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-hi); font: 400 15.5px/20px var(--font-sans); } .search input::placeholder { color: var(--text-low); } /* ── segmented control, chips, tabs ───────────────────────────────────────── */ .seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--raised); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg button { appearance: none; border: 0; background: transparent; color: var(--text-mid); padding: 7px 14px; border-radius: var(--r-pill); font: 700 14.5px/18px var(--font-sans); cursor: pointer; white-space: nowrap; } .seg button.on { background: var(--surface-solid); color: var(--text-hi); box-shadow: var(--shadow-pill); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--raised); background: var(--raised); color: var(--text-mid); font: 400 14.5px/18px var(--font-sans); cursor: pointer; white-space: nowrap; --chip-accent: var(--cyan); } .chip.sm { padding: 4px 9px; font-size: 13px; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chip-accent); flex: none; } .chip.on { background: color-mix(in srgb, var(--chip-accent) 12%, transparent); border-color: color-mix(in srgb, var(--chip-accent) 12%, transparent); color: var(--chip-accent); } .chips { display: flex; flex-wrap: wrap; gap: var(--s-sm); } .tabs { display: flex; align-items: center; gap: var(--s-xl); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { appearance: none; border: 0; background: none; padding: 10px 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-mid); font: 700 15px/20px var(--font-sans); cursor: pointer; white-space: nowrap; } .tabs button:hover { color: var(--text-hi); } .tabs button.on { color: var(--text-hi); border-bottom-color: var(--ink); } /* ── data table ───────────────────────────────────────────────────────────── */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font: 400 15px/20px var(--font-sans); color: var(--text); } table.data th { text-align: left; padding: 8px var(--s-md); border-bottom: 1px solid var(--border); font: 700 12px/14px var(--font-sans); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-low); white-space: nowrap; } table.data td { padding: 11px var(--s-md); border-top: 1px solid var(--border); vertical-align: middle; } table.data tbody tr:first-child td { border-top: 0; } table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; } table.data td.hi { color: var(--text-hi); font-weight: 700; } table.data tbody tr:hover td { background: color-mix(in srgb, var(--text-hi) 4%, transparent); } table.data.clickable tbody tr { cursor: pointer; } table.data th:first-child, table.data td:first-child { padding-left: 0; } table.data th:last-child, table.data td:last-child { padding-right: 0; } /* ── bars, stack bars, legend ─────────────────────────────────────────────── */ .bar { display: block; width: 100%; height: 8px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; --bar-color: var(--powder); } .bar > i { display: block; height: 100%; width: 0; background: var(--bar-color); border-radius: var(--r-pill); } .stackbar { display: flex; width: 100%; height: 10px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; } .stackbar > i { display: block; height: 100%; background: var(--powder); } .legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font: 400 13px/17px var(--font-sans); color: var(--text-mid); } .legend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--powder); } /* ── tags ─────────────────────────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font: 700 11.5px/15px var(--font-sans); letter-spacing: 0.4px; text-transform: uppercase; background: var(--raised); color: var(--text-mid); white-space: nowrap; } .tag-ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .tag-warn { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--amber); } .tag-bad { background: var(--danger-tint); color: var(--danger); } .tag-quiet { background: var(--raised); color: var(--text-low); } /* ── skeleton ─────────────────────────────────────────────────────────────── */ .skeleton { display: block; height: 14px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--raised) 25%, color-mix(in srgb, var(--raised) 60%, var(--bg)) 37%, var(--raised) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .skeleton + .skeleton { margin-top: var(--s-sm); } .skeleton.line-sm { height: 10px; } .skeleton.line-lg { height: 24px; } .skeleton.block { height: 160px; border-radius: var(--r-paper); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .spinner { animation-duration: 2s; } .rail, body.has-rail, .drawer { transition: none; } } /* ── empty state ──────────────────────────────────────────────────────────── */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-xxxl) var(--s-xl); gap: 6px; } .empty > svg { width: 42px; height: 42px; color: var(--text-low); margin-bottom: 6px; } .empty h3 { margin: 0; font: 700 19.5px/24px var(--font-sans); color: var(--text-hi); } .empty p { margin: 0; max-width: 320px; font: 400 15.5px/20px var(--font-sans); color: var(--text-mid); } .empty .btn { margin-top: var(--s-lg); min-width: 180px; } .empty.compact { padding: var(--s-xl) var(--s-lg); } /* ── drawer ───────────────────────────────────────────────────────────────── */ .drawer-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .drawer-scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(560px, 100%); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-paper); transform: translateX(100%); transition: transform .22s ease; overflow: hidden; } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; gap: var(--s-md); padding: var(--s-lg) var(--s-xl); border-bottom: 1px solid var(--border); } .drawer-head .title { flex: 1; min-width: 0; font-size: 19.5px; line-height: 24px; } .drawer-body { flex: 1; overflow-y: auto; padding: var(--s-xl); } /* ── toast ────────────────────────────────────────────────────────────────── */ .toasts { position: fixed; z-index: 70; right: var(--s-xl); bottom: var(--s-xl); display: flex; flex-direction: column; gap: var(--s-sm); pointer-events: none; max-width: min(420px, calc(100vw - 32px)); } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--s-sm); padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-solid); border: 1px solid var(--border); border-left: 3px solid var(--text-low); box-shadow: var(--shadow-card); color: var(--text-hi); font: 400 15px/20px var(--font-sans); animation: toast-in .18s ease; } .toast.leaving { animation: toast-out .18s ease forwards; } .toast-ok { border-left-color: var(--green); } .toast-bad { border-left-color: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } @media (max-width: 640px) { .toasts { right: var(--s-lg); left: var(--s-lg); bottom: var(--s-lg); max-width: none; } } /* ── tooltip ──────────────────────────────────────────────────────────────── */ .tooltip { position: absolute; z-index: 50; padding: 7px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font: 400 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity .12s ease; box-shadow: var(--shadow-card); max-width: 260px; } .tooltip.on { opacity: 1; } .tooltip b { font-weight: 700; } .tooltip .tip-row { display: flex; align-items: center; gap: 6px; } .tooltip .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; } .tooltip .tip-val { margin-left: auto; padding-left: 12px; font-weight: 700; } /* ── charts ───────────────────────────────────────────────────────────────── */ .chart { position: relative; width: 100%; min-width: 0; } .chart svg { display: block; width: 100%; overflow: visible; } .chart text { fill: var(--text-low); font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; } .chart .grid-line { stroke: var(--border); stroke-width: 1; } .chart .axis-line { stroke: var(--border); stroke-width: 1; } .chart .hit { fill: transparent; } .chart .hit:hover { fill: color-mix(in srgb, var(--text-hi) 5%, transparent); } .chart .dot { fill: var(--bg); stroke-width: 2; } .chart .donut-total { fill: var(--text-hi); font-size: 22px; font-weight: 700; } .chart .donut-cap { fill: var(--text-low); font-size: 11px; } .chart .hbar-label { fill: var(--text); font-size: 13px; } .chart .hbar-value { fill: var(--text-hi); font-size: 13px; font-weight: 700; } .chart .hbar-track { fill: var(--raised); } .chart + .legend, .chart > .legend { margin-top: var(--s-md); } .sparkline { display: block; width: 100%; height: 30px; } /* ── odds and ends ────────────────────────────────────────────────────────── */ .hairline { height: 1px; background: var(--border); border: 0; margin: var(--s-lg) 0; } .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; } .spacer { flex: 1; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }