/**
 * HiHiredBot consumer styling.
 * Scopes all rules under .hhb-hire so it cannot leak into the host theme.
 * Color system aligns with hifriendbot.com (dark surface, teal/purple accents).
 */

.hhb-hire {
    --hire-bg:           #0B0F1A;
    --hire-surface:      #131826;
    --hire-surface-2:    #1B2235;
    --hire-border:       #1F2638;
    --hire-rule:         #2A3349;
    --hire-text:         #E2E8F0;
    --hire-text-soft:    #94A3B8;
    --hire-text-muted:   #64748B;
    --hire-accent:       #14B8A6;
    --hire-accent-2:     #5EEAD4;
    --hire-purple:       #A78BFA;
    --hire-purple-2:     #C4B5FD;
    --hire-success:      #34D399;
    --hire-warn:         #FBBF24;
    --hire-danger:       #F87171;
    --hire-radius:       14px;
    --hire-radius-sm:    10px;
    --hire-shadow:       0 8px 28px rgba(0,0,0,.35);
    --hire-shadow-lg:    0 18px 48px rgba(0,0,0,.45);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
    color: var(--hire-text);
    line-height: 1.55;
    box-sizing: border-box;
}
.hhb-hire *, .hhb-hire *::before, .hhb-hire *::after { box-sizing: border-box; }

/* ============================================================
   LANDING PAGE
   ============================================================ */

.hhb-hire__hero {
    position: relative;
    background: radial-gradient(ellipse at top, rgba(20,184,166,.18), transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(167,139,250,.15), transparent 50%),
                var(--hire-bg);
    color: var(--hire-text);
    padding: 80px 24px 100px;
    overflow: hidden;
    text-align: center;
}
.hhb-hire__hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.hhb-hire__hero-glow {
    position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(20,184,166,.2), transparent 60%);
    filter: blur(60px); z-index: 1; pointer-events: none;
}

.hhb-hire__badge {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: rgba(20,184,166,.12); color: var(--hire-accent-2);
    border: 1px solid rgba(20,184,166,.3);
    font-size: 13px; font-weight: 600; letter-spacing: .03em;
    margin-bottom: 24px;
}

.hhb-hire__h1 {
    font-size: 56px; line-height: 1.05; letter-spacing: -0.02em;
    font-weight: 800; margin: 0 0 22px;
}
.hhb-hire__h1-accent {
    background: linear-gradient(135deg, var(--hire-accent), var(--hire-purple));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hhb-hire__hero-sub {
    font-size: 19px; color: var(--hire-text-soft);
    max-width: 680px; margin: 0 auto 32px;
}
.hhb-hire__hero-fineprint {
    margin-top: 18px; font-size: 13px; color: var(--hire-text-muted);
}

.hhb-hire__cta-row {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-top: 28px;
}

.hhb-hire__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px; border-radius: 10px;
    font-weight: 600; font-size: 15px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    cursor: pointer; border: 1px solid transparent;
    line-height: 1;
}
.hhb-hire__btn:hover { transform: translateY(-1px); }
.hhb-hire__btn--primary {
    background: linear-gradient(135deg, var(--hire-accent), #0EA5E9);
    color: #04162B; box-shadow: 0 8px 24px rgba(20,184,166,.25);
}
.hhb-hire__btn--primary:hover { box-shadow: 0 12px 28px rgba(20,184,166,.35); }
.hhb-hire__btn--ghost {
    background: transparent; color: var(--hire-text);
    border: 1px solid var(--hire-border);
}
.hhb-hire__btn--ghost:hover { background: var(--hire-surface); border-color: var(--hire-rule); }
.hhb-hire__btn--big { padding: 16px 36px; font-size: 17px; }
.hhb-hire__btn--block { width: 100%; }
.hhb-hire__btn--sm { padding: 8px 14px; font-size: 13px; }
.hhb-hire__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* HOW IT WORKS */

.hhb-hire__how {
    padding: 90px 24px;
    background: var(--hire-bg);
    text-align: center;
}
.hhb-hire__h2 {
    font-size: 38px; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.hhb-hire__h2-sub { color: var(--hire-text-soft); margin: 0 0 50px; font-size: 16px; }
.hhb-hire__steps {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.hhb-hire__step {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); padding: 22px 20px;
    text-align: left; transition: transform .15s ease, border-color .15s ease;
}
.hhb-hire__step:hover { transform: translateY(-2px); border-color: var(--hire-accent); }
.hhb-hire__step h3 { font-size: 17px; margin: 0 0 8px; color: var(--hire-text); }
.hhb-hire__step p { font-size: 14px; color: var(--hire-text-soft); margin: 0; line-height: 1.55; }
.hhb-hire__step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hire-accent), var(--hire-purple));
    color: #04162B; font-weight: 800; font-size: 14px;
    margin-bottom: 12px;
}

