/* login page (js/pages/login.js), design "V4 Start" step 0. Owned by the "start" page builder (docs/UI_V4.md).
   The map, panel, tabs (.st-choice .seg), alert cards and inline lines come from start.css / components.css.
   The two ways in: «لدي رمز» (the code pill) and «تسجيل جديد» (phone + name pills); the waiting screen. */

/* The two ways in: the segmented control, full width (.st-choice), a little taller */
.lg-tabs .seg button { height: 44px; font-size: var(--fs-ui); }

/* The code field: the design's pill with the code centred, Urbanist, letter-spaced, upper case */
.st-codefield { padding: 0 6px; }
.st-code {
  direction: ltr; text-align: center; letter-spacing: .3em; font-family: var(--font-num) !important;
  font-size: 20px !important; text-transform: uppercase;
}
.st-code::placeholder { letter-spacing: .12em; text-transform: none; }

/* «تذكّرني على هذا الجهاز» (design: the 12px line under the field) */
.lg-remember {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: -8px;
  font-size: var(--fs-small); color: var(--muted-2); cursor: pointer; min-height: 32px;
}
.lg-box {
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--raised); display: grid; place-items: center;
  color: transparent; transition: background var(--t-fast), border-color var(--t-fast); flex: none;
}
.lg-box .ph { font-size: 12px; }
.lg-remember input:checked + .lg-box { background: var(--ac); border-color: var(--ac); color: var(--ink); }
.lg-remember input:focus-visible + .lg-box { outline: 2px solid var(--ac); outline-offset: 2px; }
.lg-cards { display: flex; flex-direction: column; gap: 10px; }
.lg-cards:empty { display: none; }
.lg-clock { font-family: var(--font-num); }
.lg-linknote > .ph { font-size: 18px; flex: none; margin-top: 1px; }

/* «تسجيل جديد»: labelled pills (the design's .field), the security check, the send button */
.lg-signup { display: flex; flex-direction: column; gap: 14px; }
.lg-group { display: flex; flex-direction: column; gap: 8px; }
.lg-label { font-size: var(--fs-ui); }
.lg-opt { color: var(--muted-2); font-size: var(--fs-small); }
.lg-field { padding: 0 18px; }
.lg-field-ic { font-size: 20px; color: var(--muted-2); flex: none; }
.lg-field input[dir="ltr"] { text-align: right; font-family: var(--font-num); letter-spacing: .04em; }
/* English: the phone number sits on the reading side (the input is dir="ltr", so start = left) */
:root[dir="ltr"] .lg-field input[dir="ltr"] { text-align: start; }
.lg-field input[dir="ltr"]::placeholder { letter-spacing: .08em; }
.lg-field.bad { border-color: var(--bad); }
.lg-signup .st-human:not([hidden]) { display: flex; justify-content: center; min-height: 65px; }

/* The waiting screen: the hint in the design's accent quota tile, the calm «every minute» line */
.lg-hint { gap: 10px; padding: 16px 18px; }
.lg-hint-code {
  display: block; font-family: var(--font-num); font-size: 40px; line-height: 1.1; letter-spacing: .28em;
  text-align: center; direction: ltr; padding-inline-start: .28em;
}
.lg-hint-text { font-size: var(--fs-meta); color: var(--soft); line-height: 1.7; }
.lg-hint-text:empty { display: none; }
.lg-poll { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.7; }
.lg-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ac); flex: none; margin-top: 7px;
  animation: lg-breathe 2.4s ease-in-out infinite;
}
@keyframes lg-breathe { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
html[data-motion="reduce"] .lg-pulse { animation: none; opacity: .8; }
.lg-wait .st-row-actions .btn { flex: 1 1 auto; }

/* The privacy link at the panel's foot (every screen of the page) */
.lg-foot { margin-top: auto; padding-top: 4px; display: flex; justify-content: center; }
.lg-privacy {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-small); color: var(--muted-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.lg-privacy:hover { color: var(--text); }
.lg-privacy .ph { font-size: 15px; }

@media (max-width: 700px) {
  .st-code { letter-spacing: .12em; font-size: 17px !important; }
  .lg-remember { min-height: 44px; }
  .lg-field input { font-size: 16px; }     /* 16 px keeps iPhones from zooming into the field */
  .lg-hint-code { font-size: 34px; }
  .lg-privacy { min-height: 44px; }
}
/* English: "Sign in" is a wider button than «دخول», so on a 320 px phone the code's placeholder is a little smaller
   to show whole (Arabic as before) */
@media (max-width: 359px) {
  :root[dir="ltr"] .st-code::placeholder { letter-spacing: 0; font-size: 15px; }
}
@media (max-width: 700px) {
  /* «تسجيل جديد» and the one-screen views (waiting, refused, welcome): a taller bottom sheet (the map is only décor) */
  .st-panel.lg-tall { max-height: 88vh; max-height: 88dvh; }
}