children on talent.php. */
.cap-card {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 20px 22px;
color: var(--ink);
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
height: 100%;
}
.cap-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--filling-violet);
opacity: 0;
transition: opacity 0.18s;
z-index: 2;
}
.cap-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(10, 30, 74, 0.14);
}
.cap-card:hover::before {
opacity: 1;
}
/* Stretched-link overlay — invisible
filling the card */
.cap-card-link {
position: absolute;
inset: 0;
z-index: 1;
text-decoration: none;
color: transparent;
border-radius: var(--radius-card);
}
.cap-card-link:focus-visible {
outline: 2px solid var(--filling-violet);
outline-offset: -2px;
}
/* Card head: title + pills row (Free study? + version) */
.cap-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
.cap-card-title {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.25;
margin: 0;
flex: 1;
min-width: 0;
}
.cap-card-pills {
display: flex;
gap: 4px;
flex-shrink: 0;
}
/* Pills inside cards (different from the filter pills above) */
.cap-pill-tag {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
.cap-pill-study {
background: rgba(0, 196, 140, 0.12);
color: #00855e;
border: 1px solid rgba(0, 196, 140, 0.26);
}
.cap-pill-version {
background: rgba(139, 92, 246, 0.10);
color: var(--filling-violet);
border: 1px solid rgba(139, 92, 246, 0.22);
}
/* Meta line: by username · category */
.cap-card-meta {
font-size: 13px;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.cap-card-meta strong {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.cap-card-meta-sep {
opacity: 0.4;
}
.cap-card-meta-cat {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
}
/* Description preview — clamped to 2 lines */
.cap-card-desc {
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
margin: 4px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Stats row — three small stat tiles inside the card. Bank-statement
row of facts: questions, pass threshold, pass rate. */
.cap-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 10px 0;
border-top: 1px solid rgba(10, 30, 74, 0.06);
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
}
.cap-card-stat {
text-align: center;
}
.cap-card-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.1;
}
.cap-card-stat-lbl {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 2px;
}
/* Card foot — price on left, View CTA on right (mirrors marketplace) */
.cap-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
gap: 10px;
}
.cap-card-price {
display: flex;
align-items: baseline;
gap: 3px;
}
.cap-card-price-amt {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
}
.cap-card-price-unit {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-transform: uppercase;
}
.cap-card-cta {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-faint);
transition: color 0.15s, transform 0.15s;
}
.cap-card:hover .cap-card-cta {
color: var(--filling-violet);
transform: translateX(2px);
}
/* =====================================================================
Capability Detail (public detail page) — single-column layout
max-width 820px. The two-CTA grid is the central interaction (study
vs take), so the layout puts that decision at center stage rather
than competing with a sidebar.
===================================================================== */
.cap-detail-wrap {
max-width: 820px;
margin: 22px auto 36px;
}
/* ============ BADGE BANNER (caller has earned this) ============ */
.cap-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-radius: var(--radius-card);
margin-bottom: 18px;
border: 1px solid;
}
.cap-banner-fresh {
background: rgba(0, 196, 140, 0.07);
border-color: rgba(0, 196, 140, 0.30);
}
.cap-banner-stale {
background: rgba(255, 140, 0, 0.07);
border-color: rgba(255, 140, 0, 0.30);
}
.cap-banner-icon {
font-size: 32px;
line-height: 1;
flex-shrink: 0;
}
.cap-banner-body {
flex: 1;
min-width: 0;
}
.cap-banner-head {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 2px;
}
.cap-banner-meta {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
.cap-banner-stale-tag {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #b45309;
background: rgba(255, 140, 0, 0.16);
padding: 2px 8px;
border-radius: 4px;
margin-left: 6px;
}
.cap-banner-btn {
flex-shrink: 0;
}
/* ============ MAIN CARD (title + about + stats + CTAs) ============ */
.cap-detail-card {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 32px 36px;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.cap-detail-card { padding: 22px 20px; }
}
.cap-title-block {
padding-bottom: 22px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
margin-bottom: 24px;
}
.cap-title {
font-family: var(--serif);
font-weight: 600;
font-size: 36px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 6px 0 14px;
}
@media (max-width: 600px) {
.cap-title { font-size: 28px; }
}
.cap-status-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.cap-pill-draft {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border: 1px solid rgba(10, 30, 74, 0.10);
}
.cap-creator-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--ink-faint);
}
.cap-creator-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.cap-creator-name {
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
color: var(--ink);
letter-spacing: -0.005em;
}
/* ============ STATS — bank-statement four-column row ============ */
.cap-detail-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 14px 0;
}
@media (max-width: 600px) {
.cap-detail-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.cap-detail-stat {
text-align: left;
border-left: 2px solid rgba(139, 92, 246, 0.20);
padding-left: 12px;
}
.cap-detail-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.1;
}
.cap-detail-stat-lbl {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 4px;
}
/* ============ TWO-CTA DECISION GRID ============ */
.cap-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 700px) {
.cap-cta-grid { grid-template-columns: 1fr; }
}
/* The CTA cards — both have similar structure (glyph, eyebrow, title,
amount, deck) but the visual treatment differs by role. Study is
secondary (paper bg, ink text), Take is primary (violet bg, white
text), Disabled is muted. */
.cap-cta-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 24px 22px;
border-radius: var(--radius-card);
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
min-height: 220px;
}
/* Study (free) — secondary card */
.cap-cta-study {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.10);
color: var(--ink);
box-shadow: var(--shadow-card);
}
.cap-cta-study:hover {
border-color: var(--filling-green);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 196, 140, 0.12);
}
/* Take Assessment (paid) — primary card with violet gradient */
.cap-cta-take {
background: linear-gradient(135deg, var(--filling-violet) 0%, #7c3aed 100%);
color: #fff;
border: 1px solid transparent;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.26);
}
.cap-cta-take:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(139, 92, 246, 0.36);
}
.cap-cta-take .cap-cta-eyebrow,
.cap-cta-take .cap-cta-deck {
color: rgba(255, 255, 255, 0.85);
}
.cap-cta-take .cap-cta-deck strong {
color: #fff;
}
/* Disabled state — muted card, no hover */
.cap-cta-disabled {
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.08);
color: var(--ink-faint);
cursor: not-allowed;
}
.cap-cta-disabled .cap-cta-amount,
.cap-cta-disabled .cap-cta-title {
color: var(--ink-faint);
}
/* Inner content */
.cap-cta-glyph {
font-size: 28px;
line-height: 1;
margin-bottom: 4px;
}
.cap-cta-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
}
.cap-cta-title {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 4px 0 2px;
color: var(--ink);
}
.cap-cta-amount {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.05;
margin: 6px 0 8px;
}
.cap-cta-take .cap-cta-amount,
.cap-cta-take .cap-cta-title { color: #fff; }
.cap-cta-deck {
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
margin: auto 0 0; /* push to bottom of flex */
}
/* Optional callout below the CTA grid (e.g., "no study material" warning) */
.cap-cta-note {
margin-top: 12px;
padding: 10px 14px;
background: rgba(255, 140, 0, 0.07);
border: 1px solid rgba(255, 140, 0, 0.20);
border-radius: var(--radius-tight);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
/* ============ OWNER INLINE BLOCK ============ */
.cap-owner-block {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
padding: 14px 16px;
background: rgba(45, 127, 255, 0.04);
border: 1px solid rgba(45, 127, 255, 0.16);
border-radius: var(--radius-tight);
flex-wrap: wrap;
}
.cap-owner-icon {
font-size: 18px;
line-height: 1;
}
.cap-owner-text {
flex: 1;
font-size: 13px;
color: var(--ink-soft);
min-width: 200px;
}
.cap-owner-btn {
flex-shrink: 0;
}
/* =====================================================================
Study (free reading view) — book-typography reading surface for the
AI-generated capability material. Single column, narrower max-width
(720px) — comfortable line length for sustained reading.
===================================================================== */
.study-wrap {
max-width: 720px;
margin: 0 auto 36px;
}
/* Header card — calm violet-tinted intro setting context before the
reading begins. Less prominent than the capability page's title block
so it doesn't compete with the actual study content below. */
.study-head {
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.06) 0%,
rgba(45, 127, 255, 0.04) 100%);
border: 1px solid rgba(139, 92, 246, 0.18);
border-radius: var(--radius-card);
padding: 22px 24px;
margin-bottom: 22px;
}
.study-head-eyebrow {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-violet);
text-transform: uppercase;
margin-bottom: 10px;
}
.study-head-icon {
font-size: 14px;
line-height: 1;
}
.study-head-title {
font-family: var(--serif);
font-weight: 600;
font-size: 30px;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 12px;
}
@media (max-width: 600px) {
.study-head-title { font-size: 24px; }
}
.study-head-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ink-faint);
}
.study-head-meta strong {
font-family: var(--serif);
font-weight: 600;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
.study-head-sep { opacity: 0.4; }
.study-head-price {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--filling-violet);
font-weight: 600;
}
/* ============ THE READING SURFACE — book typography ============ */
/* Generous padding, comfortable line-height, brand-violet headers
that aren't shouty. Background is bright paper (slightly brighter
than the rest of the warm-paper aesthetic) so reading is easy on
the eyes without losing the brand feel. */
.study-body {
background: #fdfaf2; /* slightly brighter than --paper for reading */
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 36px 40px;
font-family: var(--sans);
font-size: 16px;
line-height: 1.7;
color: var(--ink);
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.study-body { padding: 24px 22px; font-size: 15px; }
}
.study-loading {
text-align: center;
color: var(--ink-faint);
font-size: 14px;
padding: 40px 0;
font-style: italic;
}
/* Headers — Fraunces serif, all in violet (capability pillar tone)
for visual continuity with the rest of the page chrome */
.study-body h1,
.study-body h2,
.study-body h3,
.study-body h4,
.study-body h5,
.study-body h6 {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--filling-violet);
margin: 1.6em 0 0.5em;
line-height: 1.3;
}
.study-body h1:first-child,
.study-body h2:first-child,
.study-body h3:first-child {
margin-top: 0;
}
.study-body h1 { font-size: 26px; }
.study-body h2 {
font-size: 22px;
border-bottom: 1px solid rgba(139, 92, 246, 0.18);
padding-bottom: 6px;
}
.study-body h3 { font-size: 18px; }
.study-body h4,
.study-body h5,
.study-body h6 { font-size: 16px; }
/* Paragraphs */
.study-body p {
margin: 0.9em 0;
}
.study-body p:first-child { margin-top: 0; }
.study-body p:last-child { margin-bottom: 0; }
/* Lists */
.study-body ul,
.study-body ol {
padding-left: 24px;
margin: 0.9em 0;
}
.study-body li {
margin: 0.4em 0;
}
.study-body li::marker {
color: var(--filling-violet);
}
/* Inline code — warm-paper background, mono, slight padding */
.study-body code {
font-family: var(--mono);
font-size: 0.92em;
background: rgba(139, 92, 246, 0.08);
color: #6d28d9;
padding: 2px 6px;
border-radius: 4px;
}
/* Code blocks — dark-themed, brand-deep navy */
.study-body pre {
background: var(--brand-deep);
color: #f0f8ff;
padding: 16px 18px;
border-radius: var(--radius-tight);
overflow-x: auto;
margin: 1em 0;
font-size: 13px;
line-height: 1.55;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.study-body pre code {
background: transparent;
color: inherit;
padding: 0;
font-size: inherit;
}
/* Strong text — heavier ink for emphasis */
.study-body strong {
font-weight: 700;
color: var(--ink);
}
/* Italic text */
.study-body em {
font-style: italic;
color: var(--ink);
}
/* Links inside study content (in case AI generates URL references) */
.study-body a {
color: var(--filling-violet);
text-decoration: none;
border-bottom: 1px dotted var(--filling-violet);
}
.study-body a:hover {
color: #6d28d9;
border-bottom-style: solid;
}
/* Blockquotes (in case AI generates them) */
.study-body blockquote {
border-left: 3px solid var(--filling-violet);
padding: 4px 16px;
margin: 1em 0;
color: var(--ink-soft);
font-style: italic;
background: rgba(139, 92, 246, 0.04);
border-radius: 0 var(--radius-tight) var(--radius-tight) 0;
}
/* Horizontal rule */
.study-body hr {
border: 0;
height: 1px;
background: rgba(10, 30, 74, 0.10);
margin: 2em 0;
}
/* ============ BOTTOM CTA — natural next step ============ */
.study-cta {
background: var(--paper);
border: 1px solid rgba(139, 92, 246, 0.20);
border-radius: var(--radius-card);
padding: 28px 32px;
margin-top: 24px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.study-cta-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--filling-violet);
}
.study-cta-eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-violet);
text-transform: uppercase;
margin: 6px 0 8px;
}
.study-cta-title {
font-family: var(--serif);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 10px;
line-height: 1.2;
}
@media (max-width: 600px) {
.study-cta-title { font-size: 22px; }
}
.study-cta-deck {
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 auto 18px;
max-width: 480px;
}
.study-cta-deck strong {
color: var(--ink);
font-weight: 600;
}
.study-cta-btn {
display: inline-block;
padding: 13px 28px;
background: linear-gradient(135deg, var(--filling-violet) 0%, #7c3aed 100%);
color: #fff;
border-radius: var(--radius-tight);
text-decoration: none;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.26);
}
.study-cta-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(139, 92, 246, 0.36);
}
.study-cta-note {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-faint);
margin: 14px 0 0;
}
/* =====================================================================
Capability Assessment — three-screen examination flow.
1. Start: payment confirmation card (deposit-slip facts + wallet
preview + Pay & Start button)
2. Running: progress bar + question card with letter-stamped choices
3. Finish: pass-state celebration OR fail-state encouragement
Single-column 720px max-width matches study.php.
===================================================================== */
.ass-wrap {
max-width: 720px;
margin: 0 auto 36px;
}
/* ============ SCREEN 1: START / PAYMENT ============ */
.ass-start-card {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-card);
padding: 32px 36px 28px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.ass-start-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--filling-violet);
}
@media (max-width: 600px) {
.ass-start-card { padding: 24px 22px 22px; }
}
.ass-start-eyebrow {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-violet);
text-transform: uppercase;
margin: 8px 0 10px;
}
.ass-start-icon { font-size: 14px; line-height: 1; }
.ass-start-title {
font-family: var(--serif);
font-weight: 600;
font-size: 30px;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 6px;
}
@media (max-width: 600px) {
.ass-start-title { font-size: 24px; }
}
.ass-start-meta {
font-size: 13px;
color: var(--ink-faint);
margin-bottom: 22px;
}
.ass-start-meta strong {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
/* Three-column "deposit slip" of facts: charge / questions / pass-at */
.ass-fact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 14px 0;
border-top: 1px solid rgba(10, 30, 74, 0.08);
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
margin-bottom: 20px;
}
@media (max-width: 540px) {
.ass-fact-grid { grid-template-columns: 1fr; gap: 14px; }
}
.ass-fact {
text-align: left;
border-left: 2px solid rgba(139, 92, 246, 0.20);
padding-left: 12px;
}
.ass-fact-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 4px;
}
.ass-fact-value {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.05;
}
.ass-fact-value-amount {
color: var(--filling-violet);
}
.ass-fact-note {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-faint);
letter-spacing: 0.04em;
margin-top: 4px;
}
/* Wallet preview block */
.ass-wallet {
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-tight);
padding: 14px 16px;
margin-bottom: 18px;
}
.ass-wallet-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
}
.ass-wallet-row + .ass-wallet-row {
border-top: 1px dotted rgba(10, 30, 74, 0.10);
}
.ass-wallet-label {
font-size: 13px;
color: var(--ink-soft);
}
.ass-wallet-amount {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
}
.ass-wallet-low {
color: var(--filling-rose);
}
.ass-wallet-after {
font-family: var(--mono);
font-size: 14px;
color: var(--ink-soft);
}
/* Pay & Start button — full-width violet CTA */
.ass-start-btn {
display: block;
width: 100%;
padding: 14px 18px;
background: linear-gradient(135deg, var(--filling-violet) 0%, #7c3aed 100%);
color: #fff;
border: 0;
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.26);
margin-bottom: 12px;
}
.ass-start-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(139, 92, 246, 0.36);
}
/* Insufficient-balance block */
.ass-low-block {
margin-top: 6px;
padding: 16px 18px;
background: rgba(244, 63, 94, 0.06);
border: 1px solid rgba(244, 63, 94, 0.20);
border-radius: var(--radius-tight);
margin-bottom: 12px;
}
.ass-low-head {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
color: var(--filling-rose);
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.ass-low-body {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 12px;
}
.ass-low-block .jv-cta {
display: block;
width: 100%;
text-align: center;
}
.ass-start-tip {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6;
margin: 0 0 16px;
text-align: center;
}
.ass-start-tip a {
color: var(--filling-violet);
text-decoration: none;
border-bottom: 1px dotted var(--filling-violet);
}
.ass-trust {
margin-top: 6px;
}
/* ============ SCREEN 2: RUNNING (PROGRESS + QUESTION) ============ */
.ass-progress-wrap {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-tight);
padding: 12px 16px;
margin-bottom: 18px;
box-shadow: var(--shadow-card);
}
.ass-progress {
height: 6px;
background: rgba(139, 92, 246, 0.14);
border-radius: 999px;
overflow: hidden;
margin-bottom: 10px;
}
.ass-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--filling-violet), #7c3aed);
transition: width 0.3s;
border-radius: inherit;
}
.ass-progress-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.ass-progress-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
letter-spacing: -0.005em;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ass-progress-pass {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--filling-violet);
text-transform: uppercase;
flex-shrink: 0;
}
/* Question card */
.ass-qcard {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 28px 32px;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.ass-qcard { padding: 22px 20px; }
}
.ass-qcard-num {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 12px;
}
.ass-qcard-text {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
line-height: 1.4;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 22px;
}
@media (max-width: 600px) {
.ass-qcard-text { font-size: 19px; }
}
.ass-choices {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
/* Each choice is a button — letter stamp on the left + text on the right */
.ass-choice {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: var(--paper);
border: 1.5px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 15px;
text-align: left;
cursor: pointer;
transition: all 0.15s;
width: 100%;
color: var(--ink);
line-height: 1.45;
}
.ass-choice:hover {
border-color: rgba(139, 92, 246, 0.40);
background: rgba(139, 92, 246, 0.03);
}
.ass-choice-letter {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
min-width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--ink-faint);
letter-spacing: 0;
flex-shrink: 0;
transition: all 0.15s;
}
.ass-choice-text {
flex: 1;
min-width: 0;
}
/* Picked state — violet accent on letter + soft violet bg */
.ass-choice-picked {
border-color: var(--filling-violet);
background: rgba(139, 92, 246, 0.06);
}
.ass-choice-picked .ass-choice-letter {
background: var(--filling-violet);
color: #fff;
border-color: var(--filling-violet);
}
/* Correct state — green border + tinted background */
.ass-choice-correct {
border-color: var(--filling-green);
background: rgba(0, 196, 140, 0.08);
}
.ass-choice-correct .ass-choice-letter {
background: var(--filling-green);
color: #fff;
border-color: var(--filling-green);
}
/* Wrong state — rose border + tinted background */
.ass-choice-wrong {
border-color: var(--filling-rose);
background: rgba(244, 63, 94, 0.06);
}
.ass-choice-wrong .ass-choice-letter {
background: var(--filling-rose);
color: #fff;
border-color: var(--filling-rose);
}
.ass-qcard-foot {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.ass-submit {
min-width: 200px;
padding: 12px 22px;
}
.ass-submit:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Feedback panel after answering — slides under the question */
.ass-feedback {
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--radius-tight);
border: 1px solid;
}
.ass-feedback-ok {
background: rgba(0, 196, 140, 0.08);
border-color: rgba(0, 196, 140, 0.26);
}
.ass-feedback-no {
background: rgba(244, 63, 94, 0.06);
border-color: rgba(244, 63, 94, 0.20);
}
.ass-feedback-head {
font-family: var(--serif);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.ass-feedback-ok .ass-feedback-head { color: #00855e; }
.ass-feedback-no .ass-feedback-head { color: var(--filling-rose); }
.ass-feedback-body {
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
/* ============ SCREEN 3: FINISH (PASS / FAIL) ============ */
.ass-finish-card {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 44px 32px 32px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.ass-finish-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
}
.ass-finish-stripe-pass { background: var(--filling-green); }
.ass-finish-stripe-fail { background: var(--filling-amber); }
.ass-finish-pass {
background: linear-gradient(180deg, rgba(0, 196, 140, 0.04) 0%, var(--paper) 30%);
border-color: rgba(0, 196, 140, 0.20);
}
.ass-finish-fail {
background: linear-gradient(180deg, rgba(255, 140, 0, 0.04) 0%, var(--paper) 30%);
border-color: rgba(255, 140, 0, 0.20);
}
.ass-finish-art {
font-size: 64px;
line-height: 1;
margin: 8px 0 16px;
}
.ass-finish-head {
font-family: var(--serif);
font-weight: 600;
font-size: 30px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 14px;
line-height: 1.2;
}
@media (max-width: 600px) {
.ass-finish-head { font-size: 24px; }
}
/* The big score — visual climax of the page */
.ass-finish-score {
font-family: var(--serif);
font-weight: 700;
font-size: 64px;
line-height: 1.05;
letter-spacing: -0.03em;
margin: 8px 0 6px;
}
@media (max-width: 600px) {
.ass-finish-score { font-size: 48px; }
}
.ass-finish-score-pass { color: var(--filling-green); }
.ass-finish-score-fail { color: #b45309; }
.ass-finish-detail {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
margin: 0 0 18px;
}
.ass-finish-line {
font-size: 14px;
line-height: 1.6;
color: var(--ink);
margin: 12px auto 22px;
max-width: 480px;
}
.ass-finish-line-pass {
font-weight: 600;
color: #00855e;
}
.ass-finish-line a {
color: var(--filling-violet);
text-decoration: none;
border-bottom: 1px dotted var(--filling-violet);
}
.ass-finish-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.ass-finish-actions .jv-cta {
display: inline-block;
width: auto;
min-width: 200px;
}
/* =====================================================================
Public Talent Profile — single-person detail page.
Two-column layout matching job_view.php — main content on the left,
stats deposit-slip on the right with the state-aware CTA.
===================================================================== */
/* Identity block at the top of the main column — avatar + name + headline + status */
.prof-id-block {
display: flex;
align-items: flex-start;
gap: 20px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
margin-bottom: 24px;
}
@media (max-width: 600px) {
.prof-id-block {
flex-direction: column;
gap: 14px;
}
}
/* Avatar — same dimension-locking pattern as talent cards (min/max
width and height locked so flex sizing can't leak intrinsic image
dimensions through). 80px because this is the detail page, not a
list card. */
.prof-avatar {
width: 80px;
height: 80px;
min-width: 80px;
max-width: 80px;
min-height: 80px;
max-height: 80px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(10, 30, 74, 0.10);
flex-shrink: 0;
display: block;
}
.prof-avatar-initial {
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-ice);
color: var(--brand-deep);
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.02em;
border: 1px solid rgba(10, 30, 74, 0.10);
}
.prof-id-text {
flex: 1;
min-width: 0;
}
.prof-id-text .jv-title {
margin: 4px 0 8px;
font-size: 32px;
}
.prof-headline {
font-family: var(--sans);
font-size: 16px;
font-weight: 500;
color: var(--ink-soft);
line-height: 1.4;
margin-bottom: 12px;
}
.prof-status-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.prof-location {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-faint);
letter-spacing: 0.04em;
}
/* Categories row — pills using the established jv-pill-quiet base */
.prof-cat-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.prof-cat-pill {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 184, 217, 0.08);
color: var(--filling-cyan);
border: 1px solid rgba(0, 184, 217, 0.20);
}
/* Portfolio link — visually distinct, with arrow glyph */
.prof-portfolio-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
text-decoration: none;
color: var(--brand-bright);
font-family: var(--mono);
font-size: 13px;
word-break: break-all;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.prof-portfolio-link:hover {
border-color: var(--brand-bright);
background: rgba(45, 127, 255, 0.04);
color: var(--brand-mid);
}
.prof-portfolio-arrow {
font-size: 14px;
flex-shrink: 0;
}
/* Completed jobs list — bank-statement row pattern with dotted divider */
.prof-jobs-list {
display: flex;
flex-direction: column;
}
.prof-jobs-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dotted rgba(10, 30, 74, 0.08);
}
.prof-jobs-row:last-child {
border-bottom: 0;
}
.prof-jobs-title {
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
color: var(--ink);
letter-spacing: -0.005em;
}
.prof-jobs-date {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.06em;
text-transform: uppercase;
flex-shrink: 0;
}
/* ============ CAPABILITIES ============ */
.prof-cap-deck {
font-size: 13px;
color: var(--ink-faint);
line-height: 1.5;
margin: -4px 0 14px;
max-width: 540px;
}
.prof-cap-empty {
font-size: 13px;
color: var(--ink-faint);
font-style: italic;
padding: 14px 0;
}
/* Badge (Capable Badge) chip — violet for current, amber for stale */
.prof-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 8px 8px 0;
padding: 10px 14px;
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.22);
border-radius: 10px;
text-decoration: none;
color: var(--ink);
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.prof-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.34);
}
.prof-badge-icon {
font-size: 18px;
line-height: 1;
}
.prof-badge-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
}
.prof-badge-version {
font-family: var(--mono);
font-size: 11px;
color: var(--filling-violet);
font-weight: 600;
letter-spacing: 0.04em;
}
/* Stale (capability has been updated since this badge was earned) —
amber tint instead of violet so the user sees "this needs renewal" */
.prof-badge-stale {
background: rgba(255, 140, 0, 0.08);
border-color: rgba(255, 140, 0, 0.30);
}
.prof-badge-stale:hover {
border-color: rgba(255, 140, 0, 0.46);
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.18);
}
.prof-badge-stale .prof-badge-version {
color: #b45309;
}
.prof-badge-stale-tag {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
color: #b45309;
background: rgba(255, 140, 0, 0.14);
padding: 2px 6px;
border-radius: 4px;
}
/* ============ REVIEWS ============ */
.prof-reviews {
display: flex;
flex-direction: column;
}
.prof-review {
padding: 16px 0;
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
}
.prof-review:last-child {
border-bottom: 0;
}
.prof-review-head {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.prof-review-stars {
color: var(--filling-amber);
letter-spacing: 2px;
font-size: 14px;
}
.prof-review-stars-empty {
color: var(--ink-faint);
opacity: 0.4;
}
.prof-review-author {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
}
.prof-review-meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.04em;
}
.prof-review-job {
font-size: 12px;
color: var(--ink-faint);
margin-bottom: 6px;
font-style: italic;
}
.prof-review-comment {
font-size: 14px;
line-height: 1.6;
color: var(--ink);
margin: 6px 0 0;
}
/* ============ STATS DEPOSIT SLIP (sidebar) ============ */
.prof-stat-block {
margin-top: 6px;
}
.prof-stat-row {
padding: 14px 0;
border-bottom: 1px dotted rgba(10, 30, 74, 0.08);
}
.prof-stat-row:last-child {
border-bottom: 0;
padding-bottom: 4px;
}
.prof-stat-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 6px;
}
.prof-stat-value {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1.05;
}
.prof-stat-star {
color: var(--filling-amber);
font-size: 22px;
}
.prof-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink);
}
.prof-stat-suffix {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-faint);
letter-spacing: 0.06em;
}
.prof-stat-empty {
font-family: var(--sans);
font-size: 14px;
color: var(--ink-faint);
font-style: italic;
}
.prof-stat-deck {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.04em;
margin-top: 4px;
}
/* =====================================================================
Job View — single-job detail page.
Two-column layout: main content on the left, "deposit slip" sidebar
on the right that pins the pay/stats/apply CTA at glance height.
===================================================================== */
.jv-back {
margin: 22px 0 6px;
}
.jv-back-link {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-decoration: none;
transition: color 0.15s;
}
.jv-back-link:hover { color: var(--filling-cyan); }
.jv-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: start;
margin-bottom: 36px;
}
@media (max-width: 900px) {
.jv-layout {
grid-template-columns: 1fr;
gap: 22px;
}
}
/* ============ MAIN COLUMN ============ */
.jv-main {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 32px 36px;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.jv-main { padding: 22px 20px; }
}
.jv-title-block {
padding-bottom: 22px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
margin-bottom: 24px;
}
.jv-title {
font-family: var(--serif);
font-weight: 600;
font-size: 36px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 6px 0 14px;
}
@media (max-width: 600px) {
.jv-title { font-size: 28px; }
}
.jv-status-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
/* Pills inside the title block */
.jv-pill {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.jv-pill-recruit {
background: rgba(0, 184, 217, 0.10);
color: var(--filling-cyan);
border: 1px solid rgba(0, 184, 217, 0.26);
}
.jv-pill-muted {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border: 1px solid rgba(10, 30, 74, 0.10);
}
.jv-pill-quiet {
background: var(--bg);
color: var(--ink-soft);
border: 1px solid rgba(10, 30, 74, 0.08);
}
.jv-recruiter {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 14px;
color: var(--ink-faint);
}
.jv-recruiter-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.jv-recruiter-name {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.005em;
border-bottom: 1px dotted transparent;
transition: border-color 0.15s, color 0.15s;
}
.jv-recruiter-name:hover {
color: var(--filling-cyan);
border-bottom-color: var(--filling-cyan);
}
.jv-recruiter-sep {
opacity: 0.4;
}
.jv-recruiter-date {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
}
/* Sections in the main column */
.jv-section {
margin-bottom: 24px;
}
.jv-section-head {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 0 0 12px;
}
.jv-prose {
font-size: 15px;
line-height: 1.7;
color: var(--ink);
white-space: pre-line;
max-width: 640px;
}
.jv-prose p:first-child { margin-top: 0; }
.jv-prose p:last-child { margin-bottom: 0; }
/* Trust footer — quiet inline explainer about escrow */
.jv-trust {
display: flex;
gap: 14px;
align-items: flex-start;
background: rgba(0, 184, 217, 0.05);
border: 1px solid rgba(0, 184, 217, 0.16);
border-radius: var(--radius-tight);
padding: 16px 18px;
margin-top: 8px;
}
.jv-trust-icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
}
.jv-trust-body {
font-size: 13px;
color: var(--ink);
line-height: 1.55;
}
.jv-trust-body strong {
display: block;
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
color: var(--ink);
letter-spacing: -0.005em;
}
/* ============ SIDEBAR (deposit slip) ============ */
.jv-aside {
position: sticky;
top: 22px;
}
@media (max-width: 900px) {
.jv-aside {
position: static;
}
}
.jv-pay-card {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 22px 24px 24px;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
.jv-pay-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--filling-cyan);
}
.jv-pay-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 8px 0 4px;
}
.jv-pay-amount {
font-family: var(--serif);
font-weight: 600;
font-size: 40px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
margin-bottom: 6px;
}
.jv-pay-net {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
}
.jv-pay-fee-note {
display: block;
font-size: 11px;
color: var(--ink-faint);
margin-top: 2px;
font-family: var(--mono);
letter-spacing: 0.02em;
}
.jv-pay-divider {
height: 1px;
background: rgba(10, 30, 74, 0.08);
margin: 18px 0;
}
/* Stat rows in the sidebar */
.jv-stat-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
font-size: 14px;
}
.jv-stat-row:not(:last-of-type) {
border-bottom: 1px dotted rgba(10, 30, 74, 0.08);
}
.jv-stat-label {
color: var(--ink-soft);
}
.jv-stat-value {
display: flex;
align-items: baseline;
gap: 4px;
}
.jv-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink);
}
.jv-stat-of {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-faint);
}
/* Apply CTA */
.jv-cta {
display: block;
width: 100%;
padding: 14px 18px;
border-radius: var(--radius-tight);
text-align: center;
text-decoration: none;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
transition: all 0.15s;
cursor: pointer;
border: 1px solid transparent;
}
.jv-cta-primary {
background: var(--filling-cyan);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 184, 217, 0.20);
}
.jv-cta-primary:hover {
background: #00a3c2;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 184, 217, 0.28);
}
.jv-cta-secondary {
background: var(--paper);
color: var(--ink);
border-color: rgba(10, 30, 74, 0.14);
}
.jv-cta-secondary:hover {
border-color: var(--filling-cyan);
color: var(--filling-cyan);
}
.jv-cta-disabled {
background: var(--bg);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.08);
cursor: not-allowed;
}
.jv-cta-deck {
font-size: 12px;
color: var(--ink-faint);
line-height: 1.5;
margin: 10px 0 0;
text-align: center;
}
.jv-cta-deck a {
color: var(--filling-cyan);
text-decoration: none;
border-bottom: 1px dotted var(--filling-cyan);
}
/* =====================================================================
Checkout — both item-mode (Store, amber) and job-apply mode (Recruit,
cyan). Same two-column structure as Job View: main content on the
left, deposit-slip sidebar on the right. The slip shape is the same
.jv-pay-card pattern but adds checkout-specific affordances:
running totals that update live (item mode), quantity stepper, and
color overrides for the Recruit-pillar variant.
===================================================================== */
/* Breadcrumb back-link with optional tagline appended */
.co-back {
margin: 22px 0 6px;
}
.co-back-link {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-decoration: none;
transition: color 0.15s;
}
.co-back-link:hover { color: var(--brand-bright); }
.co-back-tagline {
color: var(--ink-faint);
opacity: 0.7;
font-style: italic;
margin-left: 4px;
}
/* Two-column layout — same proportions as Job View */
.co-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 32px;
align-items: start;
margin-bottom: 36px;
}
@media (max-width: 900px) {
.co-layout {
grid-template-columns: 1fr;
gap: 22px;
}
}
.co-main {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 32px 36px;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.co-main { padding: 22px 20px; }
}
/* Hero image — same approach as marketplace cards (absolute-positioned
img inside a relative-positioned wrapper, so the type pill can float
over it cleanly).
max-height matches the original page's 280px cap — without it, a 16:9
aspect-ratio at full column width (~750px on desktop) renders ~420px
tall, which dominates the page and pushes the title below the fold. */
.co-image-wrap {
position: relative;
aspect-ratio: 16 / 9;
max-height: 280px;
background: linear-gradient(135deg, var(--bread-crumb) 0%, var(--bread-crust) 100%);
border-radius: var(--radius-tight);
overflow: hidden;
margin-bottom: 22px;
}
.co-image-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.co-image-wrap .mkt-pill {
bottom: 12px;
left: 12px;
}
.co-title-block {
padding-bottom: 18px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
margin-bottom: 22px;
}
.co-title {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin: 6px 0 12px;
}
@media (max-width: 600px) {
.co-title { font-size: 26px; }
}
.co-meta-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.co-posted-line {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.04em;
margin-left: 4px;
}
/* When the type pill is shown inline (no image) it needs to feel like
a real pill, not a floating overlay. Reset the absolute positioning
that the marketplace media-frame variant uses. */
.mkt-pill.mkt-pill-static {
position: static;
bottom: auto;
left: auto;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Warning pill — used for "Only N left" stock callouts */
.jv-pill-warning {
background: rgba(255, 140, 0, 0.10);
color: #b45309;
border: 1px solid rgba(255, 140, 0, 0.26);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
/* ============ DEPOSIT SLIP (sidebar) ============ */
.co-aside {
position: sticky;
top: 22px;
}
@media (max-width: 900px) {
.co-aside { position: static; }
}
.co-pay-card {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 22px 24px 24px;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
.co-pay-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--filling-amber); /* default = Store amber */
}
.co-pay-stripe-recruit { background: var(--filling-cyan); }
.co-pay-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 8px 0 4px;
}
.co-pay-amount {
font-family: var(--serif);
font-weight: 600;
font-size: 34px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
margin-bottom: 6px;
}
.co-pay-amount.co-pay-soldout {
color: var(--filling-rose);
font-size: 24px;
}
.co-pay-net {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
}
.co-pay-fee-note {
display: block;
font-size: 11px;
color: var(--ink-faint);
margin-top: 2px;
font-family: var(--mono);
letter-spacing: 0.02em;
}
.co-pay-divider {
height: 1px;
background: rgba(10, 30, 74, 0.08);
margin: 16px 0;
}
/* Quantity stepper inside the slip */
.co-form {
display: contents; /* let children participate in the slip's vertical flow */
}
.co-qty-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.co-qty-label {
font-family: var(--sans);
font-size: 14px;
color: var(--ink-soft);
font-weight: 500;
}
.co-qty-input {
width: 90px;
padding: 8px 10px;
background: #fff;
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--ink);
text-align: center;
transition: border-color 0.15s, box-shadow 0.15s;
}
.co-qty-input:focus {
outline: none;
border-color: var(--brand-bright);
box-shadow: 0 0 0 3px rgba(45, 127, 255, 0.12);
}
/* Total line — bigger than the stat rows above, the visual anchor */
.co-total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0 14px;
}
.co-total-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--ink-soft);
text-transform: uppercase;
}
.co-total-value {
font-family: var(--serif);
font-weight: 600;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink);
}
/* Store CTA override — the default jv-cta-primary is cyan (Recruit).
For item checkout we want amber (Store). */
.co-cta-store {
background: var(--filling-amber);
box-shadow: 0 2px 8px rgba(255, 140, 0, 0.22);
}
.co-cta-store:hover {
background: #e67c00;
box-shadow: 0 4px 12px rgba(255, 140, 0, 0.30);
transform: translateY(-1px);
}
/* =====================================================================
Payment — actual debit step. Two-column layout (item mode) or single
column (job application). The right-side deposit slip on item mode
shows the moment-of-truth: "Your balance" / "Amount due" / Total /
Pay button. If insufficient balance, the slip swaps the bottom half
to a top-up CTA.
===================================================================== */
/* Self-purchase block — full-width warning, no sidebar */
.pay-self-block {
background: var(--paper);
border: 1px solid rgba(244, 63, 94, 0.20);
border-left: 4px solid var(--filling-rose);
border-radius: var(--radius-card);
padding: 32px 36px;
margin: 22px 0 32px;
box-shadow: var(--shadow-card);
max-width: 720px;
}
.pay-self-icon {
font-size: 28px;
margin-bottom: 10px;
}
.pay-self-title {
font-family: var(--serif);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 10px;
line-height: 1.25;
}
.pay-self-deck {
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 20px;
max-width: 520px;
}
.pay-self-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Order block — invoice-style structured layout */
.pay-order {
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-tight);
padding: 16px 18px;
}
.pay-order-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: baseline;
margin-bottom: 10px;
}
.pay-order-item {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
color: var(--ink);
letter-spacing: -0.01em;
}
.pay-order-qty {
font-family: var(--mono);
font-size: 13px;
color: var(--ink-faint);
}
.pay-order-amt {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
color: var(--ink);
}
.pay-order-divider {
height: 1px;
background: rgba(10, 30, 74, 0.08);
margin: 8px 0;
}
.pay-order-meta-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--ink-soft);
padding: 4px 0;
}
/* Form shell — wraps the buyer-details form. The submit button is in
the sidebar, so we use form="pay-form" attribute on the button. */
.pay-form-shell {
display: contents;
}
/* Balance block in the deposit slip — two stacked rows showing balance
vs amount due. Visual moment of truth before the user clicks Pay. */
.pay-balance-block {
margin-top: 6px;
}
.pay-balance-row {
padding: 10px 0;
border-bottom: 1px dotted rgba(10, 30, 74, 0.08);
}
.pay-balance-row:last-child { border-bottom: 0; }
.pay-balance-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 4px;
}
.pay-balance-amount {
font-family: var(--serif);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.05;
}
.pay-balance-low {
color: var(--filling-rose);
}
/* Insufficient-balance block replaces the bottom half of the slip when
the user can't afford. Rose-tinted, with a top-up CTA. */
.pay-low-block {
margin-top: 16px;
padding: 16px;
background: rgba(244, 63, 94, 0.06);
border: 1px solid rgba(244, 63, 94, 0.18);
border-radius: var(--radius-tight);
}
.pay-low-head {
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
color: var(--filling-rose);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.pay-low-body {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 14px;
}
.pay-low-block .jv-cta {
display: block;
width: 100%;
text-align: center;
}
/* =====================================================================
Job application — single-column layout (no sidebar).
===================================================================== */
.pay-narrow {
max-width: 720px;
margin: 0 auto 36px;
}
/* Mini job summary card up top — cyan stripe, two-stat block */
.pay-job-summary {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 22px 24px 20px;
margin-bottom: 18px;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
.pay-job-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--filling-cyan);
}
.pay-job-title {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 6px 0 12px;
line-height: 1.25;
}
.pay-job-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.pay-job-stats {
display: flex;
align-items: stretch;
gap: 18px;
padding-top: 14px;
border-top: 1px solid rgba(10, 30, 74, 0.06);
}
.pay-job-stat {
flex: 1;
min-width: 0;
}
.pay-job-stat-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 4px;
}
.pay-job-stat-value {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.2;
}
.pay-job-stat-pay {
font-size: 22px;
color: var(--filling-cyan);
}
.pay-job-stat-user {
font-family: var(--mono);
font-size: 14px;
color: var(--ink-soft);
word-break: break-word;
}
.pay-job-stat-divider {
width: 1px;
background: rgba(10, 30, 74, 0.08);
flex-shrink: 0;
}
/* Application form shell */
.pay-apply-shell {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 26px 28px;
box-shadow: var(--shadow-card);
}
.pay-apply-form {
display: block;
}
.pay-apply-head {
font-family: var(--serif);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 4px 0 8px;
line-height: 1.25;
}
.pay-apply-deck {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.55;
margin: 0 0 18px;
}
.pay-apply-pitch {
min-height: 200px;
font-size: 14px;
line-height: 1.6;
}
.pay-apply-cta {
display: block;
width: 100%;
margin-top: 8px;
}
/* Empty / state-aware messaging block (used when the user can't apply,
or has already applied). Big centered icon, serif headline, deck text,
action buttons. */
.pay-block-empty {
text-align: center;
padding: 32px 22px;
}
.pay-block-empty .icon {
font-size: 48px;
margin-bottom: 14px;
line-height: 1;
}
.pay-block-empty h2 {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 8px;
line-height: 1.3;
}
.pay-block-empty p {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.55;
margin: 0 auto 18px;
max-width: 420px;
}
.pay-block-empty-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* =====================================================================
My Badges — learner's badge collection page.
Shims the JS-emitted markup (.badge, .badge.featured, .badge.stale,
.slot-num, .pill-stale, .pill-private, .order-controls, etc.) so
that badges.js stays untouched while the page renders in the HQ
aesthetic. Cards are violet-pillar tone (Capability), with featured
getting a left-stripe accent and stale getting amber tint.
===================================================================== */
/* Grid layout — auto-fill cards at min 240px each */
.bg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
/* The card chrome — paper bg, subtle border, hover lift */
.bg-grid .badge {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 18px 20px;
position: relative;
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.bg-grid .badge:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(10, 30, 74, 0.14);
}
/* Featured — violet left stripe + soft tint, signals "this is pinned to
the public profile" */
.bg-grid .badge.featured {
border-color: rgba(139, 92, 246, 0.30);
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.04) 0%,
var(--paper) 60%);
}
.bg-grid .badge.featured::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--filling-violet);
border-radius: var(--radius-card) 0 0 var(--radius-card);
}
/* Stale — amber tint, signals "the capability has been updated since
you earned this; consider retaking" */
.bg-grid .badge.stale {
border-color: rgba(255, 140, 0, 0.30);
background: linear-gradient(135deg,
rgba(255, 140, 0, 0.04) 0%,
var(--paper) 60%);
}
.bg-grid .badge.stale.featured::before {
background: var(--filling-amber);
}
/* The 🏅 icon at the top */
.bg-grid .badge .icon {
font-size: 32px;
margin-bottom: 6px;
line-height: 1;
}
/* Title — serif, with the link-to-capability inside */
.bg-grid .badge h3 {
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--ink);
margin: 4px 0 6px;
line-height: 1.35;
}
.bg-grid .badge h3 a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted transparent;
transition: border-color 0.15s, color 0.15s;
}
.bg-grid .badge h3 a:hover {
color: var(--filling-violet);
border-bottom-color: var(--filling-violet);
}
/* Meta line: v1 · 88.0% · Mar 1, 2026 */
.bg-grid .badge .meta {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.04em;
line-height: 1.5;
}
/* Slot number pill (top-right of featured cards) */
.bg-grid .slot-num {
position: absolute;
top: 10px;
right: 12px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
color: var(--filling-violet);
background: var(--paper);
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(139, 92, 246, 0.30);
letter-spacing: 0;
z-index: 1;
}
/* Pills (UPDATED, PRIVATE) — small mono uppercase tags */
.bg-grid .pill {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid;
}
.bg-grid .pill-stale {
background: rgba(255, 140, 0, 0.12);
color: #b45309;
border-color: rgba(255, 140, 0, 0.30);
}
.bg-grid .pill-private {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.14);
}
.bg-grid .pill-violet {
background: var(--filling-violet);
color: #fff;
border-color: var(--filling-violet);
}
/* Action row — pin/unpin, public/private, ↑/↓ controls */
.bg-grid .badge-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 12px;
}
.bg-grid .badge-actions .btn {
font-size: 12px;
padding: 6px 12px;
}
/* Order controls (↑/↓ reorder buttons for featured slots) */
.bg-grid .order-controls {
display: inline-flex;
gap: 2px;
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
overflow: hidden;
background: var(--paper);
}
.bg-grid .order-controls button {
width: 30px;
height: 30px;
border: 0;
background: var(--paper);
cursor: pointer;
font-size: 13px;
color: var(--ink-soft);
font-family: var(--sans);
transition: background 0.15s, color 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.bg-grid .order-controls button:hover:not(:disabled) {
background: rgba(139, 92, 246, 0.08);
color: var(--filling-violet);
}
.bg-grid .order-controls button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.bg-grid .order-controls button + button {
border-left: 1px solid rgba(10, 30, 74, 0.10);
}
/* =====================================================================
Polls (public catalog) — Polls-pillar discovery surface. Card grid
with a progress bar pattern: each card visualizes how full the poll
is, so a respondent can see at a glance "this one has 80 of 100 slots
filled — better hurry." Pay number is in earner-green per the
wallet-positive convention.
===================================================================== */
/* Filter pill row — same pattern as capabilities (8 fixed slugs + All) */
.poll-filter-bar {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 16px 22px;
margin-bottom: 20px;
box-shadow: var(--shadow-card);
}
.poll-filter-label {
margin-bottom: 10px;
}
.poll-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.poll-pill {
display: inline-block;
padding: 7px 14px;
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: 999px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
background: var(--bg);
text-decoration: none;
transition: all 0.15s;
white-space: nowrap;
}
.poll-pill:hover {
border-color: var(--filling-rose);
color: var(--filling-rose);
background: rgba(244, 63, 94, 0.05);
}
.poll-pill-active {
background: var(--filling-rose);
color: #fff;
border-color: var(--filling-rose);
font-weight: 600;
}
.poll-pill-active:hover {
background: #e11d48;
color: #fff;
border-color: #e11d48;
}
/* Results header */
.poll-list-wrap {
margin-bottom: 32px;
}
.poll-count {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin: 0 4px 14px;
min-height: 16px;
}
/* The grid */
.poll-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
/* The card — uses the stretched-link pattern. Card itself is a
with rich block content, an absolutely-positioned
overlay catches
clicks. */
.poll-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 20px 22px;
color: var(--ink);
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
height: 100%;
}
.poll-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--filling-rose);
opacity: 0;
transition: opacity 0.18s;
z-index: 2;
}
.poll-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(10, 30, 74, 0.14);
}
.poll-card:hover::before {
opacity: 1;
}
/* Full poll variant — muted, can't take but can view results */
.poll-card-full {
opacity: 0.78;
}
.poll-card-full:hover {
transform: none;
opacity: 1;
}
/* Stretched-link overlay */
.poll-card-link {
position: absolute;
inset: 0;
z-index: 1;
text-decoration: none;
color: transparent;
border-radius: var(--radius-card);
}
.poll-card-link:focus-visible {
outline: 2px solid var(--filling-rose);
outline-offset: -2px;
}
/* Card head: category eyebrow + optional Full pill */
.poll-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.poll-card-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--filling-rose);
}
.poll-card-pill {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid;
white-space: nowrap;
}
.poll-card-pill-full {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.14);
}
/* Title + meta */
.poll-card-title {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.25;
margin: 4px 0 0;
}
.poll-card-meta {
font-size: 13px;
color: var(--ink-faint);
}
.poll-card-meta strong {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
/* Description preview — clamped to 2 lines */
.poll-card-desc {
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
margin: 4px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Progress bar — the visual signal of how full the poll is */
.poll-card-progress {
margin-top: auto;
padding-top: 8px;
}
.poll-card-progress-track {
height: 5px;
background: rgba(244, 63, 94, 0.10);
border-radius: 999px;
overflow: hidden;
margin-bottom: 6px;
}
.poll-card-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--filling-rose), #e11d48);
border-radius: inherit;
transition: width 0.3s;
}
.poll-card-progress-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-faint);
}
.poll-card-progress-meta strong {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink);
letter-spacing: -0.005em;
}
.poll-card-slots {
color: var(--filling-rose);
font-weight: 600;
}
/* Foot: earner pay (green, wallet-positive) on left, CTA on right */
.poll-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid rgba(10, 30, 74, 0.06);
gap: 10px;
}
.poll-card-pay {
display: flex;
align-items: baseline;
gap: 2px;
color: var(--filling-green);
}
.poll-card-pay-prefix {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--filling-green);
}
.poll-card-pay-amt {
font-family: var(--serif);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--filling-green);
}
.poll-card-pay-unit {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-transform: uppercase;
margin-left: 2px;
}
.poll-card-cta {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-faint);
transition: color 0.15s, transform 0.15s;
}
.poll-card:hover .poll-card-cta {
color: var(--filling-rose);
transform: translateX(2px);
}
/* =====================================================================
Poll Detail (single-poll detail page) — sister to capability detail,
job_view, profile. Two-column layout with the deposit-slip sidebar
on the right. Rose pillar accent throughout (matches polls.php
discovery surface).
===================================================================== */
/* ============ STATE BANNER (in-progress draft) ============ */
.poll-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-radius: var(--radius-card);
margin: 22px 0 18px;
border: 1px solid;
}
.poll-banner-resume {
background: rgba(244, 63, 94, 0.07);
border-color: rgba(244, 63, 94, 0.30);
}
.poll-banner-icon {
font-size: 28px;
line-height: 1;
flex-shrink: 0;
}
.poll-banner-body {
flex: 1;
min-width: 0;
}
.poll-banner-head {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 2px;
}
.poll-banner-meta {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
.poll-banner-btn {
flex-shrink: 0;
}
/* ============ COVER IMAGE (top of main column) ============ */
.poll-cover {
position: relative;
aspect-ratio: 16 / 9;
max-height: 320px;
background: linear-gradient(135deg, var(--bread-crumb) 0%, var(--bread-crust) 100%);
border-radius: var(--radius-tight);
overflow: hidden;
margin-bottom: 22px;
}
.poll-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============ TITLE BLOCK ============ */
.poll-title-block {
padding-bottom: 18px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
margin-bottom: 22px;
}
.poll-status-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
.poll-creator-line {
font-size: 13px;
color: var(--ink-faint);
}
.poll-creator-line strong {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
/* Polls-pillar pill (rose) — for "● Accepting responses" status */
.jv-pill-polls {
background: rgba(244, 63, 94, 0.10);
color: var(--filling-rose);
border: 1px solid rgba(244, 63, 94, 0.26);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
/* ============ STATS — 4-column glance row ============ */
.poll-detail-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 14px 0;
}
@media (max-width: 600px) {
.poll-detail-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.poll-detail-stat {
text-align: left;
border-left: 2px solid rgba(244, 63, 94, 0.20);
padding-left: 12px;
}
.poll-detail-stat-num {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.1;
}
.poll-detail-stat-lbl {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 4px;
}
/* Progress bar — bigger version of the polls.php list-card progress */
.poll-detail-progress {
margin-top: 16px;
}
.poll-detail-progress-track {
height: 8px;
background: rgba(244, 63, 94, 0.10);
border-radius: 999px;
overflow: hidden;
margin-bottom: 8px;
}
.poll-detail-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--filling-rose), #e11d48);
border-radius: inherit;
transition: width 0.3s;
}
.poll-detail-progress-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
flex-wrap: wrap;
gap: 8px;
}
.poll-detail-progress-meta strong {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
letter-spacing: -0.005em;
}
.poll-detail-deadline {
color: var(--ink-soft);
}
/* ============ DEPOSIT SLIP (sidebar) ============ */
.poll-pay-card .poll-pay-stripe {
background: var(--filling-rose);
}
.poll-pay-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 8px 0 4px;
}
.poll-pay-amount {
display: flex;
align-items: baseline;
gap: 3px;
margin-bottom: 6px;
line-height: 1.05;
}
.poll-pay-prefix {
font-family: var(--mono);
font-size: 22px;
font-weight: 700;
color: var(--filling-green);
}
.poll-pay-num {
font-family: var(--serif);
font-weight: 700;
font-size: 34px;
letter-spacing: -0.025em;
color: var(--filling-green);
}
.poll-pay-net {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
}
.poll-pay-fee-note {
display: block;
font-size: 11px;
color: var(--ink-faint);
margin-top: 2px;
font-family: var(--mono);
letter-spacing: 0.02em;
}
.poll-pay-deadline {
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0.04em;
}
/* CTA variants — rose primary for take/resume, neutral secondary for
"see your responses" (the user already finished, not a fresh action) */
.poll-cta-take {
background: linear-gradient(135deg, var(--filling-rose) 0%, #e11d48 100%);
box-shadow: 0 2px 8px rgba(244, 63, 94, 0.26);
color: #fff;
border: 0;
}
.poll-cta-take:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(244, 63, 94, 0.36);
}
/* Owner manage CTA stays cyan (informational) — not an earner action */
.poll-cta-manage {
background: var(--filling-cyan);
box-shadow: 0 2px 8px rgba(0, 184, 217, 0.20);
}
.poll-cta-manage:hover {
background: #0e7c8e;
box-shadow: 0 4px 12px rgba(0, 184, 217, 0.30);
transform: translateY(-1px);
}
/* =====================================================================
Switch Concierge — full-page conversation surface
Two-pane layout: thread list (240px) + main conversation
Calm, bank-grade chat surface. Plenty of whitespace, careful typography.
===================================================================== */
.ac-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 18px;
margin: 22px 0 28px;
min-height: calc(100vh - 220px);
}
@media (max-width: 800px) {
.ac-layout {
grid-template-columns: 1fr;
min-height: auto;
}
}
/* ============ LEFT RAIL (thread list) ============ */
.ac-rail {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 16px 14px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
height: fit-content;
max-height: calc(100vh - 220px);
overflow-y: auto;
position: sticky;
top: 22px;
}
@media (max-width: 800px) {
.ac-rail { position: static; max-height: none; }
}
.ac-rail-new {
width: 100%;
padding: 10px 14px;
background: var(--brand-bright);
color: #fff;
border: 0;
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
margin-bottom: 14px;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(45, 127, 255, 0.20);
}
.ac-rail-new:hover {
background: var(--brand-mid);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(45, 127, 255, 0.30);
}
.ac-rail-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin: 4px 4px 8px;
}
.ac-thread-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.ac-thread {
display: flex;
align-items: stretch;
border-radius: var(--radius-tight);
transition: background 0.15s;
}
.ac-thread:hover { background: rgba(10, 30, 74, 0.04); }
.ac-thread-active { background: rgba(45, 127, 255, 0.08); }
.ac-thread-open {
flex: 1;
text-align: left;
padding: 8px 10px;
background: transparent;
border: 0;
cursor: pointer;
min-width: 0;
font-family: var(--sans);
}
.ac-thread-title {
font-size: 13px;
font-weight: 500;
color: var(--ink);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 2px;
}
.ac-thread-meta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-faint);
}
.ac-thread-del {
width: 28px;
background: transparent;
border: 0;
color: var(--ink-faint);
font-size: 16px;
cursor: pointer;
border-radius: var(--radius-tight);
margin: 4px;
transition: background 0.15s, color 0.15s;
opacity: 0;
}
.ac-thread:hover .ac-thread-del,
.ac-thread-active .ac-thread-del {
opacity: 1;
}
.ac-thread-del:hover {
background: rgba(244, 63, 94, 0.10);
color: var(--filling-rose);
}
.ac-rail-loading,
.ac-rail-empty {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.04em;
padding: 14px 4px;
text-align: center;
font-style: italic;
}
/* ============ MAIN COLUMN (conversation) ============ */
.ac-main {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-card);
min-height: 600px;
max-height: calc(100vh - 220px);
}
@media (max-width: 800px) {
.ac-main { min-height: 500px; max-height: none; }
}
.ac-conversation {
flex: 1;
overflow-y: auto;
padding: 22px 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
@media (max-width: 600px) {
.ac-conversation { padding: 16px 18px; }
}
/* Empty state — what shows before the first message */
.ac-empty {
margin: auto;
text-align: center;
max-width: 540px;
padding: 30px 20px;
}
.ac-empty-icon {
font-size: 44px;
margin-bottom: 14px;
}
.ac-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 12px;
}
.ac-empty-deck {
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 24px;
}
.ac-empty-suggestions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 8px;
}
@media (max-width: 600px) {
.ac-empty-suggestions { grid-template-columns: 1fr; }
}
.ac-suggestion {
text-align: left;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
padding: 12px 14px;
cursor: pointer;
font-family: var(--sans);
transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ac-suggestion:hover {
border-color: var(--brand-bright);
background: rgba(45, 127, 255, 0.04);
transform: translateY(-1px);
}
.ac-suggestion strong {
display: block;
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
letter-spacing: -0.005em;
margin-bottom: 3px;
}
.ac-suggestion span {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.04em;
}
/* ============ MESSAGE BUBBLES ============ */
.ac-msg {
display: flex;
gap: 12px;
align-items: flex-start;
}
.ac-msg-avatar {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
background: var(--brand-ice);
color: var(--brand-deep);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.ac-msg-user .ac-msg-avatar {
background: rgba(10, 30, 74, 0.06);
color: var(--ink);
font-size: 16px;
}
.ac-msg-assistant .ac-msg-avatar {
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
}
.ac-msg-body {
flex: 1;
min-width: 0;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
padding-top: 4px;
}
.ac-msg-body p { margin: 0 0 8px; }
.ac-msg-body p:last-child { margin-bottom: 0; }
.ac-msg-body strong { font-weight: 600; }
.ac-msg-body em { font-style: italic; }
.ac-msg-body code {
font-family: var(--mono);
font-size: 0.92em;
background: rgba(10, 30, 74, 0.06);
padding: 1px 5px;
border-radius: 3px;
}
.ac-msg-user .ac-msg-body {
color: var(--ink);
}
/* Pending state — typing indicator */
.ac-typing {
display: inline-flex;
gap: 4px;
align-items: center;
padding: 6px 0;
}
.ac-typing i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ink-faint);
display: inline-block;
animation: ac-typing-bounce 1.4s infinite;
}
.ac-typing i:nth-child(2) { animation-delay: 0.2s; }
.ac-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ac-typing-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-4px); opacity: 0.9; }
}
/* ============ INPUT BAR ============ */
.ac-input-bar {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 14px 16px 6px;
border-top: 1px solid rgba(10, 30, 74, 0.08);
background: var(--bg);
border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.ac-input {
flex: 1;
font-family: var(--sans);
font-size: 14px;
line-height: 1.5;
color: var(--ink);
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
padding: 10px 14px;
resize: none;
min-height: 40px;
max-height: 180px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ac-input:focus {
outline: none;
border-color: var(--brand-bright);
box-shadow: 0 0 0 3px rgba(45, 127, 255, 0.12);
}
.ac-send-btn {
width: 40px;
height: 40px;
background: var(--brand-bright);
color: #fff;
border: 0;
border-radius: var(--radius-tight);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, transform 0.15s;
box-shadow: 0 2px 6px rgba(45, 127, 255, 0.22);
}
.ac-send-btn:hover {
background: var(--brand-mid);
transform: translateY(-1px);
}
.ac-send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
.ac-input-hint {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-faint);
letter-spacing: 0.04em;
text-align: center;
padding: 0 16px 12px;
}
.ac-input-hint kbd {
font-family: var(--mono);
font-size: 10px;
background: rgba(10, 30, 74, 0.06);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: 3px;
padding: 1px 5px;
color: var(--ink-soft);
}
/* =====================================================================
Switch Concierge — Floating Widget
Self-contained namespace .cw-* (separate from .ac-* for the full page).
Collapsed: 56px circle bottom-right
Expanded: 380x540 panel anchored bottom-right
On mobile: panel goes near-fullscreen
===================================================================== */
/* Toggle button — collapsed state */
.cw-toggle {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
border: 0;
cursor: pointer;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 14px rgba(45, 127, 255, 0.32),
0 2px 4px rgba(10, 30, 74, 0.10);
transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
font-family: var(--serif);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
padding: 0;
}
.cw-toggle:hover {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 8px 24px rgba(45, 127, 255, 0.42),
0 3px 6px rgba(10, 30, 74, 0.14);
}
.cw-toggle:active {
transform: translateY(0) scale(0.98);
}
.cw-toggle-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
transition: opacity 0.2s;
}
.cw-toggle-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.cw-toggle:hover .cw-toggle-letter { opacity: 0; }
.cw-toggle:hover .cw-toggle-icon { opacity: 1; }
.cw-toggle-hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.8) translateY(8px);
}
@media (max-width: 640px) {
.cw-toggle {
width: 48px;
height: 48px;
bottom: 16px;
right: 16px;
font-size: 18px;
}
}
/* Panel — expanded state */
.cw-panel {
position: fixed;
bottom: 20px;
right: 20px;
width: 380px;
height: 540px;
max-height: calc(100vh - 40px);
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: 16px;
box-shadow:
0 16px 48px rgba(10, 30, 74, 0.18),
0 4px 12px rgba(10, 30, 74, 0.10);
z-index: 51;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.96);
pointer-events: none;
transition:
opacity 0.22s ease-out,
transform 0.22s ease-out;
}
.cw-panel-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
@media (max-width: 640px) {
.cw-panel {
width: calc(100vw - 24px);
height: calc(100vh - 100px);
bottom: 12px;
right: 12px;
left: 12px;
border-radius: 14px;
}
}
/* Header */
.cw-header {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
background: var(--bg);
}
.cw-header-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.cw-header-mark {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.cw-header-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
line-height: 1.2;
}
.cw-header-meta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 1px;
}
.cw-header-actions {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
}
.cw-header-btn {
width: 28px;
height: 28px;
border: 0;
background: transparent;
border-radius: 6px;
color: var(--ink-faint);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.15s, color 0.15s;
padding: 0;
}
.cw-header-btn:hover {
background: rgba(10, 30, 74, 0.06);
color: var(--ink);
}
/* Conversation area */
.cw-conv {
flex: 1;
overflow-y: auto;
padding: 14px 14px;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--paper);
}
/* Empty state */
.cw-empty {
margin: auto;
text-align: center;
padding: 18px 14px;
}
.cw-empty-letter {
width: 48px;
height: 48px;
margin: 0 auto 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
}
.cw-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 6px;
}
.cw-empty-deck {
font-size: 12px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 240px;
margin: 0 auto;
}
/* Message bubbles — slightly tighter than the page */
.cw-msg {
display: flex;
gap: 10px;
align-items: flex-start;
}
.cw-msg-avatar {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 50%;
background: rgba(10, 30, 74, 0.06);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.cw-msg-assistant .cw-msg-avatar {
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
font-family: var(--serif);
font-weight: 700;
}
.cw-msg-body {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
padding-top: 2px;
}
.cw-msg-body p { margin: 0 0 6px; }
.cw-msg-body p:last-child { margin-bottom: 0; }
.cw-msg-body strong { font-weight: 600; }
.cw-msg-body em { font-style: italic; }
.cw-msg-body code {
font-family: var(--mono);
font-size: 0.92em;
background: rgba(10, 30, 74, 0.06);
padding: 1px 5px;
border-radius: 3px;
}
/* Typing indicator */
.cw-typing {
display: inline-flex;
gap: 3px;
align-items: center;
padding: 5px 0;
}
.cw-typing i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-faint);
display: inline-block;
animation: cw-typing-bounce 1.4s infinite;
}
.cw-typing i:nth-child(2) { animation-delay: 0.2s; }
.cw-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes cw-typing-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-3px); opacity: 0.9; }
}
/* Input bar */
.cw-input-bar {
flex-shrink: 0;
display: flex;
gap: 6px;
align-items: flex-end;
padding: 10px;
border-top: 1px solid rgba(10, 30, 74, 0.08);
background: var(--bg);
}
.cw-input {
flex: 1;
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
color: var(--ink);
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: 8px;
padding: 8px 10px;
resize: none;
min-height: 36px;
max-height: 120px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.cw-input:focus {
outline: none;
border-color: var(--brand-bright);
box-shadow: 0 0 0 3px rgba(45, 127, 255, 0.12);
}
.cw-send {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--brand-bright);
color: #fff;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, transform 0.15s;
}
.cw-send:hover {
background: var(--brand-mid);
transform: translateY(-1px);
}
.cw-send:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* =====================================================================
Concierge Proposal Cards (Slice 3)
Shared design language between full page (.ac-proposal-*) and the
floating widget (.cw-proposal-*). Pending = brand-blue stripe with
action buttons; executed = green stripe; cancelled = muted grey.
===================================================================== */
/* ============ FULL PAGE (assistant.php) ============ */
.ac-proposal {
background: var(--paper);
border: 1px solid rgba(45, 127, 255, 0.22);
border-left-width: 3px;
border-left-color: var(--brand-bright);
border-radius: var(--radius-tight);
padding: 14px 16px;
margin: 6px 0 6px 44px; /* aligned with assistant message body (32px avatar + 12px gap) */
font-size: 13px;
line-height: 1.5;
color: var(--ink);
position: relative;
}
.ac-proposal-executed {
border-left-color: var(--filling-green);
background: linear-gradient(135deg, rgba(0, 196, 140, 0.04) 0%, var(--paper) 50%);
}
.ac-proposal-cancelled,
.ac-proposal-confirmed {
opacity: 0.65;
border-left-color: rgba(10, 30, 74, 0.20);
}
.ac-proposal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
gap: 8px;
}
.ac-proposal-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--brand-bright);
text-transform: uppercase;
}
.ac-proposal-executed .ac-proposal-eyebrow { color: var(--filling-green); }
.ac-proposal-cancelled .ac-proposal-eyebrow { color: var(--ink-faint); }
.ac-proposal-status {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-faint);
padding: 2px 8px;
border-radius: 999px;
background: rgba(10, 30, 74, 0.06);
white-space: nowrap;
}
.ac-proposal-status-ok {
background: rgba(0, 196, 140, 0.10);
color: var(--filling-green);
}
.ac-proposal-status-muted {
background: transparent;
}
.ac-proposal-fields {
display: grid;
grid-template-columns: minmax(120px, auto) 1fr;
gap: 4px 12px;
margin-bottom: 10px;
}
.ac-proposal-field {
display: contents;
}
.ac-proposal-field-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-transform: uppercase;
padding: 3px 0;
}
.ac-proposal-field-value {
font-size: 13px;
color: var(--ink);
padding: 3px 0;
word-break: break-word;
}
.ac-proposal-warning {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.30);
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
color: #92400e;
margin: 4px 0 10px;
}
.ac-proposal-warning strong { color: #78350f; }
.ac-proposal-actions {
display: flex;
gap: 6px;
margin-top: 12px;
border-top: 1px solid rgba(10, 30, 74, 0.06);
padding-top: 10px;
}
.ac-proposal-btn {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
padding: 7px 14px;
border-radius: 6px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.15s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ac-proposal-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ac-proposal-confirm {
background: var(--brand-bright);
color: #fff;
border-color: var(--brand-bright);
}
.ac-proposal-confirm:hover:not(:disabled) {
background: var(--brand-mid);
border-color: var(--brand-mid);
transform: translateY(-1px);
}
.ac-proposal-cancel {
background: var(--paper);
color: var(--ink-soft);
border-color: rgba(10, 30, 74, 0.14);
}
.ac-proposal-cancel:hover:not(:disabled) {
border-color: var(--filling-rose);
color: var(--filling-rose);
}
.ac-proposal-link {
background: var(--filling-green);
color: #fff;
border-color: var(--filling-green);
}
.ac-proposal-link:hover {
background: #059669;
border-color: #059669;
transform: translateY(-1px);
}
.ac-proposal-error {
margin-top: 10px;
padding: 8px 12px;
background: rgba(244, 63, 94, 0.06);
border: 1px solid rgba(244, 63, 94, 0.22);
border-radius: 6px;
color: var(--filling-rose);
font-size: 12px;
line-height: 1.45;
}
/* ============ WIDGET (concierge-widget.js) — same patterns, tighter ============ */
.cw-proposal {
background: var(--paper);
border: 1px solid rgba(45, 127, 255, 0.22);
border-left-width: 3px;
border-left-color: var(--brand-bright);
border-radius: 8px;
padding: 10px 12px;
margin: 4px 0 4px 36px; /* aligned with widget assistant body (26+10) */
font-size: 12px;
line-height: 1.45;
}
.cw-proposal-executed {
border-left-color: var(--filling-green);
background: linear-gradient(135deg, rgba(0, 196, 140, 0.04) 0%, var(--paper) 50%);
}
.cw-proposal-cancelled,
.cw-proposal-confirmed {
opacity: 0.65;
border-left-color: rgba(10, 30, 74, 0.20);
}
.cw-proposal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.cw-proposal-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--brand-bright);
text-transform: uppercase;
}
.cw-proposal-executed .cw-proposal-eyebrow { color: var(--filling-green); }
.cw-proposal-cancelled .cw-proposal-eyebrow { color: var(--ink-faint); }
.cw-proposal-status-ok {
font-size: 14px;
color: var(--filling-green);
font-weight: 700;
}
.cw-proposal-fields {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 6px;
}
.cw-proposal-field {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12px;
}
.cw-proposal-field-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-transform: uppercase;
flex-shrink: 0;
}
.cw-proposal-field-value {
color: var(--ink);
text-align: right;
word-break: break-word;
}
.cw-proposal-warning {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.30);
border-radius: 5px;
padding: 6px 10px;
font-size: 11px;
color: #92400e;
margin: 4px 0 6px;
}
.cw-proposal-actions {
display: flex;
gap: 4px;
margin-top: 8px;
border-top: 1px solid rgba(10, 30, 74, 0.06);
padding-top: 8px;
}
.cw-proposal-btn {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
padding: 6px 10px;
border-radius: 5px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.15s;
text-decoration: none;
flex: 1;
text-align: center;
}
.cw-proposal-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cw-proposal-confirm {
background: var(--brand-bright);
color: #fff;
border-color: var(--brand-bright);
}
.cw-proposal-confirm:hover:not(:disabled) {
background: var(--brand-mid);
border-color: var(--brand-mid);
}
.cw-proposal-cancel {
background: var(--paper);
color: var(--ink-soft);
border-color: rgba(10, 30, 74, 0.14);
}
.cw-proposal-cancel:hover:not(:disabled) {
border-color: var(--filling-rose);
color: var(--filling-rose);
}
.cw-proposal-link {
background: var(--filling-green);
color: #fff;
border-color: var(--filling-green);
}
.cw-proposal-link:hover {
background: #059669;
border-color: #059669;
}
.cw-proposal-error {
margin-top: 6px;
padding: 6px 10px;
background: rgba(244, 63, 94, 0.06);
border: 1px solid rgba(244, 63, 94, 0.22);
border-radius: 5px;
color: var(--filling-rose);
font-size: 11px;
}
/* =====================================================================
Login / Signup page (front door of the app)
Standalone surface — no HQ chrome. Centered card, magic-link flow.
Bank-grade calm: serif title, generous whitespace, one obvious action.
===================================================================== */
.lg-body {
min-height: 100vh;
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(45, 127, 255, 0.05) 0%, transparent 70%),
var(--bg);
margin: 0;
font-family: var(--sans);
color: var(--ink);
display: flex;
flex-direction: column;
}
/* ============ TOPBAR — minimal brand strip ============ */
.lg-topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 28px;
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
background: rgba(245, 241, 232, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lg-brand-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ink);
}
.lg-brand-name {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
}
.lg-brand-name em {
font-style: italic;
color: var(--brand-bright);
font-weight: 600;
}
.lg-topbar-back {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
transition: color 0.15s;
}
.lg-topbar-back:hover { color: var(--brand-bright); }
@media (max-width: 600px) {
.lg-topbar { padding: 14px 18px; }
}
/* ============ MAIN SHELL — centered card layout ============ */
.lg-shell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px 60px;
width: 100%;
max-width: 480px;
margin: 0 auto;
box-sizing: border-box;
}
/* Brand intro above the card */
.lg-intro {
text-align: center;
margin-bottom: 26px;
width: 100%;
}
.lg-intro-eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--brand-bright);
text-transform: uppercase;
margin-bottom: 12px;
}
.lg-intro-title {
font-family: var(--serif);
font-weight: 600;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 12px;
}
.lg-intro-title em {
font-style: italic;
color: var(--brand-bright);
font-weight: 600;
}
@media (max-width: 600px) {
.lg-intro-title { font-size: 28px; }
}
.lg-intro-deck {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 auto;
max-width: 360px;
}
/* ============ THE AUTH CARD ============ */
.lg-card {
width: 100%;
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card-hover);
overflow: hidden;
}
/* Banner row at top of card (signed-out / next= info) */
.lg-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
}
.lg-banner-success {
background: rgba(0, 196, 140, 0.06);
color: #047857;
border-bottom-color: rgba(0, 196, 140, 0.20);
}
.lg-banner-info {
background: rgba(45, 127, 255, 0.05);
color: var(--ink-soft);
border-bottom-color: rgba(45, 127, 255, 0.18);
}
.lg-banner-icon {
font-size: 16px;
flex-shrink: 0;
font-weight: 700;
}
.lg-banner-success .lg-banner-icon { color: var(--filling-green); }
.lg-banner-body { flex: 1; min-width: 0; }
/* ============ TABS ============ */
.lg-tabs {
display: flex;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
}
.lg-tab {
flex: 1;
padding: 16px 0;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink-faint);
cursor: pointer;
border: 0;
background: transparent;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
text-align: center;
}
.lg-tab:hover { color: var(--ink-soft); }
.lg-tab-active {
color: var(--ink);
border-bottom-color: var(--brand-bright);
}
/* ============ FORM ============ */
.lg-form {
padding: 26px 24px 24px;
}
.lg-label {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin: 4px 0 6px;
}
.lg-input {
width: 100%;
height: 44px;
padding: 0 14px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
box-sizing: border-box;
margin-bottom: 16px;
}
.lg-input:focus {
border-color: var(--brand-bright);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(45, 127, 255, 0.12);
}
.lg-input::placeholder {
color: var(--ink-faint);
}
/* Primary button — big, brand-blue gradient, the obvious action */
.lg-submit {
width: 100%;
height: 48px;
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
border: 0;
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.005em;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 10px rgba(45, 127, 255, 0.24);
margin-top: 4px;
}
.lg-submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(45, 127, 255, 0.32);
}
.lg-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Divider with centered label */
.lg-divider {
text-align: center;
margin: 18px 0;
position: relative;
}
.lg-divider::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: rgba(10, 30, 74, 0.10);
}
.lg-divider span {
position: relative;
background: var(--paper);
padding: 0 14px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ink-faint);
text-transform: uppercase;
}
/* Secondary button — tab-swap, outlined */
.lg-secondary {
width: 100%;
height: 44px;
background: var(--bg);
color: var(--ink-soft);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lg-secondary:hover {
border-color: var(--brand-bright);
color: var(--brand-bright);
background: rgba(45, 127, 255, 0.04);
}
/* ============ SENT CONFIRMATION (post-submit success state) ============ */
.lg-sent {
text-align: center;
padding: 14px 4px 8px;
}
.lg-sent-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(0, 196, 140, 0.10);
color: var(--filling-green);
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
}
.lg-sent-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 8px;
}
.lg-sent-deck {
font-size: 14px;
color: var(--ink-soft);
margin: 0 0 4px;
}
.lg-sent-email {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--brand-bright);
margin: 0 0 12px;
word-break: break-word;
}
.lg-sent-note {
font-size: 13px;
color: var(--ink-faint);
line-height: 1.55;
margin: 12px auto 0;
max-width: 320px;
}
/* ============ FOOTER (below the card) ============ */
.lg-foot {
text-align: center;
margin-top: 22px;
font-size: 12px;
color: var(--ink-faint);
line-height: 1.5;
}
.lg-foot a {
color: var(--ink-soft);
text-decoration: none;
border-bottom: 1px dotted rgba(10, 30, 74, 0.20);
transition: color 0.15s, border-color 0.15s;
}
.lg-foot a:hover {
color: var(--brand-bright);
border-bottom-color: var(--brand-bright);
}
/* ============ TOAST HOST (errors only — successes go to confirmation page) ============ */
.lg-toast-host {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.lg-toast {
background: var(--filling-rose);
color: #fff;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 10px 18px;
border-radius: var(--radius-tight);
box-shadow: 0 6px 24px rgba(244, 63, 94, 0.32);
pointer-events: auto;
}
/* =====================================================================
Poll Take (respondent paid quiz interface) — sister to capability
assessment but for poll responses. Single column, all questions
visible at once, scroll-and-answer flow. Rose pillar accent for
Polls, earner-green payout numbers (wallet-positive convention).
===================================================================== */
/* ============ EARNER HEADER — title + payout signal ============ */
.pt-earner {
display: grid;
grid-template-columns: 1fr auto;
gap: 22px;
background: var(--paper);
border: 1px solid rgba(244, 63, 94, 0.20);
border-left: 3px solid var(--filling-rose);
border-radius: var(--radius-card);
padding: 18px 22px;
margin: 22px auto 16px;
max-width: 720px;
align-items: center;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.pt-earner {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px 18px;
}
}
.pt-earner-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-rose);
text-transform: uppercase;
margin-bottom: 4px;
}
.pt-earner-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.25;
margin: 0 0 4px;
}
@media (max-width: 600px) {
.pt-earner-title { font-size: 19px; }
}
.pt-earner-meta {
font-size: 13px;
color: var(--ink-faint);
}
.pt-earner-meta strong {
font-family: var(--serif);
font-weight: 600;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: -0.005em;
}
/* Right side: payout block (earner-green, the wallet-positive anchor) */
.pt-earner-right {
text-align: right;
border-left: 1px solid rgba(10, 30, 74, 0.08);
padding-left: 20px;
}
@media (max-width: 600px) {
.pt-earner-right {
text-align: left;
border-left: 0;
border-top: 1px solid rgba(10, 30, 74, 0.08);
padding-left: 0;
padding-top: 12px;
}
}
.pt-earner-pay-eyebrow {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 4px;
}
.pt-earner-pay {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 2px;
line-height: 1;
}
@media (max-width: 600px) {
.pt-earner-pay { justify-content: flex-start; }
}
.pt-earner-pay-prefix {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--filling-green);
}
.pt-earner-pay-num {
font-family: var(--serif);
font-weight: 700;
font-size: 30px;
letter-spacing: -0.025em;
color: var(--filling-green);
}
.pt-earner-pay-fee {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-faint);
margin-top: 4px;
}
/* ============ DESCRIPTION ============ */
.pt-description {
max-width: 720px;
margin: 0 auto 14px;
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
padding: 0 22px;
}
/* ============ QUALITY REMINDER ============ */
.pt-quality-note {
max-width: 720px;
margin: 0 auto 22px;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
background: rgba(45, 127, 255, 0.04);
border: 1px solid rgba(45, 127, 255, 0.18);
border-radius: var(--radius-tight);
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
}
.pt-quality-icon {
font-size: 16px;
flex-shrink: 0;
line-height: 1.4;
}
.pt-quality-body {
flex: 1;
min-width: 0;
}
.pt-quality-body strong {
color: var(--ink);
font-weight: 600;
}
/* ============ QUESTION FORM ============ */
.pt-form {
max-width: 720px;
margin: 0 auto 36px;
padding: 0;
}
.pt-questions {
display: flex;
flex-direction: column;
gap: 14px;
}
.pt-loading,
.pt-empty {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-align: center;
padding: 40px 20px;
font-style: italic;
}
/* ============ QUESTION CARD ============ */
.pt-q {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 22px 24px;
box-shadow: var(--shadow-card);
transition: border-color 0.18s, box-shadow 0.18s;
}
.pt-q-error {
border-color: var(--filling-rose);
background: rgba(244, 63, 94, 0.03);
box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.10);
}
@media (max-width: 600px) {
.pt-q { padding: 18px 18px; }
}
.pt-q-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.pt-q-num {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-rose);
text-transform: uppercase;
}
.pt-q-required {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: rgba(244, 63, 94, 0.10);
color: var(--filling-rose);
border: 1px solid rgba(244, 63, 94, 0.28);
}
.pt-q-optional {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border: 1px solid rgba(10, 30, 74, 0.12);
}
.pt-q-text {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 16px;
}
.pt-q-body {
/* Container for the answer interface */
}
/* ============ CHOICES (single_select + multi_select) ============ */
.pt-choices {
display: flex;
flex-direction: column;
gap: 8px;
}
.pt-choice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--paper);
border: 1.5px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 14px;
text-align: left;
cursor: pointer;
transition: all 0.15s;
width: 100%;
color: var(--ink);
line-height: 1.45;
}
.pt-choice:hover {
border-color: rgba(244, 63, 94, 0.40);
background: rgba(244, 63, 94, 0.03);
}
/* Letter stamp on the left (single_select) */
.pt-choice-letter {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
min-width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--ink-faint);
flex-shrink: 0;
transition: all 0.15s;
}
/* Checkbox stamp (multi_select) */
.pt-choice-check {
width: 18px;
min-width: 18px;
height: 18px;
border-radius: 4px;
border: 1.5px solid rgba(10, 30, 74, 0.20);
background: var(--bg);
flex-shrink: 0;
margin-top: 2px;
transition: all 0.15s;
position: relative;
}
.pt-choice-text {
flex: 1;
min-width: 0;
}
/* Picked state — rose accent (Polls pillar) */
.pt-choice-picked {
border-color: var(--filling-rose);
background: rgba(244, 63, 94, 0.06);
}
.pt-choice-picked .pt-choice-letter {
background: var(--filling-rose);
color: #fff;
border-color: var(--filling-rose);
}
.pt-choice-picked .pt-choice-check {
background: var(--filling-rose);
border-color: var(--filling-rose);
}
.pt-choice-picked .pt-choice-check::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: translate(-50%, -60%) rotate(45deg);
}
.pt-choice-hint {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 4px;
}
/* ============ FREE TEXT (textarea + char counter) ============ */
.pt-textarea {
width: 100%;
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
border: 1.5px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
padding: 12px 14px;
resize: vertical;
min-height: 100px;
max-height: 400px;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pt-textarea:focus {
outline: none;
border-color: var(--filling-rose);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.10);
}
.pt-char-count {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-faint);
margin-top: 6px;
text-align: right;
}
.pt-char-count-short {
color: var(--filling-rose);
font-weight: 600;
}
/* ============ STAR RATING (rating_1_5) ============ */
.pt-stars {
display: flex;
gap: 6px;
align-items: center;
user-select: none;
flex-wrap: wrap;
}
.pt-stars span[data-s] {
font-size: 32px;
line-height: 1;
color: rgba(10, 30, 74, 0.18);
cursor: pointer;
transition: color 0.15s, transform 0.15s;
padding: 4px 2px;
}
.pt-stars span[data-s]:hover {
color: rgba(244, 63, 94, 0.40);
transform: scale(1.05);
}
.pt-stars span[data-s].pt-star-lit {
color: var(--filling-rose);
}
.pt-stars-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.10em;
color: var(--ink-faint);
text-transform: uppercase;
margin-left: 8px;
align-self: center;
}
/* ============ SUBMIT BUTTON ============ */
.pt-submit {
display: flex;
width: 100%;
margin-top: 20px;
padding: 16px 22px;
background: linear-gradient(135deg, var(--filling-rose) 0%, #e11d48 100%);
color: #fff;
border: 0;
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 10px;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 10px rgba(244, 63, 94, 0.28);
}
.pt-submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(244, 63, 94, 0.36);
}
.pt-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.pt-submit-text {
font-weight: 600;
letter-spacing: 0.005em;
}
.pt-submit-amount {
font-family: var(--serif);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.015em;
background: rgba(255, 255, 255, 0.14);
padding: 4px 12px;
border-radius: 20px;
}
/* ============ THANKS CARD (post-submit) ============ */
.pt-thanks {
max-width: 540px;
margin: 22px auto 36px;
background: var(--paper);
border: 1px solid rgba(0, 196, 140, 0.20);
border-radius: var(--radius-card);
padding: 44px 36px 32px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
background: linear-gradient(180deg, rgba(0, 196, 140, 0.04) 0%, var(--paper) 30%);
}
.pt-thanks-stripe {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--filling-green);
}
.pt-thanks-art {
font-size: 56px;
line-height: 1;
margin-bottom: 14px;
}
.pt-thanks-head {
font-family: var(--serif);
font-weight: 600;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 14px;
line-height: 1.2;
}
@media (max-width: 600px) {
.pt-thanks-head { font-size: 22px; }
}
.pt-thanks-payout {
display: flex;
align-items: baseline;
justify-content: center;
gap: 3px;
line-height: 1;
margin: 8px 0 4px;
}
.pt-thanks-payout-prefix {
font-family: var(--mono);
font-size: 26px;
font-weight: 700;
color: var(--filling-green);
}
.pt-thanks-payout-num {
font-family: var(--serif);
font-weight: 700;
font-size: 56px;
letter-spacing: -0.025em;
color: var(--filling-green);
}
@media (max-width: 600px) {
.pt-thanks-payout-num { font-size: 44px; }
.pt-thanks-payout-prefix { font-size: 22px; }
}
.pt-thanks-payout-note {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 16px;
}
.pt-thanks-no-pay {
text-transform: none;
font-style: italic;
color: var(--ink-soft);
font-size: 13px;
letter-spacing: 0.02em;
margin-top: 12px;
}
.pt-thanks-flagged {
background: rgba(255, 140, 0, 0.06);
border: 1px solid rgba(255, 140, 0, 0.24);
border-radius: var(--radius-tight);
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
color: #92400e;
margin: 14px 0;
text-align: left;
}
.pt-thanks-flagged strong {
color: #78350f;
font-weight: 600;
}
.pt-thanks-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.pt-thanks-primary,
.pt-thanks-secondary {
display: inline-flex;
align-items: center;
padding: 11px 22px;
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.pt-thanks-primary {
background: var(--filling-rose);
color: #fff;
box-shadow: 0 2px 8px rgba(244, 63, 94, 0.24);
}
.pt-thanks-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(244, 63, 94, 0.32);
background: #e11d48;
}
.pt-thanks-secondary {
background: var(--paper);
color: var(--ink-soft);
border: 1px solid rgba(10, 30, 74, 0.14);
}
.pt-thanks-secondary:hover {
border-color: var(--filling-rose);
color: var(--filling-rose);
}
/* =====================================================================
My Responses (respondent earner ledger) — Polls earner-side surface.
Sister to my_jobs (Recruiting earner) and badges (Capabilities earner).
Bank-grade earnings ledger: KPI strip, filter pills, dense table
with rose pillar accent and earner-green payouts.
===================================================================== */
/* ============ KPI STRIP — 4 cards across the top ============ */
.mr-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 18px 0 14px;
}
@media (max-width: 900px) {
.mr-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.mr-kpis { grid-template-columns: 1fr; }
}
.mr-kpi {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 16px 18px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
/* The "Lifetime earned" KPI gets earner-green treatment so it visually
anchors as the wallet-positive number — same convention as the
earner header on poll_take and the thanks card payout */
.mr-kpi-earned {
border-left: 3px solid var(--filling-green);
background: linear-gradient(135deg, rgba(0, 196, 140, 0.04) 0%, var(--paper) 60%);
}
.mr-kpi-earned .mr-kpi-eyebrow {
color: var(--filling-green);
}
.mr-kpi-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 8px;
}
.mr-kpi-value {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
margin-bottom: 4px;
}
.mr-kpi-value.mono {
font-family: var(--serif); /* keep serif for big numbers — bank statement aesthetic */
font-weight: 700;
}
.mr-kpi-earned .mr-kpi-value { color: var(--filling-green); }
@media (max-width: 600px) {
.mr-kpi-value { font-size: 26px; }
}
.mr-kpi-deck {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
line-height: 1.4;
margin-top: auto;
padding-top: 6px;
}
/* ============ FILTER PILLS ============ */
.mr-filters {
display: flex;
gap: 6px;
margin: 12px 0 14px;
flex-wrap: wrap;
}
.mr-filter {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 30, 74, 0.12);
background: var(--paper);
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
}
.mr-filter:hover {
border-color: rgba(244, 63, 94, 0.30);
color: var(--ink);
}
.mr-filter-active {
background: var(--filling-rose);
color: #fff;
border-color: var(--filling-rose);
box-shadow: 0 2px 6px rgba(244, 63, 94, 0.22);
}
.mr-filter-active:hover {
background: #e11d48;
border-color: #e11d48;
color: #fff;
}
/* ============ LEDGER PANEL ============ */
.mr-ledger {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: 28px;
}
.mr-loading {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-align: center;
padding: 60px 20px;
font-style: italic;
}
/* ============ TABLE ============ */
.mr-table-wrap {
overflow-x: auto;
}
.mr-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 720px;
}
.mr-table thead th {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
text-align: left;
padding: 14px 18px 10px;
border-bottom: 1px solid rgba(10, 30, 74, 0.10);
background: var(--bg);
}
.mr-table thead th.mr-col-pay {
text-align: right;
}
.mr-table tbody tr {
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
transition: background 0.12s;
}
.mr-table tbody tr:last-child {
border-bottom: 0;
}
.mr-table tbody tr:hover {
background: rgba(244, 63, 94, 0.02);
}
.mr-table tbody td {
padding: 12px 18px;
vertical-align: middle;
color: var(--ink);
}
/* Column widths + treatments */
.mr-cell-when {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.02em;
white-space: nowrap;
width: 1%;
}
.mr-cell-poll {
max-width: 320px;
}
.mr-poll-link {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.mr-poll-link:hover {
color: var(--filling-rose);
border-bottom-color: var(--filling-rose);
}
.mr-cell-by {
color: var(--ink-soft);
font-size: 13px;
white-space: nowrap;
}
.mr-cell-status {
width: 1%;
white-space: nowrap;
}
.mr-cell-pay {
text-align: right;
font-family: var(--mono);
font-size: 14px;
white-space: nowrap;
width: 1%;
}
/* Payout treatments */
.mr-pay-positive {
display: inline-flex;
align-items: baseline;
gap: 1px;
color: var(--filling-green);
font-weight: 700;
letter-spacing: -0.005em;
}
.mr-pay-prefix {
font-size: 12px;
font-weight: 700;
color: var(--filling-green);
}
.mr-pay-zero {
font-family: var(--mono);
color: var(--ink-faint);
font-size: 14px;
}
/* ============ STATUS BADGES ============ */
.mr-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
}
.mr-badge-completed {
background: rgba(0, 196, 140, 0.10);
color: var(--filling-green);
border-color: rgba(0, 196, 140, 0.28);
}
.mr-badge-in-progress {
background: rgba(45, 127, 255, 0.08);
color: var(--brand-bright);
border-color: rgba(45, 127, 255, 0.28);
}
.mr-badge-flagged {
background: rgba(255, 140, 0, 0.10);
color: #b45309;
border-color: rgba(255, 140, 0, 0.30);
}
.mr-badge-abandoned {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.14);
}
/* ============ EMPTY STATES ============ */
.mr-empty {
padding: 60px 30px;
text-align: center;
}
.mr-empty-art {
font-size: 48px;
line-height: 1;
margin-bottom: 16px;
}
.mr-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 10px;
}
.mr-empty-deck {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 20px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.mr-empty-cta {
display: inline-flex;
align-items: center;
padding: 11px 22px;
background: var(--filling-rose);
color: #fff;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-tight);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
box-shadow: 0 2px 8px rgba(244, 63, 94, 0.24);
}
.mr-empty-cta:hover {
background: #e11d48;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(244, 63, 94, 0.32);
}
/* =====================================================================
My Capabilities (learner attempt ledger) — Capabilities consumer-side.
Sister to my_responses (Polls earner ledger), but the chromatic
convention is different: this page uses VIOLET for the achievement
anchor (badges earned), not earner-green, because the wallet-positive
moment for this pillar is the badge — not money received.
===================================================================== */
/* ============ KPI STRIP ============ */
.mc-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 18px 0 14px;
}
@media (max-width: 900px) {
.mc-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.mc-kpis { grid-template-columns: 1fr; }
}
.mc-kpi {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 16px 18px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
/* "Badges earned" gets violet treatment — the achievement anchor */
.mc-kpi-badges {
border-left: 3px solid var(--filling-violet);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, var(--paper) 60%);
}
.mc-kpi-badges .mc-kpi-eyebrow {
color: var(--filling-violet);
}
.mc-kpi-badges .mc-kpi-value {
color: var(--filling-violet);
}
.mc-kpi-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 8px;
}
.mc-kpi-value {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
margin-bottom: 4px;
}
.mc-kpi-value.mono {
font-family: var(--serif);
font-weight: 700;
}
@media (max-width: 600px) {
.mc-kpi-value { font-size: 26px; }
}
.mc-kpi-deck {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
line-height: 1.4;
margin-top: auto;
padding-top: 6px;
}
/* ============ FILTER PILLS — violet active state ============ */
.mc-filters {
display: flex;
gap: 6px;
margin: 12px 0 14px;
flex-wrap: wrap;
}
.mc-filter {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 30, 74, 0.12);
background: var(--paper);
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
}
.mc-filter:hover {
border-color: rgba(139, 92, 246, 0.30);
color: var(--ink);
}
.mc-filter-active {
background: var(--filling-violet);
color: #fff;
border-color: var(--filling-violet);
box-shadow: 0 2px 6px rgba(139, 92, 246, 0.24);
}
.mc-filter-active:hover {
background: #7c3aed;
border-color: #7c3aed;
color: #fff;
}
/* ============ LEDGER PANEL ============ */
.mc-ledger {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: 28px;
}
.mc-loading {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-align: center;
padding: 60px 20px;
font-style: italic;
}
/* ============ TABLE ============ */
.mc-table-wrap {
overflow-x: auto;
}
.mc-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 760px;
}
.mc-table thead th {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
text-align: left;
padding: 14px 18px 10px;
border-bottom: 1px solid rgba(10, 30, 74, 0.10);
background: var(--bg);
}
.mc-table thead th.mc-col-paid {
text-align: right;
}
.mc-table tbody tr {
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
transition: background 0.12s;
}
.mc-table tbody tr:last-child {
border-bottom: 0;
}
.mc-table tbody tr:hover {
background: rgba(139, 92, 246, 0.03);
}
.mc-table tbody td {
padding: 12px 18px;
vertical-align: middle;
color: var(--ink);
}
/* Column treatments */
.mc-cell-when {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.02em;
white-space: nowrap;
width: 1%;
}
.mc-cell-cap {
max-width: 320px;
display: flex;
align-items: baseline;
gap: 8px;
}
.mc-cap-link {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
.mc-cap-link:hover {
color: var(--filling-violet);
border-bottom-color: var(--filling-violet);
}
.mc-cap-version {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--ink-faint);
background: rgba(10, 30, 74, 0.05);
padding: 1px 6px;
border-radius: 3px;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.mc-cell-by {
color: var(--ink-soft);
font-size: 13px;
white-space: nowrap;
}
/* Score cell — pct + fraction stacked or inline */
.mc-cell-score {
width: 1%;
white-space: nowrap;
}
.mc-score {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.mc-score-pct {
font-family: var(--serif);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.015em;
}
.mc-score-frac {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.02em;
}
.mc-score-pass .mc-score-pct {
color: var(--filling-violet);
}
.mc-score-fail .mc-score-pct {
color: var(--ink-soft);
}
.mc-score-na {
font-family: var(--mono);
color: var(--ink-faint);
font-size: 14px;
}
/* Status badges */
.mc-cell-status {
width: 1%;
white-space: nowrap;
}
.mc-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
}
.mc-badge-pass {
background: rgba(139, 92, 246, 0.10);
color: var(--filling-violet);
border-color: rgba(139, 92, 246, 0.30);
}
.mc-badge-fail {
background: rgba(10, 30, 74, 0.05);
color: var(--ink-soft);
border-color: rgba(10, 30, 74, 0.14);
}
.mc-badge-progress {
background: rgba(45, 127, 255, 0.08);
color: var(--brand-bright);
border-color: rgba(45, 127, 255, 0.28);
}
.mc-badge-abandoned {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.14);
}
/* Paid column — modest treatment, this is consumption not earnings */
.mc-cell-paid {
text-align: right;
font-size: 13px;
color: var(--ink-soft);
white-space: nowrap;
width: 1%;
}
/* ============ EMPTY STATES ============ */
.mc-empty {
padding: 60px 30px;
text-align: center;
}
.mc-empty-art {
font-size: 48px;
line-height: 1;
margin-bottom: 16px;
}
.mc-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 10px;
}
.mc-empty-deck {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 20px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.mc-empty-cta {
display: inline-flex;
align-items: center;
padding: 11px 22px;
background: var(--filling-violet);
color: #fff;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-tight);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.24);
}
.mc-empty-cta:hover {
background: #7c3aed;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(139, 92, 246, 0.32);
}
/* =====================================================================
Profile Edit (account settings) — cross-pillar surface, brand-blue
chrome. Bank-grade settings: sectioned form, sticky action bar,
live preview for the image URL. Single column, ≤720px wide for
comfortable form-filling line lengths.
===================================================================== */
.pe-shell {
max-width: 720px;
margin: 18px auto 110px; /* bottom margin clears the sticky action bar */
padding: 0 4px;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 760px) {
.pe-shell { padding: 0 14px; }
}
/* ============ CAPABLE BADGES CALLOUT ============ */
.pe-callout {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, var(--paper) 60%);
border: 1px solid rgba(139, 92, 246, 0.20);
border-left: 3px solid var(--filling-violet);
border-radius: var(--radius-card);
padding: 16px 20px;
margin-bottom: 22px;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.pe-callout {
flex-wrap: wrap;
gap: 10px;
padding: 14px 16px;
}
}
.pe-callout-art {
font-size: 32px;
line-height: 1;
flex-shrink: 0;
}
.pe-callout-body {
flex: 1;
min-width: 0;
}
.pe-callout-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-violet);
text-transform: uppercase;
margin-bottom: 2px;
}
.pe-callout-title {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.3;
margin-bottom: 4px;
}
.pe-callout-deck {
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
}
.pe-callout-cta {
display: inline-flex;
align-items: center;
padding: 9px 16px;
background: var(--filling-violet);
color: #fff;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-tight);
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(139, 92, 246, 0.20);
}
.pe-callout-cta:hover {
background: #7c3aed;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.30);
}
@media (max-width: 600px) {
.pe-callout-cta { width: 100%; justify-content: center; }
}
/* ============ FORM SECTIONS ============ */
.pe-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.pe-section {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 22px 24px 24px;
box-shadow: var(--shadow-card);
}
@media (max-width: 600px) {
.pe-section { padding: 18px 18px; }
}
.pe-section-head {
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
}
.pe-section-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--brand-bright);
text-transform: uppercase;
margin-bottom: 4px;
}
.pe-section-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.2;
}
.pe-section-deck {
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
.pe-field-group {
display: flex;
flex-direction: column;
gap: 18px;
}
.pe-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 600px) {
.pe-field-row { grid-template-columns: 1fr; }
}
/* ============ FIELDS ============ */
.pe-field {
display: flex;
flex-direction: column;
min-width: 0; /* lets inputs shrink in grids */
}
.pe-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 6px;
}
.pe-input {
width: 100%;
height: 42px;
padding: 0 14px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
box-sizing: border-box;
}
.pe-input:focus {
border-color: var(--brand-bright);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(45, 127, 255, 0.12);
}
.pe-input::placeholder { color: var(--ink-faint); }
.pe-textarea {
width: 100%;
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
padding: 12px 14px;
resize: vertical;
min-height: 120px;
max-height: 400px;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pe-textarea:focus {
outline: none;
border-color: var(--brand-bright);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(45, 127, 255, 0.12);
}
.pe-hint {
font-size: 12px;
line-height: 1.5;
color: var(--ink-faint);
margin-top: 6px;
}
/* Input with currency-symbol prefix */
.pe-input-prefix {
position: relative;
}
.pe-input-prefix-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink-faint);
pointer-events: none;
z-index: 1;
}
.pe-input-prefix .pe-input {
padding-left: 28px;
}
/* ============ PROFILE IMAGE PREVIEW ============ */
.pe-field-image .pe-image-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.pe-image-preview {
width: 64px;
height: 64px;
min-width: 64px;
border-radius: 50%;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.14);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.18s;
position: relative;
}
.pe-image-preview-loaded {
border-color: var(--brand-bright);
}
.pe-image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pe-image-placeholder {
font-family: var(--serif);
font-weight: 700;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink-faint);
}
.pe-image-placeholder-error {
font-size: 24px;
color: var(--filling-amber, #ff8c00);
}
.pe-image-input-wrap {
flex: 1;
min-width: 0;
}
/* ============ CATEGORY CHIPS ============ */
.pe-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
min-height: 50px;
align-items: flex-start;
}
.pe-categories-loading {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-faint);
font-style: italic;
padding: 8px 4px;
}
.pe-cat-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.12);
border-radius: 999px;
cursor: pointer;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--ink-soft);
transition: all 0.15s;
user-select: none;
}
.pe-cat-chip:hover {
border-color: rgba(45, 127, 255, 0.30);
color: var(--ink);
}
.pe-cat-chip input {
display: none; /* the chip itself is the visible affordance */
}
.pe-cat-chip-on {
background: var(--brand-bright);
color: #fff;
border-color: var(--brand-bright);
}
.pe-cat-chip-on:hover {
background: var(--brand-mid);
border-color: var(--brand-mid);
color: #fff;
}
/* ============ TOGGLE SWITCHES ============ */
.pe-toggle {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: var(--radius-tight);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.pe-toggle:hover {
border-color: rgba(45, 127, 255, 0.30);
}
.pe-toggle-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pe-toggle-track {
width: 36px;
height: 20px;
border-radius: 999px;
background: rgba(10, 30, 74, 0.18);
position: relative;
flex-shrink: 0;
margin-top: 2px;
transition: background 0.18s;
}
.pe-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
transition: transform 0.18s, box-shadow 0.18s;
box-shadow: 0 1px 2px rgba(10, 30, 74, 0.22);
}
.pe-toggle-input:checked + .pe-toggle-track {
background: var(--brand-bright);
}
.pe-toggle-input:checked + .pe-toggle-track .pe-toggle-thumb {
transform: translateX(16px);
box-shadow: 0 1px 3px rgba(10, 30, 74, 0.30);
}
.pe-toggle-body {
flex: 1;
min-width: 0;
}
.pe-toggle-title {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
line-height: 1.35;
margin-bottom: 3px;
}
.pe-toggle-deck {
font-size: 12px;
line-height: 1.5;
color: var(--ink-faint);
}
/* ============ STICKY ACTION BAR ============ */
.pe-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(245, 241, 232, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(10, 30, 74, 0.10);
padding: 14px 0;
z-index: 30;
box-shadow: 0 -4px 20px rgba(10, 30, 74, 0.06);
}
.pe-actions-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
@media (max-width: 600px) {
.pe-actions-inner { padding: 0 16px; }
}
.pe-btn {
display: inline-flex;
align-items: center;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
padding: 11px 22px;
border-radius: var(--radius-tight);
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: all 0.15s;
}
.pe-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.pe-btn-ghost {
background: var(--paper);
color: var(--ink-soft);
border-color: rgba(10, 30, 74, 0.14);
}
.pe-btn-ghost:hover {
border-color: var(--brand-bright);
color: var(--brand-bright);
}
.pe-btn-primary {
background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-mid) 100%);
color: #fff;
border-color: var(--brand-bright);
box-shadow: 0 2px 8px rgba(45, 127, 255, 0.22);
}
.pe-btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(45, 127, 255, 0.32);
}
/* =====================================================================
Purchases (buyer ledger) — Store consumer-side surface.
Sister to my_responses, my_capabilities, my_jobs. Amber pillar
accent (Store), no earner-green (this is consumer side).
Consists of: success banner, KPI strip, filter pills, ledger
table, and a receipt-style detail modal.
===================================================================== */
/* ============ JUST-PURCHASED SUCCESS BANNER ============ */
.pu-success {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(135deg, rgba(0, 196, 140, 0.06) 0%, var(--paper) 60%);
border: 1px solid rgba(0, 196, 140, 0.24);
border-left: 3px solid var(--filling-green);
border-radius: var(--radius-card);
padding: 14px 18px;
margin: 16px 0;
box-shadow: var(--shadow-card);
}
.pu-success-icon {
font-size: 22px;
font-weight: 700;
color: var(--filling-green);
line-height: 1.2;
flex-shrink: 0;
}
.pu-success-body { flex: 1; min-width: 0; }
.pu-success-title {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 2px;
}
.pu-success-deck {
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
}
.pu-success-code {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: rgba(10, 30, 74, 0.05);
padding: 1px 6px;
border-radius: 3px;
}
/* ============ KPI STRIP ============ */
.pu-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 14px 0;
}
@media (max-width: 900px) {
.pu-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.pu-kpis { grid-template-columns: 1fr; }
}
.pu-kpi {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 16px 18px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
/* "Lifetime spent" — modest amber treatment, NOT a celebrated number.
This is consumption signal, not earnings. Just a left-stripe and
an amber eyebrow color. The number itself stays ink-default. */
.pu-kpi-spent {
border-left: 3px solid var(--filling-amber);
}
.pu-kpi-spent .pu-kpi-eyebrow {
color: var(--filling-amber);
}
.pu-kpi-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 8px;
}
.pu-kpi-value {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
margin-bottom: 4px;
}
.pu-kpi-value.mono {
font-family: var(--serif);
font-weight: 700;
}
@media (max-width: 600px) {
.pu-kpi-value { font-size: 26px; }
}
.pu-kpi-deck {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
line-height: 1.4;
margin-top: auto;
padding-top: 6px;
}
/* ============ FILTER PILLS — amber active state ============ */
.pu-filters {
display: flex;
gap: 6px;
margin: 12px 0 14px;
flex-wrap: wrap;
}
.pu-filter {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 30, 74, 0.12);
background: var(--paper);
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
}
.pu-filter:hover {
border-color: rgba(255, 140, 0, 0.34);
color: var(--ink);
}
.pu-filter-active {
background: var(--filling-amber);
color: #fff;
border-color: var(--filling-amber);
box-shadow: 0 2px 6px rgba(255, 140, 0, 0.26);
}
.pu-filter-active:hover {
background: #e07700;
border-color: #e07700;
color: #fff;
}
/* ============ LEDGER PANEL ============ */
.pu-ledger {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: 28px;
}
.pu-loading {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-align: center;
padding: 60px 20px;
font-style: italic;
}
/* ============ TABLE ============ */
.pu-table-wrap {
overflow-x: auto;
}
.pu-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 760px;
}
.pu-table thead th {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
text-align: left;
padding: 14px 18px 10px;
border-bottom: 1px solid rgba(10, 30, 74, 0.10);
background: var(--bg);
}
.pu-table thead th.pu-col-total {
text-align: right;
}
.pu-table thead th.pu-col-act {
text-align: right;
width: 1%;
}
.pu-table tbody tr {
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
transition: background 0.12s;
}
.pu-table tbody tr:last-child { border-bottom: 0; }
.pu-table tbody tr:hover {
background: rgba(255, 140, 0, 0.025);
}
.pu-table tbody td {
padding: 12px 18px;
vertical-align: middle;
color: var(--ink);
}
/* Column treatments */
.pu-cell-when {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.02em;
white-space: nowrap;
width: 1%;
}
.pu-cell-item { max-width: 320px; }
.pu-item-name {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pu-qty {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
color: var(--ink-faint);
}
.pu-item-type {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
color: var(--ink-faint);
letter-spacing: 0.10em;
margin-top: 2px;
}
.pu-cell-code {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-soft);
white-space: nowrap;
}
.pu-cell-total {
text-align: right;
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
width: 1%;
}
.pu-cell-status {
width: 1%;
white-space: nowrap;
}
.pu-cell-act {
text-align: right;
width: 1%;
}
.pu-row-btn {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
background: var(--paper);
color: var(--ink-soft);
border: 1px solid rgba(10, 30, 74, 0.14);
cursor: pointer;
transition: all 0.15s;
}
.pu-row-btn:hover {
background: var(--filling-amber);
color: #fff;
border-color: var(--filling-amber);
}
/* ============ STATUS BADGES ============ */
.pu-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
}
.pu-badge-pending {
background: rgba(255, 140, 0, 0.10);
color: #b45309;
border-color: rgba(255, 140, 0, 0.30);
}
.pu-badge-paid {
background: rgba(45, 127, 255, 0.08);
color: var(--brand-bright);
border-color: rgba(45, 127, 255, 0.28);
}
.pu-badge-fulfilled {
background: rgba(0, 196, 140, 0.10);
color: var(--filling-green);
border-color: rgba(0, 196, 140, 0.28);
}
.pu-badge-refunded {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.14);
}
.pu-badge-cancelled {
background: rgba(244, 63, 94, 0.06);
color: var(--filling-rose);
border-color: rgba(244, 63, 94, 0.22);
}
/* ============ EMPTY STATES ============ */
.pu-empty {
padding: 60px 30px;
text-align: center;
}
.pu-empty-art {
font-size: 48px;
line-height: 1;
margin-bottom: 16px;
}
.pu-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 10px;
}
.pu-empty-deck {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 20px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.pu-empty-cta {
display: inline-flex;
align-items: center;
padding: 11px 22px;
background: var(--filling-amber);
color: #fff;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-tight);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
box-shadow: 0 2px 8px rgba(255, 140, 0, 0.26);
}
.pu-empty-cta:hover {
background: #e07700;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(255, 140, 0, 0.34);
}
/* ============ RECEIPT MODAL ============ */
.pu-receipt-card {
max-width: 480px;
}
.pu-receipt-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
background: var(--bg);
}
.pu-receipt-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--filling-amber);
text-transform: uppercase;
}
.pu-receipt {
padding: 22px 22px 24px;
}
.pu-receipt-meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(10, 30, 74, 0.16);
}
.pu-receipt-code {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.04em;
word-break: break-all;
flex: 1;
}
.pu-receipt-meta-right {
text-align: right;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
flex-shrink: 0;
}
.pu-receipt-date {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.02em;
}
.pu-receipt-lines {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.pu-receipt-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 13px;
}
.pu-receipt-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.10em;
color: var(--ink-faint);
text-transform: uppercase;
flex-shrink: 0;
}
.pu-receipt-value {
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
text-align: right;
word-break: break-word;
}
.pu-receipt-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 14px;
border-top: 2px solid var(--ink);
margin-top: 4px;
margin-bottom: 18px;
}
.pu-receipt-total-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--ink);
text-transform: uppercase;
}
.pu-receipt-total-value {
font-family: var(--serif);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--ink);
}
.pu-receipt-callout {
background: linear-gradient(135deg, rgba(0, 196, 140, 0.06) 0%, var(--paper) 60%);
border: 1px solid rgba(0, 196, 140, 0.24);
border-left: 3px solid var(--filling-green);
border-radius: var(--radius-tight);
padding: 12px 14px;
margin: 12px 0;
}
.pu-receipt-callout-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-green);
text-transform: uppercase;
margin-bottom: 6px;
}
.pu-receipt-link {
font-family: var(--mono);
font-size: 12px;
color: var(--brand-bright);
text-decoration: none;
word-break: break-all;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
}
.pu-receipt-link:hover {
border-bottom-color: var(--brand-bright);
}
.pu-receipt-block {
margin: 12px 0;
padding: 12px 14px;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-tight);
}
.pu-receipt-block-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 6px;
}
.pu-receipt-block-body {
font-size: 13px;
line-height: 1.55;
color: var(--ink);
white-space: pre-line;
word-break: break-word;
}
/* =====================================================================
Study Partner Widget — context-aware metered study assistant for the
Capabilities pillar. Sibling of the Concierge widget (.cw-*) but in
its own .sp-* namespace so both can coexist on a page. Violet pillar
accent (Capabilities). Includes a metering line that shows per-turn
cost — transparency about the compute economy.
===================================================================== */
/* Toggle button — collapsed state */
.sp-toggle {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--filling-violet) 0%, #7c3aed 100%);
color: #fff;
border: 0;
cursor: pointer;
z-index: 48;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 14px rgba(139, 92, 246, 0.34),
0 2px 4px rgba(10, 30, 74, 0.10);
transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
padding: 0;
}
.sp-toggle:hover {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 8px 24px rgba(139, 92, 246, 0.44),
0 3px 6px rgba(10, 30, 74, 0.14);
}
.sp-toggle:active { transform: translateY(0) scale(0.98); }
.sp-toggle-glyph {
display: flex;
align-items: center;
justify-content: center;
}
.sp-toggle-hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.8) translateY(8px);
}
@media (max-width: 640px) {
.sp-toggle { width: 48px; height: 48px; bottom: 16px; right: 16px; }
}
/* Panel — expanded state */
.sp-panel {
position: fixed;
bottom: 20px;
right: 20px;
width: 380px;
height: 560px;
max-height: calc(100vh - 40px);
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: 16px;
box-shadow:
0 16px 48px rgba(10, 30, 74, 0.18),
0 4px 12px rgba(10, 30, 74, 0.10);
z-index: 49;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.96);
pointer-events: none;
transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.sp-panel-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
@media (max-width: 640px) {
.sp-panel {
width: calc(100vw - 24px);
height: calc(100vh - 100px);
bottom: 12px;
right: 12px;
left: 12px;
border-radius: 14px;
}
}
/* Header */
.sp-header {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid rgba(10, 30, 74, 0.08);
background: var(--bg);
}
.sp-header-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.sp-header-mark {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--filling-violet) 0%, #7c3aed 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sp-header-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--ink);
line-height: 1.2;
}
.sp-header-context {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-faint);
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.sp-header-actions {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
}
.sp-header-btn {
width: 28px;
height: 28px;
border: 0;
background: transparent;
border-radius: 6px;
color: var(--ink-faint);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
padding: 0;
}
.sp-header-btn:hover {
background: rgba(10, 30, 74, 0.06);
color: var(--ink);
}
/* Conversation area */
.sp-conv {
flex: 1;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--paper);
}
/* Empty state */
.sp-empty {
margin: auto;
text-align: center;
padding: 18px 14px;
}
.sp-empty-glyph {
width: 56px;
height: 56px;
margin: 0 auto 12px;
border-radius: 50%;
background: rgba(139, 92, 246, 0.10);
color: var(--filling-violet);
display: flex;
align-items: center;
justify-content: center;
}
.sp-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 4px;
}
.sp-empty-deck {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.02em;
color: var(--ink-faint);
margin-bottom: 14px;
}
.sp-empty-prompts {
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-prompt {
text-align: left;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.10);
border-radius: 8px;
padding: 9px 12px;
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-soft);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sp-prompt:hover {
border-color: var(--filling-violet);
background: rgba(139, 92, 246, 0.04);
color: var(--ink);
}
/* Message bubbles */
.sp-msg {
display: flex;
gap: 10px;
align-items: flex-start;
}
.sp-msg-avatar {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 50%;
background: rgba(10, 30, 74, 0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.sp-msg-assistant .sp-msg-avatar {
background: linear-gradient(135deg, var(--filling-violet) 0%, #7c3aed 100%);
color: #fff;
font-family: var(--serif);
font-weight: 700;
}
.sp-msg-body {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
padding-top: 2px;
}
.sp-msg-body p { margin: 0 0 6px; }
.sp-msg-body p:last-child { margin-bottom: 0; }
.sp-msg-body strong { font-weight: 600; }
.sp-msg-body em { font-style: italic; }
.sp-msg-body code {
font-family: var(--mono);
font-size: 0.92em;
background: rgba(10, 30, 74, 0.06);
padding: 1px 5px;
border-radius: 3px;
}
/* Typing indicator */
.sp-typing {
display: inline-flex;
gap: 3px;
align-items: center;
padding: 5px 0;
}
.sp-typing i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-faint);
display: inline-block;
animation: sp-typing-bounce 1.4s infinite;
}
.sp-typing i:nth-child(2) { animation-delay: 0.2s; }
.sp-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes sp-typing-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-3px); opacity: 0.9; }
}
/* Compute-limit message (rendered inside an assistant bubble) */
.sp-limit {
background: rgba(255, 140, 0, 0.06);
border: 1px solid rgba(255, 140, 0, 0.26);
border-radius: 8px;
padding: 12px 14px;
}
.sp-limit-title {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
margin-bottom: 4px;
}
.sp-limit-deck {
font-size: 12px;
line-height: 1.5;
color: var(--ink-soft);
margin-bottom: 10px;
}
.sp-limit-cta {
display: inline-flex;
align-items: center;
padding: 7px 14px;
background: var(--filling-amber);
color: #fff;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
text-decoration: none;
border-radius: 6px;
transition: background 0.15s;
}
.sp-limit-cta:hover { background: #e07700; }
/* Metering line — between the conversation and the input bar */
.sp-meter {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.02em;
border-top: 1px solid rgba(10, 30, 74, 0.06);
}
.sp-meter-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.sp-meter-free {
background: rgba(0, 196, 140, 0.06);
color: #047857;
}
.sp-meter-free .sp-meter-dot { background: var(--filling-green); }
.sp-meter-credit {
background: rgba(139, 92, 246, 0.05);
color: var(--ink-soft);
}
.sp-meter-credit .sp-meter-dot { background: var(--filling-violet); }
.sp-meter strong { font-weight: 700; }
.sp-meter-sub {
color: var(--ink-faint);
font-weight: 400;
}
/* Input bar */
.sp-input-bar {
flex-shrink: 0;
display: flex;
gap: 6px;
align-items: flex-end;
padding: 10px;
border-top: 1px solid rgba(10, 30, 74, 0.08);
background: var(--bg);
}
.sp-input {
flex: 1;
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
color: var(--ink);
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: 8px;
padding: 8px 10px;
resize: none;
min-height: 36px;
max-height: 120px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-input:focus {
outline: none;
border-color: var(--filling-violet);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.sp-send {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--filling-violet);
color: #fff;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, transform 0.15s;
}
.sp-send:hover {
background: #7c3aed;
transform: translateY(-1px);
}
.sp-send:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* =====================================================================
Talent Offers — shared styles for My Offers (contractor) and Sent
Offers (recruiter). Cyan pillar accent (Recruiting). My Offers uses
a card layout (offers need room for the recruiter's message); Sent
Offers uses a dense table (recruiter is tracking many at a glance).
Both share .of-* primitives: KPIs, filter pills, badges, empty states.
===================================================================== */
/* ============ KPI STRIP ============ */
.of-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 18px 0 14px;
}
@media (max-width: 900px) { .of-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .of-kpis { grid-template-columns: 1fr; } }
.of-kpi {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
padding: 16px 18px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.of-kpi-pending {
border-left: 3px solid var(--filling-cyan, #00b8d9);
}
.of-kpi-pending .of-kpi-eyebrow { color: var(--filling-cyan, #00b8d9); }
.of-kpi-applied {
border-left: 3px solid var(--filling-green);
}
.of-kpi-applied .of-kpi-eyebrow { color: var(--filling-green); }
.of-kpi-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 8px;
}
.of-kpi-value {
font-family: var(--serif);
font-weight: 600;
font-size: 32px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
margin-bottom: 4px;
}
@media (max-width: 600px) { .of-kpi-value { font-size: 26px; } }
.of-kpi-deck {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
line-height: 1.4;
margin-top: auto;
padding-top: 6px;
}
/* ============ FILTER PILLS — cyan active ============ */
.of-filters {
display: flex;
gap: 6px;
margin: 12px 0 14px;
flex-wrap: wrap;
}
.of-filter {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 30, 74, 0.12);
background: var(--paper);
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
}
.of-filter:hover {
border-color: rgba(0, 184, 217, 0.36);
color: var(--ink);
}
.of-filter-active {
background: var(--filling-cyan, #00b8d9);
color: #fff;
border-color: var(--filling-cyan, #00b8d9);
box-shadow: 0 2px 6px rgba(0, 184, 217, 0.26);
}
.of-filter-active:hover {
background: #0e9cb8;
border-color: #0e9cb8;
color: #fff;
}
/* ============ STATUS BADGES (shared) ============ */
.of-badge {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.of-badge-new {
background: rgba(0, 184, 217, 0.10);
color: #0e7c8e;
border-color: rgba(0, 184, 217, 0.30);
}
.of-badge-viewed {
background: rgba(45, 127, 255, 0.08);
color: var(--brand-bright);
border-color: rgba(45, 127, 255, 0.26);
}
.of-badge-applied {
background: rgba(0, 196, 140, 0.10);
color: var(--filling-green);
border-color: rgba(0, 196, 140, 0.28);
}
.of-badge-declined {
background: rgba(244, 63, 94, 0.06);
color: var(--filling-rose);
border-color: rgba(244, 63, 94, 0.22);
}
.of-badge-withdrawn {
background: rgba(10, 30, 74, 0.06);
color: var(--ink-faint);
border-color: rgba(10, 30, 74, 0.14);
}
/* ============ LOADING + EMPTY (shared) ============ */
.of-loading {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-align: center;
padding: 60px 20px;
font-style: italic;
}
.of-empty {
padding: 56px 30px;
text-align: center;
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.of-empty-art { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.of-empty-title {
font-family: var(--serif);
font-weight: 600;
font-size: 21px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 9px;
}
.of-empty-deck {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 auto 18px;
max-width: 380px;
}
.of-empty-cta {
display: inline-flex;
align-items: center;
padding: 11px 22px;
background: var(--filling-cyan, #00b8d9);
color: #fff;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-tight);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
box-shadow: 0 2px 8px rgba(0, 184, 217, 0.26);
}
.of-empty-cta:hover {
background: #0e9cb8;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0, 184, 217, 0.34);
}
/* ============ MY OFFERS — card layout (contractor) ============ */
.of-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 28px;
}
.of-card {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-left: 3px solid rgba(10, 30, 74, 0.12);
border-radius: var(--radius-card);
padding: 18px 20px;
box-shadow: var(--shadow-card);
transition: border-color 0.15s;
}
/* Unactioned offers get a cyan edge so they stand out as needing attention */
.of-card-sent,
.of-card-viewed { border-left-color: var(--filling-cyan, #00b8d9); }
.of-card-applied { border-left-color: var(--filling-green); }
.of-card-declined { opacity: 0.72; }
.of-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.of-card-headline { min-width: 0; flex: 1; }
.of-card-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 4px;
}
.of-card-title {
font-family: var(--serif);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 4px;
line-height: 1.25;
}
.of-card-meta {
font-size: 13px;
color: var(--ink-soft);
}
.of-card-meta strong {
font-weight: 600;
color: var(--ink);
}
.of-card-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.of-card-pay {
font-family: var(--serif);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--ink);
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.1;
}
.of-card-pay-sub {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ink-faint);
text-transform: uppercase;
}
.of-card-message {
margin: 12px 0 4px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.07);
border-radius: var(--radius-tight);
}
.of-card-message-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 5px;
}
.of-card-message-body {
font-size: 13px;
line-height: 1.55;
color: var(--ink);
white-space: pre-line;
word-break: break-word;
}
.of-card-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 14px;
flex-wrap: wrap;
}
.of-btn {
display: inline-flex;
align-items: center;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
padding: 9px 16px;
border-radius: var(--radius-tight);
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: all 0.15s;
}
.of-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.of-btn-apply {
background: var(--filling-cyan, #00b8d9);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 184, 217, 0.24);
}
.of-btn-apply:hover {
background: #0e9cb8;
transform: translateY(-1px);
box-shadow: 0 5px 13px rgba(0, 184, 217, 0.32);
}
.of-btn-decline {
background: var(--paper);
color: var(--ink-soft);
border-color: rgba(10, 30, 74, 0.14);
}
.of-btn-decline:hover {
border-color: var(--filling-rose);
color: var(--filling-rose);
}
.of-btn-ghost {
background: var(--paper);
color: var(--ink-soft);
border-color: rgba(10, 30, 74, 0.14);
}
.of-btn-ghost:hover {
border-color: var(--filling-cyan, #00b8d9);
color: #0e7c8e;
}
.of-applied-note {
font-size: 13px;
font-weight: 600;
color: var(--filling-green);
}
.of-declined-note,
.of-closed-note {
font-size: 13px;
color: var(--ink-faint);
font-style: italic;
}
/* ============ SENT OFFERS — table layout (recruiter) ============ */
.of-ledger {
background: var(--paper);
border: 1px solid rgba(10, 30, 74, 0.08);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: hidden;
margin-bottom: 28px;
}
.of-ledger .of-empty {
border: 0;
box-shadow: none;
}
.of-ledger .of-loading { padding: 60px 20px; }
.of-table-wrap { overflow-x: auto; }
.of-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 680px;
}
.of-table thead th {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
text-align: left;
padding: 14px 18px 10px;
border-bottom: 1px solid rgba(10, 30, 74, 0.10);
background: var(--bg);
}
.of-table thead th.of-col-act { text-align: right; width: 1%; }
.of-table tbody tr {
border-bottom: 1px solid rgba(10, 30, 74, 0.06);
transition: background 0.12s;
}
.of-table tbody tr:last-child { border-bottom: 0; }
.of-table tbody tr:hover { background: rgba(0, 184, 217, 0.025); }
.of-table tbody td {
padding: 12px 18px;
vertical-align: middle;
color: var(--ink);
}
.of-cell-when {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-faint);
white-space: nowrap;
width: 1%;
}
.of-who-link,
.of-job-link {
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.of-who-link {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--ink);
}
.of-job-link {
font-family: var(--serif);
font-weight: 600;
font-size: 14px;
color: var(--ink);
}
.of-who-link:hover,
.of-job-link:hover {
color: #0e7c8e;
border-bottom-color: #0e7c8e;
}
.of-cell-status { width: 1%; white-space: nowrap; }
.of-cell-act { text-align: right; width: 1%; }
.of-row-btn {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
background: var(--paper);
color: var(--ink-soft);
border: 1px solid rgba(10, 30, 74, 0.14);
cursor: pointer;
transition: all 0.15s;
}
.of-row-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.of-row-btn-withdraw:hover {
border-color: var(--filling-rose);
color: var(--filling-rose);
}
/* ============ SEND-OFFER PANEL (used on profile.php in Slice 1) ====== */
.of-send-panel {
background: var(--paper);
border: 1px solid rgba(0, 184, 217, 0.22);
border-left: 3px solid var(--filling-cyan, #00b8d9);
border-radius: var(--radius-card);
padding: 18px 20px;
box-shadow: var(--shadow-card);
}
.of-send-eyebrow {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--filling-cyan, #00b8d9);
text-transform: uppercase;
margin-bottom: 4px;
}
.of-send-title {
font-family: var(--serif);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 12px;
}
.of-send-label {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ink-faint);
text-transform: uppercase;
margin: 12px 0 5px;
}
.of-send-select,
.of-send-textarea {
width: 100%;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
background: var(--bg);
border: 1px solid rgba(10, 30, 74, 0.14);
border-radius: var(--radius-tight);
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.of-send-select { height: 42px; padding: 0 12px; }
.of-send-textarea { padding: 10px 12px; resize: vertical; min-height: 80px; }
.of-send-select:focus,
.of-send-textarea:focus {
outline: none;
border-color: var(--filling-cyan, #00b8d9);
box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.12);
}
.of-send-hint {
font-size: 12px;
color: var(--ink-faint);
margin-top: 5px;
}
.of-send-submit {
width: 100%;
margin-top: 14px;
height: 44px;
background: var(--filling-cyan, #00b8d9);
color: #fff;
border: 0;
border-radius: var(--radius-tight);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px rgba(0, 184, 217, 0.24);
}
.of-send-submit:hover:not(:disabled) {
background: #0e9cb8;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0, 184, 217, 0.32);
}
.of-send-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.of-send-empty {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.55;
}
.of-send-empty a {
color: #0e7c8e;
font-weight: 600;
text-decoration: none;
}
.of-send-done {
text-align: center;
padding: 8px 0;
}
.of-send-done-icon {
width: 44px;
height: 44px;
margin: 0 auto 10px;
border-radius: 50%;
background: rgba(0, 196, 140, 0.10);
color: var(--filling-green);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
}
.of-send-done-text {
font-family: var(--serif);
font-weight: 600;
font-size: 15px;
color: var(--ink);
}
.of-send-done-sub {
font-size: 12px;
color: var(--ink-soft);
margin-top: 3px;
}