/* ============================================================================
   2011-login-auth.css — the "Inicia sesión en habbo" box (auth agent)
   ----------------------------------------------------------------------------
   Loads AFTER 2011-login-base.css. Palette + window chrome + the .btn2011
   bevel recipe come from base; this file only styles THIS box's internals:
   .card-title / form.card-body / .field(+label,input) / .remember-row(+cb) /
   .submit-row / button.ok-button / a.forgot.

   CASCADE — read before editing:
   * Every rule is anchored on `#root .nitro-login-view` and doubles the
     component class where it must beat base's own blanket resets.
   * SPECIFIC TRAP FOUND HERE: base section 2 kills box-shadow with
       #root .nitro-login-view :is(..., button, input, ...) { box-shadow:none !important }
     which is (1,2,0) because :is() takes its highest-specificity argument
     (.nitro-card-shell = a class). Base's own button rule
       #root .nitro-login-view button
     is only (1,1,1) and therefore LOSES — measured live: .ok-button had
     `box-shadow: none`, i.e. no bevel at all. Anything here that needs a
     bevel/inset must reach (1,3,0) via a doubled class. Do not "simplify"
     these selectors back down.

   GEOMETRY — restyled WITHIN the pinned layout measured live before editing:
     card 292w | title 21h | body 290w pad 10 gap 8 | .field 270w gap 4
     input was 270x32 (a modern 32px control — the single biggest tell in
     this box) -> 18px, which is the real 2011 chat-field height in
     Example1.jpg once its 629px-wide capture is scaled back to 1:1.

   PROVENANCE of the field/button treatment: Example1.jpg zoomed 4x on the
   chat input + "Zeg" button, and 5x on the "Mod Tools" window. Both show
   FLAT fills, one hard 1px dark outline, bold centred dark pixel text, and
   no gradient/radius/glow whatsoever. The Mod Tools buttons are full-width
   near-white slabs inside the panel — that is the model for .ok-button.

   ART: none new. Habbo.swf's shared micro-UI atlas (symbol _-2wF) was
   re-checked at 3x: it holds only ROUNDED white button faces, radio dots, a
   rounded focused-field face and the green tick base already uses. Rounded
   art contradicts the no-radius rule, so the field/button chrome below is
   hand-written pixel CSS sampled from Example1.jpg, exactly as base did.
   ========================================================================= */

/* ============================================================
   1. FORM BODY — tighten to 2011 rhythm.
      The <form> is not in base's font :is() list, so it still
      inherited the bundle's 14px/18.9px. Pin it to 9px/11px.
   ============================================================ */

#root .nitro-login-view .login-auth-card .card-body.card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 9px 9px !important;
    gap: 6px !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    color: var(--c11-fg) !important;
}

/* ============================================================
   2. FIELDS
   ============================================================ */

#root .nitro-login-view .login-auth-card .field.field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

/* Label: 9px Volter bold, dark. No smoothing, no letter-spacing. */
#root .nitro-login-view .login-auth-card .field > label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 10px !important;
    font-weight: 700 !important;
    color: var(--c11-fg) !important;             /* #2b2b2b */
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    -webkit-font-smoothing: none !important;
}

/* The classic 2011 sunken field: flat white, ONE hard 1px dark border,
   a 1px hard inset line down the top and left edge. 18px tall so the 9px
   bitmap glyphs sit on whole pixels. Doubled class -> (1,3,0) so base's
   `box-shadow:none` reset cannot erase the inset. */
#root .nitro-login-view .login-auth-card .field > input[type='text'],
#root .nitro-login-view .login-auth-card .field > input[type='password'] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 1px solid #4a5a60 !important;        /* --c11-btn-bd */
    border-radius: 0 !important;
    background: var(--c11-field-bg) !important;  /* flat #ffffff */
    background-image: none !important;
    color: var(--c11-fg) !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    outline: none !important;
    transition: none !important;
    filter: none !important;
    /* hard sunken bevel: 1px dark at top + left, 1px light at bottom */
    box-shadow:
        inset 1px 0 0 0 #a9b6bb,
        inset 0 1px 0 0 #a9b6bb,
        inset 0 -1px 0 0 #ffffff !important;
    -webkit-font-smoothing: none !important;
}

/* Focus is a 1px COLOUR change only — never a soft ring or glow. */
#root .nitro-login-view .login-auth-card .field > input[type='text']:focus,
#root .nitro-login-view .login-auth-card .field > input[type='password']:focus,
#root .nitro-login-view .login-auth-card .field > input[type='text']:focus-visible,
#root .nitro-login-view .login-auth-card .field > input[type='password']:focus-visible {
    border-color: var(--c11-title-bg) !important;   /* #4b8aa4 */
    outline: none !important;
    box-shadow:
        inset 1px 0 0 0 #9ab4c0,
        inset 0 1px 0 0 #9ab4c0,
        inset 0 -1px 0 0 #ffffff !important;
}

/* Browser autofill paints its own pale-yellow field = instant modern tell. */
#root .nitro-login-view .login-auth-card .field > input:-webkit-autofill {
    -webkit-text-fill-color: var(--c11-fg) !important;
    -webkit-box-shadow:
        inset 0 0 0 20px var(--c11-field-bg),
        inset 1px 0 0 0 #a9b6bb,
        inset 0 1px 0 0 #a9b6bb !important;
    caret-color: var(--c11-fg) !important;
}

