/* StageBooker.ai planner web — brand stylesheet.
*
* Served by Firebase Hosting from apps/stagebooker_web/hosting/style.css.
* The `**` rewrite to Cloud Run only fires for paths that don't match
* a static file in the public dir, so /style.css is served straight
* from the CDN. main.server.dart's Document() injects a to
* /style.css in .
*
* Brand tokens mirror packages/delina_ui_kit/lib/src/delina_theme.dart:
* primary navy #001F5B
* secondary magenta #BF1774
*
* Differs from apps/delina_admin/hosting/style.css in surface tone
* (warmer, more marketplace) and absence of the admin nav chrome.
*/
/* ───────── Tokens ───────── */
:root {
--navy-900: #001F5B;
--navy-700: #003494;
--navy-100: #D9E2FF;
--magenta-700: #BF1774;
--magenta-500: #FF5DA6;
--magenta-100: #FFD9E7;
--surface: #FBFAFE;
--surface-low: #F5F3FB;
--surface-mid: #EFEDF6;
--surface-high: #E9E7F1;
--surface-highest: #E3E1EC;
--on-surface: #1A1B23;
--on-surface-variant: #454654;
--outline: #C6C5D0;
--outline-strong: #767685;
--error: #BA1A1A;
--error-bg: #FFDAD6;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 12px 24px rgba(0, 31, 91, 0.08);
--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
/* ───────── Reset + base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--surface);
color: var(--on-surface);
font-family: var(--font-stack);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
margin: 0 0 var(--space-3);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--on-surface);
}
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a {
color: var(--magenta-700);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 80ms ease;
}
a:hover { border-bottom-color: var(--magenta-700); }
code, pre {
font-family: var(--font-mono);
font-size: 13px;
background: var(--surface-high);
border-radius: var(--radius-sm);
padding: 2px 6px;
}
hr { border: 0; border-top: 1px solid var(--outline); margin: var(--space-5) 0; }
.subtle { color: var(--on-surface-variant); font-size: 14px; }
.error { color: var(--error); margin-top: var(--space-3); }
.notice {
background: var(--magenta-100);
border-left: 3px solid var(--magenta-700);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
}
/* ───────── Top bar ───────── */
header.site-header {
display: flex;
align-items: center;
padding: var(--space-3) var(--space-5);
background: white;
border-bottom: 1px solid var(--outline);
}
header.site-header .brand {
font-weight: 700;
font-size: 18px;
color: var(--navy-900);
letter-spacing: -0.01em;
}
header.site-header .brand .accent { color: var(--magenta-700); }
header.site-header nav { margin-left: auto; display: flex; gap: var(--space-4); }
header.site-header nav a {
color: var(--on-surface-variant);
font-size: 14px;
font-weight: 500;
border-bottom: none;
}
header.site-header nav a:hover { color: var(--magenta-700); }
/* ───────── Container ───────── */
main.page {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: var(--space-6) var(--space-5);
}
/* ───────── Forms ───────── */
button, .button, input[type=submit] {
appearance: none;
border: none;
background: var(--magenta-700);
color: white;
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
cursor: pointer;
transition: background 80ms ease, transform 80ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-decoration: none;
}
button:hover, .button:hover, input[type=submit]:hover { background: #a3135f; }
button:active, .button:active { transform: translateY(1px); }
button:disabled, .button:disabled, input[type=submit]:disabled {
background: var(--surface-highest);
color: var(--on-surface-variant);
cursor: not-allowed;
}
.button-secondary {
background: var(--surface-high);
color: var(--navy-900);
}
.button-secondary:hover { background: var(--surface-mid); }
.button-outline {
background: transparent;
color: var(--navy-900);
border: 1px solid var(--outline-strong);
}
.button-outline:hover { background: var(--surface-low); }
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=url], input[type=number],
input[type=search], input[type=date], input[type=datetime-local],
textarea, select {
font-family: inherit;
font-size: 14px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--outline);
border-radius: var(--radius-md);
background: white;
color: var(--on-surface);
width: 100%;
transition: border-color 80ms ease, box-shadow 80ms ease;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--magenta-700);
box-shadow: 0 0 0 3px rgba(191, 23, 116, 0.15);
}
textarea { font-family: var(--font-stack); resize: vertical; min-height: 120px; }
label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: var(--space-2);
margin-top: var(--space-3);
}
form { max-width: 720px; }
/* ───────── Tables / cards ───────── */
table {
border-collapse: collapse;
width: 100%;
background: white;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin: var(--space-4) 0;
}
th, td {
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--outline);
font-size: 14px;
vertical-align: top;
}
th {
background: var(--surface-mid);
font-weight: 600;
color: var(--on-surface-variant);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
tr:last-child td { border-bottom: none; }
.card {
background: white;
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-4);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.opportunity-card {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-4);
border: 1px solid var(--surface-highest);
transition: box-shadow 100ms ease, transform 100ms ease;
}
.opportunity-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* ───────── Sign-in ───────── */
.sign-in-shell {
max-width: 440px;
margin: 80px auto;
padding: var(--space-7) var(--space-6);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.sign-in-shell h1 {
font-size: 26px;
margin-bottom: var(--space-2);
}
.sign-in-shell .subtle {
margin-bottom: var(--space-5);
}
.sign-in-shell .google-signin {
width: 100%;
background: white;
color: var(--on-surface);
border: 1px solid var(--outline-strong);
font-weight: 600;
padding: var(--space-3) var(--space-4);
}
.sign-in-shell .google-signin:hover {
background: var(--surface-low);
border-color: var(--navy-900);
}
.sign-in-shell .divider {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--on-surface-variant);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: var(--space-5) 0;
}
.sign-in-shell .divider::before,
.sign-in-shell .divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--outline);
}
.sign-in-shell form { max-width: none; }
.sign-in-shell button[type=submit] { width: 100%; margin-top: var(--space-4); }
.sign-in-shell .mode-toggle {
display: block;
text-align: center;
margin-top: var(--space-3);
font-size: 13px;
color: var(--on-surface-variant);
border-bottom: none;
}
.sign-in-shell .mode-toggle:hover { color: var(--magenta-700); }
/* ───────── Hero (homepage) ───────── */
.hero {
background: linear-gradient(135deg, var(--navy-900) 0%, #002B7C 100%);
color: white;
padding: var(--space-7) var(--space-5);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
.hero h1 { color: white; font-size: 36px; }
.hero p { color: rgba(255, 255, 255, 0.85); font-size: 16px; max-width: 640px; }
.hero a.button { background: var(--magenta-700); margin-top: var(--space-4); }
/* responsive */
@media (max-width: 720px) {
main.page { padding: var(--space-5) var(--space-4); }
h1 { font-size: 24px; }
.hero { padding: var(--space-5) var(--space-4); }
.hero h1 { font-size: 28px; }
}
/* ───────── Dashboard application-count badge ───────── */
/* Sits next to the status pill on each row in the planner dashboard.
`.app-count-new` highlights opps with submitted-but-untouched
applications so the planner's eye lands on them first. */
.app-count {
display: inline-block;
padding: 2px 8px;
margin-right: var(--space-2);
border-radius: 999px;
background: var(--surface-high);
color: var(--on-surface-variant);
font-size: 12px;
font-weight: 500;
line-height: 18px;
vertical-align: middle;
}
.app-count-new {
background: var(--magenta-100);
color: var(--magenta-700);
font-weight: 600;
}
/* ═════════ Interim component polish ═════════
* Most app surfaces used semantic classes that had no rules yet, so
* the deployed site looked unstyled. This section gives the actually-
* used classes a cohesive treatment on the existing brand tokens —
* an interim lift until the full design pass. Additive: nothing
* above is overridden destructively. */
/* ── CTA button system (pages use `cta primary|secondary|tiny`) ── */
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 10px 20px;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background 90ms ease, transform 60ms ease,
box-shadow 90ms ease;
}
.cta:hover { border-bottom-color: transparent; transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta.primary {
background: var(--magenta-700);
color: #fff;
box-shadow: var(--shadow-sm);
}
.cta.primary:hover { background: #a3135f; box-shadow: var(--shadow-md); }
.cta.secondary {
background: var(--surface);
color: var(--navy-900);
border-color: var(--outline);
}
.cta.secondary:hover { background: var(--surface-mid); }
.cta.tiny { padding: 5px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.cta.reject, .cta.tiny.reject { color: var(--error); border-color: var(--error); background: var(--surface); }
.cta.reject:hover { background: var(--error-bg); }
.inline-action { display: inline; margin: 0; }
.inline-action + .inline-action { margin-left: var(--space-2); }
/* ── Planner shell (nav + main) ── */
.planner-shell { min-height: 100vh; display: flex; flex-direction: column; }
.planner-nav {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-5);
background: #fff;
border-bottom: 1px solid var(--outline);
box-shadow: var(--shadow-sm);
}
.planner-nav .brand {
font-size: 18px;
font-weight: 700;
color: var(--navy-900);
letter-spacing: -0.02em;
}
.planner-nav .nav-link {
color: var(--on-surface-variant);
font-weight: 500;
font-size: 14px;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.planner-nav .nav-link:hover { color: var(--navy-900); }
.planner-nav .nav-link.active { color: var(--navy-900); border-bottom-color: var(--magenta-700); }
.planner-nav .nav-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
background: var(--magenta-700);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
vertical-align: middle;
}
.planner-nav .sign-out-form { margin-left: auto; }
.planner-nav .sign-out-form button {
background: transparent;
color: var(--on-surface-variant);
border: 1px solid var(--outline);
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
}
.planner-nav .sign-out-form button:hover { background: var(--surface-mid); color: var(--navy-900); }
.planner-main {
flex: 1;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: var(--space-6) var(--space-5);
}
.locale-switcher { display: inline-flex; gap: var(--space-2); align-items: center; }
.locale-switcher select { padding: 6px 8px; font-size: 13px; }
.locale-switcher button { padding: 6px 12px; font-size: 13px; }
/* ── Centered single-column shells (sign-in / join / coming-soon) ── */
.sign-in-shell, .join-shell, .coming-soon-shell {
max-width: 460px;
margin: var(--space-7) auto;
padding: var(--space-6);
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.join-shell { max-width: 560px; }
.coming-soon-shell { text-align: center; }
.beta-cta { width: 100%; margin-top: var(--space-3); }
.subtle-link { font-size: 14px; }
/* The sign-in error + reset-notice slots are emitted empty and filled
by sign-in.js. `.notice` is a styled block, so an empty one renders
as a stray box before any sign-in attempt — collapse both until JS
puts text in them (mirrors the `:not(:empty)` idiom below). */
#signin-notice:empty, #signin-error:empty { display: none; }
.form-error:not(:empty), .error:not(:empty) {
background: var(--error-bg);
color: var(--error);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: 14px;
margin: var(--space-3) 0;
}
.join-shell fieldset {
border: 1px solid var(--outline);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin: var(--space-3) 0;
}
.join-shell legend { font-size: 13px; font-weight: 600; color: var(--on-surface-variant); padding: 0 var(--space-2); }
.radio-row { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; margin: var(--space-1) 0; }
.radio-row input { width: auto; margin: 0; }
/* ── Landing ── */
.landing-shell { min-height: 100vh; }
.landing-nav {
display: flex;
align-items: center;
max-width: 1080px;
margin: 0 auto;
padding: var(--space-4) var(--space-5);
}
.landing-nav .brand { font-size: 20px; font-weight: 700; color: var(--navy-900); }
.landing-nav .nav-link { margin-left: auto; font-weight: 600; color: var(--navy-900); }
.hero {
max-width: 1080px;
margin: 0 auto var(--space-6);
text-align: center;
background: linear-gradient(135deg, var(--navy-900) 0%,
var(--magenta-700) 140%);
color: #fff;
padding: var(--space-7) var(--space-5);
}
.hero h1 { color: #fff; font-size: 40px; max-width: 14ch; margin: 0 auto var(--space-4); }
.hero .hero-sub {
color: rgba(255, 255, 255, 0.88);
font-size: 17px;
max-width: 60ch;
margin: 0 auto var(--space-5);
}
.hero-ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero .subtle {
color: rgba(255, 255, 255, 0.7);
/* Neutralise the pre-existing `.hero p { max-width: 640px }` (no
auto margins) that otherwise left-anchors this short tagline;
full-width + the hero's inherited centring keeps it centred. */
max-width: none;
margin: var(--space-4) auto 0;
text-align: center;
}
.hero .cta.secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.hero .cta.secondary:hover { background: rgba(255, 255, 255, 0.2); }
.landing-audiences {
display: flex;
gap: var(--space-4);
max-width: 1080px;
margin: 0 auto var(--space-7);
padding: 0 var(--space-5);
flex-wrap: wrap;
}
.audience-card {
flex: 1 1 280px;
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-md);
}
.audience-card p { margin: 0; color: var(--on-surface); }
/* ── Dashboard + opportunity list ── */
.dashboard-header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.dashboard-header h1 { margin: 0; }
.empty-state {
text-align: center;
background: #fff;
border: 1px dashed var(--outline);
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-5);
}
.dash-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.dash-stat {
background: var(--surface-low);
border: 1px solid var(--outline-variant);
border-radius: 10px;
padding: var(--space-3) var(--space-4);
}
.dash-stat.highlight {
background: var(--magenta-50);
border-color: var(--magenta-700);
}
.dash-stat-value {
margin: 0;
font-size: 28px;
font-weight: 700;
color: var(--navy-900);
line-height: 1;
}
.dash-stat-label {
margin: 4px 0 0 0;
font-size: 12px;
font-weight: 500;
color: var(--on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 720px) {
.dash-stats { grid-template-columns: repeat(2, 1fr); }
}
.opp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.opp-row {
display: flex;
align-items: center;
gap: var(--space-4);
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-md);
padding: var(--space-4);
transition: box-shadow 90ms ease, border-color 90ms ease;
}
.opp-row:hover { box-shadow: var(--shadow-md); border-color: var(--outline-strong); }
.opp-row-main { flex: 1; }
.opp-row-main h3 { margin: 0 0 2px; }
.opp-row-meta { text-align: right; display: flex; flex-direction: column; gap: var(--space-1); }
/* ── Status pills ── */
.pill, [class^="pill "], [class*=" pill"] {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--surface-high);
color: var(--on-surface-variant);
}
.pill.submitted, .status-pill.pending { background: var(--magenta-100); color: var(--magenta-700); }
.pill.shortlisted, .status-pill.approved, .status-pill.rewarded { background: #D7F3E3; color: #0B6B3A; }
.pill.rejected, .status-pill.denied, .status-pill.rejected { background: var(--error-bg); color: var(--error); }
.pill.booked { background: var(--navy-100); color: var(--navy-700); }
/* ── Inbox + tabs + triage ── */
.inbox-header, .detail-header, .thread-header { margin-bottom: var(--space-5); }
.back-link { font-size: 13px; color: var(--on-surface-variant); }
.status-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }
.status-tabs .tab {
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
background: var(--surface-mid);
color: var(--on-surface-variant);
}
.status-tabs .tab.active { background: var(--navy-900); color: #fff; }
.inbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.inbox-row {
display: flex;
gap: var(--space-4);
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.inbox-row:hover { box-shadow: var(--shadow-sm); }
.inbox-row-main { flex: 1; }
.inbox-row-actions { display: flex; align-items: flex-start; gap: var(--space-2); }
.pitch-teaser { color: var(--on-surface-variant); font-size: 14px; margin: var(--space-2) 0 0; }
.lang-chip {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
background: var(--navy-100);
color: var(--navy-700);
font-size: 12px;
font-weight: 500;
}
.triage-card {
background: var(--surface-low);
border: 1px solid var(--outline);
border-left: 3px solid var(--magenta-700);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
margin: var(--space-4) 0;
}
.triage-card h2 { margin-top: 0; }
.triage-summary { font-style: italic; color: var(--on-surface-variant); }
.triage-cta { margin: var(--space-4) 0; }
/* ── Application detail + pitch ── */
.app-detail .detail-actions { display: flex; gap: var(--space-3); margin: var(--space-5) 0; }
.pitch-subject { font-weight: 600; margin-bottom: var(--space-2); }
.pitch-body {
white-space: pre-wrap;
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-md);
padding: var(--space-4);
}
/* ── Thread ── */
.messages { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.message-row { max-width: 70%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.message-row.from-planner, .message-row.outgoing { margin-left: auto; background: var(--navy-900); color: #fff; }
.message-row.incoming { background: #fff; border: 1px solid var(--outline); }
.message-meta { font-size: 11px; opacity: 0.7; margin-top: var(--space-1); }
.thread-compose textarea { min-height: 90px; }
/* ── Flash / notice / not-found ── */
.flash {
background: #D7F3E3;
color: #0B6B3A;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
font-size: 14px;
}
.not-found { text-align: center; padding: var(--space-7) var(--space-5); }
/* ── Post-opportunity step strip ──
The step labels already carry their number (localized: "1. About
the event", …). Rendering them in an doubled it ("1. 1. …").
Drop the list marker; the labels remain the numbering source of
truth across all 18 locales. Lightweight horizontal indicator. */
.step-strip {
list-style: none;
margin: var(--space-4) 0 var(--space-6);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
}
.step-strip .step {
color: var(--on-surface-variant);
font-size: 13px;
padding-bottom: var(--space-1);
border-bottom: 2px solid transparent;
}
.step-strip .step.current {
color: var(--navy-900);
font-weight: 600;
border-bottom-color: var(--navy-900);
}
.step-strip .step.done { color: var(--navy-900); }
/* ── Speaker views (ADR-019, Phase A — read-only) ──
Reuses .planner-shell/.planner-nav/.nav-link/.pill from the planner
side via SpeakerLayout; these rules cover the surface-specific bits.
Interim only — full design pass + responsive polish is Phase D. */
.view-switcher { display: inline-flex; gap: var(--space-2); align-items: center; }
.view-switcher select { padding: 6px 8px; font-size: 13px; }
.view-switcher button { padding: 6px 12px; font-size: 13px; }
.speaker-header { margin-bottom: var(--space-5); }
.speaker-header h1 { margin-bottom: var(--space-2); }
.speaker-readonly { margin-bottom: var(--space-5); }
.empty-state {
color: var(--on-surface-variant);
background: var(--surface-low);
border: 1px dashed var(--outline);
border-radius: var(--radius-md);
padding: var(--space-6);
text-align: center;
}
.opp-list, .app-list, .thread-list, .talk-list, .message-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.opp-card, .talk-card {
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.opp-card h2, .talk-card h2 { margin-bottom: var(--space-2); }
.opp-event { color: var(--on-surface-variant); font-size: 14px; margin-bottom: var(--space-3); }
.opp-desc { margin-bottom: var(--space-4); }
.opp-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.opp-meta dt { color: var(--on-surface-variant); font-size: 13px; }
.opp-meta dd { margin: 0; font-size: 14px; }
.app-row, .thread-row {
display: flex;
align-items: center;
gap: var(--space-4);
background: #fff;
border: 1px solid var(--outline);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.app-row .app-title { font-weight: 600; flex: 1; }
.app-row .app-date { color: var(--on-surface-variant); font-size: 13px; }
.thread-row.unread { border-left: 3px solid var(--navy-900); }
.thread-row a { display: flex; align-items: center; gap: var(--space-4); width: 100%; text-decoration: none; color: inherit; }
.thread-title { font-weight: 600; flex: 1; }
.thread-preview { color: var(--on-surface-variant); font-size: 13px; flex: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-date { color: var(--on-surface-variant); font-size: 12px; }
.message-list .message { max-width: 70%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.message-list .message.from-me { margin-left: auto; background: var(--navy-900); color: #fff; }
.message-list .message.from-them { background: #fff; border: 1px solid var(--outline); }
.message-list .message-body { margin: 0; white-space: pre-wrap; }
.message-list .message-time { font-size: 11px; opacity: 0.7; margin-top: var(--space-1); display: block; }
.talk-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.talk-card-head h2 { margin: 0; flex: 1; }
.talk-hook { color: var(--on-surface-variant); margin: 0; }
.profile-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-5); margin: 0; }
.profile-fields dt { color: var(--on-surface-variant); font-size: 13px; }
.profile-fields dd { margin: 0; white-space: pre-wrap; }
/* ── Speaker views (ADR-019, Phase B — writes) ── */
.speaker-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; margin-top: var(--space-5); }
.speaker-form .field { display: flex; flex-direction: column; gap: var(--space-1); }
.speaker-form .field-check { flex-direction: row; align-items: center; gap: var(--space-2); }
.speaker-form label { font-size: 13px; color: var(--on-surface-variant); }
.speaker-form input[type=text], .speaker-form input[type=email],
.speaker-form input[type=tel], .speaker-form input[type=number],
.speaker-form textarea, .speaker-form select {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--outline);
border-radius: var(--radius-sm);
font: inherit;
background: #fff;
}
.speaker-form textarea { min-height: 90px; resize: vertical; }
.field-help { font-size: 12px; color: var(--on-surface-variant); margin: calc(-1 * var(--space-3)) 0 0; }
.speaker-toolbar { display: flex; gap: var(--space-3); margin: var(--space-4) 0; }
.opp-actions, .talk-actions, .confirm-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }
.confirm-actions { justify-content: space-between; }
.inline-form { display: inline; }
.section-heading { margin: var(--space-6) 0 var(--space-3); font-size: 18px; }
.pill.applied { background: #D7F3E3; color: #0B6B3A; }
.blocked-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.blocked-row { display: flex; align-items: center; gap: var(--space-4); background: #fff; border: 1px solid var(--outline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.blocked-id { font-weight: 600; }
.blocked-reason { color: var(--on-surface-variant); font-size: 13px; flex: 1; }
.blocked-date { color: var(--on-surface-variant); font-size: 12px; }
button.danger { background: var(--error); color: #fff; }
/* ── Speaker AI coach (ADR-019, Phase C — SSE) ── */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.coach-transcript {
list-style: none; margin: var(--space-5) 0; padding: 0;
display: flex; flex-direction: column; gap: var(--space-3);
max-height: 60vh; overflow-y: auto;
}
.coach-msg { max-width: 75%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.coach-msg p { margin: 0; white-space: pre-wrap; }
.coach-msg.from-user { margin-left: auto; background: var(--navy-900); color: #fff; }
.coach-msg.from-coach { background: #fff; border: 1px solid var(--outline); }
.coach-interactive { margin-top: var(--space-2) !important; font-size: 13px; color: var(--on-surface-variant); font-style: italic; }
.coach-form { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 760px; }
.coach-form textarea {
flex: 1; padding: var(--space-3) var(--space-4);
border: 1px solid var(--outline); border-radius: var(--radius-sm);
font: inherit; resize: vertical; min-height: 44px;
}
/* ── Speaker onboarding (ADR-019 2026-05-19 amendment — same SSE
relay shape as the coach, plus rendered interactive widgets). ── */
.onb-transcript {
list-style: none; margin: var(--space-5) 0; padding: 0;
display: flex; flex-direction: column; gap: var(--space-3);
max-height: 60vh; overflow-y: auto;
}
.onb-msg { max-width: 75%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.onb-msg p { margin: 0; white-space: pre-wrap; }
.onb-msg.from-user { margin-left: auto; background: var(--navy-900); color: #fff; }
.onb-msg.from-coach { background: #fff; border: 1px solid var(--outline); }
.onb-card {
margin-top: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--surface-low);
border: 1px solid var(--outline);
border-left: 3px solid var(--navy-900);
border-radius: var(--radius-sm);
}
.onb-card-title { font-weight: 600; margin: 0 0 var(--space-1); }
.onb-card p { margin: 0 0 var(--space-1); }
.onb-section {
margin-top: var(--space-2) !important;
font-size: 13px; color: var(--on-surface-variant); font-style: italic;
}
.onb-interactive { margin-top: var(--space-2) !important; font-size: 13px; color: var(--on-surface-variant); font-style: italic; }
.onb-banner {
display: flex; flex-direction: column; gap: var(--space-2);
margin-bottom: var(--space-5);
}
.onb-banner-title { font-weight: 600; margin: 0; }
.onb-banner .cta { align-self: flex-start; }
@media (max-width: 720px) {
.blocked-row, .confirm-actions, .opp-actions, .talk-actions { flex-direction: column; align-items: stretch; }
.speaker-form { max-width: none; }
.coach-msg { max-width: 90%; }
.coach-form { flex-direction: column; align-items: stretch; }
.planner-main { padding: var(--space-5) var(--space-4); }
.planner-nav { gap: var(--space-3); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.hero h1 { font-size: 30px; }
.opp-row, .inbox-row { flex-direction: column; align-items: stretch; }
.opp-row-meta { text-align: left; }
.message-row { max-width: 88%; }
.message-list .message { max-width: 88%; }
.app-row, .thread-row, .thread-row a { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.opp-meta, .profile-fields { grid-template-columns: 1fr; }
.sign-in-shell, .join-shell, .coming-soon-shell { margin: var(--space-5) var(--space-4); padding: var(--space-5); }
}
/* ── /privacy + /terms (LegalPage) ─────────────────────────────── */
.legal-body { max-width: 760px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.legal-body article > h1 { font-size: 32px; margin-bottom: var(--space-5); }
.legal-body h2 { margin-top: var(--space-6); }
.legal-body h3 { margin-top: var(--space-4); color: var(--navy-700); }
.legal-body p, .legal-body li { line-height: 1.55; }
.legal-body ul, .legal-body ol { padding-left: var(--space-5); }
.legal-body a { color: var(--brand-link, #0066cc); text-decoration: underline; }
.legal-body blockquote {
margin: var(--space-4) 0;
padding: var(--space-3) var(--space-4);
border-left: 4px solid var(--navy-200);
background: var(--gray-50);
color: var(--navy-800);
}
.legal-body code {
background: var(--gray-50);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
.md-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.md-table th, .md-table td {
text-align: left;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--navy-100);
vertical-align: top;
}
.md-table th { font-weight: 600; background: var(--gray-50); }