/* ==========================================
   Southbound Gear
========================================== */

.gear-page{

    max-width:1100px;
    margin:0 auto;
    padding:32px 24px 80px;

}

.gear-hero{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;

}

.gear-hero::before{

    content:"";
    position:absolute;
    top:-55px;
    right:-25px;
    width:210px;
    height:210px;
    background-image:url('../brand/sb-mark.svg');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.05;
    mix-blend-mode:screen;
    filter:saturate(.9) brightness(1.15);
    pointer-events:none;

}

.gear-hero h1{

    font-family:var(--font-display);
    font-size:52px;
    letter-spacing:.5px;
    line-height:1;
    margin-bottom:8px;

}

.gear-hero-sub{

    color:var(--text-secondary);
    font-size:15px;
    max-width:52ch;

}

.gear-add-btn{

    background:var(--primary);
    color:#0f2019;
    border:none;
    border-radius:14px;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;
    white-space:nowrap;

}

.gear-add-btn:hover{

    background:var(--primary-light);

}

.gear-btn-outline{

    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);
    border-radius:14px;
    padding:12px 20px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;

}

.gear-btn-outline:hover{

    border-color:var(--text-secondary);
    color:var(--text);

}

/* ==========================
   Week banner
========================== */

.gear-week-banner{

    display:none;
    align-items:center;
    gap:12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px 18px;
    margin-bottom:28px;
    flex-wrap:wrap;
    font-size:14px;

}

.gear-week-banner.visible{

    display:flex;

}

#gearWeekBannerText{

    color:var(--text-secondary);
    flex:1;
    min-width:200px;

}

.gear-week-select{

    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:10px;
    padding:8px 10px;
    font-size:13px;
    font-family:inherit;

}

.gear-week-apply{

    background:var(--primary);
    color:#0f2019;
    border:none;
    border-radius:10px;
    padding:9px 16px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;
    white-space:nowrap;

}

.gear-week-apply:hover{

    background:var(--primary-light);

}

/* ==========================
   Empty state
========================== */

.gear-empty-state{

    display:none;
    text-align:center;
    padding:60px 24px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-bottom:28px;

}

.gear-empty-state.visible{

    display:block;

}

.gear-empty-state h2{

    font-size:22px;
    margin-bottom:10px;

}

.gear-empty-state p{

    color:var(--text-secondary);
    max-width:44ch;
    margin:0 auto 24px;
    line-height:1.6;

}

/* ==========================
   Shoe cards
========================== */

.gear-grid{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
    margin-bottom:12px;

}

.gear-card{

    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:14px;

}

.gear-card-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;

}

.gear-card-name{

    font-size:16px;
    font-weight:700;
    margin-bottom:2px;

}

.gear-card-brand{

    color:var(--text-secondary);
    font-size:12.5px;

}

.gear-card-menu{

    background:transparent;
    border:none;
    color:var(--muted);
    font-size:18px;
    cursor:pointer;
    padding:2px 8px;
    border-radius:8px;
    transition:.15s;
    line-height:1;

}

.gear-card-menu:hover{

    background:rgba(255,255,255,.08);
    color:var(--text);

}

.gear-card-mileage{

    display:flex;
    align-items:baseline;
    gap:6px;
    font-family:var(--font-mono);

}

.gear-card-mileage-current{

    font-size:26px;
    font-weight:700;

}

.gear-card-mileage-total{

    color:var(--text-secondary);
    font-size:13px;

}

.gear-progress-track{

    width:100%;
    height:8px;
    background:var(--surface-light);
    border-radius:100px;
    overflow:hidden;

}

.gear-progress-fill{

    height:100%;
    border-radius:100px;
    transition:width .3s ease;

}

.gear-progress-fill.ok{ background:var(--green); }
.gear-progress-fill.warn{ background:var(--yellow); }
.gear-progress-fill.danger{ background:var(--red); }

.gear-card-meta{

    color:var(--text-secondary);
    font-size:12.5px;

}

.gear-card-actions{

    display:flex;
    gap:8px;
    margin-top:2px;

}

.gear-card-actions button{

    flex:1;
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text-secondary);
    border-radius:10px;
    padding:9px;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;

}

.gear-card-actions button:hover{

    border-color:var(--primary);
    color:var(--primary);

}

.gear-card.retired{

    opacity:.55;

}

.gear-card.over-threshold{

    border-color:rgba(239,68,68,.5);

}

/* ==========================
   Retired section
========================== */

.gear-retired-section{

    display:none;
    margin-top:24px;

}

.gear-retired-section.visible{

    display:block;

}

.gear-retired-title{

    font-size:16px;
    color:var(--text-secondary);
    margin-bottom:14px;

}

/* ==========================
   Modals
========================== */

.gear-modal-overlay{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(4,10,7,.7);
    backdrop-filter:blur(6px);
    z-index:200;
    align-items:center;
    justify-content:center;
    padding:20px;

}

.gear-modal-overlay.open{

    display:flex;

}

.gear-modal{

    background:
        linear-gradient(
            160deg,
            rgba(26,42,33,.98),
            rgba(14,26,20,.98)
        );
    border:1px solid var(--border);
    border-radius:22px;
    max-width:420px;
    width:100%;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    animation:gearFadeUp .2s ease;

}

.gear-modal-small{

    max-width:340px;

}

.gear-modal-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
    font-weight:700;

}

.gear-modal-close{

    background:rgba(255,255,255,.06);
    border:none;
    color:var(--text-secondary);
    width:30px;
    height:30px;
    border-radius:9px;
    cursor:pointer;
    font-size:1rem;

}

.gear-modal-close:hover{

    background:rgba(239,68,68,.2);
    color:#fca5a5;

}

.gear-modal-body{

    padding:18px 22px 22px;
    display:flex;
    flex-direction:column;

}

.gear-field-label{

    font-size:12px;
    color:var(--text-secondary);
    margin:12px 0 6px;

}

.gear-field-label:first-child{

    margin-top:0;

}

.gear-input{

    width:100%;
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:12px;
    padding:10px 14px;
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:.15s;

}

.gear-input:focus{

    border-color:var(--primary);

}

.gear-modal-actions{

    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;

}

@keyframes gearFadeUp{

    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }

}

@media (max-width:640px){

    .gear-hero h1{ font-size:38px; }

}