/* DIFFERENTIATOR */
.hhb-hire__differentiator { padding: 80px 24px; background: var(--hire-surface); text-align: center; }
.hhb-hire__compare {
    max-width: 920px; margin: 30px auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.hhb-hire__compare-card {
    border-radius: var(--hire-radius); padding: 28px;
    background: var(--hire-surface-2); border: 1px solid var(--hire-border);
    text-align: left;
}
.hhb-hire__compare-card h4 { margin: 0 0 16px; font-size: 18px; }
.hhb-hire__compare-card ul { list-style: none; padding: 0; margin: 0; }
.hhb-hire__compare-card ul li { padding: 7px 0 7px 26px; font-size: 14px; position: relative; color: var(--hire-text-soft); }
.hhb-hire__compare-card--them ul li::before { content: "✕"; position: absolute; left: 4px; color: var(--hire-danger); font-weight: 800; }
.hhb-hire__compare-card--us {
    background: linear-gradient(180deg, rgba(20,184,166,.08), var(--hire-surface-2));
    border-color: var(--hire-accent);
}
.hhb-hire__compare-card--us ul li::before { content: "✓"; position: absolute; left: 4px; color: var(--hire-accent); font-weight: 800; }

/* PRICING */
.hhb-hire__pricing { padding: 80px 24px; background: var(--hire-bg); text-align: center; }
.hhb-hire__tiers {
    max-width: 1240px; margin: 40px auto 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.hhb-hire__tier {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); padding: 30px 22px;
    text-align: left; position: relative;
    transition: transform .15s ease, border-color .15s ease;
}
.hhb-hire__tier:hover { transform: translateY(-3px); border-color: var(--hire-rule); }
.hhb-hire__tier--featured {
    border-color: var(--hire-accent);
    box-shadow: 0 12px 36px rgba(20,184,166,.18);
}
.hhb-hire__tier--highlighted { box-shadow: 0 0 0 2px var(--hire-purple); }
.hhb-hire__tier--current { opacity: 0.85; }
.hhb-hire__tier-badge {
    position: absolute; top: -12px; right: 18px;
    background: linear-gradient(135deg, var(--hire-accent), var(--hire-purple));
    color: #04162B; font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
}
.hhb-hire__tier-name { font-size: 22px; margin: 0 0 8px; }
.hhb-hire__tier-price { font-size: 28px; font-weight: 800; margin-bottom: 6px; color: var(--hire-text); }
.hhb-hire__tier-tagline { color: var(--hire-text-soft); font-size: 14px; margin-bottom: 18px; min-height: 38px; }
.hhb-hire__tier-features { list-style: none; padding: 0; margin: 0 0 22px; }
.hhb-hire__tier-features li {
    padding: 7px 0 7px 22px; font-size: 13.5px; color: var(--hire-text-soft);
    position: relative; line-height: 1.5;
}
.hhb-hire__tier-features li::before {
    content: "✓"; position: absolute; left: 2px; color: var(--hire-accent); font-weight: 700;
}
.hhb-hire__pricing-fineprint { color: var(--hire-text-muted); margin-top: 28px; font-size: 13px; }

/* FAQ */
.hhb-hire__faq { padding: 80px 24px; background: var(--hire-surface); text-align: center; }
.hhb-hire__faq-grid {
    max-width: 980px; margin: 40px auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.hhb-hire__faq details {
    background: var(--hire-surface-2); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius-sm); padding: 18px 22px; text-align: left;
}
.hhb-hire__faq summary {
    cursor: pointer; font-weight: 600; font-size: 15px; color: var(--hire-text);
    list-style: none;
}
.hhb-hire__faq summary::-webkit-details-marker { display: none; }
.hhb-hire__faq summary::after { content: "+"; float: right; color: var(--hire-text-muted); font-weight: 400; }
.hhb-hire__faq details[open] summary::after { content: "–"; }
.hhb-hire__faq p { color: var(--hire-text-soft); font-size: 14px; margin: 12px 0 0; line-height: 1.6; }

/* FINAL CTA */
.hhb-hire__cta-final {
    padding: 100px 24px;
    background: radial-gradient(ellipse at center, rgba(20,184,166,.15), transparent 60%), var(--hire-bg);
    text-align: center;
}
.hhb-hire__cta-final h2 { font-size: 42px; margin: 0 0 12px; }
.hhb-hire__cta-final p { font-size: 18px; color: var(--hire-text-soft); margin: 0 0 28px; }
.hhb-hire__cta-final-login { margin-top: 22px; font-size: 14px; }
.hhb-hire__cta-final-login a { color: var(--hire-accent-2); text-decoration: none; }

/* ============================================================
   AUTH (signup, login, login-required)
   ============================================================ */

.hhb-hire--auth {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, rgba(167,139,250,.1), transparent 60%), var(--hire-bg);
    padding: 60px 24px;
    display: flex; align-items: center; justify-content: center;
}
.hhb-hire__auth-card {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); padding: 44px 38px;
    max-width: 480px; width: 100%; box-shadow: var(--hire-shadow);
}
.hhb-hire__auth-back {
    display: inline-block; color: var(--hire-text-muted);
    text-decoration: none; font-size: 13px; margin-bottom: 22px;
}
.hhb-hire__auth-back:hover { color: var(--hire-text-soft); }
.hhb-hire__auth-tier {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.3);
    color: var(--hire-accent-2); font-size: 13px; font-weight: 600;
    margin-bottom: 20px;
}
.hhb-hire__auth-tier-price { color: var(--hire-text); font-weight: 500; }
.hhb-hire__auth-h1 { font-size: 28px; margin: 0 0 10px; }
.hhb-hire__auth-sub { color: var(--hire-text-soft); margin: 0 0 32px; font-size: 15px; }
.hhb-hire__auth-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.hhb-hire__auth-alt {
    text-align: center; margin-top: 24px;
    color: var(--hire-text-muted); font-size: 14px;
}
.hhb-hire__auth-alt a { color: var(--hire-accent-2); text-decoration: none; }
.hhb-hire__auth-alt a:hover { text-decoration: underline; }

/* Forms */
.hhb-hire__form { margin: 0; }
.hhb-hire__form-row { display: block; margin-bottom: 18px; }
.hhb-hire__form-row span {
    display: block; font-size: 13px; color: var(--hire-text-soft);
    margin-bottom: 6px; font-weight: 500;
}
.hhb-hire__form-row span small { color: var(--hire-text-muted); font-weight: 400; }
.hhb-hire__form-row--two {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.hhb-hire__form-row--two > label { display: block; }
.hhb-hire__form input[type="text"],
.hhb-hire__form input[type="email"],
.hhb-hire__form input[type="password"],
.hhb-hire__form input[type="number"],
.hhb-hire__form input[type="url"],
.hhb-hire__form input[type="tel"],
.hhb-hire__form select,
.hhb-hire__form textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--hire-border); border-radius: 8px;
    background: var(--hire-surface-2); color: var(--hire-text);
    font-size: 15px; font-family: inherit;
    transition: border-color .15s ease;
}
.hhb-hire__form input:focus,
.hhb-hire__form select:focus,
.hhb-hire__form textarea:focus {
    outline: none; border-color: var(--hire-accent);
    box-shadow: 0 0 0 3px rgba(20,184,166,.15);
}
.hhb-hire__form-checkbox {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    color: var(--hire-text-soft); font-size: 14px; margin-bottom: 18px;
}
.hhb-hire__form-error {
    color: var(--hire-danger); font-size: 14px;
    min-height: 22px; margin-bottom: 6px;
}
.hhb-hire__form-terms {
    color: var(--hire-text-muted); font-size: 12px;
    margin: 14px 0 0; text-align: center;
}

/* ============================================================
   APP CHROME (logged-in dashboard, inbox, etc.)
   ============================================================ */

.hhb-hire--app {
    min-height: 100vh; background: var(--hire-bg);
}
.hhb-hire__topnav {
    display: flex; align-items: center; gap: 24px;
    padding: 14px 28px;
    background: var(--hire-surface); border-bottom: 1px solid var(--hire-border);
    position: sticky; top: 0; z-index: 100;
}
.hhb-hire__topnav-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 17px;
    color: var(--hire-text); text-decoration: none;
}
.hhb-hire__brand-icon { font-size: 18px; }
.hhb-hire__topnav-links {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 2px; flex: 1; min-width: 0;
}
.hhb-hire__topnav-links a {
    display: inline-block; padding: 8px 12px;
    color: var(--hire-text-soft); text-decoration: none;
    font-size: 14px; font-weight: 500; border-radius: 8px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
/* Tighten nav at narrower desktop widths where 9 items + brand + user + logout
   compete for horizontal space. Keeps labels on a single line without
   triggering the mobile hamburger drawer (that fires at <=900px). */
@media (max-width: 1280px) and (min-width: 901px) {
    .hhb-hire__topnav { gap: 16px; padding: 14px 20px; }
    .hhb-hire__topnav-links { gap: 0; }
    .hhb-hire__topnav-links a { padding: 8px 9px; font-size: 13px; }
    .hhb-hire__topnav-brand { font-size: 16px; }
}
.hhb-hire__topnav-links a:hover { color: var(--hire-text); background: var(--hire-surface-2); }
.hhb-hire__topnav-links a.is-active {
    color: var(--hire-accent-2); background: rgba(20,184,166,.1);
}
.hhb-hire__topnav-user { display: flex; align-items: center; gap: 14px; }
.hhb-hire__topnav-name { color: var(--hire-text-soft); font-size: 13px; }
.hhb-hire__topnav-logout {
    background: transparent; border: 1px solid var(--hire-border);
    color: var(--hire-text-soft); padding: 6px 12px;
    border-radius: 8px; font-size: 13px; cursor: pointer;
    transition: border-color .15s ease;
}
.hhb-hire__topnav-logout:hover { border-color: var(--hire-accent); color: var(--hire-text); }

.hhb-hire__main {
    max-width: 1100px; margin: 0 auto; padding: 36px 28px 60px;
}
.hhb-hire__main--wide { max-width: 1500px; }

.hhb-hire__page-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 32px; gap: 20px; flex-wrap: wrap;
}
.hhb-hire__page-title { font-size: 32px; margin: 0; letter-spacing: -0.01em; }
.hhb-hire__page-sub { color: var(--hire-text-soft); margin: 6px 0 0; font-size: 15px; }
.hhb-hire__tier-chip {
    padding: 6px 14px; border-radius: 999px;
    background: rgba(20,184,166,.12); color: var(--hire-accent-2);
    border: 1px solid rgba(20,184,166,.3);
    font-size: 13px; font-weight: 600;
}

