/* ============================================================================
   Bionimal shared component layer.
   Loaded right after common.css; per-screen files only add screen-specific
   tweaks on top. Everything here follows the brand demo page: pill buttons
   (deep-green primary — orange is an accent, not a button colour), translucent
   cards with hairline green borders, Plus Jakarta Sans 800 headings with
   negative tracking, orange focus rings as the "recognition" active state.

   Markup convention: shared classes come FIRST in the class attribute and the
   legacy per-screen class stays LAST (e.g. class="auth-card sign-in-panel") —
   responsive.css matches [class$="-panel"]-style suffix selectors.
   ============================================================================ */

/* ---- Buttons ------------------------------------------------------------ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 18px;
    border-radius:var(--radius-pill);
    font:inherit;
    font-weight:800;
    font-size:0.95rem;
    letter-spacing:-0.01em;
    line-height:1.2;
    color:var(--color-deep-green);
    border:1px solid var(--color-deep-green);
    background:transparent;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    text-decoration:none;
    user-select:none;
    transition:background-color .18s ease, color .18s ease,
               border-color .18s ease, box-shadow .18s ease,
               transform .06s ease, opacity .18s ease;
}
.btn svg{ flex:0 0 auto; }

.btn-primary{
    background:var(--color-deep-green);
    color:var(--color-off-white);
}
.btn-primary:hover{
    background:var(--color-teal);
    box-shadow:var(--shadow-soft);
}

.btn-ghost{
    background:rgba(255, 255, 255, 0.32);
}
.btn-ghost:hover{
    background:rgba(9, 51, 44, 0.08);
}

/* Destructive affordance — orange-tinted, still calm (brand: no alarm-red). */
.btn-danger{
    border-color:rgba(240, 83, 28, 0.5);
    color:#b23a10;
    background:rgba(240, 83, 28, 0.06);
}
.btn-danger:hover{
    background:rgba(240, 83, 28, 0.12);
}

.btn:active{ transform:translateY(1px); }

/* Disabled is visual only — the JS layer already gates the logic, and e2e
   still needs the element clickable, so no pointer-events:none. */
.btn.is-disabled{
    opacity:.55;
    cursor:default;
}

.btn-block{ width:100%; }
/* Breathing room between the last form field and a full-width submit. */
.auth-card > .btn-block{ margin-top:22px; }

/* Compact square icon button (edit / delete affordances). */
.btn-icon{
    width:38px;
    height:38px;
    padding:0;
    border-radius:12px;
}

/* Bare text button (e.g. "Forgot password?"). */
.link-button{
    background:none;
    border:none;
    padding:6px 4px;
    font:inherit;
    font-size:0.9rem;
    font-weight:700;
    color:var(--color-deep-green);
    cursor:pointer;
    border-radius:8px;
}
.link-button:hover{ text-decoration:underline; }

/* ---- Focus (global) ------------------------------------------------------ */
:focus-visible{
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
}
.form-input:focus{
    outline:none;
    border-color:var(--color-deep-green);
    box-shadow:0 0 0 3px rgba(9, 51, 44, 0.14);
}

/* ---- Screen + card scaffolding ------------------------------------------- */
/* Root scaffold for every centered screen. The gradient body shows through. */
.screen{
    min-height:100vh;
    min-height:100dvh;
    padding:24px 16px 48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* The shared translucent card that replaced the five cloned auth panels. */
.auth-card{
    width:min(440px, 100%);
    background:var(--card-strong);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:clamp(28px, 5vw, 40px);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Back affordance above each card. */
.back-link{
    width:min(440px, 100%);
    align-self:center;
    margin-bottom:12px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    padding:8px 10px;
    background:transparent;
    border:none;
    border-radius:10px;
    font:inherit;
    font-size:0.9rem;
    font-weight:700;
    color:var(--color-deep-green);
    cursor:pointer;
}
.back-link:hover{ background:rgba(9, 51, 44, 0.08); }

/* ---- Typography pieces ---------------------------------------------------- */
.kicker{
    color:var(--color-deep-green);
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-weight:800;
    font-size:0.82rem;
    margin-bottom:10px;
}
.screen-title{
    color:var(--heading);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.045em;
    font-size:clamp(1.55rem, 4vw, 1.95rem);
    text-align:center;
}
.screen-sub{
    color:var(--text-muted);
    font-size:0.98rem;
    text-align:center;
    margin:8px 0 18px;
    max-width:36ch;
}

/* Deep-green brand disc atop each card (holds the white "b" icon). */
.badge{
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--color-deep-green);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    box-shadow:var(--shadow-soft);
    flex:0 0 auto;
}
.badge .brand-icon{
    width:60%;
    height:60%;
}

/* ---- Forms ---------------------------------------------------------------- */
.form-label{
    width:100%;
    text-align:left;
    font-size:0.85rem;
    font-weight:700;
    color:var(--color-deep-green);
    margin:14px 0 6px;
}
.form-input{
    width:100%;
    padding:12px 14px;
    font:inherit;
    font-size:1rem;
    font-weight:500;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:var(--radius-input);
    background:var(--input-bg);
    transition:border-color .15s ease, box-shadow .15s ease;
}
.form-input:hover{ border-color:var(--line-strong); }
.form-input::placeholder{
    color:rgba(29, 37, 35, 0.45);
    font-weight:400;
}
/* Native select styled to match (stays a real <select> — Selenium drives it). */
select.form-input{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2309332c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:40px;
}

/* One-time-code fields (sign-up OTP + recovery code) — machine layer, centered. */
.otp-field{
    text-align:center;
    letter-spacing:0.4em;
    font-size:1.35rem;
    font-family:var(--font-mono);
}

/* Shared status/error banner under each form (JS .show()/.hide()s these). */
.form-status{
    width:100%;
    margin-top:14px;
    padding:10px 14px;
    border-radius:var(--radius-input);
    border:1px solid var(--line);
    background:rgba(9, 51, 44, 0.06);
    color:var(--color-deep-green);
    font-size:0.9rem;
    font-weight:600;
    text-align:center;
}

/* ---- Chips & pills --------------------------------------------------------- */
.chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:var(--radius-chip);
    border:1px solid var(--line);
    background:rgba(255, 255, 255, 0.55);
    font-size:0.8rem;
    font-weight:600;
    color:var(--color-deep-green);
}
.chip-mono{
    font-family:var(--font-mono);
    font-weight:500;
    letter-spacing:-0.01em;
}
.chip-count{
    background:var(--color-sage);
    border-color:transparent;
    border-radius:var(--radius-pill);
    font-weight:800;
}

/* ---- Motion safety --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    *{
        transition-duration:0.01ms !important;
        animation-duration:0.01ms !important;
    }
}