/* ══════════════════════════════════════════════════════════════════════════ Lyftbridge Discovery — on the Bianc.ai / Lyftbridge design system. Token layer + component idioms come from design-kit/global.css (source of truth); the app's own selectors below are re-expressed on those tokens. Dark mode: follows the OS by default; the in-app toggle stamps data-theme="light" | "dark" on , which always wins. ══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* ---------- 1. TOKENS ---------- */ :root { /* palette */ --primary: #296CAC; --ink: #191919; --accent: #CFFF69; /* lime — exactly one element per view */ --coral: #FF6B4A; --paper: #F7FBFF; --mist: #DCE8F4; --blue-deep: #14729B; --blue-mid: #5D86AD; --blue-soft: #93B1D4; --white: #FFFFFF; /* literal white — on-color text (never flips) */ --surface: #FFFFFF; /* raised surface: cards, inputs (flips in dark) */ --fill: #191919; /* high-contrast button/active fill (dark in both) */ /* text + line */ --text: rgba(25, 25, 25, .68); --border: rgba(25, 25, 25, .16); color-scheme: light; /* status tints (semantic, themed) */ --ok-bg: #d7f2e2; --ok-fg: #0c5c3d; --warn-bg: #fdf0c9; --warn-fg: #8a5a08; --err-bg: #fde1da; --err-fg: #a83518; --info-bg: #dbe9fb; --info-fg: #1e4f96; --neutral-bg: #e7ebf0; --neutral-fg: #45505e; /* geometry */ --radius: 8px; --lift: translateY(-2px); /* type */ --font: 'Inter', Arial, Helvetica, sans-serif; --fs-app-title: 22px; --fs-app-heading: 17px; --fs-app-body: 15px; --fs-app-label: 13px; --fs-app-micro: 11px; --lh-app: 1.45; /* spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* motion + elevation */ --ease: 180ms cubic-bezier(.2, .6, .2, 1); --shadow-sm: 0 1px 2px rgba(25, 25, 25, .06); --shadow-md: 0 2px 10px rgba(25, 25, 25, .07); /* signature diagonal texture */ --diagonal-light: repeating-linear-gradient(135deg, rgba(25,25,25,.05) 0 1px, transparent 1px 14px); --diagonal-dark: repeating-linear-gradient(172deg, rgba(255,255,255,.14) 0 2px, transparent 2px 34px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0F1319; --surface: #191F27; --mist: #262E38; --ink: #EAF0F6; --text: rgba(234, 240, 246, .70); --border: rgba(255, 255, 255, .13); --primary: #4C8FCB; --blue-deep: #7FB2DE; --fill: #333B45; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 16px rgba(0, 0, 0, .50); --diagonal-light: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px); --ok-bg: #14352a; --ok-fg: #7fd7ae; --warn-bg: #33290f; --warn-fg: #e8c56b; --err-bg: #3a1d15; --err-fg: #ff9c82; --info-bg: #17293f; --info-fg: #8db8e8; --neutral-bg: #232b35; --neutral-fg: #9aa7b5; color-scheme: dark; } } :root[data-theme="dark"] { --paper: #0F1319; --surface: #191F27; --mist: #262E38; --ink: #EAF0F6; --text: rgba(234, 240, 246, .70); --border: rgba(255, 255, 255, .13); --primary: #4C8FCB; --blue-deep: #7FB2DE; --fill: #333B45; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 16px rgba(0, 0, 0, .50); --diagonal-light: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px); --ok-bg: #14352a; --ok-fg: #7fd7ae; --warn-bg: #33290f; --warn-fg: #e8c56b; --err-bg: #3a1d15; --err-fg: #ff9c82; --info-bg: #17293f; --info-fg: #8db8e8; --neutral-bg: #232b35; --neutral-fg: #9aa7b5; color-scheme: dark; } /* ---------- 2. BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-app-body); font-weight: 500; line-height: var(--lh-app); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main.container { flex: 1; } h1, h2, h3, h4, h5, h6 { color: var(--ink); } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--blue-deep); } code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } code { background: var(--mist); color: var(--blue-deep); font-weight: 600; padding: 1px 5px; border-radius: 4px; } button { cursor: pointer; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .container { max-width: 1100px; margin: 0 auto; padding: var(--sp-5); } .muted { color: var(--text); opacity: .8; } /* ---------- 3. CHROME ---------- */ .topnav { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-3) var(--sp-5); background: var(--paper); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; text-decoration: none; padding-right: var(--sp-5); border-right: 1px solid var(--border); } .brand img { height: 38px; width: auto; display: block; } /* theme-aware logo swap — applies to every wordmark image (nav, login, print) */ img.logo-dark { display: none; } [data-theme="dark"] img.logo-light { display: none; } [data-theme="dark"] img.logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img.logo-light { display: none; } :root:not([data-theme="light"]) img.logo-dark { display: block; } } .navlinks { display: flex; gap: var(--sp-5); flex: 1; } .navlink { text-decoration: none; font-size: var(--fs-app-label); font-weight: 700; color: var(--text); padding: 6px 0 8px; border-bottom: 2px solid transparent; transition: color var(--ease), border-color var(--ease); } .navlink:hover { color: var(--ink); } .navlink.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 800; } .navlink.muted { color: var(--text); opacity: .5; pointer-events: none; } .topnav-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); } .linkbtn { background: none; border: none; color: var(--text); cursor: pointer; font: inherit; font-size: var(--fs-app-label); font-weight: 650; } .linkbtn:hover { color: var(--ink); } /* segmented Auto / Light / Dark theme toggle */ .theme-toggle { display: flex; gap: 2px; padding: 3px; background: var(--mist); border-radius: 999px; border: 0; } .theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background var(--ease), color var(--ease); } .theme-toggle__btn:hover { color: var(--ink); } .theme-toggle__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .theme-toggle__btn svg { display: block; } .site-footer { text-align: center; padding: var(--sp-5) var(--sp-4); border-top: 1px solid var(--border); color: var(--text); font-size: var(--fs-app-micro); font-weight: 600; letter-spacing: .03em; margin-top: auto; } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { color: var(--primary); } /* ---------- 4. PAGE HEAD ---------- */ .page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-5); } .page-head h1 { margin: 0; font-size: var(--fs-app-title); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } .back { display: block; text-decoration: none; font-size: var(--fs-app-label); font-weight: 650; color: var(--text); margin-bottom: var(--sp-1); } .back:hover { color: var(--ink); } /* ---------- 5. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 38px; padding: 6px var(--sp-4); border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-app-label); font-weight: 800; text-decoration: none; transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease); } .btn:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); transform: var(--lift); } .btn.primary { background: var(--fill); border-color: var(--fill); color: var(--white); } .btn.primary:hover { background: var(--primary); border-color: var(--primary); color: var(--white); } .btn:disabled, .btn.loading { opacity: 0.55; cursor: not-allowed; transform: none; } .btn.loading::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn.danger { background: transparent; color: var(--coral); border-color: var(--coral); } .btn.danger:hover { background: var(--coral); color: var(--white); } /* ---------- 6. TABLES ---------- */ table.data { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); font-size: var(--fs-app-body); } table.data th, table.data td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } table.data th { background: var(--paper); font-size: var(--fs-app-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); } table.data td { font-weight: 550; color: var(--text); } table.data tr:last-child td { border-bottom: none; } table.data .numeric { text-align: right; font-variant-numeric: tabular-nums; } .link { text-decoration: none; font-weight: 650; } /* ---------- 7. FORMS ---------- */ .study-form, .login form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-5); display: flex; flex-direction: column; gap: 18px; } label { display: flex; flex-direction: column; gap: 6px; } label > span { font-weight: 800; font-size: var(--fs-app-label); color: var(--ink); } label > span .muted, label small, .small { font-weight: 600; } input[type="text"], input[type="number"], input[type="password"], input[type="email"], textarea, select { padding: 9px var(--sp-3); min-height: 42px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 600; background: var(--surface); color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease); } input::placeholder, textarea::placeholder { color: #8B95A3; font-weight: 500; } input[type="file"] { color: var(--ink); } input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41, 108, 172, .16); } textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 500; resize: vertical; min-height: 64px; } input[type="checkbox"] { accent-color: var(--primary); } .actions { display: flex; gap: var(--sp-3); } /* ---------- 8. LOGIN ---------- */ .login { max-width: 360px; margin: 80px auto; text-align: center; } .login-logo { height: 60px; width: auto; margin: 0 auto var(--sp-4); } .login h1 { font-size: var(--fs-app-title); margin: 0 0 4px; color: var(--ink); font-weight: 800; letter-spacing: -.01em; } .login form { gap: var(--sp-3); margin-top: var(--sp-5); } .login input { text-align: center; } /* ---------- 9. PANELS ---------- */ .preview, .docs-panel, .curation, .study-actions-panel { margin-top: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-5); } .preview h2, .docs-panel h2, .study-actions-panel h2, .audio-block h2, .summary-block h2, .transcript-block h2, .settings-section h2, .methodology h2, .exec-summary h2, .howitworks h2, .quick-actions h2, .danger-zone h2, .curation h3 { font-size: var(--fs-app-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text); } .preview h2 { margin: var(--sp-4) 0 var(--sp-2); } .preview h2:first-child { margin-top: 0; } .preview pre.prompt { background: var(--paper); border: 1px solid var(--border); padding: var(--sp-4); border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; font-size: 12px; line-height: 1.55; max-height: 500px; overflow-y: auto; } .docs-panel h2 { margin: 0 0 var(--sp-2); } .study-actions-panel h2 { margin: 0 0 6px; } .variables-help { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-app-label); } .variables-help summary { cursor: pointer; font-weight: 700; color: var(--ink); user-select: none; } .variables-help summary:hover { color: var(--primary); } .variables-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: var(--sp-3) 0 var(--sp-1); } .variables-help dt { font-family: ui-monospace, "SF Mono", Menlo, monospace; } .variables-help dd { margin: 0; color: var(--text); } /* ---------- 10. HOME ---------- */ .hero { text-align: center; padding: var(--sp-7) var(--sp-5) var(--sp-6); max-width: 780px; margin: 0 auto; } .hero h1 { font-size: clamp(36px, 5vw, 52px); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; margin: 0 0 var(--sp-3); color: var(--ink); } .hero-accent { color: var(--primary); } .hero-tagline { font-size: 19px; color: var(--ink); margin: 0 0 var(--sp-4); font-weight: 750; } .hero-lede { font-size: 16px; color: var(--text); line-height: 1.6; margin: 0; } .howitworks { margin: var(--sp-7) 0 var(--sp-6); } .howitworks h2, .quick-actions h2 { text-align: center; margin: 0 0 var(--sp-5); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-5); display: flex; flex-direction: column; transition: transform var(--ease), box-shadow var(--ease); } .step:hover { transform: var(--lift); box-shadow: var(--shadow-md); } .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--fill); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; margin-bottom: var(--sp-3); } .step h3 { font-size: var(--fs-app-heading); font-weight: 800; margin: 0 0 var(--sp-2); } .step p { margin: 0 0 var(--sp-4); color: var(--text); font-size: 14px; line-height: 1.55; flex: 1; } .step-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--coral); color: var(--primary); font-weight: 800; font-size: 14px; } .step-link:hover { color: var(--blue-deep); } /* stats strip — the signature blue-invert moment */ .stats-strip { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: var(--sp-6) 0; padding: var(--sp-6) var(--sp-5); background: #296CAC; border-radius: 0 clamp(40px, 5vw, 56px) 0 0; } .stats-strip::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--diagonal-dark); pointer-events: none; } .stat-block { display: flex; flex-direction: column; text-align: center; } .stat-block .stat-num { font-size: clamp(30px, 4vw, 42px); font-weight: 900; color: #FFFFFF; letter-spacing: -.02em; line-height: .95; } .stat-block .stat-label { font-size: var(--fs-app-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .82); margin-top: 8px; } .quick-actions { margin: var(--sp-6) 0; } .action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .action-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; text-decoration: none; color: var(--text); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); } .action-card:hover { border-color: var(--primary); transform: var(--lift); box-shadow: var(--shadow-md); } .action-card h3 { font-size: var(--fs-app-body); font-weight: 800; margin: 0 0 6px; color: var(--primary); } .action-card p { margin: 0; color: var(--text); font-size: var(--fs-app-label); } /* ---------- 11. QUESTIONS FIELDSET ---------- */ .questions-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin: 0; } .questions-fieldset legend { font-weight: 800; font-size: var(--fs-app-label); color: var(--ink); padding: 0 var(--sp-2); } .question-row { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); } .row-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: var(--fs-app-micro); color: var(--text); text-transform: uppercase; letter-spacing: .04em; } .remove-question { color: var(--coral); font-size: 12px; text-transform: none; letter-spacing: normal; } .remove-question:hover { color: var(--coral); opacity: .75; } #add-question-btn { margin-top: var(--sp-1); } /* ---------- 12. UTILITIES ---------- */ .small { font-size: var(--fs-app-label); margin-top: 2px; } .req { color: var(--coral); } .head-actions { display: flex; gap: var(--sp-3); } .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-4); align-items: center; } .filter-bar label.inline { flex-direction: row; align-items: center; gap: var(--sp-2); } .filter-bar label.inline > span { font-weight: 800; font-size: var(--fs-app-label); color: var(--ink); } select { padding: 6px var(--sp-3); min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 600; background: var(--surface); color: var(--ink); } .truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* mode-scoped field group on the assessment form (voice vs survey) */ .mode-group { display: flex; flex-direction: column; gap: 18px; } .empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--sp-7); text-align: center; } input[type="file"] { padding: var(--sp-2); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); width: 100%; } /* ---------- 13. SYNTHESIS ---------- */ .exec-summary { background: var(--mist); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 18px 22px; margin-bottom: var(--sp-5); } .exec-summary h2 { color: var(--primary); margin: 0 0 var(--sp-2); } .exec-summary p { font-size: 16px; line-height: 1.6; margin: 0; font-weight: 600; color: var(--ink); } .theme-card, .tension-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 14px; } .theme-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .theme-head h3, .tension-card h3 { margin: 0; font-size: var(--fs-app-heading); font-weight: 800; } .demo-pattern { font-size: var(--fs-app-label); color: var(--text); margin: var(--sp-2) 0; } .attribution { color: var(--text); font-size: var(--fs-app-label); font-style: normal; } .outliers { padding-left: 18px; } .outliers li { margin-bottom: 14px; line-height: 1.5; } .quote-inline { font-style: italic; color: var(--text); } .methodology { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-top: var(--sp-5); font-size: var(--fs-app-label); } .methodology h2 { margin: 0 0 var(--sp-3); } .methodology-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; } .methodology-grid dt { font-weight: 700; color: var(--ink); } .methodology-grid dd { margin: 0; color: var(--text); } .recruitment-stats { display: flex; gap: var(--sp-5); margin: var(--sp-3) 0 var(--sp-4); } .stat { display: flex; flex-direction: column; } .stat-num { font-size: 26px; font-weight: 900; color: var(--primary); letter-spacing: -.02em; line-height: 1; } .stat-label { font-size: var(--fs-app-micro); font-weight: 800; text-transform: uppercase; color: var(--text); letter-spacing: .05em; margin-top: 4px; } .stat-label.pending { color: var(--neutral-fg); } .stat-label.invited { color: var(--info-fg); } .stat-label.completed { color: var(--ok-fg); } /* curation */ .curation h2 { font-size: 16px; font-weight: 800; margin: 0 0 var(--sp-4); } .curation h3 { margin: 18px 0 var(--sp-2); } .curation .block { margin-bottom: 18px; } .time-estimate { display: flex; justify-content: space-between; align-items: center; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); } .time-estimate .label { font-size: var(--fs-app-micro); color: var(--text); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; display: block; } .time-estimate .value { font-size: 22px; font-weight: 900; color: var(--ink); margin-right: var(--sp-2); } .qfeedback { border-left: 2px solid var(--border); padding-left: 14px; margin-bottom: 18px; } .qfeedback h4 { font-size: var(--fs-app-label); font-weight: 800; margin: 0 0 var(--sp-2); color: var(--text); } .issues { list-style: none; padding: 0; margin: 0 0 var(--sp-3); } .issue { padding: 6px 0; display: flex; gap: 10px; align-items: baseline; font-size: 14px; } .issue-warning .pill { background: var(--err-bg); color: var(--err-fg); } .rephrase { background: var(--warn-bg); border-left: 3px solid var(--warn-fg); border-radius: 4px; padding: var(--sp-2) var(--sp-3); margin: 10px 0; font-size: 14px; } .rephrase .quote { font-style: italic; } .probes-suggestion { margin: 10px 0; font-size: 14px; } .probes-suggestion ul { margin: 4px 0 0; padding-left: 22px; } .overall-notes { margin: 0; padding-left: 20px; } .overall-notes li { margin-bottom: 4px; } .htmx-indicator { display: none; font-size: var(--fs-app-label); font-style: italic; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } /* ---------- 14. SUMMARIES ---------- */ .study-group { margin-bottom: var(--sp-6); } .group-head { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 10px; display: flex; align-items: baseline; gap: var(--sp-3); padding-bottom: 6px; border-bottom: 1px solid var(--border); } .group-head a { text-decoration: none; } .audio-block, .summary-block, .transcript-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-5); margin-bottom: var(--sp-4); } .audio-block h2, .summary-block h2, .transcript-block h2 { margin: 0 0 var(--sp-3); } .audio-block audio { width: 100%; } .headline-text { font-size: var(--fs-app-heading); font-weight: 600; color: var(--ink); margin: 0 0 14px; padding: var(--sp-3) 14px; background: var(--mist); border-left: 3px solid var(--primary); border-radius: 4px; } .summary-block h3 { font-size: var(--fs-app-body); margin: 20px 0 10px; font-weight: 800; } .theme { border-left: 2px solid var(--border); padding-left: 14px; margin-bottom: var(--sp-4); } .theme h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; } .theme p { margin: 0 0 var(--sp-2); } .quotes { list-style: none; padding: 0; margin: var(--sp-2) 0; } .quotes li { font-style: italic; padding: 6px var(--sp-3); border-left: 2px solid var(--blue-soft); margin-bottom: 4px; color: var(--text); } .flags ul { margin: 4px 0 0; padding-left: 20px; color: var(--text); font-size: var(--fs-app-label); } /* ---------- 15. PILLS + BADGES ---------- */ .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-app-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .pill-positive { background: var(--ok-bg); color: var(--ok-fg); } .pill-negative { background: var(--err-bg); color: var(--err-fg); } .pill-neutral { background: var(--neutral-bg); color: var(--neutral-fg); } .pill-mixed { background: var(--warn-bg); color: var(--warn-fg); } .pill-answered { background: var(--ok-bg); color: var(--ok-fg); } .pill-partial { background: var(--warn-bg); color: var(--warn-fg); } .pill-skipped { background: var(--neutral-bg); color: var(--neutral-fg); } .pill-declined { background: var(--err-bg); color: var(--err-fg); } .pill-pending { background: var(--neutral-bg); color: var(--neutral-fg); } .pill-invited { background: var(--info-bg); color: var(--info-fg); } .pill-completed { background: var(--ok-bg); color: var(--ok-fg); } .actions-cell { white-space: nowrap; } .checkbox-row { flex-direction: row !important; align-items: flex-start; gap: 10px !important; } .checkbox-row input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; } .checkbox-row > span { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; } .checkbox-row > span > small { font-weight: 500; margin-top: 2px; } .test-badge { display: inline-block; padding: 1px 7px; margin-left: 6px; background: var(--warn-bg); color: var(--warn-fg); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; vertical-align: middle; } .test-row { background: transparent; } .actions-cell button.linkbtn:disabled { color: var(--text); opacity: .5; cursor: not-allowed; } /* ---------- 16. TRANSCRIPT ---------- */ .transcript { max-height: 600px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); } .turn { display: grid; grid-template-columns: 70px 1fr; gap: var(--sp-3); padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; } .turn:last-child { border-bottom: none; } .turn .role { font-size: var(--fs-app-micro); text-transform: uppercase; font-weight: 800; letter-spacing: .05em; color: var(--text); align-self: start; padding-top: 2px; } .turn-agent .role { color: var(--primary); } .turn-user .role { color: var(--ink); } .turn .msg { line-height: 1.55; } .headline { max-width: 480px; line-height: 1.4; } /* ---------- 17. DANGER ZONE ---------- */ .danger-zone { margin-top: var(--sp-7); background: var(--surface); border: 1px solid var(--coral); border-radius: var(--radius); padding: 22px; } .danger-zone h2 { color: var(--coral); margin: 0 0 10px; } .danger-zone p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; } .delete-form { display: flex; flex-direction: column; gap: 10px; background: transparent; border: none; box-shadow: none; padding: 0; } .delete-form label > span { font-weight: 600; font-size: var(--fs-app-label); color: var(--text); } .delete-form input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .delete-form input:invalid { border-color: var(--border); } .delete-form input:valid { border-color: var(--coral); } /* ---------- 18. MESSAGES ---------- */ .flash { background: var(--ok-bg); color: var(--ok-fg); font-weight: 600; padding: 10px 14px; border-radius: var(--radius); margin-bottom: var(--sp-4); } .error { background: var(--err-bg); color: var(--err-fg); font-weight: 600; padding: 10px 14px; border-radius: var(--radius); margin-bottom: var(--sp-4); } /* ---------- 19. SETTINGS ---------- */ .settings-section { margin-bottom: var(--sp-6); } .settings-section h2 { margin: 0 0 var(--sp-3); } .buy-number-note { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); } .buy-number-note h3 { margin: 0 0 6px; font-size: var(--fs-app-body); font-weight: 800; } .copy-existing { background: var(--mist); border: 1px solid transparent; border-radius: var(--radius); padding: var(--sp-4); margin-bottom: 20px; } .copy-existing label { gap: 6px; } /* invitation email preview */ .invite-preview { margin-top: 14px; } .email-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .email-subject { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-weight: 700; color: var(--ink); background: var(--surface); } .email-body { padding: var(--sp-4); white-space: pre-wrap; line-height: 1.55; font-size: 14px; } /* ---------- 20. MOBILE ---------- */ @media (max-width: 720px) { .steps, .stats-strip, .action-grid { grid-template-columns: 1fr; } .stats-strip { grid-template-columns: repeat(2, 1fr); } .container { padding: var(--sp-4); } .hero { padding: var(--sp-6) var(--sp-4) var(--sp-5); } .hero h1 { font-size: 30px; } .hero-tagline { font-size: 16px; } .topnav { flex-wrap: wrap; gap: var(--sp-3); padding: 10px var(--sp-4); } .brand { border-right: none; padding-right: 0; } .brand img { height: 30px; } .navlinks { order: 3; flex-basis: 100%; gap: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--border); } .topnav-right { margin-left: auto; } .page-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .page-head h1 { font-size: 20px; } .head-actions { width: 100%; flex-wrap: wrap; } table.data { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; } table.data th, table.data td { padding: 10px var(--sp-3); } .grid-2 { grid-template-columns: 1fr; gap: 14px; } .recruitment-stats { flex-wrap: wrap; gap: var(--sp-4); } .stat { flex: 1 0 40%; } .actions { flex-wrap: wrap; gap: var(--sp-2); } .filter-bar { flex-direction: column; align-items: stretch; } .exec-summary { padding: 14px var(--sp-4); } .exec-summary p { font-size: var(--fs-app-body); } .methodology-grid { grid-template-columns: 1fr; } .login { margin: 40px var(--sp-4); } } /* ---------- 21. PRINT (synthesis report) ---------- */ .print-header { display: none; } @media print { :root { --ink: #191919; --text: rgba(25, 25, 25, .75); --paper: #ffffff; --surface: #ffffff; --mist: #eef4fb; --border: #d1d5db; --primary: #296CAC; } body { background: #ffffff !important; color: #1a1a1a !important; } .topnav, .site-footer, .no-print { display: none !important; } main.container { padding: 0; max-width: 100%; } .print-header { display: flex; align-items: center; gap: 24px; padding: 0 0 20px; border-bottom: 2px solid #296CAC; margin-bottom: 28px; } .print-header img { height: 48px; width: auto; } .print-header h1 { font-size: 22px; margin: 0 0 4px; } .print-header-meta p { margin: 0; color: #4b5563; font-size: 13px; } .exec-summary, .theme-card, .tension-card, .methodology, .block { page-break-inside: avoid; } .theme-card { margin-bottom: 12px; } h2, h3 { page-break-after: avoid; } .exec-summary { background: #eef4fb !important; border-left: 4px solid #296CAC !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: letter; margin: 0.75in; } } /* ---------- 22. NEXT STEP + STICKY SAVE ---------- */ /* The flow spans four pages; without this you have to remember where you are. */ .next-step { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); background: var(--surface); border: 1px solid var(--primary); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm); } .next-step.is-done { border-color: var(--border); border-left-color: var(--ok-fg); } .next-step__eyebrow { font-size: var(--fs-app-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: 2px; } .next-step.is-done .next-step__eyebrow { color: var(--ok-fg); } .next-step strong { font-size: var(--fs-app-heading); display: block; } .next-step .muted { font-size: var(--fs-app-label); margin-top: 2px; max-width: 62ch; } .next-step .btn { white-space: nowrap; } @media (max-width: 720px) { .next-step { flex-direction: column; align-items: flex-start; } } /* A moderator form is eleven fields long; Save should not require scrolling to. */ .form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-3); background: var(--paper); border-top: 1px solid var(--border); padding: var(--sp-4) 0; margin-top: var(--sp-5); } .form-actions .spacer { flex: 1; } .form-actions .hint { font-size: var(--fs-app-micro); color: var(--text); } /* ── The intro/outro timeline ────────────────────────────────────────────── A picture of the number fields below it, not a second source of truth: every drag writes into an input and the whole thing redraws from those inputs. */ .tl { position: relative; margin-top: var(--sp-3); padding: 22px 0 var(--sp-2); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; user-select: none; } .tl-ruler { position: relative; height: 16px; margin: 0 var(--sp-3) var(--sp-2); } .tl-tick { position: absolute; top: 0; font-size: var(--fs-app-micro); color: var(--text); transform: translateX(-50%); white-space: nowrap; } .tl-tick::after { content: ''; position: absolute; left: 50%; top: 14px; width: 1px; height: 6px; background: var(--border); } .tl-lane { position: relative; display: flex; align-items: stretch; margin: 0 var(--sp-3) 6px; } .tl-lane-name { position: absolute; left: 6px; top: 4px; z-index: 3; font-size: var(--fs-app-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--text); pointer-events: none; } .tl-track { position: relative; flex: 1; background: var(--mist); border-radius: 6px; } .tl-clip { position: absolute; top: 8px; bottom: 8px; border-radius: 5px; background: var(--blue-soft); border: 1px solid var(--blue-mid); overflow: hidden; color: var(--primary); /* the waveform reads this */ } .tl-clip-voice { background: var(--accent); border-color: var(--ink); color: var(--ink); } .tl-clip.movable { cursor: grab; } body.tl-dragging, body.tl-dragging .tl-clip.movable { cursor: grabbing; } .tl-wave { display: block; position: absolute; left: 0; top: 8px; opacity: .85; } .tl-clip-note { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: var(--fs-app-micro); color: var(--ink); white-space: nowrap; pointer-events: none; } /* Where a looping bed starts over. */ .tl-seam { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(25, 25, 25, .35); } /* The fades, drawn as what they are: a ramp in and a ramp out. */ .tl-fade { position: absolute; top: 0; bottom: 0; pointer-events: none; } .tl-fade-in { left: 0; background: linear-gradient(to right, var(--paper), transparent); } .tl-fade-out { right: 0; background: linear-gradient(to left, var(--paper), transparent); } /* What the bed drops to while the voice is speaking. */ .tl-duck { position: absolute; bottom: 0; background: repeating-linear-gradient(135deg, rgba(25, 25, 25, .16) 0 2px, transparent 2px 7px); border-top: 1px solid var(--coral); pointer-events: none; } .tl-handle { position: absolute; z-index: 2; } .tl-h-move { left: 0; right: 0; top: 0; bottom: 0; cursor: grab; } .tl-h-from, .tl-h-to { top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: var(--fill); opacity: .55; } .tl-h-from { left: 0; } .tl-h-to { right: 0; } .tl-h-from:hover, .tl-h-to:hover { opacity: 1; } .tl-h-fadein, .tl-h-fadeout { top: 0; width: 11px; height: 11px; cursor: ew-resize; background: var(--surface); border: 1px solid var(--fill); border-radius: 2px; } .tl-h-fadein { left: 0; } .tl-h-fadeout { right: 0; } .tl-readout { margin-top: var(--sp-2); font-size: var(--fs-app-micro); } @media (prefers-color-scheme: dark) { .tl-seam { border-left-color: rgba(255, 255, 255, .35); } .tl-duck { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 7px); } }