.outreach-page { display: grid; gap: 1rem; } .outreach-runway { position: relative; overflow: hidden; padding: 1.2rem; background: #101a16; border: 1px solid #355044; border-radius: 1rem; } .outreach-runway::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 12% -20%, rgba(117, 214, 157, .16), transparent 34%); } .runway-heading { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; } .runway-heading h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.045em; } .runway-outcomes { display: flex; gap: .5rem; } .runway-outcomes span { display: grid; min-width: 5.7rem; padding: .55rem .7rem; color: var(--muted); background: rgba(9, 17, 14, .7); border: 1px solid var(--border); border-radius: .65rem; font-size: .72rem; } .runway-outcomes strong { color: #e9f1ec; font-size: 1.15rem; } .outreach-stages { position: relative; display: grid; gap: .55rem; padding: 0; margin: 0; list-style: none; } .outreach-stages li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem; background: rgba(23, 35, 30, .86); border: 1px solid var(--border); border-radius: .75rem; } .outreach-stages li > div { display: grid; gap: .05rem; } .outreach-stages li span { font-weight: 750; } .outreach-stages li small { color: var(--muted); } .outreach-stages li > strong { font-size: 1.4rem; } .stage-marker { width: .65rem; height: .65rem; border-radius: 50%; background: #668077; box-shadow: 0 0 0 .25rem rgba(102, 128, 119, .12); } .stage-screening .stage-marker { background: #86b7d7; } .stage-ready .stage-marker { background: var(--accent); } .stage-sending .stage-marker { background: #c1ef91; box-shadow: 0 0 0 .25rem rgba(193, 239, 145, .12); } .stage-retryable .stage-marker { background: var(--warning); } .runway-caption { position: relative; margin: .9rem 0 0; color: var(--muted); font-size: .78rem; } .candidate-section { margin-top: .5rem; } .candidate-updated { color: var(--muted); font-size: .8rem; } .outreach-candidates { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; } .outreach-candidate { display: grid; grid-template-columns: .32rem minmax(0, 1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: .85rem; } .candidate-status-rail { background: #668077; } .candidate-status-rail span { display: block; width: 100%; height: 3.1rem; background: #8ca49c; } .outreach-candidate.is-screening .candidate-status-rail span { background: #86b7d7; } .outreach-candidate.is-ready .candidate-status-rail span { background: var(--accent); } .outreach-candidate.is-sending .candidate-status-rail span { background: #c1ef91; } .outreach-candidate.is-retryable .candidate-status-rail span { background: var(--warning); } .outreach-candidate article { display: grid; gap: .7rem; min-width: 0; padding: .9rem 1rem; } .candidate-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .candidate-labels { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--muted); font-size: .72rem; } .candidate-status { padding: .25rem .45rem; color: #dce8e2; background: #2b3832; border-radius: .35rem; font-weight: 800; } .status-neutral { color: #dce8e2; background: #2b3832; } .status-screening { color: #d6edfc; background: #243a48; } .status-ready, .status-sending { color: var(--success-text); background: var(--success-bg); } .status-retryable { color: var(--warning-text); background: #42351b; } .candidate-heading time { flex: 0 0 auto; color: var(--muted); font-size: .74rem; } .candidate-title { width: fit-content; max-width: 100%; color: #eef6f1; font-size: 1rem; font-weight: 720; line-height: 1.35; text-decoration-color: #426655; text-underline-offset: .22em; overflow-wrap: anywhere; } .candidate-title:hover { text-decoration-color: var(--accent); } .candidate-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .76rem; } .candidate-note { display: grid; gap: .18rem; margin: 0; padding: .55rem .7rem; color: #d9c99e; background: #251f13; border-left: 2px solid var(--warning); border-radius: .35rem; font-size: .78rem; overflow-wrap: anywhere; } .candidate-note strong { color: var(--warning-text); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; } .outreach-candidate .account-owner-badge { margin-top: -.1rem; } .candidate-preparation { display: grid; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); } .candidate-preparation-grid { display: grid; gap: .8rem; } .candidate-preparation .origin-post-card { grid-template-columns: 1fr; align-items: stretch; gap: .55rem; margin: 0; padding: .6rem; background: #111915; border: 1px solid var(--border); border-radius: .6rem; } .candidate-preparation .origin-post-image { width: 100%; height: 12rem; } .candidate-preparation-copy { display: grid; gap: .7rem; min-width: 0; } .candidate-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; } .candidate-score-grid > div { display: grid; gap: .08rem; min-width: 0; padding: .6rem .7rem; background: #111c17; border: 1px solid var(--border); border-radius: .55rem; } .candidate-score-grid span, .candidate-prepared-message > span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .candidate-score-grid strong { color: #eef6f1; font-size: 1rem; text-transform: capitalize; overflow-wrap: anywhere; } .candidate-score-grid small { color: var(--muted); font-size: .67rem; } .candidate-preparation-metadata { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; } .candidate-preparation-metadata strong { color: #dce8e2; } .candidate-prepared-message { display: grid; gap: .35rem; } .candidate-prepared-message blockquote { margin: 0; padding: .7rem .8rem; color: #eef6f1; background: rgba(117, 214, 157, .07); border-left: 3px solid var(--accent); border-radius: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; } .candidate-analysis { padding: .55rem .7rem; background: #111915; border: 1px solid var(--border); border-radius: .5rem; } .candidate-analysis summary { width: fit-content; color: var(--accent); cursor: pointer; font-size: .75rem; font-weight: 750; } .candidate-analysis pre { margin: .65rem 0 0; color: #dce8e2; font: inherit; font-size: .76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } @media (min-width: 48rem) { .candidate-preparation-grid:has(.origin-post-card) { grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); align-items: stretch; } } @media (max-width: 34rem) { .candidate-score-grid { grid-template-columns: 1fr; } } @media (min-width: 64rem) { .outreach-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } .outreach-stages::before { position: absolute; top: 50%; left: 8%; right: 8%; height: 1px; content: ""; background: #3f5a4e; } .outreach-stages li { position: relative; grid-template-columns: auto minmax(0, 1fr); margin-right: .55rem; } .outreach-stages li:last-child { margin-right: 0; } .outreach-stages li > strong { grid-column: 2; } } @media (prefers-reduced-motion: no-preference) { .outreach-candidate.is-screening .candidate-status-rail span, .outreach-candidate.is-sending .candidate-status-rail span { animation: queue-pulse 2.4s ease-in-out infinite; } @keyframes queue-pulse { 50% { opacity: .45; } } }