/* Login — vanilla port of design/login.dc.html */

:root {
    --bg: #f3f4f5;
    --ink: #191c1d;
    --card: #2d2e2e;
    --field: #f8f9f7;
    --line: #E0E0E0;
    --brand: #86BC25;
    --brand-ink: #12240a;
    --label: #9aa093;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.ms {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    font-variant-ligatures: normal;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popin {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.login-card {
    width: 100%;
    max-width: 392px;
    background: var(--card);
    border: 3px solid var(--card);
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
    overflow: hidden;
    animation: popin 320ms cubic-bezier(.18, .9, .3, 1.05);
}
.login-card.shake { animation: shake 420ms cubic-bezier(.36, .07, .19, .97); }

.login-brand {
    padding: 26px 28px 22px;
    display: flex;
    justify-content: center;
}
.login-brand .row { display: flex; align-items: stretch; gap: 13px; height: 52px; }
.login-brand img.mark { height: 52px; object-fit: contain; }
.login-brand .stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 3px 0 4px;
}
.login-brand .stack b { font-size: 28px; font-weight: 700; letter-spacing: .01em; color: #fff; line-height: 1; }
.login-brand .stack img { height: 17px; object-fit: contain; opacity: .9; }

.login-body { position: relative; }
.busybar {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 520ms cubic-bezier(.4, 0, .2, 1);
    opacity: 0;
}
.login-body.busy .busybar { transform: scaleX(.72); opacity: 1; }

form {
    padding: 26px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--label);
}
.field .input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 5px 0 13px;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.field .input:focus-within { border-color: var(--brand); }
.login-card.shake .field .input { border-color: #e59a94; }
.field .input > .ms { font-size: 20px; color: #8a8f80; }
.field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
}
.field input:focus { outline: none; }
.field input::placeholder { color: #9aa093; }

.reveal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: #6b7063;
    cursor: pointer;
}
.reveal:hover { background: #eceee9; color: var(--ink); }
.reveal .ms { font-size: 20px; }

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: #3d2523;
    border: 1px solid #6e332e;
    border-radius: 6px;
}
.login-error .ms {
    font-size: 19px;
    color: #f2b8b5;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}
.login-error div { font-size: 13px; line-height: 1.45; color: #f2b8b5; text-wrap: pretty; }

.login-submit {
    height: 50px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 6px;
    background: var(--brand);
    color: var(--brand-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background 160ms, filter 160ms;
}
.login-submit:hover { filter: brightness(1.06); }
.login-submit .ms { font-size: 20px; }
.login-submit[disabled] {
    background: #4a4b4b;
    color: #9aa093;
    cursor: not-allowed;
    filter: none;
}
.login-submit[disabled] .spinner { animation: spin 900ms linear infinite; }

/* ---- choose-a-password screen (shares this sheet) ---- */
.intro {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 13px;
    background: #383939;
    border: 1px solid #4a4b4b;
    border-radius: 6px;
}
.intro > .ms { font-size: 24px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.intro div { display: flex; flex-direction: column; gap: 3px; }
.intro b { font-size: 14px; color: #fff; }
.intro span { font-size: 12.5px; line-height: 1.45; color: #c9cdc3; text-wrap: pretty; }
.intro span b { font-size: inherit; }
.login-foot { display: flex; justify-content: center; font-size: 12.5px; color: #9aa093; margin-top: -4px; }
.login-foot a, .linkbtn {
    color: #c9cdc3; font: inherit; font-weight: 600; background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.login-foot a:hover, .linkbtn:hover { color: #fff; }