/* ═══════════════════════════════════════════════════════════════════════════ Otsle — Joint Solution Design workspace One stylesheet, no build step. Brand blue is #11A0DB, sampled from otsle_logo_full.png. It cannot carry white text at AA contrast (3.0:1 on white), so it is the *identity* colour — logo, rails, focus rings, active states, presence — and a deeper sibling #0B7CAD (4.67:1) does the work that needs contrast: button fills, links. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Brand */ --brand: #11A0DB; /* the logo blue — identity, never white text on it */ --brand-ink: #0B7CAD; /* interactive: button fills, link text. 4.67:1 on white */ --brand-deep: #085C82; /* pressed / hover on filled */ --brand-soft: #E7F5FC; /* tinted panels, active nav */ --brand-on-soft: #0A7099; /* brand text ON --brand-soft. 4.98:1 there; --brand-ink is only 4.19 */ --brand-wash: #F5FBFE; /* the faintest wash */ --brand-line: #BEE4F6; /* Neutrals — biased a few degrees toward the brand so they read as chosen */ --ink: #101720; --ink-2: #40505F; --ink-3: #5E6E7C; --ink-4: #9AAAB8; --line: #E2E9EF; --line-2: #EEF3F7; --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #F7FAFC; --sunken: #F2F6F9; /* Semantic — separate from the accent */ --good: #0E7A5F; --good-soft: #E2F4EE; --good-line: #A9DECD; --warn: #9A6206; --warn-soft: #FDF2DC; --warn-line: #EFCD8E; --bad: #B3261E; --bad-soft: #FCEAE8; --bad-line: --bad-soft; --info: #0A7099; --info-soft: #E7F5FC; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --r-sm: 6px; --r: 10px; --r-lg: 14px; --sh-1: 0 1px 2px rgba(16, 23, 32, .04), 0 1px 3px rgba(16, 23, 32, .06); --sh-2: 0 2px 4px rgba(16, 23, 32, .04), 0 6px 16px rgba(16, 23, 32, .08); --sh-3: 0 8px 24px rgba(16, 23, 32, .12), 0 2px 6px rgba(16, 23, 32, .06); --sh-brand: 0 1px 2px rgba(11, 124, 173, .2), 0 4px 12px rgba(11, 124, 173, .18); --ease: cubic-bezier(.2, .7, .3, 1); /* Text on a brand-filled surface, and the logo tweak for a dark ground. These are tokens rather than component-level media queries because a media query cannot be overridden by the user's explicit theme choice — that is what made a light-mode button render dark text on blue. */ --on-brand: #ffffff; --logo-tune: none; } /* Theme. `prefers-color-scheme` is the default signal. A signed-in user can override it from their profile, which stamps data-theme on ; that override must win in both directions, so both values are declared explicitly rather than relying on the media query alone. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #3EBAF0; --brand-ink: #6BCBF4; --brand-deep: #9BDEF9; --brand-soft: #0D2E3F; --brand-wash: #0B222E; --brand-line: #17475F; --brand-on-soft: #6BCBF4; --ink: #E8EEF3; --ink-2: #B2C1CD; --ink-3: #8394A2; --ink-4: #63747F; --line: #24313C; --line-2: #1D2830; --bg: #0C1116; --panel: #141C23; --panel-2: #111920; --sunken: #0F161C; --good: #4FCFA6; --good-soft: #0E2A22; --good-line: #1D5344; --warn: #E6B25C; --warn-soft: #2E2410; --warn-line: #5A4519; --bad: #F08D85; --bad-soft: #331715; --info: #6BCBF4; --info-soft: #0D2E3F; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.3); --sh-3: 0 10px 30px rgba(0,0,0,.5); --sh-brand: 0 2px 10px rgba(62, 186, 240, .25); --on-brand: #06171F; --logo-tune: brightness(1.25); --on-brand: #06171F; --logo-tune: brightness(1.25); } } :root[data-theme="dark"] { --brand: #3EBAF0; --brand-ink: #6BCBF4; --brand-deep: #9BDEF9; --brand-soft: #0D2E3F; --brand-wash: #0B222E; --brand-line: #17475F; --brand-on-soft: #6BCBF4; --ink: #E8EEF3; --ink-2: #B2C1CD; --ink-3: #8394A2; --ink-4: #63747F; --line: #24313C; --line-2: #1D2830; --bg: #0C1116; --panel: #141C23; --panel-2: #111920; --sunken: #0F161C; --good: #4FCFA6; --good-soft: #0E2A22; --good-line: #1D5344; --warn: #E6B25C; --warn-soft: #2E2410; --warn-line: #5A4519; --bad: #F08D85; --bad-soft: #331715; --info: #6BCBF4; --info-soft: #0D2E3F; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.3); --sh-3: 0 10px 30px rgba(0,0,0,.5); --sh-brand: 0 2px 10px rgba(62, 186, 240, .25); --on-brand: #06171F; --logo-tune: brightness(1.25); } :root[data-theme="light"] { /* Brand */ --brand: #11A0DB; /* the logo blue — identity, never white text on it */ --brand-ink: #0B7CAD; /* interactive: button fills, link text. 4.67:1 on white */ --brand-deep: #085C82; /* pressed / hover on filled */ --brand-soft: #E7F5FC; /* tinted panels, active nav */ --brand-on-soft: #0A7099; /* brand text ON --brand-soft. 4.98:1 there; --brand-ink is only 4.19 */ --brand-wash: #F5FBFE; /* the faintest wash */ --brand-line: #BEE4F6; /* Neutrals — biased a few degrees toward the brand so they read as chosen */ --ink: #101720; --ink-2: #40505F; --ink-3: #5E6E7C; --ink-4: #9AAAB8; --line: #E2E9EF; --line-2: #EEF3F7; --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #F7FAFC; --sunken: #F2F6F9; /* Semantic — separate from the accent */ --good: #0E7A5F; --good-soft: #E2F4EE; --good-line: #A9DECD; --warn: #9A6206; --warn-soft: #FDF2DC; --warn-line: #EFCD8E; --bad: #B3261E; --bad-soft: #FCEAE8; --bad-line: --bad-soft; --info: #0A7099; --info-soft: #E7F5FC; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --r-sm: 6px; --r: 10px; --r-lg: 14px; --sh-1: 0 1px 2px rgba(16, 23, 32, .04), 0 1px 3px rgba(16, 23, 32, .06); --sh-2: 0 2px 4px rgba(16, 23, 32, .04), 0 6px 16px rgba(16, 23, 32, .08); --sh-3: 0 8px 24px rgba(16, 23, 32, .12), 0 2px 6px rgba(16, 23, 32, .06); --sh-brand: 0 1px 2px rgba(11, 124, 173, .2), 0 4px 12px rgba(11, 124, 173, .18); --ease: cubic-bezier(.2, .7, .3, 1); /* Text on a brand-filled surface, and the logo tweak for a dark ground. These are tokens rather than component-level media queries because a media query cannot be overridden by the user's explicit theme choice — that is what made a light-mode button render dark text on blue. */ --on-brand: #ffffff; --logo-tune: none; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--brand-ink); text-decoration: none; text-underline-offset: 2px; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 640; letter-spacing: -.012em; text-wrap: balance; } h1 { font-size: 1.6rem; } h2 { font-size: 1.12rem; } h3 { font-size: .98rem; } h4 { font-size: .88rem; } p { margin: 0 0 .85rem; } code, kbd { font-family: var(--mono); font-size: .875em; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Top bar ──────────────────────────────────────────────────────────── */ .topbar { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; } .topbar-in { max-width: 1520px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1.25rem; min-height: 58px; } .logo { display: flex; align-items: center; gap: .7rem; } .logo:hover { text-decoration: none; } .logo img { height: 28px; width: auto; display: block; filter: var(--logo-tune); } .logo .divider { width: 1px; height: 20px; background: var(--line); } .logo .product { font-weight: 600; color: var(--ink); font-size: .95rem; letter-spacing: -.01em; } .topnav { display: flex; gap: .2rem; margin-left: auto; align-items: center; } .topnav a, .topnav button { padding: .4rem .7rem; border-radius: var(--r-sm); color: var(--ink-2); font-size: .875rem; border: 0; background: none; cursor: pointer; font-family: inherit; transition: background .14s var(--ease), color .14s var(--ease); } .topnav a:hover, .topnav button:hover { background: var(--line-2); text-decoration: none; color: var(--ink); } .who-link { display: flex; flex-direction: column; line-height: 1.25; padding: .25rem .6rem .25rem .75rem; margin-left: .25rem; border-left: 1px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: background .14s var(--ease); } .who-link:hover { background: var(--line-2); text-decoration: none; } .who-name { font-size: .82rem; font-weight: 560; color: var(--ink-2); } .who-role { font-size: .7rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; } /* ── Sub navigation ───────────────────────────────────────────────────── */ .subbar { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: 55; } .subbar-in { max-width: 1520px; margin: 0 auto; padding: 0 1.5rem; display: flex; gap: .15rem; overflow-x: auto; } .subbar a { padding: .7rem .75rem; font-size: .875rem; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .14s var(--ease), border-color .14s var(--ease); } .subbar a:hover { color: var(--ink); text-decoration: none; } .subbar a.on { color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 580; } main { max-width: 1520px; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; } main.narrow { max-width: 880px; } .page-head { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .page-head .grow { flex: 1 1 340px; min-width: 0; } .page-head p.lede { color: var(--ink-2); margin: .3rem 0 0; max-width: 72ch; } .actions-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .crumb { font-size: .82rem; color: var(--ink-3); margin-bottom: .15rem; } /* ── Surfaces ─────────────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); } .card + .card { margin-top: 1.1rem; } .card-head { padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .card-head h2, .card-head h3 { margin: 0; } .card-head .grow { flex: 1; } .card-body { padding: 1.15rem; } .card-body.tight { padding: .8rem 1.15rem; } .card-foot { padding: .8rem 1.15rem; border-top: 1px solid var(--line); background: var(--panel-2); border-radius: 0 0 var(--r) var(--r); } .grid { display: grid; gap: 1.1rem; } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .split { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); } @media (max-width: 1020px) { .split { grid-template-columns: 1fr; } } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .95rem 1.05rem; } .stat .n { font-size: 1.7rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.05; font-variant-numeric: tabular-nums; } .stat .k { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; margin-top: .3rem; font-weight: 600; } .stat .sub { color: var(--ink-3); font-size: .8rem; margin-top: .35rem; } /* ── Buttons — modern and reactive ────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .9rem; font: inherit; font-size: .875rem; font-weight: 560; cursor: pointer; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease), color .15s var(--ease); } .btn:hover { background: var(--panel-2); border-color: var(--ink-4); text-decoration: none; box-shadow: var(--sh-2); } .btn:active { transform: translateY(1px); box-shadow: var(--sh-1); } .btn.primary { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--on-brand); box-shadow: var(--sh-brand); } .btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); } .btn.ghost:hover { background: var(--line-2); border-color: transparent; box-shadow: none; color: var(--ink); } .btn.tinted { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-on-soft); box-shadow: none; } .btn.tinted:hover { background: var(--brand-line); border-color: var(--brand); } .btn.danger { color: var(--bad); border-color: var(--bad-line, var(--line)); } .btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); } /* Which classes of question a vendor is asked. */ .class-picks { display: grid; gap: .45rem; max-width: 46rem; } .class-pick { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); transition: background .15s var(--ease), border-color .15s var(--ease); } .class-pick:hover { background: var(--panel-2); } .class-pick.on { border-color: var(--brand); background: var(--brand-soft); } .class-pick.fixed { cursor: default; opacity: .9; } .class-pick input { width: auto; margin: .2rem 0 0; accent-color: var(--brand); } .cp-body { display: grid; gap: .15rem; } .cp-title { font-weight: 600; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .class-pick.on .cp-title { color: var(--brand-on-soft); } .cp-note { font-size: .82rem; color: var(--ink-3); } .answer-foot { display: flex; gap: .7rem; align-items: center; margin-top: .55rem; flex-wrap: wrap; } /* The vendor drags this when a question needs more room than we guessed. */ textarea[data-grow] { resize: vertical; min-height: 4.5rem; } /* Where one vendor stands in each stage, with the moves available from there. A card per stage rather than a row, because the buttons are the point and a table cell cannot hold two of them without becoming unreadable. */ .stage-cells { display: grid; gap: .6rem; margin-bottom: .5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .stage-cell { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); border-left: 3px solid var(--line); } .stage-cell.is-open { border-left-color: var(--good); } .stage-cell.is-review { border-left-color: var(--warn); } .stage-cell.is-closed { border-left-color: var(--info); } .sc-head { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .sc-label { font-weight: 620; font-size: .9rem; } .sc-meta { margin-top: .25rem; } .sc-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; } .sc-actions:empty { display: none; } /* The read-only board: stages down, vendors across. */ .stage-matrix { width: 100%; border-collapse: collapse; } .stage-matrix th, .stage-matrix td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .stage-matrix th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .stage-matrix td.sm-stage { font-weight: 620; white-space: nowrap; } /* Destructive action behind one deliberate click, with the consequence stated before the button rather than only in a confirm() the eye skips past. */ .danger-menu { position: relative; } .danger-menu > summary { list-style: none; cursor: pointer; } .danger-menu > summary::-webkit-details-marker { display: none; } .danger-menu[open] > summary { border-color: var(--bad); color: var(--bad); } .danger-pop { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: min(30rem, 82vw); padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--bad-line, var(--line)); border-top: 3px solid var(--bad); border-radius: var(--r); box-shadow: var(--sh-3, var(--sh-2)); } .danger-pop p { margin: 0 0 .55rem; } .danger-pop form { margin-top: .7rem; } @media (max-width: 640px) { .danger-pop { position: static; width: auto; } } .btn.sm { padding: .3rem .6rem; font-size: .8rem; } .btn.lg { padding: .65rem 1.2rem; font-size: .95rem; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; } .btn-row { display: flex; gap: .5rem; flex-wrap: wrap; } /* ── Tables ───────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .875rem; } th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line-2); vertical-align: top; } th { color: var(--ink-3); font-weight: 620; font-size: .715rem; text-transform: uppercase; letter-spacing: .07em; background: var(--panel-2); position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); } tbody tr { transition: background .12s var(--ease); } tbody tr:hover { background: var(--brand-wash); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .row-sub { color: var(--ink-3); font-size: .8rem; margin-top: .18rem; } .section-row td { background: var(--brand-soft); color: var(--brand-on-soft); font-weight: 640; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--brand-line); } tbody tr.section-row:hover { background: var(--brand-soft); } /* ── Badges ───────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: .14rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .badge.good { background: var(--good-soft); color: var(--good); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--bad-soft); color: var(--bad); } .badge.info { background: var(--info-soft); color: var(--info); } .badge.muted { background: var(--line-2); color: var(--ink-3); } .badge.brand { background: var(--brand-soft); color: var(--brand-on-soft); } .ref { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; } /* ── Forms ────────────────────────────────────────────────────────────── */ label { display: block; font-size: .8rem; font-weight: 580; color: var(--ink-2); margin-bottom: .3rem; } label .hint { font-weight: 400; color: var(--ink-3); } input[type=text], input[type=email], input[type=password], input[type=date], input[type=url], input[type=search], input[type=number], select, textarea { width: 100%; padding: .52rem .65rem; font: inherit; font-size: .9rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .14s var(--ease), box-shadow .14s var(--ease); } textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55; } input:hover, select:hover, textarea:hover { border-color: var(--ink-4); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } input:disabled, textarea:disabled, select:disabled { background: var(--sunken); color: var(--ink-3); cursor: not-allowed; } .field { margin-bottom: .95rem; } .field-row { display: grid; gap: .95rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .check { display: flex; align-items: center; gap: .45rem; font-size: .875rem; } .check input { width: auto; } .check label { margin: 0; font-weight: 450; } /* ── Flash & callouts ─────────────────────────────────────────────────── */ .flash { padding: .75rem 1rem; border-radius: var(--r-sm); margin-bottom: .8rem; font-size: .9rem; border: 1px solid transparent; animation: slide-in .28s var(--ease); } @keyframes slide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .flash.good { background: var(--good-soft); color: var(--good); border-color: var(--good-line); } .flash.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); } .flash.info { background: var(--info-soft); color: var(--info); border-color: var(--brand-line); } .flash.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); } .flash a { color: inherit; text-decoration: underline; word-break: break-all; } .note { background: var(--brand-wash); border: 1px solid var(--brand-line); border-left: 3px solid var(--brand); padding: .75rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .875rem; color: var(--ink-2); } .note.warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); } .note.bad { border-color: color-mix(in srgb, var(--bad) 25%, transparent); border-left-color: var(--bad); background: var(--bad-soft); color: var(--bad); } .note strong { color: inherit; font-weight: 640; } .note p:last-child { margin-bottom: 0; } .empty { text-align: center; padding: 3.5rem 1rem; color: var(--ink-3); } .empty h3 { color: var(--ink-2); } /* ── Progress ─────────────────────────────────────────────────────────── */ .bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .4s var(--ease); } .stack { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line-2); } .stack > i { display: block; height: 100%; transition: width .4s var(--ease); } .stack > i.good { background: var(--good); } .stack > i.warn { background: var(--warn); } .stack > i.bad { background: var(--bad); } .stack > i.muted { background: var(--line); } /* ═══ Collaboration ═══════════════════════════════════════════════════════ Presence, live edits and the shadow banner — the cues that make this read as a shared space rather than a form. ═════════════════════════════════════════════════════════════════════════ */ .presence { display: flex; align-items: center; gap: .4rem; } .avatars { display: flex; } .avatar { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .01em; color: #fff; border: 2px solid var(--panel); margin-left: -7px; position: relative; transition: transform .16s var(--ease), z-index 0s; cursor: default; } .avatar:first-child { margin-left: 0; } .avatar:hover { transform: translateY(-2px) scale(1.08); z-index: 5; } .avatar.watching { border-style: dashed; border-color: var(--ink-4); } .avatar.me { box-shadow: 0 0 0 2px var(--brand); } .presence-label { font-size: .8rem; color: var(--ink-3); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; position: relative; } .live-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--good); opacity: .6; animation: pulse 2.2s var(--ease) infinite; } @keyframes pulse { 0% { transform: scale(.7); opacity: .7; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } .live-dot.off { background: var(--ink-4); } .live-dot.off::after { display: none; } .editing-flag { font-size: .75rem; color: var(--brand-ink); font-weight: 560; display: inline-flex; align-items: center; gap: .3rem; } /* A teammate's answer arriving under your cursor */ @keyframes flash-in { 0% { background: color-mix(in srgb, var(--brand) 22%, transparent); } 100% { background: transparent; } } .just-changed { animation: flash-in 1.8s var(--ease); } .shadow-bar { background: var(--warn-soft); border-bottom: 1px solid var(--warn-line); color: var(--warn); position: sticky; top: 0; z-index: 70; } .shadow-bar-in { max-width: 1520px; margin: 0 auto; padding: .55rem 1.5rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .85rem; } .shadow-bar strong { font-weight: 680; } .shadow-bar form { margin-left: auto; } .shadow-bar .btn { background: var(--panel); border-color: var(--warn-line); color: var(--warn); } /* Viewing as another user. Deliberately louder than the vendor shadow bar and pinned above it: this one changes who you are on every page in the application, so it should be impossible to lose track of. */ .viewas-bar { background: var(--bad); color: #fff; position: sticky; top: 0; z-index: 80; border-bottom: 1px solid color-mix(in srgb, var(--bad) 60%, black); } .viewas-bar-in { max-width: 1520px; margin: 0 auto; padding: .6rem 1.5rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .85rem; } .viewas-bar strong { font-weight: 700; } .viewas-bar form { margin-left: auto; } .viewas-bar .btn { background: #fff; border-color: #fff; color: var(--bad); font-weight: 640; } .viewas-eye { font-size: 1rem; } /* The second bar sits below the first when both are somehow present. */ .viewas-bar + .shadow-bar { top: 2.6rem; } /* ── Stage cards ──────────────────────────────────────────────────────── */ .stages { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .stage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--sh-1); position: relative; overflow: hidden; transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); } .stage::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line); } .stage.is-open::before { background: var(--good); } .stage.is-review::before { background: var(--warn); } .stage.is-closed::before { background: var(--brand); } .stage.is-open { border-color: var(--good-line); } .stage a.stage-link:hover { text-decoration: none; } .stage.clickable:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--brand-line); } .stage.locked { background: var(--panel-2); } .stage .wk { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .stage h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; } .stage .obj { font-size: .84rem; color: var(--ink-2); margin-bottom: .8rem; } .stage .meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--ink-3); } /* Discovery */ .discovery-card { display: block; color: inherit; transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); } .discovery-card:hover { text-decoration: none; box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--brand-line); } .q-row { border-bottom: 1px solid var(--line-2); scroll-margin-top: 130px; } .q-row:target { background: var(--brand-wash); } .q-prompt { font-weight: 560; color: var(--ink); max-width: 80ch; } .q-help { color: var(--ink-3); font-size: .84rem; margin-top: .3rem; max-width: 78ch; } .state-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .55rem; } .state-pick { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; cursor: pointer; background: var(--panel); transition: background .13s var(--ease), border-color .13s var(--ease), color .13s var(--ease); } .state-pick:hover { background: var(--panel-2); } .state-pick input { width: auto; margin: 0; accent-color: var(--brand); } .state-pick.on-good { border-color: var(--good); background: var(--good-soft); color: var(--good); font-weight: 600; } .state-pick.on-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; } .state-pick.on-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); font-weight: 600; } .state-pick.on-muted { border-color: var(--ink-4); background: var(--sunken); font-weight: 600; } .opt-list { display: flex; flex-direction: column; gap: .28rem; max-width: 46ch; } .opt { display: flex; align-items: center; gap: .55rem; padding: .34rem .55rem; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .86rem; cursor: pointer; background: var(--panel); } .opt:hover { background: var(--panel-2); } .opt.sel { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-on-soft); font-weight: 550; } .opt input { width: auto; margin: 0; accent-color: var(--brand); } .rank-num { min-width: 22px; height: 22px; border-radius: 5px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--line-2); color: var(--ink-3); } .opt.sel .rank-num { background: var(--brand-ink); color: var(--on-brand); } /* ── Requirement rows / answer surface ────────────────────────────────── */ .req-row { border-bottom: 1px solid var(--line-2); scroll-margin-top: 130px; transition: background .2s var(--ease); } .req-row:target { background: var(--brand-wash); } .req-title { font-weight: 580; color: var(--ink); } .req-desc { color: var(--ink-2); margin-top: .25rem; max-width: 82ch; } .req-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; align-items: center; } .answer-grid { display: grid; gap: .75rem; grid-template-columns: minmax(230px, 268px) 1fr; align-items: start; } @media (max-width: 820px) { .answer-grid { grid-template-columns: 1fr; } } .pickers { display: flex; flex-direction: column; gap: .3rem; } .pick { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .845rem; cursor: pointer; background: var(--panel); transition: background .13s var(--ease), border-color .13s var(--ease), color .13s var(--ease), box-shadow .13s var(--ease); } .pick:hover { background: var(--panel-2); border-color: var(--ink-4); } .pick input { width: auto; margin: 0; accent-color: var(--brand); } .pick.sel-good { border-color: var(--good); background: var(--good-soft); color: var(--good); font-weight: 600; box-shadow: inset 0 0 0 1px var(--good); } .pick.sel-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; box-shadow: inset 0 0 0 1px var(--warn); } .pick.sel-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); font-weight: 600; box-shadow: inset 0 0 0 1px var(--bad); } .pick.sel-muted { border-color: var(--ink-4); background: var(--sunken); font-weight: 600; } fieldset[disabled] .pick, .pick.disabled { opacity: .55; cursor: not-allowed; } .save-state { font-size: .78rem; color: var(--ink-3); min-height: 1.15em; transition: color .2s var(--ease); } .save-state.ok { color: var(--good); } .save-state.err { color: var(--bad); } .save-state.busy { color: var(--brand-ink); } /* Evidence attached to an answer */ .evidence { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; } .evidence-list { display: flex; gap: .4rem; flex-wrap: wrap; } .evidence-item { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 999px; border: 1px solid var(--brand-line); background: var(--brand-wash); font-size: .78rem; color: var(--brand-ink); max-width: 320px; transition: background .13s var(--ease), border-color .13s var(--ease); } .evidence-item:hover { background: var(--brand-soft); border-color: var(--brand); text-decoration: none; } .evidence-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .evidence-item .sz { color: var(--ink-3); font-size: .72rem; } .evidence-add { display: inline-flex; align-items: center; gap: .5rem; } .evidence-add label.btn { cursor: pointer; } /* ── Matrix ───────────────────────────────────────────────────────────── */ .matrix th.vendor { text-align: center; min-width: 96px; } .matrix td.cell { text-align: center; padding: .35rem; } .cellbox { display: inline-grid; place-items: center; min-width: 36px; height: 25px; padding: 0 .35rem; border-radius: var(--r-sm); font-size: .72rem; font-weight: 700; font-family: var(--mono); transition: transform .12s var(--ease); } .cellbox:hover { transform: scale(1.1); } .cellbox.good { background: var(--good-soft); color: var(--good); } .cellbox.warn { background: var(--warn-soft); color: var(--warn); } .cellbox.bad { background: var(--bad-soft); color: var(--bad); } .cellbox.muted { background: var(--line-2); color: var(--ink-3); } /* Side-by-side full answers */ .sbs { display: grid; gap: .75rem; } .sbs-q { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: var(--sh-1); } .sbs-q > header { padding: .8rem 1rem; background: var(--panel-2); border-bottom: 1px solid var(--line); } .sbs-cols { display: grid; } .sbs-col { padding: .8rem 1rem; border-top: 1px solid var(--line-2); } .sbs-col + .sbs-col { border-left: 1px solid var(--line-2); } @media (max-width: 900px) { .sbs-col + .sbs-col { border-left: 0; } } .sbs-col .vendor-name { font-size: .74rem; font-weight: 640; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: .4rem; } .sbs-col .ans { font-size: .87rem; color: var(--ink-2); white-space: pre-line; } .sbs-col .ans.none { color: var(--ink-3); font-style: italic; } /* ── Filters ──────────────────────────────────────────────────────────── */ .filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; padding: .8rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--panel-2); } .filters .field { margin: 0; min-width: 140px; } .chips { display: flex; gap: .4rem; flex-wrap: wrap; } .chip { padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 520; color: var(--ink-2); background: var(--panel); transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease); } .chip:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-on-soft); text-decoration: none; } .chip.on { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--on-brand); } .chip.on:hover { background: var(--brand-deep); color: var(--on-brand); } /* ── Prose ────────────────────────────────────────────────────────────── */ .prose { max-width: 76ch; } .prose h1 { font-size: 1.5rem; margin-top: 0; } .prose h2 { font-size: 1.18rem; margin-top: 1.9rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); } .prose h3 { font-size: 1rem; margin-top: 1.4rem; } .prose h4 { font-size: .92rem; margin-top: 1.1rem; color: var(--ink-2); } .prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 .9rem; } .prose li { margin-bottom: .3rem; } .prose li::marker { color: var(--ink-4); } .prose blockquote { margin: 0 0 .9rem; padding: .6rem 1rem; border-left: 3px solid var(--brand); background: var(--brand-wash); color: var(--ink-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .prose table { margin-bottom: 1rem; font-size: .84rem; } .prose th { position: static; } .prose code { background: var(--line-2); padding: .1em .35em; border-radius: 4px; } .prose pre { background: var(--panel-2); padding: .85rem; border-radius: var(--r-sm); overflow-x: auto; border: 1px solid var(--line); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.8rem 0; } .rawmd { font-family: var(--mono); font-size: .78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem; max-height: 65vh; overflow: auto; } /* ── Auth ─────────────────────────────────────────────────────────────── */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--panel-2); } .auth-card { width: 100%; max-width: 410px; } .auth-card .card { box-shadow: var(--sh-3); border-radius: var(--r-lg); } .auth-card .card-body { padding: 1.6rem; } .auth-brand { text-align: center; margin-bottom: 1.4rem; } .auth-brand img { height: 46px; width: auto; margin-bottom: 1rem; filter: var(--logo-tune); } /* ── Misc ─────────────────────────────────────────────────────────────── */ .muted { color: var(--ink-3); } .small { font-size: .82rem; } .mono { font-family: var(--mono); } .right { text-align: right; } .nowrap { white-space: nowrap; } .mt { margin-top: 1rem; } .mt-2 { margin-top: 1.6rem; } .mb-0 { margin-bottom: 0; } .grow { flex: 1; } .sticky-col { position: sticky; left: 0; background: var(--panel); z-index: 1; } tbody tr:hover .sticky-col { background: var(--brand-wash); } details > summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); transition: color .12s var(--ease); } details > summary:hover { color: var(--brand-ink); } details[open] > summary { margin-bottom: .6rem; } .dl { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: .45rem .95rem; font-size: .875rem; } .dl dt { color: var(--ink-3); } .dl dd { margin: 0; }