/* Notices */
.hhb-hire__notice {
    padding: 14px 18px; border-radius: var(--hire-radius-sm);
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: 14px; color: var(--hire-text-soft);
}
.hhb-hire__notice--info { border-color: rgba(20,184,166,.3); background: rgba(20,184,166,.05); }
.hhb-hire__notice--success { border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.05); }
.hhb-hire__notice strong { color: var(--hire-text); }
.hhb-hire__notice .hhb-hire__btn { margin-left: auto; }

/* Cards */
.hhb-hire__card {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); padding: 24px 24px 22px;
    margin-bottom: 22px;
}
.hhb-hire__card h2 {
    font-size: 18px; margin: 0 0 16px;
    color: var(--hire-text); font-weight: 600;
}

/* Funnel */
.hhb-hire__funnel {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 14px; margin-bottom: 28px;
}
.hhb-hire__funnel-card {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); padding: 20px 18px;
    position: relative;
}
.hhb-hire__funnel-card--won { border-color: var(--hire-accent); background: linear-gradient(180deg, rgba(20,184,166,.08), var(--hire-surface)); }
.hhb-hire__funnel-num { font-size: 32px; font-weight: 700; margin-bottom: 2px; }
.hhb-hire__funnel-label { color: var(--hire-text-soft); font-size: 13px; }
.hhb-hire__funnel-rate {
    position: absolute; top: 16px; right: 16px;
    color: var(--hire-text-muted); font-size: 12px; font-weight: 600;
}

/* Quick actions */
.hhb-hire__quick-actions {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-bottom: 28px;
}
.hhb-hire__action-card {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); padding: 18px;
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--hire-text);
    transition: border-color .15s ease, transform .15s ease;
}
.hhb-hire__action-card:hover { border-color: var(--hire-accent); transform: translateY(-2px); }
.hhb-hire__action-icon { font-size: 28px; }
.hhb-hire__action-card strong { display: block; margin-bottom: 4px; }
.hhb-hire__action-card span { color: var(--hire-text-soft); font-size: 13px; }

/* Split layout */
.hhb-hire__split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px;
}

.hhb-hire__list { list-style: none; padding: 0; margin: 0; }
.hhb-hire__list li { padding: 12px 0; border-bottom: 1px solid var(--hire-border); }
.hhb-hire__list li:last-child { border-bottom: none; }
.hhb-hire__list-meta { color: var(--hire-text-muted); font-size: 12px; margin-top: 2px; }
.hhb-hire__empty { color: var(--hire-text-muted); font-size: 14px; }
.hhb-hire__empty-hint { color: var(--hire-text-soft); font-size: 14px; margin: 0 0 16px; }

.hhb-hire__timeline { list-style: none; padding: 0; margin: 0; }
.hhb-hire__timeline li { display: flex; gap: 12px; padding: 10px 0; }
.hhb-hire__timeline-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hire-accent); margin-top: 8px; flex-shrink: 0;
}

/* Usage */
.hhb-hire__usage-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 18px;
}
.hhb-hire__usage-grid > div {
    background: var(--hire-surface-2); border-radius: var(--hire-radius-sm);
    padding: 14px 16px;
}
.hhb-hire__usage-label { display: block; color: var(--hire-text-soft); font-size: 12px; margin-bottom: 6px; }
.hhb-hire__usage-value { font-size: 22px; font-weight: 700; color: var(--hire-text); }

/* Kanban */
.hhb-hire__kanban {
    display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr));
    gap: 12px; overflow-x: auto; padding-bottom: 12px;
}
.hhb-hire__kanban-col {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); min-height: 200px;
    display: flex; flex-direction: column;
}
.hhb-hire__kanban-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--hire-border);
}
.hhb-hire__kanban-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--hire-text-soft); margin: 0; }
.hhb-hire__kanban-count {
    background: var(--hire-surface-2); color: var(--hire-text);
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.hhb-hire__kanban-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.hhb-hire__kanban-card {
    background: var(--hire-surface-2); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius-sm); padding: 12px;
    text-decoration: none; color: var(--hire-text);
    transition: border-color .15s ease, transform .15s ease;
    display: block;
}
.hhb-hire__kanban-card:hover { border-color: var(--hire-accent); transform: translateY(-1px); }
.hhb-hire__kanban-company { font-size: 11px; text-transform: uppercase; color: var(--hire-text-muted); letter-spacing: .04em; }
.hhb-hire__kanban-title { font-weight: 600; margin: 4px 0; font-size: 14px; }
.hhb-hire__kanban-meta { color: var(--hire-text-soft); font-size: 12px; }
.hhb-hire__kanban-when { color: var(--hire-text-muted); font-size: 11px; margin-top: 6px; }
.hhb-hire__kanban-empty { color: var(--hire-text-muted); text-align: center; padding: 20px 0; font-size: 12px; }

/* Interviews */
.hhb-hire__interview-list { list-style: none; padding: 0; margin: 0; }
.hhb-hire__interview-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--hire-border); gap: 14px;
}
.hhb-hire__interview-list li:last-child { border-bottom: none; }
.hhb-hire__interview-when { color: var(--hire-text-muted); font-size: 12px; margin-top: 4px; }
.hhb-hire__badge {
    padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.hhb-hire__badge--ok      { background: rgba(52,211,153,.12); color: var(--hire-success); border: 1px solid rgba(52,211,153,.3); }
.hhb-hire__badge--pending { background: rgba(251,191,36,.12); color: var(--hire-warn); border: 1px solid rgba(251,191,36,.3); }

/* Empty state */
.hhb-hire__empty-state {
    text-align: center; padding: 80px 24px;
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius);
}
.hhb-hire__empty-icon { font-size: 48px; margin-bottom: 14px; }
.hhb-hire__empty-state h2 { margin: 0 0 10px; }
.hhb-hire__empty-state p { color: var(--hire-text-soft); margin: 0 0 22px; }

/* Help block */
.hhb-hire__help {
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius-sm); padding: 14px 18px;
    margin-bottom: 22px;
}
.hhb-hire__help summary {
    cursor: pointer; font-weight: 600; font-size: 14px;
    color: var(--hire-text); list-style: none;
}
.hhb-hire__help summary::-webkit-details-marker { display: none; }
.hhb-hire__help ul { margin: 12px 0 0; padding-left: 20px; color: var(--hire-text-soft); font-size: 14px; }
.hhb-hire__help ul li { padding: 4px 0; }

/* Onboarding wizard */
.hhb-hire__onboard-steps { background: var(--hire-surface); border: 1px solid var(--hire-border); border-radius: var(--hire-radius); padding: 32px 32px 22px; }
.hhb-hire__onboard-step { display: none; }
.hhb-hire__onboard-step.is-active { display: block; }
.hhb-hire__onboard-step h2 { font-size: 22px; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; }
.hhb-hire__onboard-step h2 small { color: var(--hire-text-muted); font-weight: 400; font-size: 14px; }
.hhb-hire__onboard-step p { color: var(--hire-text-soft); margin: 0 0 22px; }
.hhb-hire__step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--hire-accent); color: #04162B; font-weight: 800; font-size: 13px;
}
.hhb-hire__upload-zone {
    background: var(--hire-surface-2); border: 2px dashed var(--hire-rule);
    border-radius: var(--hire-radius); padding: 38px;
    text-align: center; transition: border-color .15s ease;
}
.hhb-hire__upload-zone:hover { border-color: var(--hire-accent); }
.hhb-hire__upload-hint { color: var(--hire-text-muted); margin-top: 14px; font-size: 13px; }
.hhb-hire__upload-status { margin-top: 14px; min-height: 22px; font-size: 14px; }
.hhb-hire__loading-dots, .hhb-hire__loading { color: var(--hire-text-soft); }
.hhb-hire__success { color: var(--hire-success); }
.hhb-hire__error { color: var(--hire-danger); }

