/* The supplied Option 3 typefaces are served locally, with their open-font licenses. */
@font-face { font-family: Inter; src: url('../assets/fonts/Inter.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/DMSans.ttf') format('truetype'); font-style: normal; font-weight: 100 1000; font-display: swap; }

/* Pro Clear tokens map the existing components onto the selected brand package. */
:root {
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --paper: #f8fafc;
  --surface: #ffffff;
  --line: #e5e7eb;
  --brand: #2563eb;
  --sky: #60a5fa;
  --brand-soft: #eff6ff;
  --lime: var(--brand);
  --lime-dark: #1d4ed8;
  --radius: 18px;
  --shadow: 0 12px 36px #0f172a08;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
body { background: #e5e7eb; }
h1, h2, h3, h4, .brand, .large-price, .score-cell strong { font-family: Inter, 'Segoe UI', sans-serif; }
h1, h2, h3, h4 { font-weight: 700; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--sky); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--brand); }

/* The original supplied wordmark is an image; the hat is reserved for jobs. */
.brand { letter-spacing: -.8px; }
.brand-wordmark { width: 158px; height: auto; object-fit: contain; }
.brand-mark { transform: none; color: white; background: var(--brand); padding: 0; letter-spacing: -2px; font-family: Inter, sans-serif; }
.brand-dot { color: var(--brand); }
.sidebar, .topbar { background: white; }
.sidebar-tagline, .sidebar-bottom p, .location, .eyebrow, .back-link { color: var(--muted); }
.sidebar-tagline { padding-top: 4px; }
.nav-item { color: #475569; }
.nav-item:hover { background: #f1f5f9; }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-item.active svg { color: var(--brand); }
/* The Jobs symbol uses smooth vector edges and one solid brand-blue fill at its existing size. */
.jobs-nav-icon, .sidebar .nav-item.active .jobs-nav-icon { background: #2563eb; -webkit-mask-image: url('../assets/tipped-hat.svg'); mask-image: url('../assets/tipped-hat.svg'); }
.notification-dot, .demo-dot { background: var(--brand); }
.demo-bar { background: #f1f5f9; color: #475569; }
.demo-bar button { color: #475569; }
.demo-bar select { border-color: #cbd5e1; background: white; }
.demo-bar a { font-weight: 650; color: var(--brand); text-decoration: none; }

/* Royal blue carries the main action, with restrained neutrals for supporting actions. */
.button.primary { color: white; background: var(--brand); border-color: var(--brand); }
.button.primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.button.secondary { color: var(--ink); background: white; border-color: #cbd5e1; }
.button.secondary:hover:not(:disabled) { background: #f1f5f9; }
.button.ghost:hover:not(:disabled), .icon-button:hover { background: var(--brand-soft); }
.button.danger { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.count { color: white; background: var(--brand); }
.pill, .chip, .badge { color: #475569; background: #f1f5f9; }
.pill.green, .pill.blue { color: #1d4ed8; background: #eff6ff; }
.pill.dark { color: white; background: #ffffff24; }
.badge { border-color: #dbeafe; color: #1d4ed8; background: #eff6ff; }
.choice.selected, .radio-card.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.tab.active { color: var(--brand); border-color: var(--brand); }
.star.selected { color: var(--brand); background: var(--brand-soft); border-color: var(--sky); }
.star.selected svg { fill: var(--brand); stroke: var(--brand); }
.step-indicator .active, .step-indicator .done, .bar-fill { background: var(--brand); }

/* Shared card styling keeps the existing structure while removing the green identity. */
.feature-job { background: var(--ink); }
.feature-job p, .feature-job .muted { color: #cbd5e1; }
.feature-job .pill { color: #dbeafe; }
.feature-job .button.secondary { border-color: #ffffff40; background: #ffffff12; color: white; }
.category-card:hover, .mini-job:hover { border-color: var(--sky); }
.category-card > svg, .category-card .category-link, .match-details svg, .relevant-skill, .page-head h1 svg { color: var(--brand); }
.task-icon, .task-icon.cleaning, .task-icon.yard, .task-icon.home { color: var(--brand); background: var(--brand-soft); }
.shortlist-panel { background: #f1f5f9; }
.shortlist-empty, .pool-note, .relevant-skill span { color: var(--muted); }
.score-cell:hover, .skill-leaf:hover { background: var(--brand-soft); }
.portrait-caption h2 svg { color: #93c5fd; }
.portrait-status { background: #0f172ac7; color: white; }
.empty { border-color: #cbd5e1; background: white; }
.empty > svg, .badge-detail > svg { color: var(--brand); }
.notice, .notification { color: #1e40af; background: var(--brand-soft); border-color: #dbeafe; }
.notification:hover { border-color: var(--sky); }
.completion-evidence { border-color: var(--brand); background: var(--brand-soft); }
.countdown, .detail-line svg { color: var(--brand); }
.availability { border-color: var(--line); color: var(--muted); background: white; }
.availability.on { color: #1d4ed8; background: var(--brand-soft); }
.availability.on span { background: var(--brand); }
.settlement > svg { color: var(--brand); background: var(--brand-soft); }
.settlement small { color: var(--muted); }
.timeline-item.done::before, .timeline-item.current::before { background: var(--brand); }
.timeline-item.current::before { box-shadow: 0 0 0 3px #dbeafe; }
.message { background: #f1f5f9; }
.message.own { background: var(--brand); color: white; }
.message.own small { color: #dbeafe; }
.host-avatar { background: #dbeafe; color: #1d4ed8; }
.role-illustration, .dark-role .role-illustration { color: var(--brand); background: #dbeafe; }
.dark-role .role-arrow { color: #93c5fd; }
.role-card.dark-role p, .role-card.dark-role .eyebrow { color: #cbd5e1; }
.welcome h1 em::after { background: #dbeafe; }

/* Offers, timers and negotiations use the same small set of interaction surfaces. */
.filter-bar { display: grid; grid-template-columns: 1.2fr .8fr 1fr auto; align-items: end; gap: 12px; margin: 0 0 18px; }
.filter-bar .field + .field { margin: 0; }
.filter-bar .button { min-height: 46px; }
.filter-summary { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.pending-action { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 14px; padding: 18px; margin: 16px 0; }
.pending-action strong { color: #1e40af; }
.pending-action p { color: #475569; margin: 7px 0 14px; font-size: 12px; }
.pending-action .inline-actions { margin-top: 12px; }
.negotiation-list { display: grid; gap: 12px; }
.negotiation-row { padding: 18px 0; border-top: 1px solid var(--line); }
.negotiation-row:first-child { border-top: 0; }
.negotiation-row .inline-actions { margin-top: 12px; }
.negotiation-history { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 9px; }
.negotiation-history li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.negotiation-history li:last-child { color: var(--ink); font-weight: 700; }
.negotiation-history small { color: var(--muted); }
.cancel-outcome { border-left: 3px solid var(--sky); padding: 12px 16px; margin: 16px 0; background: #f1f5f9; }

/* Reliability is separate from workmanship and expands into its own evidence. */
.reliability-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 17px 0; margin: 12px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.reliability-summary strong { display: block; font-family: Inter, sans-serif; }
.reliability-summary small { display: block; color: var(--muted); margin-top: 4px; }
.reliability-summary > strong { color: var(--brand); font-size: 23px; white-space: nowrap; }
.reliability-breakdown { display: grid; gap: 0; }
.reliability-event { padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px; }
.reliability-event small { display: block; margin-top: 4px; color: var(--muted); }

/* Existing members edit a compact profile; supported values remain explicit choices. */
.profile-edit fieldset { border: 0; margin: 20px 0; padding: 0; }
.profile-edit legend { font-family: Inter, sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check-grid label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.check-grid input { flex-shrink: 0; }
.demo-menu a.button { text-align: center; }
.portal-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.connection-status { color: var(--muted); font-size: 11px; }

/* Preserve safe edges and usable controls in both independent narrow demo windows. */
@media (max-width: 960px) { .filter-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  body { background: var(--paper); }
  .topbar { background: #fffffff5; }
  .brand-wordmark { width: 130px; }
  .bottom-nav { background: #fffffff5; }
  .bottom-nav button { color: #64748b; }
  .bottom-nav button.active { background: var(--brand-soft); color: var(--brand); }
  .bottom-nav button.active svg { color: var(--brand); }
  .card-actions { background: #f8fafcf5; }
  .demo-bar { flex-wrap: wrap; row-gap: 6px; }
  .demo-bar select { max-width: 145px; }
  .filter-bar { gap: 10px; }
  .check-grid { grid-template-columns: 1fr; }
  .pending-action { padding: 15px; }
  .negotiation-history li { flex-wrap: wrap; gap: 3px 10px; }
  .inline-actions .button { flex-grow: 1; }
}

/* Shared updates and price proposals keep their text and amounts aligned. */
.notification { width: 100%; text-align: left; }
.notification strong, .notification small { display: block; }
.negotiation-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.negotiation-row > span { min-width: 0; }
.negotiation-row small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.negotiation-row > strong { flex-shrink: 0; }
.message p { overflow-wrap: anywhere; }