/* ==========================================================================
   SafeTrack v3 — sign-in page ("Safety Moment")
   Left: public safety board. Right: the sign-in form. Phones: form first.
   The board colour follows the admin's theme (themes.css sets the brand tokens).
   Fonts load with a <link> in login.php; shared values come from tokens.css.
   ========================================================================== */

/* Page-local names, pointed at the shared tokens. --line and --emerg are this
   page's own values and stay until the login page is redesigned. */
:root { --hivis: var(--st-accent-hivis); --muted: var(--st-text-muted);
        --line: #DEE3E8; --emerg: #C8102E; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body.lg { font-family: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text); background: #fff;
          min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; -webkit-font-smoothing: antialiased; }

/* ── Board ─────────────────────────────────────────────────────────────── */
.lg-board { background: var(--c-ink); color: #fff; padding: 44px 56px; display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 100vh; }
.lg-board::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; }
.lg-board > * { position: relative; }
.lg-brand { display: flex; align-items: center; gap: 12px; }
.lg-brand > i { font-size: 30px; color: var(--hivis); }
.lg-brand b { display: block; font-size: 18px; font-weight: 800; }
.lg-brand span { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); }

.lg-moment { margin-top: auto; }
.lg-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hivis); }
.lg-rulehead { display: flex; align-items: center; gap: 22px; margin: 18px 0; }
.lg-digits { display: flex; gap: 8px; align-items: flex-end; }
.lg-digits span { font: 700 88px/1 'JetBrains Mono', ui-monospace, monospace; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 12px 6px; }
.lg-digits small { font: 700 26px 'JetBrains Mono', ui-monospace, monospace; color: rgba(255,255,255,.45); padding: 0 0 12px 6px; }
.lg-sign { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 6px var(--emerg); flex-shrink: 0; }
.lg-sign i { font-size: 44px; color: var(--emerg); }
.lg-rule { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 580px; }
.lg-rule-text { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.6; margin-top: 10px; max-width: 580px; }
.lg-dots { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.lg-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
.lg-dots i.on { background: var(--hivis); }

.lg-info { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-top: 34px; }
.lg-info.one { grid-template-columns: 1fr; max-width: 520px; }
.lg-box { border-radius: 14px; padding: 16px 18px; }
.lg-box small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.lg-emerg { background: var(--emerg); }
.lg-emerg small { opacity: .85; }
.lg-num { font: 700 30px 'JetBrains Mono', ui-monospace, monospace; display: flex; align-items: center; gap: 10px; }
.lg-num i { font-size: 22px; }
.lg-emerg ul { list-style: none; margin-top: 10px; font-size: 13px; display: grid; gap: 4px; }
.lg-emerg li i { margin-right: 6px; }
.lg-focus { background: rgba(242,179,27,.1); border: 1px solid rgba(242,179,27,.35); }
.lg-focus small { color: var(--hivis); }
.lg-focus b { font-size: 19px; display: flex; gap: 10px; align-items: center; }
.lg-focus b i { color: var(--hivis); }
.lg-focus p { font-size: 13px; color: rgba(255,255,255,.72); margin-top: 6px; line-height: 1.5; }
.lg-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255,255,255,.45); margin-top: 28px; }

/* ── Sign-in side ──────────────────────────────────────────────────────── */
.lg-side { display: flex; flex-direction: column; padding: 44px 56px 28px; min-height: 100vh; }
.lg-top { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.lg-form { width: 100%; max-width: 400px; margin: auto; }
.lg-logo { height: 64px; max-width: 220px; object-fit: contain; display: block; margin-bottom: 30px; }
.lg-form h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.lg-lede { color: var(--muted); margin: 6px 0 26px; font-size: 14.5px; }
.lg-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.lg-field { position: relative; margin-bottom: 18px; }
.lg-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.lg-field input { width: 100%; font: 500 15px Manrope, system-ui, sans-serif; color: var(--text); padding: 14px 44px 14px 42px;
                  border: 1.5px solid var(--line); border-radius: 12px; background: #fff; outline: none; transition: border-color .12s, box-shadow .12s; }
.lg-field input:focus { border-color: var(--c-accent-md); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-md) 15%, transparent); }
.lg-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px;
          background: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.lg-eye:hover { background: #F1F3F5; color: var(--text); }
.lg-submit { width: 100%; border: 0; border-radius: 12px; padding: 15px; margin-top: 6px; font: 750 15px Manrope, system-ui, sans-serif;
             background: var(--c-ink); color: #fff; display: flex; justify-content: center; align-items: center; gap: 10px; cursor: pointer; }
.lg-submit:hover { filter: brightness(1.15); }
.lg-submit:focus-visible, .lg-eye:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; }
.lg-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; margin-bottom: 18px; line-height: 1.45; }
.lg-alert i { font-size: 17px; margin-top: 1px; }
.lg-alert.bad { background: #FDE7E5; color: #8E1B12; }
.lg-alert.warn { background: #FDF1D8; color: #7A4B00; }
.lg-help { margin-top: 22px; font-size: 13px; color: var(--muted); text-align: center; }
.lg-help b { color: var(--text); }
.lg-credit { text-align: center; font-size: 11.5px; color: #9AA6B2; margin-top: 24px; }

/* ── Smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lg-board, .lg-side { padding: 36px 36px; }
  .lg-digits span { font-size: 70px; }
  .lg-rule { font-size: 28px; }
  .lg-info { grid-template-columns: 1fr; }
}
/* Phones: one dark page — brand, a compact rule of the day, the sign-in form
   as a white card, then emergency details. The board's wrappers step aside
   (display: contents) so their parts can sit around the form. */
@media (max-width: 860px) {
  body.lg { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 22px 18px 26px;
            background-color: var(--c-ink); color: #fff;
            background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
            background-size: 36px 36px; }
  .lg-board, .lg-moment { display: contents; }
  .lg-board::before { display: none; }

  .lg-brand     { order: 1; }
  .lg-brand > i { font-size: 26px; }
  .lg-brand b   { font-size: 16px; }
  .lg-tag       { order: 2; margin-top: 26px; font-size: 10.5px; }
  .lg-rulehead  { order: 3; margin: 12px 0 10px; gap: 12px; }
  .lg-rule      { order: 4; font-size: 21px; line-height: 1.25; }
  .lg-rule-text, .lg-dots { display: none; }
  .lg-digits { gap: 5px; }
  .lg-digits span { font-size: 36px; border-radius: 9px; padding: 6px 7px 3px; }
  .lg-digits small { font-size: 14px; padding-bottom: 6px; }
  .lg-sign { width: 52px; height: 52px; box-shadow: 0 0 0 4px var(--emerg); }
  .lg-sign i { font-size: 24px; }

  .lg-side { order: 5; min-height: 0; margin: 22px 0 18px; padding: 26px 22px 18px; background: #fff; color: var(--text);
             border-radius: 20px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
  .lg-top { display: none; }
  .lg-form { margin: 0; max-width: none; }
  .lg-logo { height: 46px; margin-bottom: 18px; }
  .lg-form h1 { font-size: 25px; }
  .lg-lede { margin-bottom: 20px; }
  .lg-help { margin-top: 16px; }
  .lg-credit { margin-top: 14px; }

  .lg-info { order: 6; margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  .lg-num { font-size: 26px; }
  .lg-field input { font-size: 16px; }   /* stops iPhones zooming in on focus */
  .lg-foot { order: 7; flex-direction: column; gap: 4px; margin-top: 20px; }
}