/* HatchDesk theme: hire-v2 styles. Used by Developers/Index. Requires core.css. */

/* ==========================================================================
   Hire v2 (/Developers/{expertise}) - markup in Views/Developers/Index.cshtml (.hd-hi-*)
   Hero stats, team builder (live estimate + 3D deck), 3D flip "bench" profiles,
   timezone overlap bar. Reuses .hd-sv-head / .hd-sv-h2 / .hd-sv-btn-lime from Service v2.
   ========================================================================== */
.hd .hd-hi-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 40px; margin: 36px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); animation: hd-rise .8s .34s var(--hd-ease) both; }
.hd .hd-hi-stats dt { font-family: var(--hd-display); font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.hd .hd-hi-stats dt small { font-size: 15px; font-weight: 700; }
.hd .hd-hi-stats dt.lime { color: var(--hd-lime); }
.hd .hd-hi-stats dd { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .65); }

/* ---------- team builder ---------- */
.hd .hd-hi-build { margin: 0 8px; padding: 80px 0; border-radius: 32px; color: rgba(255, 255, 255, .62);
    background: radial-gradient(60% 60% at 90% 0%, rgba(79, 70, 229, .35), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(6, 182, 212, .2), transparent 60%), var(--hd-ink); }
.hd .hd-hi-build .hd-kick { color: var(--hd-lime); }
.hd .hd-hi-build .hd-sv-h2 b, .hd .hd-hi-tz .hd-sv-h2 b { font-weight: inherit; color: var(--hd-lime); }
.hd .hd-hi-build-grid { display: grid; gap: 20px; margin-top: 40px; }
.hd .hd-hi-ctrl { display: grid; gap: 28px; align-content: start; align-self: start; padding: 26px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.hd .hd-hi-ctrl fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.hd .hd-hi-ctrl legend { width: auto; margin: 0 0 14px; border: 0; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.hd .hd-hi-ctrl legend small { margin-left: 6px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .3); }
.hd .hd-hi-roles { display: grid; gap: 8px; }
.hd .hd-hi-role { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background-color .25s, border-color .25s, color .25s; }
.hd .hd-hi-role > i { width: 18px; text-align: center; color: rgba(255, 255, 255, .55); }
.hd .hd-hi-add { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; text-align: left; font-family: var(--hd-display); font-size: 15px; font-weight: 600; color: inherit; }
.hd .hd-hi-step { display: flex; align-items: center; gap: 4px; }
.hd .hd-hi-step button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 17px; line-height: 1; color: inherit; transition: background-color .2s; }
.hd .hd-hi-step button:hover { background: rgba(255, 255, 255, .18); }
.hd .hd-hi-cnt { width: 20px; text-align: center; font-variant-numeric: tabular-nums; color: inherit; }
.hd .hd-hi-role.is-on { border-color: var(--hd-lime); background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hi-role.is-on > i { color: var(--hd-ink); }
.hd .hd-hi-role.is-on .hd-hi-step button { background: rgba(11, 16, 32, .1); }
.hd .hd-hi-role.is-on .hd-hi-step button:hover { background: rgba(11, 16, 32, .2); }
.hd .hd-hi-ctrl-row { display: grid; gap: 28px; }
.hd .hd-hi-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); }
.hd .hd-hi-seg button { padding: 10px 6px; border: 0; border-radius: 14px; background: none; font-family: var(--hd-display); font-size: 14px; font-weight: 600; line-height: 1.25; color: #fff; transition: background-color .25s, color .25s; }
.hd .hd-hi-seg small { display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 400; opacity: .6; }
.hd .hd-hi-seg button[aria-pressed="true"] { background: var(--hd-lime); color: var(--hd-ink); }
.hd .hd-hi-pm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .72); cursor: pointer; }
.hd .hd-hi-pm input { width: 17px; height: 17px; margin: 0; accent-color: var(--hd-lime); }
.hd .hd-hi-pm span { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11.5px; }
.hd .hd-hi-ctrl button:focus-visible, .hd .hd-hi-pm input:focus-visible { outline: 2px solid var(--hd-lime); outline-offset: 2px; }