/* Password reveal toggle on signup + login forms. The wrapper layers a small
   Show/Hide button on the right side of the password input. Mobile-friendly,
   button has 40px+ tap target so it doesn't fight the input click. */
.hhb-hire__password-wrap {
    position: relative;
    display: block;
}
.hhb-hire__password-wrap input[type="password"],
.hhb-hire__password-wrap input[type="text"] {
    width: 100%;
    padding-right: 64px; /* leaves room for the Show/Hide button */
}
.hhb-hire__password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    min-height: 32px;
    background: transparent;
    border: 1px solid var(--hire-border);
    border-radius: 6px;
    color: var(--hire-text-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.hhb-hire__password-toggle:hover,
.hhb-hire__password-toggle:focus {
    color: var(--hire-text);
    border-color: var(--hire-accent);
    background: var(--hire-surface-2);
    outline: none;
}
.hhb-hire__password-toggle[aria-pressed="true"] {
    color: var(--hire-accent-2);
    border-color: var(--hire-accent);
}

/* Inline form hints for live validation feedback (e.g. confirm-password
   match indicator on signup). Empty by default, color-coded when state set. */
.hhb-hire__form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--hire-text-muted);
    min-height: 16px;
}
.hhb-hire__form-hint--ok { color: var(--hire-success, #10b981); }
.hhb-hire__form-hint--err { color: var(--hire-danger, #ef4444); }

/* Checkbox form-row variant for Settings page (notification preferences). */
.hhb-hire__form-row--checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.hhb-hire__form-row--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--hire-accent);
    cursor: pointer;
    flex-shrink: 0;
}
.hhb-hire__form-row--checkbox span {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--hire-text);
}

/* Save-button action row used at the bottom of long forms (Settings). */
.hhb-hire__form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hire-border);
    flex-wrap: wrap;
}
.hhb-hire__form-actions .hhb-hire__status { font-size: 13px; color: var(--hire-text-soft); }
.hhb-hire__onboard-controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* Billing-specific tier overrides (4-column grid on narrower max) */
.hhb-hire__tiers--billing { max-width: 1100px; }
.hhb-hire__tier-help { color: var(--hire-text-muted); font-size: 12px; margin: 8px 0 0; }

/* ============================================================
   MOBILE NAVIGATION (hamburger drawer)
   Hidden on desktop. Visible at 768px and below.
   ============================================================ */

.hhb-hire__topnav-burger {
    display: none;
    background: transparent; border: none;
    width: 44px; height: 44px;
    padding: 10px; cursor: pointer;
    flex-direction: column; justify-content: space-between;
    align-items: stretch;
}
.hhb-hire__topnav-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--hire-text); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.hhb-hire__topnav.is-open .hhb-hire__topnav-burger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.hhb-hire__topnav.is-open .hhb-hire__topnav-burger span:nth-child(2) {
    opacity: 0;
}
.hhb-hire__topnav.is-open .hhb-hire__topnav-burger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
.hhb-hire__topnav-mobile-only { display: none; }
.hhb-hire__topnav-logout-mobile {
    background: transparent; border: 1px solid var(--hire-border);
    color: var(--hire-text-soft); width: 100%;
    padding: 14px; border-radius: 8px; font-size: 15px;
    cursor: pointer; text-align: left;
}

/* ============================================================
   TABLET (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
    .hhb-hire__steps { grid-template-columns: repeat(2, 1fr); }
    .hhb-hire__tiers { grid-template-columns: repeat(2, 1fr); }
    .hhb-hire__quick-actions { grid-template-columns: repeat(2, 1fr); }
    .hhb-hire__compare { grid-template-columns: 1fr; }
    .hhb-hire__faq-grid { grid-template-columns: 1fr; }
    .hhb-hire__usage-grid { grid-template-columns: 1fr; }
    .hhb-hire__split { grid-template-columns: 1fr; }
    /* Funnel: drop the awkward 2+2+1 grid in favor of a single
       horizontal-scroll row. All 5 stages stay visible as a funnel,
       user swipes sideways. Snap-points keep each card aligned on
       release. The right-edge clipping is itself the affordance
       hinting that there's more to see. */
    .hhb-hire__funnel {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scroll-padding-left: 4px;
    }
    .hhb-hire__funnel-card {
        flex: 0 0 168px;
        min-width: 168px;
        scroll-snap-align: start;
    }
    /* Kanban: horizontal scroll on tablet so all 7 columns are still
       reachable but not crammed into the viewport */
    .hhb-hire__kanban {
        grid-auto-columns: 240px;
        grid-template-columns: none;
        grid-auto-flow: column;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   MOBILE (≤ 768px) — hamburger nav active here
   ============================================================ */

@media (max-width: 768px) {
    /* Topnav becomes a horizontal bar with brand + burger only.
       Links collapse into a slide-down drawer when burger is tapped. */
    .hhb-hire__topnav {
        flex-wrap: wrap; padding: 10px 16px;
        position: sticky; top: 0; z-index: 100;
    }
    .hhb-hire__topnav-burger { display: flex; }
    .hhb-hire__topnav-user { display: none; } /* desktop logout button + name hidden on mobile */

    .hhb-hire__topnav-links {
        order: 99; width: 100%;
        display: none;
        flex-direction: column;
        gap: 0;
        padding-top: 12px;
        margin-top: 10px;
        border-top: 1px solid var(--hire-border);
    }
    .hhb-hire__topnav.is-open .hhb-hire__topnav-links { display: flex; }

    .hhb-hire__topnav-links li { width: 100%; }
    .hhb-hire__topnav-links a {
        display: block; padding: 14px 8px;
        font-size: 16px; border-radius: 0;
    }
    .hhb-hire__topnav-mobile-only { display: block; margin-top: 8px; }
}

/* ============================================================
   JOB INBOX (Tinder swipe deck) base styling.
   The card markup is generated by admin.js buildCard(), shared with
   the admin surface. The admin styles live in admin.css, which is NOT
   loaded on consumer pages, so these rules dress the same markup in the
   consumer dark theme. Mobile overrides live in the 640px block below,
   so these base rules must stay above it.
   ============================================================ */

/* Filter bar */
.hhb-deck-filters {
    max-width: 720px; margin: 0 auto 18px;
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius-sm); padding: 14px 18px;
}
.hhb-deck-filters__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hhb-deck-filters__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--hire-text-soft);
    cursor: pointer; user-select: none;
}
.hhb-deck-filters__toggle input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--hire-accent); cursor: pointer;
}
.hhb-deck-filters__field {
    display: inline-flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--hire-text-muted); font-weight: 500;
}
.hhb-deck-filters__field input[type="number"] {
    width: 140px; padding: 7px 10px;
    border: 1px solid var(--hire-border); border-radius: 8px;
    font-size: 14px; color: var(--hire-text); background: var(--hire-surface-2);
}
.hhb-deck-filters__field input[type="number"]:focus {
    outline: none; border-color: var(--hire-accent);
    box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}
