/* boycott-core/src/main/resources/static/css/login.css
   Shared by both modules. Generic only — it USES --accent and --accent-ink
   but never defines them. Each module supplies its own values in its own
   static/css/site-theme.css, so the other site's brand never ships in this
   artifact. No inline styles anywhere — CSP-safe.

   No fallback on --accent, deliberately: a module that forgets site-theme.css
   renders visibly wrong rather than quietly generic. */

:root{
    --paper:#faf7f0;
    --ink:#2b2b2b;
    --muted:#9a8a6a;
    --rule:#e7ddc9;
    --field-bg:#ffffff;
    --accent-ink:#faf7f0;
    --alert:#8c2f2f;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Georgia,'Times New Roman',serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}

.gate{
    width:100%;
    max-width:23rem;
}

.wordmark{
    font-family:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:0.95rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--accent);
    text-align:center;
    margin:0 0 2.25rem;
}

.field{ margin:0 0 1rem; }

.field label{
    display:block;
    font-family:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 0.35rem;
}

.field input{
    width:100%;
    font-family:inherit;
    font-size:1rem;                /* 16px — prevents iOS zoom-on-focus */
    color:var(--ink);
    background:var(--field-bg);
    border:1px solid var(--rule);
    border-radius:2px;
    padding:0.7rem 0.75rem;
    -webkit-appearance:none;
    appearance:none;
}

.field input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(0,0,0,0.05);
}

.submit{
    width:100%;
    font-family:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:0.8rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent-ink);
    background:var(--accent);
    border:none;
    border-radius:2px;
    padding:0.85rem 1rem;
    margin-top:0.75rem;
    cursor:pointer;
    min-height:44px;               /* touch target */
}

.submit:hover{ opacity:0.92; }
.submit:active{ opacity:0.85; }

.notice{
    font-family:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:0.8rem;
    text-align:center;
    margin:0 0 1.25rem;
    padding:0.6rem 0.75rem;
    border-radius:2px;
}

.notice.error{ color:var(--alert); border:1px solid rgba(140,47,47,0.3); }
.notice.plain{ color:var(--muted); border:1px solid var(--rule); }

@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; }
}
/* ---- The eye -------------------------------------------------------
 * The wrapper is created by the SCRIPT, not the markup, so with the script
 * blocked there is no empty box and no dead button — the field renders
 * exactly as it did before. Nothing here applies until the wrapper exists.
 */
.reveal-wrap {
    position: relative;
    display: block;
}

/* Room for the button so a long password never runs under the eye.
   Padding on the INPUT rather than width on the wrapper, so the field
   keeps whatever width the form gives it. */
.reveal-wrap input {
    width: 100%;
    padding-right: 2.9rem;
}

.reveal-btn {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    /* 44px, the iOS minimum. A 20px glyph with 12px of padding is a 20px
       target; this is the difference between tapping it and tapping the
       field behind it on a phone in a parking lot. */
    width: 44px;
    height: 44px;

    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    opacity: 0.55;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.reveal-btn:hover,
.reveal-btn:focus-visible { opacity: 1; }

.reveal-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Edge and IE put their own reveal control in the field. Two eyes side by
   side, one of which this script does not control. */
.reveal-wrap input::-ms-reveal,
.reveal-wrap input::-ms-clear { display: none; }