.hd .hd-hi-sum { display: flex; flex-direction: column; padding: 26px; border-radius: 28px; background: #fff; color: #475569; }
.hd .hd-hi-deck-wrap { position: relative; height: 150px; perspective: 1100px; }
.hd .hd-hi-deck { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-32deg); }
.hd .hd-hi-tile { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; width: 150px; height: 92px; margin: -46px 0 0 -75px; padding: 0 16px; border-radius: 18px; font-family: var(--hd-display); font-size: 14px; font-weight: 700; color: #fff;
    box-shadow: 0 30px 40px -20px rgba(11, 16, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .6s var(--hd-ease), opacity .4s; }
.hd .hd-hi-tile.is-new { opacity: 0; transform: translateZ(170px) !important; }
.hd .hd-hi-sum-k { margin-top: 8px; font-family: var(--hd-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-muted); }
.hd .hd-hi-lines { display: grid; gap: 8px; margin: 12px 0 22px; font-size: 14.5px; color: var(--hd-ink); }
.hd .hd-hi-lines li { display: flex; align-items: center; gap: 12px; }
.hd .hd-hi-lines li > span:nth-child(2) { flex: 1; }
.hd .hd-hi-lines small { font-size: 12.5px; color: #64748B; }
.hd .hd-hi-sw { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; font-size: 12px; color: #fff; }
.hd .hd-hi-sw .fa-list-check { color: var(--hd-ink); }
.hd .hd-hi-total { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hd-line); }
.hd .hd-hi-total > p:first-child { font-size: 14px; color: #64748B; }
.hd .hd-hi-range { margin-top: 2px; font-family: var(--hd-display); font-size: clamp(30px, 3.6vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--hd-ink); font-variant-numeric: tabular-nums; }
.hd .hd-hi-range i { font-style: normal; color: #CBD5E1; }
.hd .hd-hi-note { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: #64748B; }
.hd .hd-hi-note b { font-weight: 600; color: #047857; }
.hd .hd-hi-send { width: 100%; justify-content: space-between; margin-top: 20px; padding: 8px 8px 8px 24px; background: var(--hd-ink); color: #fff; }
.hd .hd-hi-send .hd-btn-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--hd-lime); color: var(--hd-ink); transition: transform .3s var(--hd-ease); }
.hd .hd-hi-send:hover, .hd .hd-hi-send:focus { background: #1E293B; color: #fff; }
.hd .hd-hi-send:hover .hd-btn-icon { transform: rotate(45deg); }

/* ---------- bench: 3D flip profiles ---------- */
.hd .hd-hi-bench { padding: 88px 0 72px; }
.hd .hd-hi-flips { display: grid; gap: 16px; margin-top: 40px; }
.hd .hd-hi-flip { height: 340px; perspective: 1200px; cursor: pointer; outline: 0; }
.hd .hd-hi-flip-in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--hd-ease); }
.hd .hd-hi-flip.is-flipped .hd-hi-flip-in { transform: rotateY(180deg); }
.hd .hd-hi-flip:focus-visible .hd-hi-face { box-shadow: 0 0 0 3px var(--hd-brand); }
@media (hover: hover) { .hd .hd-hi-flip:hover .hd-hi-flip-in { transform: rotateY(180deg); } }
.hd .hd-hi-face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 16, 32, .05); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hd .hd-hi-face-top { display: flex; align-items: center; justify-content: space-between; }
.hd .hd-hi-ini { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-family: var(--hd-display); font-size: 18px; font-weight: 700; color: #fff; }
.hd .hd-hi-face h3 { margin-top: 24px; font-family: var(--hd-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--hd-ink); }
.hd .hd-hi-meta { margin-top: 4px; font-size: 14px; color: #64748B; }
.hd .hd-hi-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hd .hd-hi-skills li { padding: 4px 11px; border-radius: 999px; background: var(--hd-paper); font-size: 12px; font-weight: 500; color: var(--hd-ink); }
.hd .hd-hi-hint { margin-top: auto; font-family: var(--hd-mono); font-size: 11.5px; color: var(--hd-muted); }
.hd .hd-hi-hint i { margin-right: 6px; }
.hd .hd-hi-face.is-back { padding: 0; background: var(--hd-ink); color: rgba(255, 255, 255, .72); transform: rotateY(180deg); }
.hd .hd-hi-face.is-back img { width: 100%; height: 132px; object-fit: cover; object-position: top; }
.hd .hd-hi-face.is-back > div { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 24px; font-size: 14px; line-height: 1.55; }
.hd .hd-hi-shipped { margin-bottom: 8px; font-family: var(--hd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-lime); }
.hd .hd-hi-face.is-back b { margin-top: auto; font-family: var(--hd-display); font-size: 22px; font-weight: 800; color: var(--hd-lime); }

/* ---------- timezone overlap ---------- */
.hd .hd-hi-tz-outer { padding: 0 0 88px; }
.hd .hd-hi-tz { padding: 30px 24px; border-radius: 32px; background: var(--hd-ink); color: rgba(255, 255, 255, .62); }
.hd .hd-hi-tz-head { display: grid; gap: 22px; align-items: end; }
.hd .hd-hi-tz-head p { max-width: 520px; margin-top: 10px; font-size: 15.5px; line-height: 1.65; }
.hd .hd-hi-tz-head p b { color: #fff; }
.hd .hd-hi-tz-sel { display: flex; flex-wrap: wrap; gap: 4px; justify-self: start; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); }
.hd .hd-hi-tz-sel button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .8); transition: background-color .25s, color .25s; }
.hd .hd-hi-tz-sel button[aria-pressed="true"] { background: #fff; color: var(--hd-ink); }
.hd .hd-hi-tz-sel button:focus-visible { outline: 2px solid var(--hd-lime); outline-offset: 2px; }
.hd .hd-hi-tz-rows { display: grid; gap: 18px; margin-top: 36px; }
.hd .hd-hi-tz-rows p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.hd .hd-hi-tz-rows p span:last-child { font-family: var(--hd-mono); text-align: right; }
.hd .hd-hi-track { position: relative; overflow: hidden; height: 44px; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4.1667%), rgba(255, 255, 255, .04); }
.hd .hd-hi-track i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 12px; transition: left .5s var(--hd-ease), width .5s var(--hd-ease); }
.hd .hd-hi-track .is-you { background: rgba(79, 70, 229, .7); }
.hd .hd-hi-track .is-us { background: rgba(6, 182, 212, .6); }
.hd .hd-hi-track .is-ov { border: 2px solid var(--hd-lime); background: rgba(198, 244, 50, .2); }
.hd .hd-hi-tz-rows .hd-hi-ticks { margin: -6px 0 0; font-family: var(--hd-mono); font-size: 10px; color: rgba(255, 255, 255, .35); }
.hd .hd-hi-tz-foot { margin-top: 22px; font-size: 12.5px; color: rgba(255, 255, 255, .4); }

@media (min-width: 640px) {
    .hd .hd-hi-roles, .hd .hd-hi-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd .hd-hi-ctrl-row { grid-template-columns: 1.2fr 1fr; }
    .hd .hd-hi-ctrl, .hd .hd-hi-sum { padding: 32px; }
    .hd .hd-hi-tz { padding: 44px; }
}
@media (min-width: 1024px) {
    .hd .hd-hi-build { margin: 0 12px; padding: 96px 0; }
    .hd .hd-hi-build-grid { grid-template-columns: 1.25fr 1fr; }
    .hd .hd-hi-flips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hd .hd-hi-tz-head { grid-template-columns: 1fr auto; }
    .hd .hd-hi-tz-sel { justify-self: end; }
}
@media (max-width: 639px) {
    .hd .hd-hi-tz-sel button { padding: 6px 11px; font-size: 13px; }
}
@media (max-width: 399px) {
    .hd .hd-hi-stats { gap: 12px 22px; }
    .hd .hd-hi-stats dt { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .hd .hd-hi-tile, .hd .hd-hi-flip-in, .hd .hd-hi-track i { transition: none; }
}