.hhb-deck-filters__count { margin-left: auto; font-size: 13px; color: var(--hire-text-muted); font-weight: 500; }
.hhb-deck-filters__reset { padding: 7px 14px; font-size: 13px; }

/* Deck + card stack */
.hhb-tinder { position: relative; min-height: 600px; user-select: none; margin-top: 20px; }
.hhb-tinder__deck { position: relative; width: 100%; max-width: 540px; height: 560px; margin: 0 auto; }
.hhb-tinder__empty {
    position: absolute; inset: 0;
    background: var(--hire-surface); border: 1px solid var(--hire-border);
    border-radius: var(--hire-radius); box-shadow: var(--hire-shadow);
    padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--hire-text-soft);
}
.hhb-tinder__empty h2 { margin: 12px 0 6px; color: var(--hire-text); }
.hhb-empty__icon { font-size: 44px; }

/* Job card */
.hhb-jcard {
    position: absolute; inset: 0;
    background: var(--hire-surface); border: 1px solid var(--hire-rule);
    border-radius: var(--hire-radius); box-shadow: var(--hire-shadow-lg);
    padding: 28px; display: flex; flex-direction: column; cursor: grab;
    transition: transform .35s cubic-bezier(.2,.9,.25,1), opacity .35s ease, box-shadow .25s ease;
    will-change: transform;
}
.hhb-jcard:active { cursor: grabbing; }
.hhb-jcard.is-stacked   { pointer-events: none; transform: scale(.96) translateY(8px); opacity: .55; }
.hhb-jcard.is-stacked-2 { pointer-events: none; transform: scale(.92) translateY(16px); opacity: .3; }
.hhb-jcard.is-leaving-right { transform: translateX(140%) rotate(20deg); opacity: 0; }
.hhb-jcard.is-leaving-left  { transform: translateX(-140%) rotate(-20deg); opacity: 0; }
.hhb-jcard.is-leaving-up    { transform: translateY(-120%); opacity: 0; }

