/* Login (/login). Measures from the Mobbin references noted in login.html: a 360 px column a little above the
   middle, 44 px fields with the label above, one strong colour (the button), generic error under the password
   field, a banner for lock-out and network errors, a loading button. Light and dark. */
:root {
  --bg: #fafaf9; --text: #1c1917; --muted: #78716c; --label: #44403c;
  --border: #d6d3d1; --border-hover: #a8a29e; --focus: #2f4a7a; --input: #ffffff;
  --btn: #1c1917; --btn-hover: #292524; --btn-ink: #fafaf9;
  --error: #b42318; --banner-bg: #fef3f2; --banner-border: #fecdca;
  --mark: #1c1917; --mark-ink: #fafaf9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09; --text: #f5f5f4; --muted: #a8a29e; --label: #d6d3d1;
    --border: #44403c; --border-hover: #78716c; --focus: #8fa8d8; --input: #1c1917;
    --btn: #f5f5f4; --btn-hover: #e7e5e4; --btn-ink: #0c0a09;
    --error: #f97066; --banner-bg: #2a1210; --banner-border: #7a271a;
    --mark: #f5f5f4; --mark-ink: #0c0a09;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased; }

.auth { width: min(360px, calc(100% - 40px)); margin: 18vh auto 48px; }
@media (max-width: 600px) { .auth { margin-top: 12vh; } }

.mark { width: 32px; height: 32px; color: var(--mark); display: block; }
h1 { margin: 24px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }

form { margin-top: 32px; }
.field + .field { margin-top: 16px; }
label { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--label); }
.field label { margin-bottom: 6px; }
input[type=text], input:not([type]), input[type=password] {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--input); color: var(--text); font: inherit; font-size: 16px; /* < 16 px zooms on iOS */
  transition: border-color .12s, box-shadow .12s; }
input:hover { border-color: var(--border-hover); }
input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
input[aria-invalid=true] { border-color: var(--error); }
input[aria-invalid=true]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent); }
input[readonly] { opacity: .7; }

.pw { position: relative; }
.pw input { padding-right: 44px; }
.eye { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.eye:hover { color: var(--text); }
.eye:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.eye svg { width: 20px; height: 20px; fill: currentColor; }
.eye .off, .eye[aria-pressed=true] .on { display: none; }
.eye[aria-pressed=true] .off { display: block; }

.field-error { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--error); }
.field-error[hidden] { display: none; }
.field-error svg, .banner svg { width: 14px; height: 14px; flex: none; fill: currentColor; }

.remember { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 400; color: var(--muted); cursor: pointer; }
.remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--btn); }

.primary { position: relative; width: 100%; height: 44px; margin-top: 24px; border: 0; border-radius: 8px;
  background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .12s, opacity .12s; }
.primary:hover { background: var(--btn-hover); }
.primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.primary:disabled { opacity: .55; cursor: default; }
.spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; }
.primary.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.banner { display: flex; align-items: flex-start; gap: 8px; margin-top: 24px; padding: 12px 14px; border-radius: 8px;
  background: var(--banner-bg); border: 1px solid var(--banner-border); color: var(--error); font-size: 13px; line-height: 18px; }
.banner[hidden] { display: none; }
.banner svg { margin-top: 2px; }
.banner button { border: 0; padding: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }