/* Resident login (services/login.php). Light tokens copied from app.css (café palette), kept here
     because this page does not load the app header. If the light palette in app.css changes, change it here too. */
  :root {
    --font-display: 'Noto Serif Thai', 'Google Sans', 'Noto Sans Thai', serif;
    --bg: #faf7f2; --card-bg: #ffffff; --surface: rgba(92,58,33,0.035); --surface-strong: rgba(92,58,33,0.07);
    --border: #ece4d8; --text: #2c1e15; --text-dim: #5b4636; --text-faint: #6f5a49;
    --accent: #6b4226; --accent-ink: #6b4226; --accent-rgb: 107,66,38; --err: #c2261f;
    color-scheme: light;
  }
  /* Light by default; the end of this file switches to the dark palette when the browser / phone is dark (prefers-color-scheme). */
  * { box-sizing: border-box; font-family: 'Google Sans', 'Noto Sans Thai', sans-serif; }
  html, body { margin: 0; min-height: 100%; }
  body { background: var(--bg); color: var(--text); min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }

  .lg-wrap { width: 100%; max-width: 400px; animation: lgRise 0.35s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes lgRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  .lg-brand { display: flex; align-items: center; gap: 12px; margin: 0 4px 22px; }
  .lg-brand img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #fff; border: 1px solid var(--border); }
  .lg-brand b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
  .lg-brand span { display: block; font-size: 0.78rem; color: var(--text-faint); }

  .lg-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 22px; padding: 28px 24px 24px; }
  .lg-card h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 8px; }
  .lg-sub { font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); margin: 0 0 22px; }

  .btn-line {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px;
    background: #05813a; color: #fff; border: 0; border-radius: 14px; /* darker than LINE's own green so the white label passes 4.5:1 */
    font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s;
  }
  .btn-line:hover:not(:disabled) { background: #046b30; }
  .btn-line:active:not(:disabled) { transform: scale(0.985); }
  .btn-line:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; }
  .btn-line:disabled { opacity: 0.6; cursor: default; }
  .btn-line svg { width: 22px; height: 22px; flex-shrink: 0; }
  .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: lgSpin 0.7s linear infinite; flex-shrink: 0; }
  @keyframes lgSpin { to { transform: rotate(360deg); } }

  .msg { font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); margin: 0; }
  .msg:not(:empty) { margin-top: 14px; }
  .msg.error { color: var(--err); }
  .error-banner { background: rgba(194,38,31,0.08); border: 1px solid rgba(194,38,31,0.25); border-radius: 12px; padding: 12px 14px; font-size: 0.84rem; color: var(--err); line-height: 1.5; }

  .lg-feats { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .lg-feats li { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text-dim); }
  .lg-feats i { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink); }

  .lg-help { font-size: 0.78rem; line-height: 1.6; color: var(--text-faint); margin: 16px 6px 0; text-align: center; }
  .lg-help + .lg-help { margin-top: 6px; }
  .lg-help a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) { .lg-wrap { animation: none; } .btn-line { transition: none; } .spinner { animation-duration: 1.6s; } }

  /* ── Login page with the building photo (body.lg-page = services/login.php only; link.php keeps the plain shell above) ──
     Phone: photo band on top, the card overlaps its lower edge (and hides the logo printed in the picture).
     Desktop (900px+): photo on the left, sign-in on the right. Flat navy tint, no gradients. */
  body.lg-page { display: block; padding: 0; min-height: 100dvh; }
  /* Whole-pixel heights on purpose: a height in vh lands on a fraction of a pixel and leaves a thin dark line at the bottom edge */
  .lg-hero { position: relative; height: 300px; background: #2e1d12; overflow: hidden; color: #fff; }
  @media (min-height: 760px) { .lg-hero { height: 340px; } }
  .lg-hero-img { position: absolute; inset: 0; background: url('/indexpics/hero.jpg') center 22% / cover no-repeat; animation: lgPhoto 1.2s cubic-bezier(0.16,1,0.3,1) both; }
  /* Tint, plus on phones a soft fade at the bottom into the page colour (#faf7f2 = --bg) so the photo has no hard edge beside the card.
     The fade starts below the welcome text, which always sits on the dark part. */
  .lg-hero::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(250,247,242,0) calc(100% - 100px), rgba(250,247,242,0.7) calc(100% - 42px), #faf7f2 calc(100% - 10px)), rgba(46, 26, 12, 0.48); }
  .lg-hero-in { position: relative; z-index: 1; max-width: 420px; height: 100%; margin: 0 auto; padding: 0 22px 104px; display: flex; flex-direction: column; justify-content: flex-end; }
  .lg-page .lg-brand { margin: 0 0 10px; animation: lgRise .5s cubic-bezier(0.16,1,0.3,1) both; }
  .lg-page .lg-brand img { border-color: rgba(255,255,255,0.35); }
  .lg-page .lg-brand span { color: rgba(255,255,255,0.8); }
  .lg-welcome { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; animation: lgRise .5s cubic-bezier(0.16,1,0.3,1) .08s both; }

  .lg-page .lg-wrap { position: relative; z-index: 2; max-width: 420px; margin: -80px auto 0; padding: 0 16px 32px; animation: lgRise .45s cubic-bezier(0.16,1,0.3,1) .14s both; }
  .lg-page .lg-card { box-shadow: 0 1px 2px rgba(46,26,12,0.06), 0 14px 34px -14px rgba(46,26,12,0.25); }
  .lg-page .lg-feats li { animation: lgRise .4s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(.34s + var(--i, 0) * 50ms); }
  @keyframes lgPhoto { from { opacity: 0; transform: scale(1.06); } }

  @media (min-width: 900px) {
    body.lg-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); }
    .lg-hero { height: auto; min-height: 100dvh; }
    .lg-hero::after { background: rgba(46, 26, 12, 0.48); }   /* side by side: no bottom fade */
    .lg-hero-img { background-image: url('/indexpics/hero-m.jpg'); background-position: center 40%; }
    .lg-hero-in { max-width: none; margin: 0; padding: 48px 52px; justify-content: flex-start; }
    .lg-welcome { font-size: 2.5rem; margin-top: 8px; }
    .lg-page .lg-wrap { margin: 0 auto; align-self: center; width: 100%; padding: 32px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lg-hero-img, .lg-page .lg-brand, .lg-welcome, .lg-page .lg-wrap, .lg-page .lg-feats li { animation: none; }
  }

  /* ── Dark mode: follows the browser / phone setting (prefers-color-scheme), nothing is saved and there is no switch.
     Palette of the resident app (app.css, html.dark). ── */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #171412; --card-bg: #211c19; --surface: rgba(255,240,220,0.045); --surface-strong: rgba(255,240,220,0.085);
      --border: #332b26; --text: #f4ece2; --text-dim: #d3c6b8; --text-faint: #a6968a;
      --accent: #b07a51; --accent-ink: #e2b98f; --accent-rgb: 226,185,143; --err: #f4908a;
      color-scheme: dark;
    }
    .lg-brand img { background: #2a2420; }
    .btn-line { background: #0a8f43; }
    .btn-line:hover:not(:disabled) { background: #0ca24d; }
    .error-banner { background: rgba(244,144,138,0.1); border-color: rgba(244,144,138,0.3); }
    .lg-page .lg-card { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 14px 34px -14px rgba(0,0,0,0.65); }
    /* the photo fades into the dark page colour (#171412 = --bg) instead of the light one */
    .lg-hero { background: #14100d; }
    .lg-hero::after { background: linear-gradient(180deg, rgba(23,20,18,0) calc(100% - 100px), rgba(23,20,18,0.7) calc(100% - 42px), #171412 calc(100% - 10px)), rgba(16,10,5,0.58); }
  }
  @media (prefers-color-scheme: dark) and (min-width: 900px) { .lg-hero::after { background: rgba(16,10,5,0.58); } }