.hhb-jcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hhb-jcard__company { font-size: 13px; color: var(--hire-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.hhb-jcard__title { font-size: 22px; font-weight: 700; margin: 6px 0 8px; letter-spacing: -.01em; line-height: 1.25; color: var(--hire-text); }
.hhb-jcard__meta { color: var(--hire-text-muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.hhb-jcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hhb-jcard__meta span::before { content: "•"; color: var(--hire-rule); }
.hhb-jcard__meta span:first-child::before { content: ""; }
.hhb-jcard__score {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hire-accent), var(--hire-accent-2)); color: #042A24;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
    box-shadow: 0 6px 18px rgba(20,184,166,.4);
}
.hhb-jcard__score--low { background: linear-gradient(135deg, #475569, #64748B); color: #E2E8F0; box-shadow: none; }
.hhb-jcard__score--mid { background: linear-gradient(135deg, var(--hire-warn), #FCD34D); color: #422006; box-shadow: 0 6px 18px rgba(251,191,36,.3); }

.hhb-jcard__salary { margin: 4px 0 10px; }
.hhb-jcard__salary-pill {
    display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: rgba(20,184,166,.14); color: var(--hire-accent-2); border: 1px solid rgba(20,184,166,.35);
}
.hhb-jcard__salary-pill--muted { background: var(--hire-surface-2); color: var(--hire-text-muted); border: 1px dashed var(--hire-rule); font-weight: 500; }

.hhb-jcard__body { flex: 1; overflow-y: auto; color: var(--hire-text-soft); font-size: 14px; line-height: 1.55; padding-right: 6px; margin-top: 6px; }
.hhb-jcard__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hire-border); margin-top: 14px; font-size: 12px; color: var(--hire-text-muted); }

/* Tags + posting link */
.hhb-tag { background: var(--hire-surface-2); border: 1px solid var(--hire-border); color: var(--hire-text-soft); padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.hhb-tag--remote { background: rgba(20,184,166,.14); border-color: rgba(20,184,166,.35); color: var(--hire-accent-2); }
.hhb-tag--ghost  { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: var(--hire-danger); }
.hhb-link { color: var(--hire-accent-2); font-weight: 600; }
.hhb-link:hover { text-decoration: underline; }

/* Swipe stamps */
.hhb-jcard__stamp { position: absolute; top: 28px; padding: 8px 18px; border: 3px solid; border-radius: 8px; font-size: 22px; font-weight: 800; letter-spacing: .15em; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.hhb-jcard__stamp--yes { right: 28px; transform: rotate(12deg); color: var(--hire-success); border-color: var(--hire-success); }
.hhb-jcard__stamp--no  { left: 28px; transform: rotate(-12deg); color: var(--hire-danger); border-color: var(--hire-danger); }

/* Action controls */
.hhb-tinder__controls { display: flex; align-items: flex-start; justify-content: center; gap: 22px; margin-top: 28px; }
.hhb-tinder__action { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hhb-tinder__action-label { font-size: 12px; color: var(--hire-text-soft); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.hhb-tinder__action-label kbd { background: var(--hire-surface-2); border: 1px solid var(--hire-border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--hire-text); margin-left: 4px; }
/* Scoped + !important because the host theme forces a brand gradient with
   !important on all <button> elements; these color-code the swipe actions. */
.hhb-hire .hhb-circle {
    width: 64px; height: 64px; border-radius: 50% !important; padding: 0 !important;
    border: 1px solid var(--hire-rule) !important; cursor: pointer;
    background: var(--hire-surface-2) !important; box-shadow: var(--hire-shadow);
    display: inline-flex !important; align-items: center; justify-content: center;
    color: var(--hire-text) !important;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.hhb-hire .hhb-circle:hover { transform: translateY(-2px); box-shadow: var(--hire-shadow-lg); }
.hhb-hire .hhb-circle--skip {
    background: rgba(248,113,113,.13) !important; border-color: rgba(248,113,113,.4) !important; color: var(--hire-danger) !important;
}
.hhb-hire .hhb-circle--skip:hover { border-color: var(--hire-danger) !important; }
.hhb-hire .hhb-circle--save {
    background: rgba(251,191,36,.13) !important; border-color: rgba(251,191,36,.4) !important; color: var(--hire-warn) !important;
}
.hhb-hire .hhb-circle--save:hover { border-color: var(--hire-warn) !important; }
.hhb-hire .hhb-circle--approve {
    width: 80px; height: 80px; border: none !important;
    background: linear-gradient(135deg, var(--hire-accent), var(--hire-accent-2)) !important; color: #042A24 !important;
    box-shadow: 0 8px 26px rgba(20,184,166,.45);
}
.hhb-hire .hhb-circle--approve:hover { box-shadow: 0 12px 36px rgba(20,184,166,.6); }

/* View toggle: Swipe deck vs Browse list */
.hhb-view-toggle { display: flex; justify-content: center; margin: 6px 0 18px; }
.hhb-view-toggle__btn {
    background: var(--hire-surface) !important; color: var(--hire-text-soft) !important;
    border: 1px solid var(--hire-border) !important;
    padding: 9px 18px !important; font-size: 13px !important; font-weight: 600 !important;
    cursor: pointer; box-shadow: none !important; line-height: 1.2 !important; min-height: 0 !important;
}
.hhb-view-toggle__btn:first-child { border-radius: 999px 0 0 999px !important; }
.hhb-view-toggle__btn:last-child { border-radius: 0 999px 999px 0 !important; border-left: none !important; }
.hhb-view-toggle__btn.is-active {
    background: linear-gradient(135deg, var(--hire-accent), var(--hire-accent-2)) !important;
    color: #042A24 !important; border-color: transparent !important;
}

/* Browse list view */
.hhb-joblist { max-width: 720px; margin: 8px auto 40px; display: flex; flex-direction: column; gap: 12px; }
.hhb-joblist__item {
    display: flex; gap: 16px; align-items: stretch;
    background: var(--hire-surface); border: 1px solid var(--hire-rule);
    border-radius: var(--hire-radius); padding: 18px 20px; box-shadow: var(--hire-shadow);
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease, padding .3s ease, margin .3s ease, border-width .3s ease;
}
.hhb-joblist__item.is-acted {
    max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important;
    margin: 0; border-width: 0; pointer-events: none;
}
.hhb-joblist__body { flex: 1; min-width: 0; }
.hhb-joblist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hhb-joblist__headtext { min-width: 0; }
.hhb-joblist .hhb-jcard__title { font-size: 18px; margin: 4px 0 0; }
.hhb-joblist .hhb-jcard__meta { margin: 8px 0; }
.hhb-joblist .hhb-jcard__score { width: 46px; height: 46px; font-size: 16px; }
.hhb-joblist__desc {
    color: var(--hire-text-soft); font-size: 13.5px; line-height: 1.5; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hhb-joblist__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.hhb-joblist__actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex-shrink: 0; }
.hhb-joblist__more { text-align: center; color: var(--hire-text-muted); font-size: 13px; padding: 12px; }
.hhb-tinder__empty--static { position: static !important; min-height: 280px; }
.hhb-list-btn {
    border: 1px solid var(--hire-border) !important; border-radius: 8px !important;
    padding: 8px 16px !important; font-size: 13px !important; font-weight: 700 !important;
    cursor: pointer; white-space: nowrap; min-width: 88px; box-shadow: none !important;
    line-height: 1 !important; min-height: 0 !important;
    background: var(--hire-surface-2) !important; color: var(--hire-text) !important;
}
.hhb-list-btn--skip { color: var(--hire-danger) !important; background: rgba(248,113,113,.12) !important; border-color: rgba(248,113,113,.35) !important; }
.hhb-list-btn--save { color: var(--hire-warn) !important; background: rgba(251,191,36,.12) !important; border-color: rgba(251,191,36,.35) !important; }
.hhb-list-btn--apply { color: #042A24 !important; background: linear-gradient(135deg, var(--hire-accent), var(--hire-accent-2)) !important; border-color: transparent !important; }
.hhb-list-btn:hover { filter: brightness(1.08); }

/* Resume page: embedded PDF preview + collapsible parsed text */
.hhb-resume-pdf { margin-top: 14px; }
.hhb-resume-pdf__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hhb-resume-pdf__frame {
    display: block; width: 100%; height: 640px;
    border: 1px solid var(--hire-border); border-radius: 10px; background: var(--hire-surface-2);
}
.hhb-resume-text { margin-top: 14px; }
.hhb-resume-text > summary {
    cursor: pointer; font-weight: 600; color: var(--hire-text-soft);
    font-size: 13.5px; padding: 6px 0; user-select: none; list-style: none;
}
.hhb-resume-text > summary::-webkit-details-marker { display: none; }
.hhb-resume-text > summary::before { content: "▸ "; color: var(--hire-accent); }
.hhb-resume-text[open] > summary::before { content: "▾ "; }
.hhb-resume-text > summary:hover { color: var(--hire-text); }

/* ============================================================
   ADMIN-FEATURE STYLING ON THE CONSUMER SURFACE
   admin.js renders several AI features (mock interview, negotiation playbook,
   error cards, modals, form fields, pills) using classes styled only in
   admin.css, which consumer pages don't load. Map the admin design tokens to
   the consumer dark palette and port those rules so the features render
   in-theme. Tokens are scoped to .hhb-hire + .hhb-modal-backdrop (modals are
   appended to <body>) so they don't leak site-wide.
   ============================================================ */
.hhb-hire, .hhb-modal-backdrop {
    --hhb-surface: #131826; --hhb-bg: #1B2235;
    --hhb-border: #1F2638; --hhb-border-2: #2A3349;
    --hhb-text: #E2E8F0; --hhb-text-soft: #94A3B8; --hhb-muted: #64748B;
    --hhb-teal: #14B8A6; --hhb-teal-2: #5EEAD4; --hhb-lime: #84CC16;
    --hhb-amber: #FBBF24; --hhb-success: #34D399; --hhb-danger: #F87171;
    --hhb-radius: 14px; --hhb-radius-sm: 10px;
    --hhb-shadow: 0 8px 28px rgba(0,0,0,.35); --hhb-shadow-lg: 0 18px 48px rgba(0,0,0,.45);
    --hhb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

/* Pills */
.hhb-pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.1); color:var(--hhb-text); margin-left:8px; }
.hhb-pill--accent { background:var(--hhb-teal); color:#042A24; }

/* Generic buttons used in admin.js markup (primary = brand gradient). */
.hhb-btn { appearance:none; border:1px solid transparent; background:transparent; color:var(--hhb-text); cursor:pointer; font-family:var(--hhb-font); font-size:14px; font-weight:600; padding:10px 18px; border-radius:10px; display:inline-flex; align-items:center; gap:8px; transition:transform .08s ease, box-shadow .15s ease, background .15s ease; text-decoration:none; }
.hhb-btn:active { transform:translateY(1px); }
.hhb-btn--primary, a.hhb-btn--primary { background:linear-gradient(135deg, var(--hhb-teal), var(--hhb-teal-2)) !important; color:#042A24 !important; box-shadow:0 4px 14px rgba(20,184,166,.35); }
.hhb-btn--ghost { background:var(--hhb-surface) !important; color:var(--hhb-text) !important; border:1px solid var(--hhb-border) !important; }
.hhb-btn--ghost:hover { background:var(--hhb-bg) !important; }

/* Form fields */
.hhb-field { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.hhb-field label { font-weight:600; font-size:13px; color:var(--hhb-text); }
.hhb-field__sub { color:var(--hhb-muted); font-weight:400; }
.hhb-field__hint { color:var(--hhb-muted); font-size:12px; }
.hhb-field input[type="text"], .hhb-field input[type="email"], .hhb-field input[type="number"], .hhb-field textarea,
.hhb-modal__body .hhb-field input, .hhb-modal__body .hhb-field textarea {
    background:var(--hhb-bg); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius-sm);
    padding:10px 14px; font-family:var(--hhb-font); font-size:14px; color:var(--hhb-text); width:100%;
}
.hhb-field input:focus, .hhb-field textarea:focus { outline:none; border-color:var(--hhb-teal); box-shadow:0 0 0 3px rgba(20,184,166,.18); }
.hhb-test-result { margin-left:14px; font-size:13px; color:var(--hhb-muted); font-weight:600; }
.hhb-test-result.is-success { color:var(--hhb-success); }
.hhb-test-result.is-error { color:var(--hhb-danger); }
.hhb-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--hhb-bg); padding:2px 6px; border-radius:4px; color:var(--hhb-text-soft); }
.hhb-grid { display:grid; gap:20px; margin-bottom:24px; }
.hhb-grid--two { grid-template-columns:1fr 1fr; }

/* Mock interview */
.hhb-mockq { background:var(--hhb-surface); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius-sm); padding:18px 20px; margin-bottom:12px; }
.hhb-mockq__head { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; color:var(--hhb-muted); }
.hhb-mockq__prompt { font-size:15px; font-weight:600; color:var(--hhb-text); margin-bottom:8px; line-height:1.5; }
.hhb-mockq__why { color:var(--hhb-muted); font-size:13px; margin-bottom:12px; line-height:1.55; }
.hhb-mockq__answer { width:100%; border:1px solid var(--hhb-border); border-radius:var(--hhb-radius-sm); padding:12px 14px; font-family:var(--hhb-font); font-size:14px; line-height:1.55; resize:vertical; background:var(--hhb-bg); color:var(--hhb-text); }
.hhb-mockq__answer:focus { outline:none; border-color:var(--hhb-teal); box-shadow:0 0 0 3px rgba(20,184,166,.18); }
.hhb-mockq__feedback { background:var(--hhb-bg); border:1px solid var(--hhb-border); border-left:3px solid var(--hhb-teal); border-radius:var(--hhb-radius-sm); padding:14px 16px; margin-bottom:10px; }
.hhb-mockq__feedback p { margin:6px 0; font-size:14px; line-height:1.55; color:var(--hhb-text-soft); }
.hhb-mockq__feedback summary { cursor:pointer; color:var(--hhb-teal); font-weight:600; font-size:13px; }
.hhb-mockresult { background:var(--hhb-surface); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius); padding:22px 24px; margin-top:18px; }
.hhb-mockresult__overall { display:flex; gap:20px; align-items:center; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--hhb-border); }
.hhb-mockresult__score { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg, var(--hhb-teal), var(--hhb-teal-2)); color:#042A24; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; box-shadow:0 6px 18px rgba(20,184,166,.3); flex-shrink:0; }
.hhb-mockresult__overall h3 { margin:0 0 6px; font-size:17px; color:var(--hhb-text); }
.hhb-mockresult__strengths, .hhb-mockresult__gaps { font-size:13px; color:var(--hhb-text-soft); margin-top:4px; line-height:1.5; }
.hhb-mockresult__gaps strong { color:var(--hhb-amber); }
.hhb-mockresult__strengths strong { color:var(--hhb-success); }

/* Negotiation playbook card */
.hhb-playbook-card { background:var(--hhb-surface); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius); padding:22px 24px; margin-top:18px; box-shadow:var(--hhb-shadow); }
.hhb-playbook-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.hhb-playbook-card__eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hhb-teal); font-weight:700; margin-bottom:4px; }
.hhb-playbook-card__summary { font-size:14.5px; color:var(--hhb-text); line-height:1.55; max-width:520px; }
.hhb-playbook-card__nums { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.hhb-playbook-card__num { background:var(--hhb-bg); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius-sm); padding:12px 14px; text-align:left; position:relative; overflow:hidden; }
.hhb-playbook-card__num::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; }
.hhb-playbook-card__num--walk::before { background:linear-gradient(90deg, var(--hhb-amber), var(--hhb-danger)); }
.hhb-playbook-card__num--target::before { background:linear-gradient(90deg, var(--hhb-teal), var(--hhb-teal-2)); }
.hhb-playbook-card__num--stretch::before { background:linear-gradient(90deg, var(--hhb-lime), #65A30D); }
.hhb-playbook-card__num span { display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--hhb-muted); font-weight:700; }
.hhb-playbook-card__num strong { display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--hhb-text); margin-top:2px; }
.hhb-playbook-card__hint { font-size:12.5px; color:var(--hhb-muted); margin:8px 0 0; line-height:1.5; }

/* Friendly error cards (dark overrides for the admin light backgrounds) */
.hhb-error-card { background:var(--hhb-surface); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius); padding:16px 20px; margin-top:12px; }
.hhb-error-card--info { border-left:4px solid var(--hhb-teal); background:rgba(20,184,166,.08); }
.hhb-error-card--warning { border-left:4px solid var(--hhb-amber); background:rgba(251,191,36,.08); }
.hhb-error-card--error { border-left:4px solid var(--hhb-danger); background:rgba(248,113,113,.08); }
.hhb-error-card--critical { border-left:4px solid #DC2626; background:rgba(220,38,38,.14); }
.hhb-error-card__head { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.hhb-error-card__sev { font-size:11px; letter-spacing:.08em; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--hhb-text-soft); color:#0B0F1A; }
.hhb-error-card--info .hhb-error-card__sev { background:var(--hhb-teal); color:#042A24; }
.hhb-error-card--warning .hhb-error-card__sev { background:var(--hhb-amber); color:#422006; }
.hhb-error-card--error .hhb-error-card__sev { background:var(--hhb-danger); color:#3B0A0A; }
.hhb-error-card--critical .hhb-error-card__sev { background:#DC2626; color:#fff; }
.hhb-error-card__cat { font-size:11px; color:var(--hhb-muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.hhb-error-card__msg { margin:0; font-size:14px; line-height:1.55; color:var(--hhb-text); }
.hhb-error-card__actions { margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Modal system (admin.js appends these to <body>) */
.hhb-modal-backdrop { position:fixed; inset:0; background:rgba(2,6,16,.7); backdrop-filter:blur(2px); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; animation:hhb-modal-fade .15s ease; }
@keyframes hhb-modal-fade { from { opacity:0; } to { opacity:1; } }
.hhb-modal { background:var(--hhb-surface); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius); box-shadow:0 30px 80px rgba(0,0,0,.6); max-width:720px; width:100%; max-height:92vh; overflow:auto; animation:hhb-modal-slide .2s ease; color:var(--hhb-text); }
@keyframes hhb-modal-slide { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.hhb-modal__head { padding:20px 28px; border-bottom:1px solid var(--hhb-border); display:flex; align-items:center; justify-content:space-between; }
.hhb-modal__title { font-size:17px; font-weight:700; margin:0; color:var(--hhb-text); }
.hhb-modal__close { background:transparent; border:none; cursor:pointer; width:32px; height:32px; border-radius:50%; color:var(--hhb-muted); display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; }
.hhb-modal__close:hover { background:var(--hhb-bg); color:var(--hhb-text); }
.hhb-modal__body { padding:24px 28px; }
.hhb-modal__body .hhb-field { margin-bottom:16px; }
.hhb-modal__body textarea[name="body_text"] { min-height:320px; line-height:1.6; font-size:14px; }
.hhb-modal__foot { padding:16px 28px; border-top:1px solid var(--hhb-border); background:var(--hhb-bg); display:flex; justify-content:flex-end; gap:10px; align-items:center; }
.hhb-modal__readonly { background:var(--hhb-bg); border:1px solid var(--hhb-border); border-radius:var(--hhb-radius-sm); padding:10px 14px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--hhb-text-soft); }
.hhb-modal__hint { font-size:12px; color:var(--hhb-muted); margin-top:4px; }

/* Applications board: drag-and-drop affordances */
.hhb-hire__kanban-card { cursor: grab; }
.hhb-hire__kanban-card:active { cursor: grabbing; }
.hhb-hire__kanban-card.is-dragging { opacity: .45; }
.hhb-hire__kanban-col.is-dropping { outline: 2px dashed var(--hire-accent); outline-offset: -4px; background: rgba(20,184,166,.06); }

/* Undo toast (appended to <body> by the inbox swipe deck; global, not scoped
   under .hhb-hire because it lives outside that container). */
.hhb-toast {
    position: fixed; left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(14px); z-index: 100000;
    display: flex; align-items: center; gap: 16px;
    background: #1B2235; color: #E2E8F0;
    border: 1px solid #2A3349; border-radius: 12px;
    padding: 12px 14px 12px 18px; box-shadow: 0 18px 48px rgba(0,0,0,.5);
    font-size: 14px; font-weight: 500; max-width: 92vw;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.hhb-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.hhb-toast__msg strong { font-weight: 700; color: #fff; }
.hhb-toast__undo {
    background: rgba(20,184,166,.18) !important; color: #5EEAD4 !important;
    border: 1px solid rgba(20,184,166,.45) !important; border-radius: 8px !important;
    padding: 7px 16px !important; font-size: 13px !important; font-weight: 700 !important;
    cursor: pointer; white-space: nowrap; line-height: 1 !important;
    box-shadow: none !important; text-transform: none !important; min-height: 0 !important;
}
.hhb-toast__undo:hover { background: rgba(20,184,166,.3) !important; }

/* ============================================================
   PHONE (≤ 640px) — single-column everything, big tap targets
   ============================================================ */

@media (max-width: 640px) {
    .hhb-hire__h1 { font-size: 32px; line-height: 1.15; }
    .hhb-hire__h2 { font-size: 26px; }
    .hhb-hire__hero { padding: 50px 16px 60px; }
    .hhb-hire__hero-sub { font-size: 16px; }
    .hhb-hire__main { padding: 22px 14px 50px; }
    .hhb-hire__page-title { font-size: 26px; }
    .hhb-hire__page-head { flex-direction: column; align-items: flex-start; gap: 12px; }

    .hhb-hire__steps { grid-template-columns: 1fr; }
    .hhb-hire__tiers { grid-template-columns: 1fr; gap: 14px; }
    .hhb-hire__quick-actions { grid-template-columns: 1fr; }
    /* Funnel stays as the horizontal-scroll flex row from the ≤1024px
       breakpoint above. Just tighten card width + font on tight mobile
       widths so 2-2.5 cards are visible per screen. */
    .hhb-hire__funnel-card { padding: 16px 14px; flex: 0 0 152px; min-width: 152px; }
    .hhb-hire__funnel-num { font-size: 26px; }

    .hhb-hire__form-row--two { grid-template-columns: 1fr; }
    .hhb-hire__auth-card { padding: 28px 18px; }
    .hhb-hire__auth-h1 { font-size: 24px; }

    /* Min 44px tap targets per Apple HIG / WCAG.
       Apply broadly to buttons + links inside the consumer surface. */
    .hhb-hire__btn { min-height: 44px; padding: 12px 22px; }
    .hhb-hire__btn--sm { min-height: 36px; padding: 8px 14px; }
    .hhb-hire__action-card { padding: 16px; min-height: 64px; }
    .hhb-hire__action-card .hhb-hire__action-icon { font-size: 24px; }

    /* Kanban: full horizontal scroll, narrower columns to fit thumbs */
    .hhb-hire__kanban {
        grid-auto-columns: 78vw;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 8px;
    }
    .hhb-hire__kanban-col { scroll-snap-align: start; }

    /* Inbox filter bar: stack everything vertically */
    .hhb-deck-filters { max-width: none; padding: 12px 14px; }
    .hhb-deck-filters__row {
        flex-direction: column; align-items: stretch; gap: 10px;
    }
    .hhb-deck-filters__toggle { padding: 8px 0; }
    .hhb-deck-filters__count { margin-left: 0; text-align: left; }
    .hhb-deck-filters__field input[type="number"] { width: 100%; }
    .hhb-deck-filters__reset { width: 100%; }

    /* Tinder card: slightly smaller stack, but the actual swipe deck
       sizing comes from admin.css (max-width 720px); on phones it just
       fills available width naturally. Make sure controls are reachable. */
    .hhb-tinder__controls { gap: 14px; margin-top: 18px; }
    .hhb-circle { width: 56px; height: 56px; }

    /* Browse list: stack card + actions; actions become a full-width row */
    .hhb-joblist__item { flex-direction: column; gap: 12px; }
    .hhb-joblist__actions { flex-direction: row; }
    .hhb-list-btn { flex: 1; min-width: 0; }
    .hhb-view-toggle__btn { flex: 1; }
    .hhb-resume-pdf__frame { height: 440px; }

    /* Ported AI-feature blocks: stack multi-column layouts on phones */
    .hhb-playbook-card__nums { grid-template-columns: 1fr; }
    .hhb-grid--two { grid-template-columns: 1fr; }
    .hhb-mockresult__overall { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hhb-modal__head, .hhb-modal__body, .hhb-modal__foot { padding-left: 18px; padding-right: 18px; }

    /* Pricing tier in billing tab: stack */
    .hhb-hire__tiers--billing { grid-template-columns: 1fr; }

    /* Interview list: stack content and badge vertically */
    .hhb-hire__interview-list li {
        flex-direction: column; align-items: flex-start; gap: 8px;
    }

    /* Usage grid: stack rather than 3-col cramped */
    .hhb-hire__usage-grid { grid-template-columns: 1fr; }
    .hhb-hire__usage-value { font-size: 20px; }

    /* Notices: button wraps below text */
    .hhb-hire__notice .hhb-hire__btn { margin-left: 0; width: 100%; }

    /* Onboarding step controls: full-width buttons */
    .hhb-hire__onboard-controls { flex-direction: column-reverse; gap: 10px; }
    .hhb-hire__onboard-controls .hhb-hire__btn { width: 100%; }
    .hhb-hire__upload-zone { padding: 30px 20px; }

    /* Final CTA */
    .hhb-hire__cta-final h2 { font-size: 30px; }
    .hhb-hire__cta-final p { font-size: 16px; }
    .hhb-hire__cta-final { padding: 70px 16px; }

    /* FAQ details: tighten spacing */
    .hhb-hire__faq details { padding: 14px 16px; }

    /* Cards on dashboard / app pages: less padding */
    .hhb-hire__card { padding: 18px 16px; }

    /* Hero CTA row: stack buttons full-width on tight screens */
    .hhb-hire__cta-row { flex-direction: column; align-items: stretch; }
    .hhb-hire__cta-row .hhb-hire__btn { width: 100%; }
}

/* Disable touch-action delays on swipe deck so phone swipes feel native */
.hhb-jcard { touch-action: pan-y; }
.hhb-hire__kanban { touch-action: pan-x; }

/* Inline help tooltip system. Mobile-friendly click-to-toggle. */
.hhb-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 6px;
    background: var(--hire-surface-2); border: 1px solid var(--hire-border);
    border-radius: 50%;
    color: var(--hire-text-soft); font-size: 11px; font-weight: 700;
    cursor: pointer; vertical-align: middle;
    line-height: 1; user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hhb-info:hover, .hhb-info:focus {
    background: var(--hire-accent); color: #fff; border-color: var(--hire-accent);
    outline: none;
}
.hhb-info[aria-expanded="true"] {
    background: var(--hire-accent); color: #fff; border-color: var(--hire-accent);
}
.hhb-info-pop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: 300px;
    max-width: 92vw;
    padding: 12px 14px;
    margin-top: 6px;
    background: var(--hire-surface);
    color: var(--hire-text);
    border: 1px solid var(--hire-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
.hhb-info-pop.is-open { display: block; }
.hhb-info-pop strong { color: var(--hire-accent-2); }
.hhb-info-pop a { color: var(--hire-accent-2); text-decoration: underline; }
.hhb-info-wrap { position: relative; display: inline-block; font-weight: normal; font-size: 14px; vertical-align: middle; }
@media (max-width: 640px) {
    .hhb-info-pop {
        position: fixed;
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
        margin-top: 0;
    }
}