Spaces:
Running
Running
| /* Engine theme tokens only. The header stays reachable while content scrolls. | |
| * | |
| * 2026-10-19: this dialog had been written as a form and looked like one — | |
| * default-weight headings, plain rows, and a boxed button at the end of each | |
| * one, so a researcher's shared projects read as rows in an admin panel. It | |
| * now speaks the same ink-and-amber language as the referral ticket and the | |
| * credits readout: an amber edge on the dialog, mono kickers over each | |
| * section, rows that respond where the pointer is, and ONE amber action — | |
| * accepting an invitation, the only thing on that screen worth doing. | |
| * Amber's two legibility rules hold throughout (accent.css): on an amber | |
| * fill text is --amber-ink, and amber is only ever text on ink. */ | |
| .ws-dialog { | |
| position: fixed; | |
| inset: 0; | |
| margin: auto; | |
| height: fit-content; | |
| width: min(820px, calc(100vw - 32px)); | |
| max-width: calc(100vw - 32px); | |
| max-height: calc(100dvh - 40px); | |
| padding: 0; | |
| box-sizing: border-box; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--r-5); | |
| background: var(--bg-card); | |
| color: var(--ink); | |
| box-shadow: var(--elev-5); | |
| font: var(--t-2)/1.6 var(--font-ui); | |
| overflow: hidden; | |
| } | |
| .ws-dialog[open] { display: flex; flex-direction: column; } | |
| .ws-dialog::backdrop { background: rgba(0, 0, 0, .55); } | |
| /* The brand edge, as on the Invite & earn panel: this dialog is the other | |
| half of the same promise — work shared with people you choose. */ | |
| .ws-dialog::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0 0 auto; | |
| height: 3px; | |
| background: var(--amber); | |
| z-index: 2; | |
| } | |
| .ws-dialog header { | |
| display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; | |
| flex: 0 0 auto; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); | |
| } | |
| .ws-dialog header > div { min-width: 0; } | |
| .ws-dialog h2, .ws-dialog h3 { color: var(--ink-strong); } | |
| .ws-dialog h2 { | |
| margin: 5px 0 0; | |
| font: italic 600 var(--t-5)/1.15 var(--font-display); | |
| letter-spacing: -.015em; | |
| } | |
| /* Section heads are kickers, not headlines: a short ink rule, then mono | |
| capitals — the same device the page titles and Mission Control use. */ | |
| .ws-dialog h3 { | |
| display: flex; align-items: center; gap: 12px; | |
| margin: 28px 0 14px; | |
| font: 600 var(--t-1)/1.3 var(--font-mono); | |
| letter-spacing: .16em; | |
| text-transform: uppercase; | |
| overflow-wrap: anywhere; | |
| } | |
| .ws-dialog h3::before { content: ""; flex: 0 0 22px; height: 1px; background: currentColor; } | |
| .ws-eyebrow { | |
| display: block; | |
| color: var(--ink-faint); | |
| font: 600 var(--t-1)/1.4 var(--font-mono); | |
| letter-spacing: .14em; | |
| text-transform: uppercase; | |
| } | |
| .ws-body { min-height: 0; padding: 4px 24px 24px; overflow: auto; overscroll-behavior: contain; } | |
| /* What this dialog is for, said once at the top and then got out of the way. */ | |
| .ws-body > p:first-child { margin: 14px 0 4px; max-width: 64ch; color: var(--ink-soft); } | |
| /* What just happened, in the margin rather than in a grey band. */ | |
| .ws-dialog .ws-status { | |
| margin: 0; padding: 12px 24px; flex: 0 0 auto; | |
| color: var(--ink); background: var(--bg-subtle); | |
| border-bottom: 1px solid var(--line); | |
| box-shadow: inset 3px 0 0 var(--amber); | |
| font: 500 var(--t-2)/1.5 var(--font-ui); | |
| overflow-wrap: anywhere; | |
| } | |
| .ws-dialog .ws-status:empty { display: none; } | |
| .ws-note, .ws-dialog small { color: var(--ink-soft); font-size: var(--t-2); line-height: 1.6; } | |
| .ws-dialog small { display: block; } | |
| /* One project per line, and the line answers the pointer: an amber bar where | |
| the sidebar puts it, so the row you are about to open is the lit one. */ | |
| .ws-row { | |
| display: flex; align-items: center; justify-content: space-between; gap: 12px; | |
| margin: 0 -14px; | |
| padding: 14px; | |
| border-bottom: 1px solid var(--line); | |
| border-radius: var(--r-2); | |
| transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); | |
| } | |
| .ws-row:hover { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--amber); } | |
| .ws-row > div { min-width: 0; } | |
| .ws-row strong { | |
| display: block; | |
| color: var(--ink-strong); font-size: var(--t-3); font-weight: 500; line-height: 1.4; | |
| letter-spacing: -.005em; | |
| overflow-wrap: anywhere; | |
| } | |
| .ws-row small { | |
| margin-top: 3px; | |
| font: 500 var(--t-1)/1.4 var(--font-mono); | |
| letter-spacing: .04em; | |
| color: var(--ink-faint); | |
| text-transform: uppercase; | |
| } | |
| .ws-row > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .ws-dialog p { line-height: 1.6; } | |
| .ws-dialog label { display: grid; gap: 6px; margin: 14px 0; color: var(--ink); } | |
| .ws-dialog input, .ws-dialog textarea, .ws-dialog select { | |
| width: 100%; min-width: 0; box-sizing: border-box; | |
| font: inherit; color: var(--ink-strong); background: var(--bg-subtle); | |
| border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 10px 12px; | |
| } | |
| .ws-dialog textarea { height: 140px; resize: vertical; font-family: var(--font-mono); overflow-wrap: anywhere; } | |
| .ws-dialog [readonly] { color: var(--ink-soft); } | |
| /* Pills, like every other control on this surface. The default is quiet and | |
| fills with ink under the pointer; the one key action is amber (accent.css). */ | |
| .ws-dialog button { | |
| font: 500 var(--t-2)/1.4 var(--font-ui); background: none; color: var(--ink-soft); | |
| border: 1px solid var(--line-strong); border-radius: var(--r-pill); | |
| padding: 9px 16px; cursor: pointer; min-height: 44px; | |
| transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), | |
| border-color var(--t-fast) var(--ease); | |
| } | |
| .ws-dialog button:hover:not(:disabled) { background: var(--ink-strong); color: var(--on-ink); border-color: var(--ink-strong); } | |
| /* The row's own verb: it belongs to the line, so it stays an outline until | |
| the line is lit, and then it is the thing to press. */ | |
| .ws-row [data-ws=open] { color: var(--ink-strong); border-color: var(--line); } | |
| .ws-dialog button[type=submit] { background: var(--ink-strong); color: var(--on-ink); border-color: var(--ink-strong); } | |
| .ws-dialog button[type=submit]:hover:not(:disabled) { background: var(--hover-fill); color: var(--hover-text); border-color: var(--hover-fill); } | |
| /* Close is a way out, not an action: no border, no weight. */ | |
| .ws-dialog header [data-ws=close] { | |
| flex: 0 0 auto; min-height: 36px; padding: 6px 14px; | |
| border-color: transparent; color: var(--ink-faint); | |
| font: 600 var(--t-1)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; | |
| } | |
| .ws-dialog [data-ws=revoke] { color: var(--danger); } | |
| .ws-dialog button:disabled { color: var(--ink-disabled); background: var(--bg-subtle); border-color: var(--line); cursor: wait; } | |
| .ws-dialog :is(button, input, textarea, select, summary):focus-visible, .ws-entry:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } | |
| .ws-dialog .ws-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; } | |
| .ws-consent input { width: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: 0 0 18px; accent-color: var(--brand); } | |
| .ws-dialog details { padding: 14px 0; border-top: 1px solid var(--line); } | |
| .ws-dialog summary { cursor: pointer; color: var(--ink-strong); min-height: 28px; } | |
| .ws-results, .ws-actions { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .ws-results > span { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .ws-actions { margin-top: 16px; } | |
| .ws-dialog li { margin: 12px 0; } | |
| /* The door to collaboration stands between the Mission Control headline and | |
| the .mc-enter row, so it has to speak that row's language: a pill, not the | |
| boxed dialog button it had been borrowing, which read as a stray form | |
| control dropped under the title. Quieter than the primary CTA next to it — | |
| this is somewhere to glance, not the main way in — so it takes the same | |
| outline treatment as .mc-enter-find rather than competing with the fill. */ | |
| .ws-entry { | |
| display: inline-flex; align-items: center; gap: 9px; | |
| margin: 0 0 18px; padding: 10px 16px; min-height: 40px; | |
| font: var(--t-2)/1.4 var(--font-ui); color: var(--ink-soft); | |
| background: none; border: 1px solid var(--line-strong); | |
| border-radius: var(--r-pill); cursor: pointer; | |
| transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); | |
| } | |
| .ws-entry:hover { border-color: var(--ink-soft); color: var(--ink-strong); } | |
| .ws-entry svg { width: 14px; height: 14px; flex: none; } | |
| /* The count appears only when something is actually waiting. A permanent "0" | |
| teaches people the region is empty and trains the glance away from it. */ | |
| .ws-entry-n { | |
| font-family: var(--font-mono); font-size: var(--t-1); line-height: 1; | |
| color: var(--on-ink); background: var(--brand); | |
| border-radius: var(--r-pill); padding: 3px 7px; | |
| } | |
| #wsEdit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .4fr); column-gap: 16px; } | |
| #wsEdit > details, #wsEdit > button { grid-column: 1 / -1; } | |
| #wsEdit > button { justify-self: start; } | |
| .ws-table { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-2); } | |
| .ws-table table { width: 100%; border-collapse: collapse; font: inherit; } | |
| .ws-table th, .ws-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); max-width: 180px; overflow-wrap: anywhere; } | |
| .ws-table th { color: var(--ink-soft); background: var(--bg-subtle); font-weight: 500; } | |
| .ws-result-data { font: var(--t-2)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; } | |
| @media (max-width: 540px) { | |
| .ws-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } | |
| .ws-dialog header { padding: 16px; } | |
| .ws-body { padding: 0 16px max(16px, env(safe-area-inset-bottom)); } | |
| .ws-dialog .ws-status { padding: 12px 16px; } | |
| .ws-row { align-items: flex-start; flex-wrap: wrap; } | |
| #wsEdit { grid-template-columns: minmax(0, 1fr); } | |
| .ws-dialog input:not([type=checkbox]), .ws-dialog textarea, .ws-dialog select { font-size: var(--t-4); } | |
| } | |
| /* ── Collaboration surfaced in Mission Control ───────────────────────────── | |
| These live beside the dialog's styles because they are the same feature, | |
| not a new one: the data was always there, behind a button nobody had a | |
| reason to press. Tokens only — this inherits the workspace's palette so a | |
| shared project does not announce itself as a different product. */ | |
| .mc-cx-share { | |
| display: inline-block; | |
| margin-top: 4px; | |
| font-family: var(--mono, ui-monospace, monospace); | |
| font-size: var(--t-1); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--accent, #2f6f6a); | |
| border: 1px solid currentColor; | |
| border-radius: var(--r-pill); | |
| padding: 1px 8px; | |
| opacity: 0.85; | |
| } | |
| .mc-inv { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--line, #d9ded9); | |
| border-radius: var(--r-1); | |
| background: var(--card, transparent); | |
| } | |
| .mc-inv + .mc-inv { margin-top: 8px; } | |
| .mc-inv-t { font-size: var(--t-3); } | |
| .mc-inv-go { | |
| flex: 0 0 auto; | |
| font: inherit; | |
| font-size: var(--t-2); | |
| cursor: pointer; | |
| background: none; | |
| border: 1px solid var(--line, #d9ded9); | |
| border-radius: var(--r-hair); | |
| padding: 6px 12px; | |
| color: inherit; | |
| } | |
| .mc-inv-go:hover { border-color: currentColor; } | |
| .mc-act { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| padding: 7px 0; | |
| border-bottom: 1px solid var(--line-soft, rgba(128,128,128,0.18)); | |
| font-size: var(--t-2); | |
| } | |
| .mc-act:last-child { border-bottom: 0; } | |
| .mc-act-w { flex: 0 0 auto; } | |
| .mc-act-p { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; opacity: 0.75; } | |
| .mc-act-t { | |
| flex: 0 0 auto; | |
| font-family: var(--mono, ui-monospace, monospace); | |
| font-size: var(--t-1); | |
| opacity: 0.6; | |
| } | |
| /* An emailed invitation lands here: one card, the one decision. Somebody | |
| arriving from an email has come to answer it, so it is the only thing on | |
| the screen and it is drawn as the ticket it is — ink panel, amber edge, | |
| amber accept. */ | |
| .ws-invite { | |
| position: relative; | |
| margin: 20px 0 8px; | |
| padding: 24px 24px 22px; | |
| border: 0; | |
| border-radius: var(--r-5); | |
| background: var(--ws-plate, var(--amber-ink)); | |
| outline: 1px solid var(--ws-plate-line, transparent); | |
| outline-offset: -1px; | |
| color: rgba(255, 255, 255, .78); | |
| overflow: hidden; | |
| } | |
| :root[data-theme="dark"] .ws-invite { --ws-plate: #0c1117; --ws-plate-line: rgba(255, 224, 92, .22); } | |
| .ws-invite::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0 auto 0 0; | |
| width: 4px; | |
| background: var(--amber); | |
| } | |
| .ws-invite .ws-eyebrow { color: var(--amber); } | |
| .ws-invite h3 { | |
| display: block; | |
| margin: 8px 0 12px; | |
| font: italic 600 var(--t-4)/1.25 var(--font-display); | |
| letter-spacing: -.012em; | |
| text-transform: none; | |
| color: #fff; | |
| } | |
| .ws-invite h3::before { content: none; } | |
| .ws-invite strong { color: #fff; } | |
| .ws-invite .ws-note { color: rgba(255, 255, 255, .6); } | |
| .ws-invite .ws-actions { margin-top: 20px; } | |
| /* On ink, a quiet button is an amber outline; the ink fill the rest of the | |
| dialog uses would disappear into the panel. */ | |
| .ws-invite button { color: var(--amber); border-color: rgba(255, 224, 92, .45); } | |
| .ws-invite button:hover:not(:disabled) { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); } | |
| /* Sign-in / sign-up from inside the frame: real links (target=_top), styled | |
| as the dialog's buttons so the two doors read as equals. */ | |
| .ws-link-btn { | |
| display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px; | |
| font: var(--t-2)/1.4 var(--font-ui); text-decoration: none; border-radius: var(--r-2); | |
| background: var(--ink-strong); color: var(--on-ink); border: 1px solid var(--ink-strong); | |
| } | |
| .ws-link-btn:hover { background: var(--hover-fill); color: var(--hover-text); border-color: var(--hover-fill); text-decoration: none; } | |
| .ws-link-btn--quiet { background: var(--bg-card); color: var(--ink-strong); border-color: var(--line-strong); } | |
| .ws-link-btn--quiet:hover { background: var(--bg-hover); color: var(--ink-strong); border-color: var(--line-bold); } | |
| .ws-link-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } | |
| /* The free-plan deletion date. Said once, plainly, to everyone in the project. */ | |
| .ws-banner { margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--r-2); background: var(--warning-light); color: var(--ink); border: 1px solid var(--line); } | |
| .ws-banner a { color: var(--ink-strong); font-weight: 600; } | |
| .ws-dialog [data-ws=leave] { color: var(--danger); } | |