/* Who's Hiring: layout on an 8px rhythm (4 / 8 / 12 / 16 / 24 / 32) */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --db-card-padding: 20px; }
[hidden] { display: none !important; }

.wh-main { padding-top: var(--s6); padding-bottom: var(--s6); }
.wh-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.wh-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.wh-side > .db-card { margin: 0; }
.wh-gap { margin-top: var(--s4); }
.wh-gap-xs { margin-top: var(--s2); text-align: center; }
.wh-full { width: 100%; }
.wh-center { text-align: center; }
.wh-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.wh-block { display: block; }

/* start state: pitch on the left, upload card on the right */
.wh-intro { display: none; }
.is-start .wh-intro { display: block; }
.is-start .wh-layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 440px); gap: var(--s6) 56px; align-items: center; max-width: 1040px; margin: var(--s5) auto 0; }
.is-start .wh-results { display: none; }
.wh-intro__title { font-family: var(--db-font-heading); font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.wh-intro__lede { margin: var(--s4) 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--db-warm-gray); max-width: 34rem; }
.wh-intro__lede strong { color: var(--db-color-text, inherit); }
.wh-steps { list-style: none; padding: 0; margin: var(--s6) 0 0; display: flex; flex-direction: column; gap: var(--s4); }
.wh-steps li { display: flex; gap: var(--s3); align-items: flex-start; }
.wh-steps__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--db-font-ui); font-size: .85rem; font-weight: 700; background: var(--wh-accent-strong); color: #fff; }
[data-theme="dark"] .wh-steps__n { color: #1b1410; }
.wh-steps div { display: flex; flex-direction: column; gap: 2px; }
.wh-steps b { font-family: var(--db-font-ui); font-size: .95rem; }
.wh-steps span:not(.wh-steps__n) { font-size: .92rem; color: var(--db-warm-gray); line-height: 1.5; }
.wh-facts { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-family: var(--db-font-ui); font-size: .82rem; color: var(--db-warm-gray); }
.wh-facts li::before { content: "✓ "; color: var(--wh-accent-strong); font-weight: 700; }
[data-theme="dark"] .wh-facts li::before { color: var(--db-terracotta); }

/* profile card */
.wh-drop { display: flex; flex-direction: column; gap: var(--s1); align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--db-color-border, var(--db-sand)); border-radius: var(--db-radius-3, 12px); padding: var(--s6) var(--s4); cursor: pointer; }
.wh-drop:hover, .wh-drop.is-over, .wh-drop:focus-within { border-color: var(--db-terracotta); }
.wh-drop__title { font-weight: 600; }
#input-status:empty { display: none; }
.db-alert > div { min-width: 0; }
.wh-compact { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wh-compact span { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-main:not(.is-start) #profile-card { padding: var(--s3) var(--s4); }
.wh-main:not(.is-start) #profile-card .db-card__header { display: none; }

/* refine panel */
.wh-panel { padding: var(--s4); }
.wh-summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s2); }
.wh-summary::-webkit-details-marker { display: none; }
.wh-summary__title { font-family: var(--db-font-heading); font-size: 1.05rem; font-weight: 600; }
.wh-summary::after { content: "▾"; margin-left: auto; opacity: .6; transition: transform .15s; }
details:not([open]) > .wh-summary::after { transform: rotate(-90deg); }
.wh-filters { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--db-color-border, rgba(127,127,127,.2)); }
.wh-filter { display: flex; flex-direction: column; gap: var(--s2); }
.wh-filter__label { font-family: var(--db-font-ui); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--db-warm-gray); }
.wh-chips { display: flex; flex-wrap: wrap; gap: var(--s1) 6px; }
.wh-chips .db-chip { cursor: pointer; user-select: none; padding: 6px 10px; }
.wh-chips .db-chip:focus-visible { outline: 2px solid var(--db-terracotta); outline-offset: 2px; }

/* results */
.wh-results { min-width: 0; scroll-margin-top: 16px; }
#h-results { scroll-margin-top: 16px; margin: 0; }
.wh-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.wh-reading { margin-top: var(--s2); font-size: .85rem; color: var(--db-warm-gray); line-height: 1.5; }
.wh-reading strong { color: var(--db-color-text, inherit); font-weight: 600; }
#jev-progress { margin-top: var(--s3); }
#results { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
#more-btn { margin-top: var(--s4); }
#stale-note { margin-top: var(--s5); font-size: .85rem; }

