:root { --canvas: oklch(13% 0.012 158); --rail: oklch(15% 0.014 158); --surface: oklch(18% 0.016 158); --surface-raised: oklch(22% 0.017 158); --line: oklch(33% 0.016 158); --text: oklch(93% 0.012 145); --muted: oklch(70% 0.016 158); --faint: oklch(52% 0.015 158); --accent: oklch(84% 0.18 142); --accent-ink: oklch(18% 0.025 145); --orange: oklch(78% 0.15 70); --red: oklch(67% 0.19 28); --blue: oklch(73% 0.08 235); --space-xs: .25rem; --space-sm: .5rem; --space-md: .75rem; --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem; color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-kerning: normal; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; color: var(--text); background: var(--canvas); font-size: 1rem; line-height: 1.5; letter-spacing: .01em; } button, input, select { font: inherit; } button, select, input { min-height: 2.75rem; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .skip-link { position: fixed; z-index: 600; top: .5rem; left: .5rem; transform: translateY(-160%); background: var(--accent); color: var(--accent-ink); padding: .75rem 1rem; border-radius: .5rem; font-weight: 750; } .skip-link:focus { transform: translateY(0); }
.shell { min-height: 100vh; } .app-rail { display: flex; flex-direction: column; gap: var(--space-2xl); padding: 1.25rem; background: var(--rail); border-bottom: 1px solid var(--line); } .brand { display: grid; width: fit-content; grid-template-columns: auto auto; font-size: 1.5rem; font-weight: 450; letter-spacing: -.06em; line-height: 1; } .brand strong { color: var(--accent); font-weight: 800; } .brand small { grid-column: 1 / -1; margin-top: .45rem; color: var(--muted); font-size: .54rem; font-weight: 700; letter-spacing: .08em; } nav { display: flex; gap: .25rem; } .nav-link { display: inline-flex; gap: .6rem; align-items: center; padding: .7rem .85rem; border-radius: .5rem; color: var(--muted); font-size: .875rem; font-weight: 650; } .nav-link:hover { background: var(--surface); color: var(--text); } .nav-link.active { background: oklch(25% .045 150); color: var(--accent); } .nav-link span { width: 1.2rem; text-align: center; } .rail-note { display: none; margin-top: auto; color: var(--muted); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; font-size: .75rem; } .rail-note p { margin: .5rem 0 0; }
main { min-width: 0; padding: 1rem; } .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); margin-bottom: var(--space-xl); } .eyebrow { margin: 0 0 .25rem; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .1em; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.04em; } h2 { margin-bottom: 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.025em; } .top-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; justify-content: flex-end; } .connection { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .75rem; font-weight: 700; } .connection i, .service-status i { display: inline-block; width: .6rem; height: .6rem; border-radius: 99px; background: var(--faint); } .connection.online i, .service-status.online i { background: var(--accent); } .connection.offline i, .service-status.offline i { background: var(--red); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid var(--accent); border-radius: .5rem; color: var(--accent-ink); background: var(--accent); font-size: .82rem; font-weight: 800; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; } .button:hover { background: oklch(89% .16 142); border-color: oklch(89% .16 142); } .button:active { transform: translateY(1px); } .button.secondary { border-color: var(--line); color: var(--text); background: var(--surface); } .button.secondary:hover { background: var(--surface-raised); border-color: var(--faint); } .button.reset { color: var(--muted); background: transparent; border-color: transparent; }
.kpis { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-xl); } .kpi { min-height: 6.4rem; padding: .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; } .kpi-label { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .kpi-value { display: block; margin-top: .25rem; font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.05em; } .kpi-detail { color: var(--muted); font-size: .75rem; } .kpi.accent .kpi-value { color: var(--accent); } .skeleton { animation: pulse 1.4s ease-in-out infinite; background: var(--surface-raised); border-color: var(--surface-raised); } @keyframes pulse { 50% { opacity: .48; } }
.automation { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); } .automation h2 { max-width: 40rem; font-size: 1rem; font-weight: 570; } .automation-grid { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-status { display: flex; min-width: 0; align-items: center; gap: .4rem; color: var(--muted); font-size: .7rem; font-weight: 700; white-space: nowrap; } .service-status b { overflow: hidden; color: var(--text); font-weight: 750; text-overflow: ellipsis; }
.workbench { min-width: 0; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: 1rem; } .muted { margin-bottom: 0; color: var(--muted); font-size: .78rem; } .filters { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; padding: .75rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .6rem; } label { display: grid; gap: .3rem; color: var(--muted); font-size: .7rem; font-weight: 750; } input, select { width: 100%; color: var(--text); background: var(--canvas); border: 1px solid var(--line); border-radius: .4rem; padding: .45rem .55rem; font-size: .82rem; } input::placeholder { color: var(--faint); } .deal-list { border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; } .deal { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: .9rem; background: var(--surface); border: 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%; color: inherit; cursor: pointer; transition: background-color 160ms ease-out; } .deal:last-child { border-bottom: 0; } .deal:hover { background: var(--surface-raised); } .deal-title { font-size: 1rem; font-weight: 780; letter-spacing: -.025em; } .deal-meta { margin: .1rem 0 0; color: var(--muted); font-size: .72rem; } .decision { display: inline-flex; align-items: center; width: fit-content; gap: .35rem; margin-bottom: .4rem; border-radius: 999px; padding: .24rem .5rem; font-size: .7rem; font-weight: 850; letter-spacing: .02em; } .decision.STRONG_BUY, .decision.BUY { color: var(--accent); background: oklch(25% .042 150); } .decision.NEGOTIATE, .decision.REVIEW { color: var(--orange); background: oklch(25% .035 75); } .decision.SKIP { color: oklch(80% .14 28); background: oklch(25% .036 28); } .score { text-align: right; color: var(--accent); font-size: 1.15rem; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .score span { color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: 0; } .financials { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border-top: 1px solid var(--line); padding-top: .7rem; } .metric { display: grid; gap: .08rem; min-width: 0; } .metric dt { color: var(--muted); font-size: .64rem; font-weight: 720; letter-spacing: .045em; text-transform: uppercase; } .metric dd { margin: 0; font-size: .82rem; font-weight: 720; font-variant-numeric: tabular-nums; } .metric.primary dd { color: var(--accent); font-size: 1rem; } .metric.danger dd { color: oklch(80% .14 28); } .risk { display: inline-flex; align-items: center; gap: .32rem; } .risk::before { content: ""; width: .45rem; height: .45rem; border-radius: 99px; background: var(--faint); } .risk.LOW::before { background: var(--accent); } .risk.MEDIUM::before { background: var(--orange); } .risk.HIGH::before, .risk.VERY_HIGH::before { background: var(--red); } .pagination { display: flex; justify-content: center; align-items: center; gap: .75rem; padding: 1rem; color: var(--muted); font-size: .78rem; } .pagination .button:disabled { opacity: .45; cursor: not-allowed; } .empty { padding: 3rem 1rem; text-align: center; } .empty span { color: var(--accent); font-size: 2rem; } .empty h3 { margin: .5rem 0; font-size: 1rem; } .empty p { color: var(--muted); font-size: .82rem; }
dialog { width: min(54rem, calc(100% - 1rem)); max-height: min(88vh, 56rem); padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; } dialog::backdrop { background: oklch(8% .012 158 / .78); } dialog article { position: relative; padding: clamp(1rem, 3vw, 2rem); } .dialog-close { position: absolute; top: .75rem; right: .75rem; width: 2.75rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--muted); background: var(--canvas); font-size: 1.4rem; cursor: pointer; } .detail-header { padding-right: 3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .detail-header h2 { font-size: 1.45rem; } .detail-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } .detail-panel { padding: 1rem; background: var(--canvas); border: 1px solid var(--line); border-radius: .5rem; } .detail-panel h3 { margin-bottom: .75rem; font-size: .8rem; letter-spacing: .045em; text-transform: uppercase; } .calculation { display: grid; gap: .55rem; margin: 0; } .calculation div { display: flex; justify-content: space-between; gap: .75rem; } .calculation dt { color: var(--muted); font-size: .82rem; } .calculation dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; } .calculation .emphasis dt, .calculation .emphasis dd { color: var(--accent); font-size: 1.1rem; font-weight: 850; } .reason { color: var(--muted); font-size: .85rem; } .listing-link { margin-top: 1rem; }
@media (min-width: 640px) { main { padding: 1.5rem; } .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .automation { grid-template-columns: minmax(14rem, .8fr) 1.2fr; align-items: center; } .automation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .deal { grid-template-columns: minmax(13rem, 1.2fr) minmax(6rem, .55fr) auto; align-items: start; } .financials { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .detail-grid { grid-template-columns: 1.15fr .85fr; } }
@media (min-width: 1024px) { .shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); } .app-rail { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); border-bottom: 0; padding: 1.5rem 1rem; } .app-rail nav { flex-direction: column; } .rail-note { display: block; } main { padding: 2rem; } .topbar { margin-bottom: 2rem; } .filters { grid-template-columns: 1.2fr 1fr .75fr .75fr .75fr 1fr 1fr auto; } .deal { grid-template-columns: minmax(14rem, 1.15fr) minmax(7rem, .55fr) minmax(4rem, .25fr) minmax(9rem, .75fr); align-items: center; } .financials { grid-column: 4; grid-row: 1; grid-template-columns: repeat(2, minmax(6rem, 1fr)); border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 .75rem; } .metric.primary { grid-column: span 2; } }
@media (pointer: coarse) { .deal { min-height: 6rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.cost-editor { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .8rem; color: var(--muted); font-size: .8rem; } .cost-editor summary { width: fit-content; color: var(--text); font-weight: 750; cursor: pointer; } .cost-editor form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; } .cost-editor .button { align-self: end; } .deal-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .65rem; align-items: center; } .listing-photo, .photo-placeholder { display: block; width: 3rem; height: 3.7rem; border: 1px solid var(--line); border-radius: .35rem; object-fit: cover; background: var(--canvas); } .photo-placeholder { display: grid; place-items: center; color: var(--faint); font-size: .65rem; }
.outcome-panel { margin-top: 1rem; } .outcome-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .outcome-form .button { align-self: end; } .outcome-form [data-outcome-message] { align-self: center; margin: 0; }