:root{
    --cac-ink:#16213e;
    --cac-ink-2:#0f3460;
    --cac-steel:#4C5A78;
    --cac-chrome:#EDEFF2;
    --cac-accent:#1E6E96;
    --cac-accent-dark:#155A7D;
    --cac-accent-onDark:#45b7d1;
    --cac-surface:#FFFFFF;
    --cac-bg:#F5F7FA;
    --cac-line:#DCE3EC;
    --cac-note-bg:#EAF3FA;
    --cac-note-border:#C7DEED;
}

.sheet-wrap{ font-family:'Inter',sans-serif; color:var(--cac-ink); max-width:820px; margin:0 auto; }

/* ---- Hero ---- */
.sheet-hero{
    background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius:14px;
    padding:2.25rem 2rem;
    margin-bottom:1.75rem;
    position:relative;
    overflow:hidden;
}
.sheet-hero::before{
    content:"";
    position:absolute; top:0; left:0; bottom:0; width:8px;
    background:var(--cac-accent-onDark);
}
.sheet-hero .hero-eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--cac-accent-onDark);
    display:inline-block;
    margin-bottom:.6rem;
}
.sheet-hero h1{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    font-size:clamp(1.6rem,4vw,2.4rem);
    color:#fff;
    margin:0 0 .5rem 0;
}
.sheet-hero p{
    color:#B9C6DE;
    margin:0;
    font-size:1rem;
    max-width:46ch;
}

/* ---- Trust bar (member/ride counts on the logged-out gate) ---- */
.sheet-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--cac-line);
    border:1px solid var(--cac-line);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:1.75rem;
}
.sheet-stat{
    background:var(--cac-surface);
    padding:1rem .75rem;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:.2rem;
}
.sheet-stat-num{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    color:var(--cac-ink-2);
    letter-spacing:.01em;
}
.sheet-stat-label{
    font-size:.78rem;
    color:var(--cac-steel);
    text-transform:uppercase;
    letter-spacing:.04em;
}
@media (max-width:520px){
    .sheet-stat-num{ font-size:1.15rem; }
    .sheet-stat-label{ font-size:.68rem; }
}

/* ---- Recent rides gallery ---- */
.recent-rides-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
}
@media (max-width:700px){ .recent-rides-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .recent-rides-grid{ grid-template-columns:1fr; } }

.ride-card{
    display:block;
    border:1px solid var(--cac-line);
    border-radius:10px;
    overflow:hidden;
    text-decoration:none;
    color:var(--cac-ink);
    background:var(--cac-surface);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ride-card:hover,
.ride-card:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(15,52,96,.12);
    border-color:var(--cac-accent);
}
.ride-card-img{
    aspect-ratio:4/3;
    background:var(--cac-bg);
    overflow:hidden;
}
.ride-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.ride-card-body{
    padding:.6rem .75rem .75rem;
    display:flex;
    flex-direction:column;
    gap:.15rem;
}
.ride-card-name{
    font-weight:600;
    font-size:.85rem;
    color:var(--cac-ink);
    line-height:1.25;
}
.ride-card-nick{
    font-size:.78rem;
    color:var(--cac-steel);
    font-style:italic;
}

.sheet-intro{
    font-size:1rem;
    line-height:1.6;
    color:var(--cac-ink);
    max-width:68ch;
    margin:0 0 1.75rem;
}

.sheet-note{
    display:flex;
    align-items:center;
    gap:.6rem;
    background:var(--cac-note-bg);
    border:1px solid var(--cac-note-border);
    color:var(--cac-accent-dark);
    border-radius:10px;
    padding:.7rem 1rem;
    font-size:.9rem;
    margin-bottom:2rem;
}
.sheet-note svg{ flex:0 0 auto; }
.sheet-note a{ color:var(--cac-accent-dark); font-weight:600; text-decoration:underline; }

/* ---- Step cards ---- */
.sheet-step{
    background:var(--cac-surface);
    border:1px solid var(--cac-line);
    border-radius:14px;
    padding:1.75rem 1.75rem 1.5rem;
    margin-bottom:1.5rem;
    box-shadow:0 1px 2px rgba(20,20,20,.03);
}
.sheet-step-head{
    display:flex;
    align-items:center;
    gap:.85rem;
    margin-bottom:1.25rem;
}
.sheet-step-num{
    font-family:'JetBrains Mono',monospace;
    font-weight:500;
    font-size:.85rem;
    color:#fff;
    background:linear-gradient(135deg, var(--cac-accent) 0%, var(--cac-ink) 100%);
    width:2.1rem;
    height:2.1rem;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.sheet-step-titles h2{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
    font-size:1.05rem;
    margin:0;
    color:var(--cac-ink);
}
.sheet-step-titles span{
    font-size:.85rem;
    color:var(--cac-steel);
}

.sheet-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:700px){ .sheet-row{ grid-template-columns:1fr; } }

