/* Shared visual cleanup: near-white canvases, neutral tonal surfaces, one purple accent. */
:root {
  --paper: #fff;
  --white: #fff;
  --ink: #171629;
  --muted: #777684;
  --line: transparent;
  --green: #5138a5;
  --deep: #171629;
  --sans: "Comfortaa", "DM Sans", sans-serif;
  --display: "Comfortaa", "DM Sans", sans-serif;
  --mono: "DM Sans", sans-serif;
  --surface: #f6f6f7;
  --surface-strong: #f0f0f2;
  --accent: #5138a5;
}

/* Account settings and legal links */
.settings-layout { display: grid; width: min(100%, 980px); gap: 18px; }
.settings-card { padding: clamp(20px, 3vw, 30px); border-radius: 30px; background: #fafafa; }
.settings-card-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.settings-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 18px; background: #f0f0f2; color: #555460; font-size: 22px; }
.settings-card-heading h2 { margin: 0; color: #292834; font: 700 17px/1.4 "Comfortaa", sans-serif; }
.settings-card-heading p { margin: 4px 0 0; color: #777684; font: 500 13px/1.5 "DM Sans", sans-serif; }
.settings-account { display: flex; min-height: 68px; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: #fff; }
.settings-account > span:not(.account-avatar) { display: grid; min-width: 0; flex: 1; gap: 3px; }
.settings-account strong, .settings-provider strong { overflow: hidden; color: #292834; font: 700 14px "DM Sans", sans-serif; text-overflow: ellipsis; }
.settings-account small, .settings-provider small { overflow: hidden; color: #777684; font: 500 12px/1.5 "DM Sans", sans-serif; text-overflow: ellipsis; }
.settings-avatar { position: relative; width: 42px; height: 42px; flex-basis: 42px; }
.settings-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.settings-avatar span { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; background: #f0f0f2; color: #555460; font-size: 13px; font-weight: 700; }
.settings-signout, .settings-disconnect { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 999px; background: #f4f4f5; color: #555460; font: 600 12px "DM Sans", sans-serif; }
.settings-connect { min-height: 44px; margin-top: 14px; padding: 10px 17px; border: 0; border-radius: 999px; background: #f0f0f2; color: #292834; font: 600 13px "DM Sans", sans-serif; }
.settings-connect .ph { color: #5138a5; }
.settings-connections { display: grid; gap: 9px; }
.settings-provider { display: flex; min-height: 62px; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 19px; background: #fff; }
.settings-provider > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 3px; }
.settings-provider-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 14px; background: #f5f5f6; color: #555460; font-size: 19px; }
.settings-muted { margin: 12px 0 0; color: #777684; font: 500 13px/1.65 "DM Sans", sans-serif; }
.settings-link-list { display: grid; gap: 8px; }
.settings-link-list a { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 11px 15px; border-radius: 17px; background: #fff; color: #292834; font: 600 14px "DM Sans", sans-serif; text-decoration: none; }
.settings-link-list a .ph { color: #777684; }
.settings-link-list a:hover { background: #f3f3f4; }
@media (max-width: 560px) { .settings-account { flex-wrap: wrap; } .settings-signout { margin-left: auto; } .settings-provider { gap: 9px; padding: 9px; } .settings-disconnect { padding: 8px 11px; } }

html, body, .app-shell, .main-area, .page-content { background: #fff; color: var(--ink); }
.sidebar { background: #fff; box-shadow: 0 8px 35px #1716290a; }
.brand-mark, .system-card, .avatar,
.action-icon, .cap-icon, .activity-icon, .queue-visual, .repo-glyph,
.status-pill, .filter-chip, .search-box, .step-card, .empty-state,
.usage-card, .integration-card, .stat-card, .modal-close {
  background: #f5f5f6;
}
.workspace-switch { border: 0; background: transparent; box-shadow: none; }
.workspace-switch:hover { background: #fafafa; }
.brand-mark svg, .brand-dot { fill: #5138a5; color: #5138a5; }
.nav-item.active { background: #f4f4f5; color: #282733; box-shadow: none; }
.nav-item.active .nav-icon, .system-card > .ph, .cap-icon, .activity-icon,
.queue-visual, .repo-glyph, .search-box > .ph, .input-wrap > i,
.form-note > i, .text-button .ph, .queue-add .ph { color: #777684; }
.system-led { background: #5138a5; box-shadow: none; }
.avatar { color: #555460; }
.topbar { background: #ffffffed; box-shadow: 0 8px 32px #1716290a; }
.global-search, .global-search kbd { background: #f4f4f5; }
.login-button, .auth-entry-tab.active {
  background: #f3f3f4;
  color: #292834;
}
.login-button .ph { color: #555460; }
.login-button:hover, .auth-entry-tab.active:hover { background: #ededf0; }
.auth-entry-tab { color: #555460; }
.button-primary { background: #5138a5; color: #fff; }
.button-primary:hover { background: #5138a5; opacity: .92; }
.action-card { background: #fafafa; border-radius: 36px; box-shadow: 0 10px 34px #17162908; }
.action-icon { color: #5138a5; }
.cap-icon, .activity-icon, .queue-visual, .repo-glyph, .status-pill { color: #555460; }
.category-tag, .verify-tag, .detail-source a, .step-card b { color: #555460; }
.filter-chip.selected { background: #e9e9ec; color: #282733; }
.stat-card:last-child, .hero-art, .empty-state, .step-card { background: #fafafa !important; }
.signal-live, .nav-count { background: #f0f0f2; color: #555460; box-shadow: none; }
.activity-item, .queue-item, .match-row, .repo-stat, .activity-empty,
.modal-bottom, .activity-panel .activity-item { border-color: #f1f1f2; }
.draft-label, .example-label { color: #696875; }
.draft-notice, .search-result, .install-box, .verification-evidence {
  border: 0;
  border-radius: 16px;
  background: #f7f7f8;
  color: #555460;
}
.search-result > b { color: #555460; }
.match-row { border-top-color: #f1f1f2; }
.match-row span, .match-row small { color: #555460; }
.toast { background: #292834; }
.footer { display: none !important; }
.add-action { display: inline-flex; align-items: center; gap: 9px; }
.add-action .ph-plus { margin: 0; font-size: 17px; }
.action-card .button .ph-plus { margin: 0; }

/* Repository intake stays focused on its URL and one clear action. */
.repo-modal {
  width: min(560px, calc(100vw - 32px));
  padding: 42px;
  border-radius: 48px;
  background: #fff;
  box-shadow: 0 28px 100px #17162924;
}
.repo-modal::backdrop { background: #17162945; backdrop-filter: blur(5px); }
.repo-modal .modal-close-wrap { position: absolute; top: 20px; right: 20px; }
.repo-modal .modal-close {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  color: #555460;
  font-size: 23px;
}

/* Repository identity comes from the project's README hero image when available. */
.repo-glyph { position: relative; flex: 0 0 40px; overflow: hidden; border-radius: 14px; }
.repo-glyph > .repo-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* The overview is just two large, comfortable starting points. */
.overview-actions {
  width: min(100%, 1040px);
  max-width: none;
  margin: clamp(48px, 13vh, 128px) auto 0;
  padding: 0 0 72px;
  gap: clamp(16px, 2.2vw, 28px);
}
.action-card {
  appearance: none;
  width: 100%;
  min-height: 280px;
  padding: 36px;
  border: 0;
  border-radius: 64px;
  background: #f9f9fa;
  color: #171629;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  font: 700 23px/1.3 Comfortaa, sans-serif;
  cursor: pointer;
}
.action-card .action-icon {
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 50%;
  background: #f1f1f3;
  color: #5138a5;
  font-size: 28px;
}
.action-card:focus-visible { outline: 0; box-shadow: 0 0 0 4px #ededee; }

/* On compact screens, move the complete workspace navigation into a floating
   bottom pill. Keep each destination as a real button with its text available
   to assistive technology while showing the familiar Phosphor icon visually. */
@media (max-width: 700px) {
  .sidebar {
    position: fixed;
    z-index: 30;
    inset: auto 10px max(10px, env(safe-area-inset-bottom));
    width: auto;
    height: 66px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 32px #17162918;
  }

  .brand,
  .workspace-label,
  .sidebar-divider,
  .sidebar-bottom {
    display: none !important;
  }

  .sidebar .nav-main,
  .sidebar .nav-main:last-of-type { display: contents !important; }
  .sidebar .nav-item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0;
  }
  .sidebar .nav-item[hidden] { display: none !important; }
  .sidebar .nav-item .nav-icon {
    width: auto;
    margin: 0;
    font-size: 21px;
  }
  .sidebar .nav-count,
  .sidebar .nav-ping { display: none !important; }
  .sidebar .nav-item:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px #5138a5;
  }

  .main-area {
    width: 100%;
    margin: 0;
  }
  .topbar {
    top: 8px;
    margin: 8px 10px 0;
  }
  .page-content { padding-bottom: 104px; }
}

@media (max-width: 570px) {
  .overview-actions { width: 100%; margin-top: 34px; padding-bottom: 48px; gap: 14px; }
  .action-card { min-height: 188px; border-radius: 48px; padding: 26px; font-size: 20px; }
  .action-card .action-icon { width: 62px; height: 62px; font-size: 24px; }
}

/* Keep the workspace navigation visibly detached while it sticks during scroll. */
.topbar {
  position: sticky;
  top: 14px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 14px 38px rgb(23 22 41 / 10%), 0 3px 10px rgb(23 22 41 / 5%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
@media (max-width: 820px) {
  .topbar { top: 9px; margin-top: 9px; }
}
@media (max-width: 570px) {
  .topbar { top: 8px; margin-top: 8px; }
}
.repo-modal h2 {
  margin: 18px 64px 30px 0;
  color: #171629;
  font: 700 24px/1.25 Comfortaa, sans-serif;
  letter-spacing: -.6px;
}
.repo-modal #repoForm { display: grid; gap: 14px; }
.repo-modal #repoForm label {
  margin: 0 0 -6px;
  color: #555460;
  font: 700 13px/1.4 Comfortaa, sans-serif;
  letter-spacing: 0;
}
.repo-input-wrap {
  display: flex;
  min-width: 0;
  height: 64px;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-radius: 999px;
  background: #f4f4f5;
  color: #777684;
}
.repo-input-wrap:focus-within { box-shadow: 0 0 0 2px #5138a5; }
.repo-input-wrap > .ph { flex: 0 0 auto; font-size: 21px; }
.repo-input-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #171629;
  font: 500 14px "DM Sans", sans-serif;
}
.repo-input-wrap input::placeholder { color: #92919d; }
.repo-analyze {
  width: 100%;
  min-height: 64px;
  margin: 0;
  border-radius: 999px;
  font: 700 16px Comfortaa, sans-serif;
}
.repo-modal .form-error { padding: 0; color: #9b3445; font: 500 13px/1.5 "DM Sans", sans-serif; }

@media (max-width: 570px) {
  .repo-modal {
    width: calc(100vw - 24px);
    max-width: 460px;
    max-height: calc(100svh - 24px);
    overflow: auto;
    padding: 30px 22px 24px;
    border-radius: 38px;
  }
  .repo-modal .modal-close-wrap { top: 14px; right: 14px; }
  .repo-modal .modal-close { width: 42px; height: 42px; }
  .repo-modal h2 { margin: 16px 54px 26px 0; font-size: 21px; }
  .repo-input-wrap, .repo-analyze { min-height: 60px; height: 60px; }
  .auth-entry-tab.active { min-width: 0; }
  .login-button { background: #f3f3f4; }
}

/* Gentle motion makes the source flow feel responsive without adding visual noise. */
.action-card {
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, background-color 180ms ease;
  will-change: transform;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .action-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px #17162910; }
  .action-card:hover .action-icon { transform: translateY(-2px) rotate(-5deg); }
  .action-card .button:hover { transform: translateY(-2px); }
}
.action-card .action-icon { transition: transform 260ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease; }
.action-card .button { transition: transform 160ms ease, opacity 160ms ease; }
.action-card .button:active, .source-choice:active, .repo-analyze:active { transform: scale(.98); }
.modal-close { transition: transform 220ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease; }
.modal-close:hover { transform: rotate(90deg); background: #ededee; }
.repo-modal[open] { animation: source-sheet-in 240ms cubic-bezier(.2,.8,.2,1) both; }
.repo-modal[open]::backdrop { animation: source-backdrop-in 200ms ease-out both; }
@keyframes source-sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes source-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.source-picker[hidden], .repo-link-step[hidden] { display: none !important; }
.github-connect-step[hidden] { display: none !important; }
.github-connect-step { animation: choice-in 230ms cubic-bezier(.2,.8,.2,1) both; }
.github-connect-step h2 { margin: 0 0 14px; }
.github-privacy-note, .github-token-help { color: #777684; font: 500 13px/1.65 "DM Sans", sans-serif; }
.github-privacy-note { margin: 0 0 22px; max-width: 560px; }
.github-token-help { font-size: 12px; margin: 10px 0 18px; }
.github-connect-step label { display: block; margin: 0 0 8px; color: #666673; font: 700 11px/1.4 "DM Sans", sans-serif; }
.github-token-input { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-radius: 999px; background: #f2f2f3; color: #737382; }
.github-token-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #171625; font: 500 14px "DM Sans", sans-serif; }
.github-token-input input::placeholder { color: #9a9aa3; }
.github-connect-step select { display: block; width: 100%; min-height: 58px; margin: 0 0 20px; padding: 0 18px; border: 0; border-radius: 999px; appearance: none; background: #f2f2f3; color: #171625; font: 600 14px "DM Sans", sans-serif; }
.github-connect-step select:focus-visible { outline: 2px solid #5138a5; outline-offset: 3px; }
.github-connect-step .button, .github-connected-row .button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: #5138a5; color: white; font: 700 13px Comfortaa, sans-serif; cursor: pointer; }
.github-connect-step .button:disabled { opacity: .6; cursor: progress; }
.github-connected-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 14px 18px; border-radius: 24px; background: #f4f4f5; color: #282737; font: 700 13px Comfortaa, sans-serif; }
.github-repository-label { margin-top: 22px !important; }
.github-repository-list { display: grid; gap: 9px; max-height: 300px; overflow: auto; padding: 2px; }
.github-repository-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border: 0; border-radius: 24px; background: #f2f2f3; color: #222132; text-align: left; cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.github-repository-row:hover { transform: translateY(-1px); background: #eaeaec; }
.github-repository-row span { display: grid; gap: 5px; min-width: 0; }
.github-repository-row b { overflow: hidden; text-overflow: ellipsis; font: 700 12px Comfortaa, sans-serif; }
.github-repository-row small { overflow: hidden; text-overflow: ellipsis; color: #777684; font: 500 11px "DM Sans", sans-serif; white-space: nowrap; }
.github-repository-row i { flex: 0 0 auto; color: #5138a5; font-size: 18px; }
.github-repository-more { min-height: 48px; border: 0; border-radius: 999px; background: #f2f2f3; color: #4c4b58; font: 700 12px Comfortaa, sans-serif; cursor: pointer; }
.github-repository-more:disabled { opacity: .65; cursor: progress; }
.github-token-link { display: inline-block; margin-top: 18px; color: #5138a5; font: 700 12px "DM Sans", sans-serif; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.github-connect-step .form-error { min-height: 20px; margin-top: 8px; }
.github-connected-row .button { min-height: 40px; background: #e7e7e9; color: #4c4b58; }
.source-picker h2, .repo-link-step h2 { margin-bottom: 24px; }
.source-choices { display: grid; gap: 12px; }
.source-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 82px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  color: #171629;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease, opacity 180ms ease;
}
.source-choice:not(:disabled):hover { transform: translateY(-2px); background: #ededee; }
.source-choice:focus-visible, .source-back:focus-visible { outline: 0; box-shadow: 0 0 0 4px #e9e9eb; }
.source-choice:disabled { cursor: not-allowed; opacity: .53; }
.source-choice-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #555460;
  font-size: 22px;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), color 180ms ease;
}
.source-choice:not(:disabled):hover .source-choice-icon { transform: scale(1.07) rotate(-4deg); color: #5138a5; }
.source-choice-copy { display: grid; gap: 5px; min-width: 0; }
.source-choice-copy strong { font: 700 14px/1.25 Comfortaa, sans-serif; }
.source-choice-copy small { color: #777684; font: 500 11px/1.4 "DM Sans", sans-serif; }
.source-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: #696a78; font: 500 13px/1.55 "DM Sans", sans-serif; }
.source-consent input { flex: 0 0 17px; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #5138a5; }
.source-consent span { max-width: 620px; }
.source-consent-picker { margin: 18px 4px 0; }
.repo-analyze:disabled { cursor: not-allowed; opacity: .55; }
.source-choice:nth-child(1) { animation: choice-in 260ms cubic-bezier(.2,.8,.2,1) both; }
.source-choice:nth-child(2) { animation: choice-in 300ms 35ms cubic-bezier(.2,.8,.2,1) both; }
.source-choice:nth-child(3) { animation: choice-in 340ms 70ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes choice-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.repo-link-step { animation: choice-in 230ms cubic-bezier(.2,.8,.2,1) both; }
.source-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0 0 17px -8px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #777684;
  font: 600 12px Comfortaa, sans-serif;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.source-back:hover { background: #f4f4f5; color: #171629; transform: translateX(-2px); }
.repo-input-wrap { transition: background-color 180ms ease, transform 180ms ease; }
.repo-input-wrap:focus-within { background: #ededee; box-shadow: none; }
.repo-input-wrap .repo-link-icon { transition: transform 220ms cubic-bezier(.2,.8,.2,1), color 180ms ease; }
.repo-input-wrap:focus-within .repo-link-icon { transform: scale(1.08); color: #5138a5; }
.repo-url-check { display: none; flex: 0 0 auto; color: #5138a5; font-size: 21px; }
.repo-input-wrap.is-ready .repo-url-check { display: block; animation: check-pop 300ms cubic-bezier(.2,1.5,.4,1) both; }
.repo-link-status { min-height: 0; overflow: hidden; color: #555460; font: 600 11px Comfortaa, sans-serif; }
.repo-link-status:not(:empty) { min-height: 16px; margin-top: -8px; animation: choice-in 180ms ease both; }
@keyframes check-pop { from { opacity: 0; transform: scale(.55) rotate(-16deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.repo-analyze:disabled { cursor: wait; opacity: .88; }
.repository-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #f3f3f4;
  color: #555460;
  font: 700 11px Comfortaa, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.repository-retry:hover:not(:disabled) { background: #eaeaec; transform: translateY(-1px); }
.repository-retry:disabled { cursor: wait; opacity: .6; }
.repository-retry .ph { font-size: 15px; }
.queue-item .repository-retry { margin-left: auto; }
.repo-row .repository-retry { flex: 0 0 auto; }
@media (max-width: 570px) {
  .repo-row .repository-retry { margin-left: auto; }
  .queue-item .repository-retry { min-height: 38px; padding: 0 12px; }
}
.repo-analyze.is-loading::after {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff70;
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  animation: analyze-spin 700ms linear infinite;
}
@keyframes analyze-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .action-card, .action-card *, .repo-modal[open], .repo-modal[open]::backdrop,
  .source-choice, .source-choice-icon, .repo-link-step, .repo-url-check,
  .repo-link-status, .repo-analyze.is-loading::after, .modal-close { animation: none !important; transition: none !important; }
  .action-card:hover, .source-choice:hover, .source-back:hover { transform: none !important; }
}
@media (max-width: 570px) {
  .source-choice { min-height: 76px; padding: 12px 16px; }
  .source-choice-icon { width: 44px; height: 44px; flex-basis: 44px; }
  .source-choice-copy strong { font-size: 13px; }
  .source-choice-copy small { font-size: 10px; }
}

.repo-test-control { display: grid; justify-items: start; gap: 7px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: #fafafa; }
.repo-test-control p { max-width: 680px; margin: 0; color: #706f79; font: 500 10px/1.55 "DM Sans", sans-serif; }
.repo-test-control small { color: #777681; font: 500 9px/1.5 "DM Sans", sans-serif; }
.repo-test-control a { color: #5138a5; }
.repo-test-control .repository-retry { min-height: 36px; }
.repo-test-logs { width: min(100%, 800px); }
.repo-test-logs summary { color: #55545f; font: 600 10px/1.5 "DM Sans", sans-serif; cursor: pointer; }
.repo-test-summary { width: min(100%, 800px); }
.repo-test-summary summary { color: #55545f; font: 600 10px/1.5 "DM Sans", sans-serif; cursor: pointer; }
.repo-test-summary ul { display: grid; gap: 5px; margin: 8px 0; padding-left: 18px; color: #706f79; font: 500 10px/1.5 "DM Sans", sans-serif; }
.repo-test-summary code { overflow-wrap: anywhere; color: #4b4a52; font: 500 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.repo-test-logs pre { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 7px 0 0; padding: 12px; border-radius: 13px; background: #f2f2f3; color: #4b4a52; font: 500 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 570px) {
  .repo-test-control { width: 100%; padding: 12px; border-radius: 17px; }
  .repo-test-control .repository-retry { width: 100%; }
}

/* A single copy-ready connection action for the local Codex client. */
.mcp-title { margin-bottom: 20px; }
.mcp-title h1 { margin: 0; }
.mcp-connect { width: min(100%, 760px); padding: 30px; border-radius: 36px; background: #fafafa; }
.mcp-connect [hidden] { display: none !important; }
.mcp-instruction { margin: 0 0 16px; color: #555460; font: 600 14px/1.6 "DM Sans", sans-serif; }
.mcp-instruction code, .mcp-note code { padding: 3px 7px; border-radius: 8px; background: #f0f0f2; color: #343340; font: 500 12px "DM Sans", sans-serif; }
.mcp-config { max-width: 100%; margin: 0; padding: 19px 20px; overflow: auto; border: 0; border-radius: 22px; background: #f1f1f3; color: #302f3b; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 12px/1.8 "DM Sans", sans-serif; }
.mcp-copy { min-height: 52px; margin-top: 14px; padding: 0 24px; border-radius: 999px; font: 700 13px Comfortaa, sans-serif; }
.mcp-copy .ph { margin-right: 7px; }
.button .ph { transition: transform .18s ease, color .18s ease; }
.button.is-copied .ph-check { color: #5138a5; animation: copy-confirm .2s ease-out; }
.button-primary.is-copied .ph-check { color: #fff; }
@keyframes copy-confirm { from { opacity: .35; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .button .ph, .button.is-copied .ph-check { animation: none; transition: none; } }
.mcp-copy:disabled { cursor: wait; opacity: .55; }
.mcp-note { margin: 15px 0 0; color: #777684; font: 500 12px/1.7 "DM Sans", sans-serif; }
.mcp-tools { margin-top: 24px; }
.mcp-tools h2 { margin: 0 0 12px; color: #171629; font: 700 14px Comfortaa, sans-serif; }
.mcp-tool-list { display: flex; flex-wrap: wrap; gap: 9px; }
.mcp-tool-list > div { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #f1f1f3; color: #555460; font: 600 11px/1.4 "DM Sans", sans-serif; }
.mcp-tool-list .ph { color: #777684; font-size: 15px; }
@media (max-width: 570px) {
  .mcp-title { margin: 0 0 17px; }
  .mcp-title h1 { font-size: 23px; }
  .mcp-connect { padding: 22px 18px; border-radius: 30px; }
  .mcp-instruction { font-size: 13px; }
  .mcp-config { padding: 16px; border-radius: 18px; font-size: 11px; }
  .mcp-copy { min-height: 48px; }
  .mcp-note { font-size: 11px; }
  .mcp-tool-list { display: grid; }
  .mcp-tool-list > div { min-height: 42px; }
}

/* Keep the workspace name informational and give the overview cards a soft tonal lift. */
.workspace-switch,
.workspace-switch:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.action-card { background: #f5f5f6; }

/* Make the agent connection a short, outcome-led setup rather than a feature catalog. */
.mcp-title { margin-bottom: 22px; }
.mcp-title p { display: none; }
.mcp-connect { width: min(100%, 800px); padding: clamp(22px, 4vw, 38px); border-radius: 38px; background: #fdfdfd; }
.mcp-steps { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }

/* Keep page titles calm and let the actual controls carry the meaning. */
.page-title-row { margin: 8px 0 24px; }
.page-title-row h1 { margin: 0; font: 700 clamp(22px, 2.2vw, 28px)/1.25 Comfortaa, sans-serif; letter-spacing: -.6px; }
.curation-note { max-width: 760px; margin: -4px 0 18px; color: #777684; font: 500 12px/1.7 "DM Sans", sans-serif; }
.mcp-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 16px; }
.mcp-step-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 999px; background: #f1f1f3; color: #24232e; font: 700 14px Comfortaa, sans-serif; }
.mcp-step-body { min-width: 0; }
.mcp-step-body h2 { margin: 4px 0 8px; color: #171629; font: 700 16px Comfortaa, sans-serif; }
.mcp-step-body > p:not(.mcp-note) { margin: 0 0 12px; color: #62616b; font: 500 13px/1.65 "DM Sans", sans-serif; }
.mcp-step-body p code { padding: 3px 7px; border-radius: 999px; background: #f1f1f3; color: #3f3e48; font: 500 12px "DM Sans", sans-serif; }
.mcp-step-body .mcp-instruction { margin: 0 0 12px; }
.mcp-step-body .mcp-config { background: #f4f4f5; }
.mcp-example { margin: 0; padding: 20px 22px; border: 0; border-radius: 28px; background: #f4f4f5; color: #393844; font: 500 14px/1.8 "DM Sans", sans-serif; }
.mcp-details { margin-top: 32px; padding: 18px 20px; border-radius: 24px; background: #f7f7f8; }
.mcp-details summary { cursor: pointer; color: #252430; font: 700 13px Comfortaa, sans-serif; }
.mcp-details p { margin: 14px 0 0; color: #666570; font: 500 12px/1.75 "DM Sans", sans-serif; }
.remote-mcp > p { color: #62616b; font: 500 14px/1.7 "DM Sans", sans-serif; }
.mcp-remote-status { margin-bottom: 12px; color: #171629; font: 700 15px Comfortaa, sans-serif; }
.mcp-remote-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.mcp-token-label { display: block; margin: 18px 0 8px; color: #252430; font: 700 13px Comfortaa, sans-serif; }
.remote-mcp h2 { margin: 22px 0 8px; color: #171629; font: 700 16px Comfortaa, sans-serif; }
.mcp-agent-connections { display: grid; gap: 10px; margin-top: 26px; }
.mcp-agent-connections h2 { margin-bottom: 0; }
.mcp-agent-connection { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px 16px; border-radius: 24px; background: #f4f4f5; }
.mcp-agent-connection > span { display: grid; gap: 5px; min-width: 0; }
.mcp-agent-connection b { color: #292833; font: 700 12px Comfortaa, sans-serif; overflow-wrap: anywhere; }
.mcp-agent-connection small { color: #797883; font: 500 11px/1.4 "DM Sans", sans-serif; }
.mcp-agent-connection .button { min-height: 40px; padding: 0 18px; border-radius: 999px; flex: 0 0 auto; }

/* Signed-in identity and connected source accounts. */
.account-card[hidden] { display: none !important; }
.account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: min(300px, 34vw);
  min-height: 46px;
  padding: 4px 6px 4px 5px;
  border-radius: 999px;
  background: #f4f4f5;
  color: #252432;
}
.account-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: #e9e6f2;
  color: #5138a5;
  font: 700 11px Comfortaa, sans-serif;
}
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-avatar img[hidden], .account-avatar [hidden] { display: none !important; }
.account-card-copy { display: grid; min-width: 0; gap: 3px; }
.account-card-copy strong, .account-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card-copy strong { color: #292833; font: 700 11px Comfortaa, sans-serif; }
.account-card-copy small { color: #777684; font: 500 10px "DM Sans", sans-serif; }
.account-logout {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-left: 2px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #696875;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.account-logout:hover { transform: translateY(-1px); background: #e9e6f2; color: #5138a5; }
.provider-account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin: 18px 0;
  padding: 12px 14px;
  border-radius: 28px;
  background: #f4f4f5;
}
.provider-account-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #292833;
  font-size: 21px;
}
.provider-account-icon.gitlab { color: #e24329; }
.provider-account-icon.bitbucket { color: #3159c9; }
.provider-account-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 4px; }
.provider-account-copy strong { color: #292833; font: 700 12px Comfortaa, sans-serif; }
.provider-account-copy small { overflow: hidden; color: #777684; font: 500 11px "DM Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.provider-connected { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #6b6878; font: 600 10px "DM Sans", sans-serif; }
.provider-connected .ph { color: #5138a5; font-size: 14px; }
.provider-disconnect {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #5f5e69;
  font: 700 10px Comfortaa, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.provider-disconnect:hover { background: #e9e6f2; color: #5138a5; }
@media (max-width: 760px) {
  .account-card { max-width: 210px; gap: 7px; }
  .account-card-copy strong { font-size: 10px; }
  .account-card-copy small { font-size: 9px; }
}
@media (max-width: 570px) {
  .account-card { max-width: 150px; min-height: 40px; padding: 3px 4px; gap: 6px; }
  .account-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .account-logout { width: 30px; height: 30px; flex-basis: 30px; }
  .account-card-copy small { display: none; }
  .provider-account-card { min-height: 68px; gap: 8px; padding: 10px; border-radius: 22px; }
  .provider-account-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .provider-connected { font-size: 9px; }
  .provider-disconnect { min-height: 34px; padding: 0 11px; }
}
.auth-entry-tabs[hidden] { display: none !important; }
.sidebar-bottom { display: flex; width: 100%; margin-top: auto; padding-top: 18px; }
.sidebar-bottom .account-card { width: 100%; max-width: none; min-height: 64px; padding: 8px; border-radius: 22px; }
@media (max-width: 700px) {
  .sidebar .sidebar-bottom { display: none !important; }
  body.signed-in .sidebar .sidebar-bottom { display: flex !important; width: auto; flex: 0 0 auto; margin: 0 2px 0 0; padding: 0; }
  body.signed-in .sidebar-bottom .account-card { width: auto; max-width: none; min-height: 0; gap: 0; padding: 0; border-radius: 50%; background: transparent; }
  body.signed-in .sidebar-bottom .account-card-copy { display: none; }
  body.signed-in .sidebar-bottom .account-avatar { width: 36px; height: 36px; flex-basis: 36px; }
  body.signed-in .sidebar-bottom .account-logout { width: 25px; height: 25px; flex-basis: 25px; margin: 0 0 0 -12px; align-self: flex-end; z-index: 1; background: #f0eef6; font-size: 12px; }
}
.remote-mcp .mcp-connected-copy { overflow-wrap: anywhere; }
.remote-mcp .mcp-connected-copy code { border-radius: 999px; background: #f1f1f3; padding: 5px 9px; }
.remote-mcp .mcp-env-command { margin-top: 16px; }
.mcp-starter { margin-top: 30px; }
.mcp-starter > p { color: #62616b; font: 500 13px/1.65 "DM Sans", sans-serif; }
.mcp-signin-note { margin: 16px 0 0 58px; }
@media (max-width: 570px) {
  .mcp-title p { font-size: 12px; }
  .mcp-connect { padding: 22px 17px; border-radius: 32px; }
  .mcp-steps { gap: 24px; }
  .mcp-step { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .mcp-step-number { width: 34px; height: 34px; font-size: 12px; }
  .mcp-step-body h2 { font-size: 14px; }
  .mcp-example { padding: 16px 17px; border-radius: 24px; font-size: 13px; }
  .mcp-signin-note { margin-left: 46px; }
  .mcp-agent-connection { align-items: flex-start; padding: 13px; border-radius: 20px; }
  .mcp-agent-connection .button { min-height: 38px; padding: 0 14px; }
}

/* Outcome-first task planning, opened by the overview's Receive code action. */
.task-page-heading h1 { margin: 0; color: #171629; font: 700 clamp(24px, 3vw, 30px)/1.25 Comfortaa, sans-serif; }
.task-page-heading p { margin: 8px 0 0; color: #777681; font: 500 13px/1.6 "DM Sans", sans-serif; }
.task-intake { width: min(100%, 850px); padding: clamp(22px, 4vw, 38px); border-radius: 38px; background: #fdfdfd; }
.task-intake form { display: grid; gap: 13px; }
.task-login-gate { display: grid; justify-items: start; gap: 12px; }
.task-login-gate h2 { margin: 0; color: #23222e; font: 700 18px Comfortaa, sans-serif; }
.task-login-gate p { margin: 0; color: #696873; font: 500 13px/1.7 "DM Sans", sans-serif; }
.task-login-gate > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.task-login-gate .button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; color: #282733; text-decoration: none; font: 700 12px Comfortaa, sans-serif; }
.task-login-gate .button-primary { color: #fff; }
.task-field-label { display: flex; align-items: baseline; gap: 9px; margin-top: 5px; color: #23222e; font: 700 14px Comfortaa, sans-serif; }
.task-field-label span { color: #898892; font: 500 11px "DM Sans", sans-serif; }
.task-intake textarea, .task-intake input:not([type=checkbox]) { width: 100%; border: 0; outline: none; border-radius: 25px; background: #f2f2f4; color: #252430; padding: 18px 21px; font: 500 14px/1.75 "DM Sans", sans-serif; }
.task-intake textarea { min-height: 132px; resize: vertical; }
.task-intake textarea:focus, .task-intake input:not([type=checkbox]):focus { box-shadow: 0 0 0 3px #5138a51c; }
.task-intake textarea::placeholder, .task-intake input::placeholder { color: #92919b; }
.task-consent, .task-search-option { display: flex; align-items: flex-start; gap: 11px; margin-top: 5px; color: #686772; font: 500 12px/1.7 "DM Sans", sans-serif; }
.task-consent input, .task-search-option input { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; accent-color: #5138a5; }
.task-submit { justify-self: start; min-height: 54px; margin-top: 5px; padding: 0 28px; border-radius: 999px; }
.task-form-error { min-height: 0; margin: 0; color: #9e3535; font: 500 12px/1.6 "DM Sans", sans-serif; }
.task-form-error:empty { display: none; }
.task-plan-result { margin-top: 30px; padding: clamp(20px, 3vw, 30px); border-radius: 32px; background: #f7f7f8; }
.task-plan-summary h2 { margin: 8px 0 18px; color: #1b1a27; font: 700 21px/1.35 Comfortaa, sans-serif; }
.task-acceptance { margin: 0 0 20px; padding: 17px 20px; border-radius: 24px; background: #fff; }
.task-acceptance h3 { margin: 0 0 10px; color: #23222e; font: 700 13px Comfortaa, sans-serif; }
.task-acceptance ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: #555460; font: 500 12px/1.6 "DM Sans", sans-serif; }
.task-acceptance li::marker { color: #5138a5; }
.task-plan-steps { display: grid; gap: 15px; }
.task-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 19px; border-radius: 26px; background: #fff; }
.task-step-count { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 999px; background: #f1f1f3; color: #343340; font: 700 12px Comfortaa, sans-serif; }
.task-step-content { min-width: 0; }
.task-step-content h3 { margin: 4px 0 7px; color: #23222e; font: 700 14px/1.45 Comfortaa, sans-serif; }
.task-step-content > p, .task-plan-note { margin: 0; color: #777681; font: 500 12px/1.65 "DM Sans", sans-serif; }
.task-candidates, .task-source-leads { display: grid; gap: 8px; margin-top: 16px; }
.task-candidates-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-candidates-heading > b, .task-source-leads > b { color: #565560; font: 700 11px "DM Sans", sans-serif; }
.task-selection-count { flex: 0 0 auto; color: #85848e; font: 500 10px "DM Sans", sans-serif; }
.task-candidates ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.task-candidates li, .task-source-lead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 18px; background: #f5f5f6; color: #282733; font: 600 12px/1.5 "DM Sans", sans-serif; }
.task-candidates li label { display: flex; min-width: 0; align-items: center; gap: 9px; cursor: pointer; }
.task-candidates li input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: #5138a5; }
.task-candidates li small { flex: 0 1 48%; color: #85848e; font: 500 10px/1.55 "DM Sans", sans-serif; text-align: right; }
.task-candidate-meta { display: grid; min-width: 0; flex: 0 1 52%; gap: 2px; }
.task-candidate-meta small { max-width: 100%; overflow-wrap: anywhere; }
.task-source-lead a { flex: 0 0 auto; color: #85848e; font: 500 10px "DM Sans", sans-serif; }
.task-source-lead label { display: flex; min-width: 0; align-items: center; gap: 9px; cursor: pointer; }
.task-source-lead label span { overflow-wrap: anywhere; }
.task-source-lead input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: #5138a5; }
.task-source-lead input:disabled { cursor: not-allowed; }
.task-source-lead a { display: inline-flex; align-items: center; gap: 7px; color: #777681; text-decoration: none; }
.task-candidates li label span { overflow-wrap: anywhere; }
.task-source-lead a:hover { color: #5138a5; }
.task-source-intake { display: grid; gap: 12px; margin-top: 22px; padding: 21px; border-radius: 27px; background: #fff; }
.task-source-intake h3 { margin: 0; color: #24232f; font: 700 14px Comfortaa, sans-serif; }
.task-source-intake > p:not(.task-source-queue-status) { margin: 0; color: #73727d; font: 500 12px/1.65 "DM Sans", sans-serif; }
.task-source-consent { display: flex; align-items: flex-start; gap: 10px; color: #696873; font: 500 11px/1.6 "DM Sans", sans-serif; }
.task-source-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: #5138a5; }
.task-source-intake > .button { justify-self: start; min-height: 48px; padding: 0 21px; border-radius: 999px; }
.task-source-intake > .button:disabled { cursor: not-allowed; opacity: .55; }
.task-source-queue-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; color: #696873; font: 500 11px/1.6 "DM Sans", sans-serif; }
.task-source-view-queue { min-height: 38px; padding: 0 14px; border-radius: 999px; }
.task-candidates > p, .task-source-leads > p, .task-gap span { margin: 0; color: #85848e; font: 500 11px/1.6 "DM Sans", sans-serif; }
.task-source-state { margin: 14px 0 0; color: #85848e; font: 500 11px/1.6 "DM Sans", sans-serif; }
.task-gap { display: grid; gap: 4px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: #f5f5f6; }
.task-gap b { color: #4d4c57; font: 700 11px "DM Sans", sans-serif; }
.task-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.task-plan-actions .button { min-height: 50px; padding: 0 22px; border-radius: 999px; }
.task-copy-prompt .ph { margin-right: 7px; }
.task-plan-note { margin-top: 14px; }
.task-draft-panel { display: grid; gap: 12px; margin-top: 23px; padding: 21px; border-radius: 27px; background: #fff; }
.task-draft-panel h3 { margin: 0; color: #24232f; font: 700 14px Comfortaa, sans-serif; }
.task-draft-panel > p:not(.task-form-error) { margin: 0; color: #73727d; font: 500 12px/1.65 "DM Sans", sans-serif; }
.task-draft-consent { display: flex; align-items: flex-start; gap: 10px; color: #696873; font: 500 11px/1.6 "DM Sans", sans-serif; }
.task-draft-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: #5138a5; }
.task-draft-button { justify-self: start; min-height: 48px; padding: 0 21px; border-radius: 999px; }
.task-draft-button:disabled { cursor: wait; opacity: .65; }
.task-draft-output { display: grid; gap: 12px; }
.task-draft-no-files { padding: 14px 16px; border-radius: 18px; background: #f5f5f6; color: #666570; font: 500 12px/1.6 "DM Sans", sans-serif; }
.task-draft-no-files p { margin: 0; }
.task-draft-output-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.task-draft-output-heading > div { min-width: 0; }
.task-draft-output-heading > div > span { color: #777681; font: 700 10px "DM Sans", sans-serif; letter-spacing: .08em; }
.task-draft-output-heading h4 { margin: 7px 0 2px; color: #282733; font: 700 14px/1.5 Comfortaa, sans-serif; }
.task-download-draft { min-height: 42px; flex: 0 0 auto; padding: 0 16px; border-radius: 999px; font: 700 11px Comfortaa, sans-serif; }
.task-draft-file { min-width: 0; padding: 15px; border-radius: 20px; background: #f4f4f5; }
.task-draft-file-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.task-draft-file-head > div { display: grid; min-width: 0; gap: 4px; }
.task-draft-file-head b { overflow-wrap: anywhere; color: #34333f; font: 700 11px "DM Sans", sans-serif; }
.task-draft-file-head small { color: #85848e; font: 500 10px/1.5 "DM Sans", sans-serif; }
.task-draft-sources { display: block; margin: 0 0 9px; color: #62616c; font: 500 10px/1.5 "DM Sans", sans-serif; }
.task-draft-file .button { min-height: 38px; flex: 0 0 auto; padding: 0 14px; border-radius: 999px; font: 700 11px Comfortaa, sans-serif; }
.task-draft-file pre { max-height: 420px; margin: 0; padding: 13px; overflow: auto; border-radius: 15px; background: #fff; color: #34333f; white-space: pre; font: 500 11px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.task-draft-list { display: grid; gap: 6px; color: #5f5e68; font: 600 11px "DM Sans", sans-serif; }
.task-draft-list ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: #75747e; font: 500 11px/1.6 "DM Sans", sans-serif; }
.task-criteria-map { display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; background: #f8f8f9; color: #5f5e68; font: 600 11px/1.55 "DM Sans", sans-serif; }
.task-criteria-map ul { display: grid; gap: 10px; margin: 0; padding-left: 18px; }
.task-criteria-map li { display: grid; gap: 3px; }
.task-criteria-map li::marker { color: #5138a5; }
.task-criteria-map li > span { color: #44434f; }
.task-criteria-map li small, .task-criteria-map > small { color: #777681; font: 500 10px/1.6 "DM Sans", sans-serif; }
.verification-assertions { display: grid; gap: 9px; margin-top: 8px; padding: 12px; border-radius: 16px; background: #f8f8f9; }
.verification-assertions summary { cursor: pointer; color: #55545f; font: 600 11px/1.6 "DM Sans", sans-serif; overflow-wrap: anywhere; }
.verification-assertions p { margin: 0; color: #777681; font: 500 10px/1.6 "DM Sans", sans-serif; }
.verification-assertions details { display: grid; gap: 7px; }
.verification-assertions pre { max-height: 260px; margin: 0; padding: 11px; overflow: auto; border-radius: 12px; background: #fff; color: #34333f; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.task-draft-loading { color: #65646e; font: 600 12px/1.6 "DM Sans", sans-serif; }
@media (max-width: 570px) {
  .task-intake { padding: 21px 16px; border-radius: 31px; }
  .task-intake textarea, .task-intake input:not([type=checkbox]) { padding: 16px; border-radius: 22px; font-size: 13px; }
  .task-consent, .task-search-option { font-size: 11px; }
  .task-plan-result { padding: 18px 14px; border-radius: 27px; }
  .task-plan-summary h2 { font-size: 17px; }
  .task-acceptance { padding: 15px; border-radius: 20px; }
  .task-step { grid-template-columns: 29px minmax(0, 1fr); gap: 9px; padding: 15px 12px; border-radius: 23px; }
  .task-step-count { width: 28px; height: 28px; }
  .task-candidates li, .task-source-lead { align-items: flex-start; flex-direction: column; gap: 9px; }
  .task-candidates li label { flex: 1 1 auto; align-items: flex-start; }
  .task-candidate-meta { width: 100%; flex: 1 1 auto; padding-left: 25px; }
  .task-candidate-meta small { max-width: 100%; text-align: left; }
  .task-source-lead a { padding-left: 25px; }
  .task-plan-actions { display: grid; }
  .task-plan-actions .button { width: 100%; }
  .task-source-intake { padding: 16px 13px; border-radius: 23px; }
  .task-source-intake > .button { width: 100%; }
  .task-draft-panel { padding: 16px 13px; border-radius: 23px; }
  .task-draft-file { padding: 11px; }
  .task-draft-output-heading { align-items: flex-start; flex-direction: column; }
  .task-download-draft { width: 100%; }
  .task-draft-file-head { align-items: flex-start; }
  .task-login-gate > div { display: grid; width: 100%; }
  .task-login-gate .button { width: 100%; }
}