.hg-my-application-count{display:inline-grid;place-items:center;min-width:14px;height:14px;padding:0 4px;border-radius:999px;background:#eef5ff;font-size:7px;line-height:14px;font-weight:800}.hg-my-applications-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}.hg-my-application-card{border:1px solid #dce6f2;border-radius:16px;background:#fff;padding:16px;box-shadow:0 7px 22px rgba(0,29,110,.055)}.hg-my-application-card-head{display:flex;justify-content:space-between;}.hg-my-application-card-head h4{margin:3px 0 4px;color:#001D6E}.hg-my-application-card-head p{margin:0;color:#64748b}.hg-my-application-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#55708f}.hg-my-application-status{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#eef3f8;font-size:12px;font-weight:800}.hg-my-application-status.is-pending{background:#fff4d6}.hg-my-application-status.is-approved{background:#e8f7ee}.hg-my-application-status.is-rejected{background:#fff0ef}.hg-my-application-status.is-revision_requested{background:#edf4ff}.hg-my-application-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.hg-my-application-meta>div{padding:9px 10px;border-radius:10px;background:#f7faff}.hg-my-application-meta span,.hg-my-application-meta strong{display:block}.hg-my-application-meta span{font-size:11px;color:#64748b}.hg-my-application-meta strong{margin-top:2px;font-size:13px}.hg-my-application-note{margin-top:12px;padding:10px 12px;border-left:4px solid #7FB5FF;border-radius:10px;background:#f7faff}.hg-my-application-note strong,.hg-my-application-note span{display:block}.hg-my-application-note span{margin-top:4px;font-size:13px}.hg-my-application-actions{display:flex;justify-content:flex-end;margin-top:14px}@media(max-width:760px){.hg-my-applications-grid{grid-template-columns:1fr}.hg-my-application-card-head{align-items:flex-start}.hg-my-application-meta{grid-template-columns:1fr}}

/* ==========================================================
   HG Connect — shared personal Activity relation subtab rail
   Activity Pages is the exact visual reference for level 2.
   ========================================================== */
.hg-relation-subtabs{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:8px 0 10px !important;
    padding:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    overscroll-behavior-inline:contain;
    border:1px solid #cbd9e7 !important;
    border-radius:11px !important;
    background:#edf4fa !important;
    box-shadow:inset 0 2px 5px rgba(22,55,89,.14),0 1px 0 #fff !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    box-sizing:border-box !important;
}
.hg-relation-subtabs::-webkit-scrollbar{display:none !important}
.hg-relation-subtab{
    position:relative !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:4px !important;
    min-height:24px !important;
    margin:0 !important;
    padding:3px 7px !important;
    border:1px solid #d1dce7 !important;
    border-radius:7px !important;
    background:#fff !important;
    color:#38516b !important;
    box-shadow:0 2px 0 #c4d0dc !important;
    font-size:8.2px !important;
    line-height:1 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    text-decoration-line:underline !important;
    text-decoration-thickness:1px !important;
    text-underline-offset:2px !important;
    text-decoration-color:currentColor !important;
    transition:transform .16s ease,color .16s ease,background .16s ease !important;
}
.hg-relation-subtab:hover,
.hg-relation-subtab:focus-visible{
    color:#173f70 !important;
    background:#f8fbff !important;
    transform:translateY(-1px) !important;
}
.hg-relation-subtab.active,
.hg-relation-subtab.is-active,
.hg-relation-subtab[aria-current="page"]{
    border-color:#173f70 !important;
    background:#173f70 !important;
    color:#fff !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.20),0 2px 0 #0e2e52 !important;
    transform:none !important;
}
/* No separate U/bar indicator: Activity Pages uses the button itself as state. */
.hg-relation-subtab.active::after,
.hg-relation-subtab.is-active::after,
.hg-relation-subtab[aria-current="page"]::after{content:none !important;display:none !important}

/* Application counts stay secondary and cannot enlarge the L2 button. */
.hg-my-activities-sub-tab .hg-my-application-count{
    flex:0 0 auto !important;
    min-width:14px !important;
    width:auto !important;
    height:14px !important;
    padding:0 4px !important;
    border-radius:999px !important;
    font-size:7px !important;
    line-height:14px !important;
}
.hg-my-activities-sub-tab.active .hg-my-application-count{
    background:rgba(255,255,255,.18) !important;
    color:inherit !important;
}

@media(max-width:640px){
    .hg-relation-subtabs{gap:3px !important;padding:4px !important;border-radius:9px !important}
    .hg-relation-subtab{
        min-height:22px !important;
        padding:3px 6px !important;
        border-radius:6px !important;
        font-size:7.4px !important;
        text-underline-offset:1.5px !important;
    }
}

/* ==========================================================
   My Applications — compact, ordered horizontal cards
   Desktop: line 1 identity + status; line 2 dates + action;
   optional review note becomes line 3. Mobile keeps natural stacking.
   ========================================================== */
@media(min-width:761px){
    .hg-my-application-card{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        padding:10px 12px;
    }
    .hg-my-application-card-head{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        min-width:0;
        padding-bottom:7px;
        border-bottom:1px solid #edf2f7;
    }
    .hg-my-application-card-head>div{min-width:0}
    .hg-my-application-card-head h4{
        margin:1px 0 2px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:14px;
        line-height:1.2;
    }
    .hg-my-application-card-head p{
        margin:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:11px;
        line-height:1.2;
    }
    .hg-my-application-eyebrow{font-size:9px;line-height:1.1}
    .hg-my-application-status{
        padding:4px 7px;
        font-size:10px;
    }
    .hg-my-application-meta{
        grid-column:1;
        display:flex;
        min-width:0;
        margin:0;
    }
    .hg-my-application-meta>div{
        padding:5px 7px;
        border-radius:8px;
    }
    .hg-my-application-meta span{font-size:9px;line-height:1.1}
    .hg-my-application-meta strong{
        margin-top:1px;
        font-size:11px;
        line-height:1.15;
        white-space:nowrap;
    }
    .hg-my-application-actions{
        grid-column:2;
        margin:0;
    }
    .hg-my-application-actions .hg-button{
        padding:6px 10px;
    }
    .hg-my-application-note{
        grid-column:1 / -1;
        margin:0;
        padding:6px 9px;
        border-radius:8px;
    }
    .hg-my-application-note strong,
    .hg-my-application-note span{display:inline}
    .hg-my-application-note span{margin:0;font-size:11px;}
}

@media(max-width:760px){
    .hg-my-application-card{padding:12px}
    .hg-my-application-card-head{gap:8px}
    .hg-my-application-meta{margin-top:10px}
    .hg-my-application-actions{margin-top:10px;justify-content:flex-start}
    .hg-my-application-actions .hg-button{}
    .hg-my-application-note{margin-top:10px}
}

/* PRE-LIVE: My Applications final ordered card layout. */
@media(min-width:761px){
    .hg-my-application-card{
        display:grid;
        grid-template-columns:minmax(220px,1fr) auto auto auto;
        grid-template-areas:"primary meta status actions" "note note note note";
        align-items:center;
        gap:8px 12px;
        padding:10px 12px;
    }
    .hg-my-application-primary{grid-area:primary;min-width:0}
    .hg-my-application-primary h4{margin:0 0 2px;color:#001D6E;font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hg-my-application-primary p{margin:0;color:#64748b;font-size:11px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hg-my-application-meta{grid-area:meta;display:flex;align-items:stretch;gap:6px;margin:0}
    .hg-my-application-meta>div{min-width:98px;padding:5px 7px;border-radius:8px}
    .hg-my-application-status{grid-area:status;justify-self:center;align-self:center;padding:4px 7px;font-size:10px;line-height:1.1;white-space:nowrap}
    .hg-my-application-actions{grid-area:actions;justify-self:end;margin:0}
    .hg-my-application-actions .hg-button{min-height:30px;padding:6px 10px;white-space:nowrap}
    .hg-my-application-note{grid-area:note;margin:0;padding:6px 9px;border-radius:8px}
    .hg-my-application-note strong,.hg-my-application-note span{display:inline}
    .hg-my-application-note span{margin:0;font-size:11px;line-height:1.3}
}
@media(max-width:760px){
    .hg-my-application-primary{min-width:0}
    .hg-my-application-primary h4{margin:0 0 3px;color:#001D6E}
    .hg-my-application-primary p{margin:0;color:#64748b}
    .hg-my-application-status{display:inline-flex;margin-top:8px}
    .hg-my-application-actions .hg-button{width:100%;text-align:center}
}