.sheet-field{ margin-bottom:0; }
.sheet-field label.form-label{
    font-weight:600;
    font-size:.85rem;
    color:var(--cac-ink);
}
.sheet-field .field-hint{
    font-size:.83rem;
    color:var(--cac-steel);
    margin:.15rem 0 .5rem;
}
.sheet-field .form-control,
.sheet-field .form-select{
    border-color:var(--cac-line);
    border-radius:8px;
    min-height:44px;
}
.sheet-field textarea.form-control{ min-height:110px; }

/* Focus states: visible on every interactive element, not just form-control.
   Meets WCAG 2.2 SC 2.4.11 Focus Appearance (thick, high-contrast, offset outline)
   in addition to the softer box-shadow glow. */
.sheet-field .form-control:focus,
.sheet-field .form-select:focus{
    border-color:var(--cac-accent);
    box-shadow:0 0 0 .2rem rgba(30,110,150,.18);
}
.sheet-wrap a:focus-visible,
.sheet-wrap button:focus-visible,
.sheet-wrap input:focus-visible,
.sheet-wrap select:focus-visible,
.sheet-wrap textarea:focus-visible,
.sheet-wrap .drop-zone:focus-visible{
    outline:3px solid var(--cac-accent);
    outline-offset:2px;
}

/* ---- Step progress tracker ---- */
.step-progress{ margin-bottom:1.75rem; }
.step-progress ol{
    list-style:none;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin:0;
    padding:0;
    position:relative;
}
.step-progress ol::before{
    content:"";
    position:absolute;
    top:16px;
    left:16px;
    right:16px;
    height:2px;
    background:var(--cac-line);
    z-index:0;
}
.step-progress-item{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.4rem;
    flex:1;
    text-align:center;
}
.step-progress-dot{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--cac-surface);
    border:2px solid var(--cac-line);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--cac-steel);
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    font-weight:600;
    transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.step-progress-dot svg{ width:16px; height:16px; display:none; }
.step-progress-label{
    font-size:.78rem;
    color:var(--cac-steel);
    font-weight:600;
}
.step-progress-item.is-active .step-progress-dot{
    border-color:var(--cac-accent);
    color:var(--cac-accent);
    box-shadow:0 0 0 4px rgba(30,110,150,.14);
}
.step-progress-item.is-active .step-progress-label{ color:var(--cac-ink); }
.step-progress-item.is-complete .step-progress-dot{
    background:var(--cac-accent);
    border-color:var(--cac-accent);
}
.step-progress-item.is-complete .step-progress-dot span{ display:none; }
.step-progress-item.is-complete .step-progress-dot svg{ display:block; }
.step-progress-item.is-complete .step-progress-label{ color:var(--cac-ink); }
.step-progress-status{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
@media (max-width:520px){
    .step-progress-dot{ width:26px; height:26px; font-size:.7rem; }
    .step-progress-dot svg{ width:13px; height:13px; }
    .step-progress-label{ font-size:.66rem; }
    .step-progress ol::before{ top:13px; left:13px; right:13px; }
}

/* ---- Step icon accent (sits beside the step title) ---- */
.sheet-step-icon{
    width:2.1rem;
    height:2.1rem;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:linear-gradient(135deg, var(--cac-accent) 0%, var(--cac-ink-2) 100%);
    color:#fff;
}
.sheet-step-icon svg{ width:19px; height:19px; }

/* ---- Live photo counter ---- */
.photo-counter{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.85rem;
    font-weight:600;
    color:var(--cac-accent-dark);
    margin-top:.6rem;
}
.photo-counter[hidden]{ display:none; }

.sheet-tread{
    height:10px;
    margin:1.5rem 0 1.75rem;
    background-image:repeating-linear-gradient(90deg, var(--cac-line) 0 10px, transparent 10px 20px);
    background-position:center;
    background-repeat:repeat-x;
    background-size:20px 3px;
}

.sheet-submit-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1rem;
    margin-top:.5rem;
}
.sheet-submit-row .submit-btn{
    background:var(--cac-accent);
    border-color:var(--cac-accent);
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:600;
    padding:.75rem 2.1rem;
    min-height:44px;
    border-radius:8px;
}
.sheet-submit-row .submit-btn:hover{
    background:var(--cac-accent-dark);
    border-color:var(--cac-accent-dark);
}

/* Respect reduced-motion preference (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
    .sheet-hero,
    .sheet-step,
    .ride-card{
        transition:none !important;
        animation:none !important;
    }
}