/* ============================================================
   THE SIGN-IN PAGE (Sign In v12, plans/28; D517) — both shells.
   The page draws itself with inline styles (signin.jsx, the design's own values);
   this file holds only what an inline style cannot: the body while the page is up,
   the placeholder / option colours and the page's keyframes.
   ============================================================ */
.login-body, .ml-body { margin: 0; overflow: hidden; background: #03060c; }
[data-signin] *, [data-signin] *::before, [data-signin] *::after { box-sizing: border-box; }
[data-signin] button, [data-signin] input, [data-signin] select { font-family: inherit; }
[data-signin] a { color: #36c9ff; text-decoration: none; }
[data-signin] a:hover { color: #e7f3ff; }
[data-signin] input::placeholder { color: #5d7186; }
[data-signin] select option { background: #070c17; color: #e7f3ff; }
[data-signin] input:focus-visible, [data-signin] select:focus-visible { outline: 1px solid #36c9ff; outline-offset: 1px; }
/* the birth-date selects: no ring after a click (his 2026-10-17: "it kind of leaves a … border around the date"); focus shows as the box's own edge brightening */
[data-signin] select:focus, [data-signin] select:focus-visible { outline: none !important; border-color: rgba(139,160,186,.55) !important; }
/* A3 (Motion System, D566): Sign In's lines and window arrive on Arrive (the drawing's lengths kept) */
@keyframes f-line { from { opacity: 0; transform: translateY(5px); animation-timing-function: cubic-bezier(.16,.84,.30,1); } to { opacity: 1; transform: none; } }

@keyframes f-spin { to { transform: rotate(360deg); } }

@keyframes cm-nodein { from { opacity: 0; transform: translateY(-10px) scale(.92); } to { opacity: 1; transform: none; } }
/* the phone's sign-in fields: a placeholder reads whole at 375 / 360 (his "things cut off on different screens"); the typed text stays
   16 px, so iOS does not zoom on focus */
.ml-screen input::placeholder { font-size: 13.5px; }