/* ========================================================================== Token Factory — design system One stylesheet for every surface: the owner console, the organization panel and the member cabinet. Served from /_/app.css, embedded in the binary. Palette is VERIFIED, not eyeballed: scripts/check-contrast.ts — every text/surface pair against WCAG AA dataviz validate_palette.js — categorical hues, both themes Change a colour here and re-run the first one, or the change is unverified. Theme: the system decides (prefers-color-scheme); with no signal we default to dark. app.js stamps data-theme on before first paint, so the palette lives in two attribute-scoped blocks with no media-query duplicate. ========================================================================== */ /* --- palette: dark (also the no-JS default) ------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1113; --bg-sunken: #0a0c0d; --panel: #15171b; --panel-2: #1b1e23; --raised: #23272d; --overlay: rgba(6, 7, 9, 0.66); --line: rgba(255, 255, 255, 0.085); --line-strong: rgba(255, 255, 255, 0.16); --fg: #f2f4f6; --fg-2: #c3c9d1; --fg-3: #8f97a2; /* Mars Orange — brand canon (#EF400F, brand/DECISIONS.md 2026-07-27). Fill only. Small white text on this fill is forbidden by the brand and fails AA anyway (3.88), so --brand-fg is ink: 4.87 against the fill. */ --brand: #ef400f; --brand-fg: #0f1113; --brand-ink: #ec6e38; /* brand as TEXT — 4.90 on --raised */ --brand-soft: rgba(239, 64, 15, 0.14); --brand-line: rgba(239, 64, 15, 0.42); --ok: #43b966; --ok-soft: rgba(67, 185, 102, 0.14); --warn: #e3ae28; --warn-soft: rgba(227, 174, 40, 0.14); --danger: #f7615d; --danger-soft: rgba(247, 97, 93, 0.14); --danger-line: rgba(247, 97, 93, 0.4); /* Categorical — fixed order, never cycled, never a status hue. c1 staff · c2 students · c3 services & companies. Private and anonymous stay neutral on purpose: identity unknown. */ --c1: #4464d3; --c1-ink: #86a6ff; --c1-soft: rgba(68, 100, 211, 0.16); --c2: #00ab8f; --c2-ink: #50d0b4; --c2-soft: rgba(0, 171, 143, 0.16); --c3: #af48b7; --c3-ink: #d889dd; --c3-soft: rgba(175, 72, 183, 0.16); --c0: #6c7684; /* neutral category */ --c0-ink: #a8b0bb; --c0-soft: rgba(108, 118, 132, 0.18); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 4px 14px rgba(0, 0, 0, 0.36); --sh-3: 0 18px 48px rgba(0, 0, 0, 0.55); } /* --- palette: light ------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f7f8; --bg-sunken: #eceef1; --panel: #ffffff; --panel-2: #f2f4f6; --raised: #ffffff; --overlay: rgba(24, 26, 30, 0.42); --line: rgba(16, 20, 26, 0.1); --line-strong: rgba(16, 20, 26, 0.2); --fg: #16181c; --fg-2: #4a515b; --fg-3: #5f6772; --brand: #ef400f; --brand-fg: #0f1113; --brand-ink: #bc2d00; /* 5.57 on --bg */ --brand-soft: rgba(239, 64, 15, 0.1); --brand-line: rgba(239, 64, 15, 0.38); --ok: #00722f; --ok-soft: rgba(0, 114, 47, 0.1); --warn: #965e00; --warn-soft: rgba(150, 94, 0, 0.1); --danger: #c21725; --danger-soft: rgba(194, 23, 37, 0.09); --danger-line: rgba(194, 23, 37, 0.32); --c1: #3451ca; --c1-ink: #3451ca; --c1-soft: rgba(52, 81, 202, 0.1); --c2: #00896f; --c2-ink: #00785f; --c2-soft: rgba(0, 137, 111, 0.1); --c3: #9827a0; --c3-ink: #9827a0; --c3-soft: rgba(152, 39, 160, 0.1); --c0: #6b7280; --c0-ink: #5f6772; --c0-soft: rgba(107, 114, 128, 0.12); --sh-1: 0 1px 2px rgba(16, 20, 26, 0.07); --sh-2: 0 4px 14px rgba(16, 20, 26, 0.09); --sh-3: 0 18px 48px rgba(16, 20, 26, 0.18); } /* --- scales (theme-independent) ------------------------------------------- */ :root { /* One family, system stack — no webfont request, no CDN, no FOUT. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* Fixed rem scale, ratio ~1.125. Product UI, not fluid clamps. */ --fs-xs: 0.72rem; /* 11.5px — chips, axis labels */ --fs-sm: 0.8rem; /* 12.8px — table meta, captions */ --fs-body: 0.9rem; /* 14.4px — default body */ --fs-md: 1rem; /* 16px — panel titles */ --fs-lg: 1.15rem; /* 18.4px — page title */ --fs-xl: 1.45rem; /* 23px — section number */ --fs-2xl: 1.9rem; /* 30px — hero metric, cabinet */ --fs-3xl: 2.6rem; /* 42px — the one number that matters */ --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 28px; --s-8: 40px; --s-9: 56px; --r-1: 6px; --r-2: 8px; --r-3: 11px; --r-4: 16px; --r-full: 999px; /* Semantic stacking order — never an arbitrary 9999. */ --z-sticky: 20; --z-dropdown: 30; --z-backdrop: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70; --ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ --t-fast: 120ms; --t: 180ms; --t-slow: 260ms; --shell-h: 54px; --wrap: 1280px; /* Density defaults = comfortable (org panel, cabinet, landing). */ --row-h: 40px; --cell-y: 11px; --fs-table: var(--fs-body); --panel-p: var(--s-6); } /* Compact density — the owner console, where scanning many rows is the job. */ [data-density="compact"] { --row-h: 30px; --cell-y: 6px; --fs-table: var(--fs-sm); --panel-p: var(--s-5); --wrap: 1400px; } /* --- reset + base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-body) / 1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; } h1 { font-size: var(--fs-lg); } h2 { font-size: var(--fs-md); } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } a { color: var(--brand-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Every number in this product is compared vertically. */ .num, td.num, th.num, .metric-v, .tile-v, tbody td.num { font-variant-numeric: tabular-nums; } td.num, th.num { text-align: right; } .mono { font-family: var(--mono); } ::selection { background: var(--brand-soft); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-1); } /* Prose blocks stay readable; data blocks are exempt. */ .prose { max-width: 68ch; text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-6) var(--s-9); } /* Pages that are read rather than scanned: onboarding, invitations, prose. */ .wrap-narrow { max-width: 760px; } /* A numbered instruction. The number is the ordinal, not decoration — use it only where the order actually matters (install, then join, then run). */ .step { display: flex; gap: var(--s-4); align-items: flex-start; } .step-n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--raised); color: var(--fg-2); font: 600 var(--fs-sm)/1 var(--mono); font-variant-numeric: tabular-nums; } .step-done { border-color: transparent; background: var(--ok-soft); color: var(--ok); } .step-b { flex: 1; min-width: 0; } .step-t { font-weight: 550; } .step-d { color: var(--fg-3); font-size: var(--fs-sm); margin-top: 2px; } .step-done ~ .step-b .step-t { color: var(--fg-3); font-weight: 450; } @media (max-width: 700px) { .wrap { padding: 0 var(--s-5) var(--s-8); } } /* --- app shell ----------------------------------------------------------- */ .shell { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .shell-in { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: var(--s-6); height: var(--shell-h); padding: 0 var(--s-6); } @media (max-width: 700px) { .shell-in { padding: 0 var(--s-5); gap: var(--s-4); } } .brand { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.015em; color: var(--fg); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-mark { flex: none; color: var(--brand); } /* The brand's sub-brand idiom: a solid dot after the name. */ .brand-dot { color: var(--brand); } /* min-width:0 is what makes the overflow scroll instead of pushing the theme and language controls off the bar when a page carries six or more tabs. */ .tabs { display: flex; gap: 2px; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); color: var(--fg-3); font-size: var(--fs-body); white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .tab:hover { color: var(--fg-2); text-decoration: none; } .tab[aria-current="page"] { color: var(--fg); border-bottom-color: var(--brand); font-weight: 550; } .shell-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--s-3); } .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin: var(--s-7) 0 var(--s-5); } .pagehead-t { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; } .pagehead-s { color: var(--fg-3); font-size: var(--fs-sm); margin-top: 2px; } /* --- buttons ------------------------------------------------------------- */ .btn { --btn-bg: var(--panel-2); --btn-fg: var(--fg-2); --btn-line: var(--line-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 34px; padding: 0 var(--s-4); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-line); border-radius: var(--r-2); font: 550 var(--fs-sm) / 1 var(--font); cursor: pointer; white-space: nowrap; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease); } .btn:hover { color: var(--fg); border-color: var(--fg-3); text-decoration: none; } .btn:active { transform: translateY(0.5px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .btn[disabled]:hover { color: var(--btn-fg); border-color: var(--btn-line); } /* Primary = Mars Orange fill + ink label. Never white-on-orange (brand ban). */ .btn-primary { --btn-bg: var(--brand); --btn-fg: var(--brand-fg); --btn-line: var(--brand); font-weight: 600; } .btn-primary:hover { --btn-bg: color-mix(in srgb, var(--brand) 88%, #ffffff); color: var(--brand-fg); border-color: color-mix(in srgb, var(--brand) 88%, #ffffff); } .btn-ghost { --btn-bg: transparent; } .btn-danger { --btn-fg: var(--danger); --btn-line: var(--danger-line); --btn-bg: transparent; } .btn-danger:hover { --btn-bg: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .btn-lg { min-height: 42px; padding: 0 var(--s-6); font-size: var(--fs-body); } .btn-sm { min-height: 27px; padding: 0 var(--s-3); font-size: var(--fs-xs); } .btn-block { width: 100%; } .btn-icon { padding: 0; width: 34px; } .btn[data-loading="true"] { color: transparent; position: relative; pointer-events: none; } .btn[data-loading="true"]::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--btn-fg); animation: spin 620ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Segmented control — period filters, language, anything mutually exclusive. */ .segmented { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 2px; gap: 2px; } .segmented button { border: 0; background: transparent; color: var(--fg-3); font: 550 var(--fs-sm) / 1 var(--font); padding: var(--s-2) var(--s-4); border-radius: var(--r-1); cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); } .segmented button:hover { color: var(--fg-2); } .segmented button[aria-pressed="true"] { background: var(--raised); color: var(--fg); box-shadow: var(--sh-1); } /* --- form controls ------------------------------------------------------- */ .field { display: block; margin-bottom: var(--s-4); } .field-l { display: block; margin-bottom: var(--s-2); font-size: var(--fs-sm); font-weight: 550; color: var(--fg-2); } .field-h { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--fg-3); } .field-e { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--danger); } input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="email"], select, textarea { width: 100%; min-height: 36px; background: var(--bg-sunken); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: var(--s-2) var(--s-4); font: var(--fs-body) / 1.4 var(--font); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); } input::placeholder, textarea::placeholder { color: var(--fg-3); opacity: 1; } input:hover, select:hover, textarea:hover { border-color: var(--fg-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } input[disabled], select[disabled], textarea[disabled] { opacity: 0.5; cursor: not-allowed; } input[aria-invalid="true"] { border-color: var(--danger); } select { appearance: none; padding-right: var(--s-7); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .input-mono { font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: 0.02em; } .row { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap; } .row > .grow { flex: 1; min-width: 180px; } /* --- panels & sections --------------------------------------------------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--panel-p); } .panel + .panel { margin-top: var(--s-5); } .panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); } .panel-t { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.011em; } .panel-s { color: var(--fg-3); font-size: var(--fs-sm); } .panel-flush { padding: 0; overflow: hidden; } .panel-flush .panel-h { padding: var(--panel-p) var(--panel-p) 0; margin-bottom: var(--s-3); } .section { margin-top: var(--s-7); } .section > .panel-h { margin-bottom: var(--s-4); } /* --- toolbar (filters above a table) ------------------------------------- Lives inside a flush panel, above the table it filters. */ .toolbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) var(--panel-p); border-bottom: 1px solid var(--line); } .filters { display: flex; gap: var(--s-2); flex-wrap: wrap; } .filter { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-3); background: transparent; color: var(--fg-3); border: 1px solid transparent; border-radius: var(--r-full); font: 550 var(--fs-sm) / 1 var(--font); cursor: pointer; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .filter:hover { color: var(--fg-2); background: var(--panel-2); } .filter[aria-pressed="true"] { background: var(--raised); color: var(--fg); border-color: var(--line-strong); } .filter .n { font-variant-numeric: tabular-nums; color: var(--fg-3); font-weight: 450; } .filter[aria-pressed="true"] .n { color: var(--fg-2); } .search { position: relative; display: flex; align-items: center; flex: 1 1 200px; max-width: 320px; } .search .ic { position: absolute; left: 10px; color: var(--fg-3); pointer-events: none; } .search input { min-height: 32px; padding-left: 32px; } .toolbar-end { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; } .tablefoot { padding: var(--s-3) var(--panel-p) var(--s-4); font-size: var(--fs-sm); color: var(--fg-3); display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: baseline; } .grid { display: grid; gap: var(--s-5); } .g-2 { grid-template-columns: 1fr 1fr; } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (max-width: 960px) { .g-2, .g-3 { grid-template-columns: 1fr; } } /* --- stat band (KPI row) ------------------------------------------------ One bordered container split by hairlines, not a row of nested cards. */ .band { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .tile { padding: var(--s-5) var(--s-6); box-shadow: -1px -1px 0 0 var(--line); } .tile-l { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--fg-3); margin-bottom: var(--s-2); } .tile-v { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.022em; line-height: 1.15; } .tile-v .unit { font-size: var(--fs-sm); font-weight: 450; color: var(--fg-3); letter-spacing: 0; } .tile-sub { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.6; } .tile-sub b { color: var(--fg); font-weight: 600; } .tile-trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); font-weight: 550; } .tile-trend.up { color: var(--ok); } .tile-trend.down { color: var(--danger); } /* The single number a page is about (pool balance, wallet balance). */ .hero-metric { display: flex; flex-direction: column; gap: var(--s-2); } .hero-v { font-size: var(--fs-3xl); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .hero-v .unit { font-size: var(--fs-md); font-weight: 450; color: var(--fg-2); letter-spacing: 0; } .hero-l { font-size: var(--fs-sm); color: var(--fg-3); } /* --- key/value list ----------------------------------------------------- */ .kv { display: grid; gap: var(--s-3); } .kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); } .kv-k { color: var(--fg-3); font-size: var(--fs-sm); } .kv-v { font-weight: 550; font-variant-numeric: tabular-nums; text-align: right; } /* --- tables ------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); } caption { text-align: left; color: var(--fg-3); font-size: var(--fs-sm); padding-bottom: var(--s-3); } th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-weight: 550; font-size: var(--fs-sm); color: var(--fg-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; } th[aria-sort] { cursor: pointer; user-select: none; } th[aria-sort]:hover { color: var(--fg-2); } th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--fg); } th[aria-sort="ascending"]::after { content: " ↑"; } th[aria-sort="descending"]::after { content: " ↓"; } td { padding: var(--cell-y) var(--s-3); border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: middle; } tbody tr { transition: background-color var(--t-fast) var(--ease); } tbody tr:hover td { background: color-mix(in srgb, var(--fg) 3.5%, transparent); } tbody tr:last-child td { border-bottom: 0; } td.strong, .td-name { color: var(--fg); font-weight: 550; } .td-meta { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 1px; } tr.is-open td { background: color-mix(in srgb, var(--brand) 5%, transparent); } tr.detail td { padding: 0; background: var(--bg-sunken); } tr.detail .detail-in { padding: var(--s-5) var(--s-6); } /* --- chips, badges, dots ------------------------------------------------ */ .chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 550; white-space: nowrap; } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .chip-c1 { color: var(--c1-ink); background: var(--c1-soft); } .chip-c2 { color: var(--c2-ink); background: var(--c2-soft); } .chip-c3 { color: var(--c3-ink); background: var(--c3-soft); } .chip-c0 { color: var(--c0-ink); background: var(--c0-soft); } .chip-brand { color: var(--brand-ink); background: var(--brand-soft); } .badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 1px var(--s-3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 550; white-space: nowrap; border: 1px solid transparent; } .badge-ok { color: var(--ok); background: var(--ok-soft); } .badge-warn { color: var(--warn); background: var(--warn-soft); } .badge-danger { color: var(--danger); background: var(--danger-soft); } .badge-mute { color: var(--fg-3); background: var(--c0-soft); } .badge-outline { color: var(--fg-2); border-color: var(--line-strong); } /* --- meters (rolling window caps, pool depletion) ----------------------- */ .meter { display: grid; gap: var(--s-2); } .meter-h { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); } .meter-h .k { color: var(--fg-2); } .meter-h .v { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 550; } .meter-track { height: 6px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; } .meter-fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--brand); transition: width var(--t-slow) var(--ease); } .meter[data-level="warn"] .meter-fill { background: var(--warn); } .meter[data-level="crit"] .meter-fill { background: var(--danger); } /* --- callouts (no side stripes; full border + tint) -------------------- */ .callout { display: flex; gap: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--panel); color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6; } .callout-ic { flex: none; margin-top: 1px; color: var(--fg-3); } .callout b { color: var(--fg); font-weight: 600; } .callout-danger { border-color: var(--danger-line); background: var(--danger-soft); } .callout-danger .callout-ic { color: var(--danger); } .callout-danger b { color: var(--danger); } .callout-warn { border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: var(--warn-soft); } .callout-warn .callout-ic { color: var(--warn); } .callout-brand { border-color: var(--brand-line); background: var(--brand-soft); } .callout-brand .callout-ic { color: var(--brand-ink); } /* --- copy-to-clipboard row --------------------------------------------- */ .copyrow { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .copyval { flex: 1; min-width: 220px; background: var(--bg-sunken); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font: var(--fs-sm) / 1.4 var(--mono); letter-spacing: 0.02em; overflow-wrap: anywhere; color: var(--fg); } pre.code { margin: 0; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5); font: var(--fs-sm) / 1.65 var(--mono); color: var(--fg-2); overflow-x: auto; } /* --- hint (explain a term without a tooltip library) ------------------- */ .hint { position: relative; display: inline-flex; align-items: center; } .hint-btn { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--fg-3); font: 600 9.5px/1 var(--font); cursor: help; } .hint-btn:hover { color: var(--fg); border-color: var(--fg-3); } .hint-body { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px); width: max-content; max-width: 270px; z-index: var(--z-tooltip); background: var(--raised); color: var(--fg-2); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--sh-2); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); line-height: 1.5; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t); } .hint:hover .hint-body, .hint:focus-within .hint-body { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* --- charts ------------------------------------------------------------- */ .chart { display: flex; align-items: flex-end; gap: 3px; height: 168px; position: relative; } .chart-y { position: absolute; top: -4px; right: 0; font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; } .chart-col { flex: 1; max-width: 34px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; } /* Stacked segments are separated by a 2px surface gap, not a border. */ .chart-stack { display: flex; flex-direction: column-reverse; gap: 2px; } .chart-seg { width: 100%; min-height: 0; transition: filter var(--t) var(--ease); } .chart-stack > .chart-seg:last-child { border-radius: 4px 4px 0 0; } .chart-col:hover .chart-seg { filter: brightness(1.18); } .chart-c1 { background: var(--c1); } .chart-c2 { background: var(--c2); } .chart-c3 { background: var(--c3); } .chart-c0 { background: var(--c0); } .chart-brand { background: var(--brand); } .chart-tip { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: var(--z-tooltip); display: none; background: var(--raised); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--sh-2); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); line-height: 1.5; white-space: nowrap; text-align: left; } .chart-col:hover .chart-tip, .chart-col:focus-within .chart-tip { display: block; } .chart-axis { display: flex; justify-content: space-between; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--fg-3); } .legend { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--fg-3); } .legend-i { display: inline-flex; align-items: center; gap: var(--s-2); } .legend-i::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--legend-c, var(--fg-3)); } /* --- dialogs ------------------------------------------------------------ */ dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--panel); color: var(--fg); box-shadow: var(--sh-3); } dialog::backdrop { background: var(--overlay); backdrop-filter: blur(3px); } dialog[open] { animation: dlg-in var(--t-slow) var(--ease); } @keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } } .dlg-h { padding: var(--s-6) var(--s-6) 0; } .dlg-t { font-size: var(--fs-md); font-weight: 600; } .dlg-s { color: var(--fg-3); font-size: var(--fs-sm); margin-top: var(--s-2); } .dlg-b { padding: var(--s-5) var(--s-6); } .dlg-f { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-6) var(--s-6); } /* --- toast -------------------------------------------------------------- */ .toast-host { position: fixed; inset: auto var(--s-6) var(--s-6) auto; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-end; pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--s-3); max-width: 380px; background: var(--raised); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--sh-2); padding: var(--s-3) var(--s-5); font-size: var(--fs-sm); animation: toast-in var(--t-slow) var(--ease); } .toast[data-leaving="true"] { animation: toast-out var(--t) var(--ease) forwards; } .toast-ok { color: var(--ok); } .toast-err { color: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px); } } /* --- skeletons (loading is a shape, not a spinner) --------------------- */ .skel { border-radius: var(--r-2); background: linear-gradient(100deg, var(--panel) 38%, var(--panel-2) 50%, var(--panel) 62%); background-size: 220% 100%; animation: skel 1.4s linear infinite; } @keyframes skel { to { background-position: -220% 0; } } .skel-text { height: 11px; border-radius: var(--r-full); } .skel-row { height: var(--row-h); border-bottom: 1px solid var(--line); } /* --- empty states (teach the interface) -------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-8) var(--s-6); color: var(--fg-3); } .empty-art { color: var(--fg-3); opacity: 0.75; margin-bottom: var(--s-2); } .empty-t { color: var(--fg); font-weight: 600; font-size: var(--fs-body); } .empty-d { max-width: 46ch; font-size: var(--fs-sm); line-height: 1.6; } .empty-a { margin-top: var(--s-3); } /* --- centred single-card screens (login, invite, no-org) --------------- */ .solo { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6); } .solo-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: var(--sh-2); padding: var(--s-8) var(--s-7); } .solo-card .brand { margin-bottom: var(--s-6); } .solo-card h1 { font-size: var(--fs-md); margin-bottom: var(--s-3); } .solo-card .prose { color: var(--fg-2); font-size: var(--fs-body); margin-bottom: var(--s-6); } .solo-alt { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); } /* --- utilities ---------------------------------------------------------- */ .muted { color: var(--fg-3); } .dim { color: var(--fg-2); } .small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); } .nowrap { white-space: nowrap; } .stack-2 { display: grid; gap: var(--s-2); } .stack-3 { display: grid; gap: var(--s-3); } .stack-5 { display: grid; gap: var(--s-5); } .inline { display: inline-flex; align-items: center; gap: var(--s-2); } .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .hidden { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- motion opt-out ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .skel { animation: none; background: var(--panel-2); } .btn[data-loading="true"]::after { animation: none; border-top-color: currentColor; opacity: 0.5; } }