.wh-co { margin: 0; padding: var(--s4) var(--s5); overflow-wrap: anywhere; display: flex; flex-direction: column; gap: var(--s2); }
.wh-co__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); align-items: baseline; }
.wh-co__name { margin: 0; font-size: 1.1rem; line-height: 1.3; flex: 1 1 8em; min-width: 0; overflow-wrap: break-word; } /* narrow cards: the fit badge drops below the name instead of splitting words */
.wh-co__rank { color: var(--db-warm-gray); font-weight: 400; margin-right: var(--s1); }
.wh-co__score { text-align: right; white-space: nowrap; font-family: var(--db-font-ui); }
.wh-co__score strong { font-size: 1.05rem; }
.wh-co__tag { margin: 0; font-size: .95rem; color: var(--db-warm-gray); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wh-co__line { font-family: var(--db-font-ui); font-size: .8rem; color: var(--db-warm-gray); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; }
.wh-co__line b { color: var(--db-color-text, inherit); font-weight: 600; }
.wh-co__why { font-family: var(--db-font-ui); font-size: .8rem; color: var(--db-warm-gray); }
.wh-co__why b { color: var(--db-color-text, inherit); font-weight: 600; }
.wh-divider { margin: var(--s3) 0 var(--s2); padding-top: var(--s2); border-top: 1px solid var(--db-border, rgba(0,0,0,.12)); font-family: var(--db-font-ui); font-size: .8rem; color: var(--db-warm-gray); }
.wh-co__desc { margin: 0; font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wh-co__desc.is-open { display: block; }
.wh-more { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-family: var(--db-font-ui); font-size: .8rem; color: var(--db-terracotta); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wh-co__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--db-color-border, rgba(127,127,127,.18)); }
.wh-co__links { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .wh-layout, .is-start .wh-layout { grid-template-columns: 1fr; gap: var(--s4); }
  .is-start .wh-layout { gap: 0; margin-top: 0; }
  /* phones: headline, then the upload card, then how it works */
  .is-start .wh-intro { display: contents; }
  .is-start .wh-intro__title { order: 1; }
  .is-start .wh-intro__lede { order: 2; margin-bottom: var(--s5); }
  .is-start .wh-side { order: 3; }
  .is-start .wh-steps { order: 4; margin-top: var(--s6); }
  .is-start .wh-facts { order: 5; }
}
@media (max-width: 640px) {
  :root { --db-card-padding: 16px; }
  .wh-main { padding-top: var(--s5); }
  .wh-co { padding: var(--s4); }
  .wh-co__foot { flex-direction: column; align-items: flex-start; }
}

/* contrast: daub 3.20.1 badge/chip presets keep dark-on-light lightness in dark mode */
:root:not([data-theme="dark"]) .db-chip { color: hsl(var(--db-chip-h), var(--db-chip-s), calc(var(--db-chip-l) - 22%)); }
[data-theme="dark"] .db-chip { color: hsl(var(--db-chip-h), var(--db-chip-s), calc(var(--db-chip-l) + 28%)); border-color: hsla(var(--db-chip-h), var(--db-chip-s), var(--db-chip-l), .5); }
.db-badge--blue { color: hsl(210, 70%, 32%); }
[data-theme="dark"] .db-badge--blue { color: hsl(210, 80%, 78%); border-color: hsla(210, 60%, 60%, .5); }
[data-theme="dark"] .db-btn--primary { color: #1b1410; }
/* selected chips must read as selected at a glance */
:root { --wh-accent-strong: color-mix(in srgb, var(--db-terracotta) 72%, #000); }
[data-theme="dark"] { --wh-accent-strong: var(--db-terracotta); }
:root .wh-chips .db-chip.db-chip--active { background: var(--wh-accent-strong); border-color: var(--wh-accent-strong); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .wh-chips .db-chip.db-chip--active { color: #1b1410; }
/* footer link contrast in light mode (terracotta on cream is 3.1:1) */
:root:not([data-theme="dark"]) footer a[href*="staskulesh"] { color: var(--wh-accent-strong) !important; }
/* light mode: daub's terracotta button gives ~3.5:1 with cream text; darken to pass AA */
:root:not([data-theme="dark"]) .db-btn--primary { background-image: linear-gradient(color-mix(in srgb, var(--db-terracotta) 78%, #000), color-mix(in srgb, var(--db-terracotta) 68%, #000)); }
/* keep the footer at the bottom and give the landing some air */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
@media (min-width: 901px) { .is-start .wh-layout { margin-top: clamp(24px, 9vh, 112px); } }
/* LinkedIn export how-to */
.wh-howto { margin: var(--s3) 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--s2); font-size: .92rem; line-height: 1.5; }
.wh-howto a { color: var(--wh-accent-strong); font-weight: 600; }
[data-theme="dark"] .wh-howto a { color: var(--db-terracotta); }
.wh-howto__img { display: block; width: 100%; height: auto; margin-top: var(--s3); border-radius: var(--db-radius-2, 8px); border: 1px solid var(--db-color-border, rgba(127,127,127,.25)); }
/* no header: centre the landing vertically */
@media (min-width: 901px) {
  .wh-main.is-start { display: flex; align-items: center; }
  .is-start .wh-layout { width: 100%; margin-top: 0; }
}
/* live YC data has no per-function role counts */
/* uploaded-file chip, shared by the Upload and LinkedIn tabs */
.wh-file { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--db-radius-3, 12px);
  border: 1px solid var(--db-color-border, rgba(127,127,127,.25)); background: var(--db-color-surface-2, rgba(127,127,127,.06)); }
.wh-file__icon { flex: none; width: 28px; height: 28px; color: var(--wh-accent-strong); }
[data-theme="dark"] .wh-file__icon { color: var(--db-terracotta); }
.wh-file__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wh-file__meta b { font-family: var(--db-font-ui); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-file__meta span { font-family: var(--db-font-ui); font-size: .78rem; color: var(--db-warm-gray); }
.wh-file__btn { flex: none; background: none; border: 0; padding: var(--s1) var(--s2); font-family: var(--db-font-ui); font-size: .85rem; font-weight: 600; color: var(--wh-accent-strong); cursor: pointer; border-radius: var(--db-radius-1, 4px); }
[data-theme="dark"] .wh-file__btn { color: var(--db-terracotta); }
.wh-file__btn:hover { text-decoration: underline; }
.wh-file__btn:focus-visible { outline: 2px solid var(--db-terracotta); outline-offset: 2px; }
/* paste */
.wh-paste { width: 100%; min-height: 180px; resize: vertical; font-size: .92rem; line-height: 1.5; }
.wh-count { text-align: right; margin-top: var(--s1); min-height: 1.2em; }
#match-btn:disabled { opacity: .55; cursor: not-allowed; }
/* brand */
.wh-brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--db-font-ui); font-weight: 700; font-size: .95rem; color: var(--db-color-text, inherit); text-decoration: none; margin-bottom: var(--s4); }
.wh-brand__mark { width: 28px; height: 28px; color: var(--wh-accent-strong); flex: none; }
[data-theme="dark"] .wh-brand__mark { color: var(--db-terracotta); }
.wh-brand--side { display: none; margin-bottom: 0; }
.wh-main:not(.is-start) .wh-brand--side { display: inline-flex; }
@media (max-width: 900px) { .is-start .wh-brand { order: 0; } }
.wh-facts a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* footer link sits inside text now: underline so it is not colour-only */
footer a[href*="staskulesh"] { text-decoration: underline !important; text-underline-offset: 2px; }
/* hide the fallback headline until the random one is in place (JS only) */
.js #h-intro:not(.is-set) { visibility: hidden; }
/* whole-page drop target */
.wh-dropall { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: var(--s5);
  background: color-mix(in srgb, var(--db-color-bg, #f6f1e7) 82%, transparent); backdrop-filter: blur(3px); pointer-events: none; }
.is-dragging .wh-dropall { display: grid; }
.wh-dropall__box { display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: min(560px, 100%); padding: 56px var(--s5);
  border: 3px dashed var(--wh-accent-strong); border-radius: 20px; text-align: center; font-family: var(--db-font-ui); color: var(--db-color-text, inherit); }
[data-theme="dark"] .wh-dropall__box { border-color: var(--db-terracotta); }
.wh-dropall__box svg { width: 40px; height: 40px; color: var(--wh-accent-strong); }
[data-theme="dark"] .wh-dropall__box svg { color: var(--db-terracotta); }
.wh-dropall__box b { font-size: 1.3rem; }
.wh-dropall__box span { font-size: .9rem; color: var(--db-warm-gray); }
/* keyboard focus on the hidden file input shows on the drop zone */
.db-tabs__panel:has(#file:focus-visible) .wh-drop { outline: 2px solid var(--db-terracotta); outline-offset: 2px; }
/* touch screens: tap targets of at least 36-44px, and 16px inputs so iOS doesn't zoom on focus */
@media (pointer: coarse) {
  .wh-chips { gap: var(--s2); }
  .wh-chips .db-chip { min-height: 36px; padding-inline: 14px; font-size: .8rem; }
  .db-btn--sm, #edit-profile, #csv-btn, .wh-file__btn { min-height: 40px; }
  .wh-more { min-height: 40px; display: inline-flex; align-items: center; }
  .wh-summary { min-height: 40px; align-items: center; }
  .db-tabs__tab { min-height: 44px; }
  .db-input, .db-textarea, .wh-paste { font-size: 16px; }
  .db-input--sm { min-height: 44px; }
}
/* no sticky hover colour on the brand link after a tap */
.wh-brand:hover, .wh-brand:active { color: var(--db-color-text, inherit); }
.wh-empty-reset { margin-top: var(--s3); }
.wh-co__score .db-badge { font-size: .75rem; }
@media (max-width: 480px) { .wh-co__name { flex-basis: 100%; } .wh-co__score { text-align: left; } } /* phones: score always on its own line, so every card lines up */
/* footer easter egg: hover grow (was inline JS handlers, which the CSP blocks) */
.wh-egg:hover { transform: scale(1.3); }