/* PASSWORD MASK — measured, not guessed. Volter DOES map U+2022 (canvas
   measureText: 40px at font-size 40px, i.e. a full-em glyph, vs 20px for real
   tofu), but it draws a mangled squiggle, not a dot: appending a fallback font
   therefore does nothing because Volter never misses the glyph. The mangled
   dots were a loud modern-looking defect at 1x. Volter must be REMOVED from
   this one field's stack. Nothing authentic is lost — a masked field only ever
   paints the mask character, never Volter text. (True 2011 fidelity here is
   Flash's `displayAsPassword`, which renders ASTERISKS; the mask character is
   not settable from CSS, so a small neutral dot is the closest reachable.) */
#root .nitro-login-view .login-auth-card .field > input[type='password'] {
    font-family: Tahoma, Verdana, sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 2px !important;
}

#root .nitro-login-view .login-auth-card .field > input::placeholder {
    color: #8b979c !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    opacity: 1 !important;
}

/* ============================================================
   3. "Recordarme" — square pixel checkbox, 11x11, genuine tick.
   ============================================================ */

#root .nitro-login-view .login-auth-card .remember-row.remember-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    color: var(--c11-fg) !important;
    cursor: pointer !important;
    user-select: none !important;
}

#root .nitro-login-view .login-auth-card .remember-row > span {
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    color: var(--c11-fg) !important;
    text-shadow: none !important;
}

/* Square, sunken, flat — the native checkbox is a big modern tell. */
#root .nitro-login-view .login-auth-card .remember-row > input[type='checkbox'] {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #4a5a60 !important;
    border-radius: 0 !important;
    background: var(--c11-field-bg) !important;
    background-image: none !important;
    cursor: pointer !important;
    transition: none !important;
    box-shadow:
        inset 1px 0 0 0 #a9b6bb,
        inset 0 1px 0 0 #a9b6bb !important;
}

/* Genuine 11x10 green tick cut from Habbo.swf symbol _-2wF, published by
   the foundation agent at /skin/2011ui/check_green.png. Pixelated, 1:1. */
#root .nitro-login-view .login-auth-card .remember-row > input[type='checkbox']:checked {
    background: var(--c11-field-bg) url('/skin/2011ui/check_green.png') no-repeat center !important;
    background-size: 9px 8px !important;
    image-rendering: pixelated !important;
}

/* ============================================================
   4. SUBMIT — the 2011 chunky button.
      Modelled on the full-width near-white slabs in the Mod Tools
      window (Example1.jpg): flat face, 1px dark outline, 1px light
      top/left highlight, 1px dark bottom/right shade, bold pixel
      text; :active inverts the bevel and offsets by 1px.
      A hard 1px rule sits above it, as the 2011 panels do.
   ============================================================ */

#root .nitro-login-view .login-auth-card .submit-row.submit-row {
    display: flex !important;
    align-items: center !important;
    margin: 2px 0 0 !important;
    padding: 5px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--c11-rule) !important;   /* #b7c8cf */
    background: none !important;
}

#root .nitro-login-view .login-auth-card .ok-button.ok-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    padding: 0 8px 1px !important;
    border: 1px solid var(--c11-btn-bd) !important;      /* #4a5a60 */
    border-radius: 0 !important;
    background: var(--c11-btn-bg) !important;            /* flat #e8ecec */
    background-image: none !important;
    color: var(--c11-btn-fg) !important;                 /* #2b2b2b */
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: none !important;
    filter: none !important;
    -webkit-font-smoothing: none !important;
    /* outset pixel bevel + one HARD 1px drop shadow (0 blur) */
    box-shadow:
        inset 1px 1px 0 0 var(--c11-btn-hi),             /* #ffffff top+left */
        inset -1px -1px 0 0 var(--c11-btn-lo),           /* #c4cbcb bot+right */
        1px 1px 0 0 rgba(0, 0, 0, 0.22) !important;
}

#root .nitro-login-view .login-auth-card .ok-button.ok-button:hover {
    background: var(--c11-btn-hover-bg) !important;      /* #f4f7f7 */
}

/* Pressed: bevel inverts AND the button shifts 1px down-right into its own
   drop shadow — the 2011 push. */
#root .nitro-login-view .login-auth-card .ok-button.ok-button:active {
    background: var(--c11-btn-down-bg) !important;       /* #ccd3d3 */
    transform: translate(1px, 1px) !important;
    box-shadow:
        inset 1px 1px 0 0 var(--c11-btn-lo),
        inset -1px -1px 0 0 var(--c11-btn-hi) !important;
}

#root .nitro-login-view .login-auth-card .ok-button.ok-button:focus,
#root .nitro-login-view .login-auth-card .ok-button.ok-button:focus-visible {
    outline: none !important;
    border-color: var(--c11-outline) !important;         /* 1px darker, no ring */
}

#root .nitro-login-view .login-auth-card .ok-button.ok-button:disabled {
    background: #d5dadb !important;
    color: #8b979c !important;
    cursor: default !important;
    box-shadow: inset 1px 1px 0 0 #e9eded !important;
}

/* ============================================================
   5. "¿Olvidaste tu contraseña?" — plain underlined pixel link.
   ============================================================ */

#root .nitro-login-view .login-auth-card .forgot.forgot {
    display: block !important;
    align-self: flex-start !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    color: var(--c11-link) !important;                   /* #1f6f9a */
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 1px !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: none !important;
}

#root .nitro-login-view .login-auth-card .forgot.forgot:hover {
    color: var(--c11-fg) !important;
    text-decoration: underline !important;
}