/* Friend sign-in shares the study application's light, quiet palette. */
:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#254b39;background:#f5f6f1;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--page:#f5f6f1;--card:#fff;--text:#254b39;--muted:#586a5b;--primary:#214e3c;--primary-hover:#193e2f;--border:#dce2d2;--field-border:#b9c5b5;--focus:#356b50}
*,*::before,*::after{box-sizing:border-box}html{min-width:0;min-height:100%}body{min-width:0;min-height:100vh;min-height:100svh;margin:0;padding:48px 20px;display:grid;place-items:center;background:var(--page);color:var(--text);line-height:1.6}button,input{font:inherit}button,input,a{-webkit-tap-highlight-color:transparent}.login-shell{width:100%;max-width:420px;min-width:0}.login-brand{margin-bottom:26px;text-align:center}.book-mark{width:44px;height:44px;margin:0 auto 12px;padding:11px 10px;display:flex;align-items:flex-start;justify-content:center;gap:4px;border:1px solid #d7dfc9;border-radius:13px;background:#e8eddc}.book-mark span{display:block;width:5px;height:22px;flex:0 0 5px;border-radius:2px;background:var(--primary)}.book-mark span:nth-child(2){height:18px;margin-top:4px;opacity:.8}.book-mark span:nth-child(3){height:20px;margin-top:2px;transform:rotate(-9deg);transform-origin:bottom center;opacity:.65}.brand-name{display:block;font-size:22px;font-weight:750;letter-spacing:-.05em}.brand-caption{margin:5px 0 0;color:var(--muted);font-size:13px;letter-spacing:-.025em}.login-card{min-width:0;padding:30px;border:1px solid var(--border);border-radius:22px;background:var(--card);box-shadow:0 8px 30px rgb(37 75 57 / 4%)}.login-intro{margin-bottom:25px}.login-intro h1{margin:0 0 12px;font-size:25px;font-weight:750;line-height:1.35;letter-spacing:-.055em;overflow-wrap:anywhere}.login-intro p{margin:0;font-size:14px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}.login-intro .login-secondary{margin-top:8px;color:var(--muted);font-size:13px}.login-form{display:grid;gap:18px;min-width:0}.form-field{display:grid;gap:7px;min-width:0}.form-field label{font-size:14px;font-weight:650}.form-field input{width:100%;min-width:0;min-height:48px;padding:11px 13px;border:1px solid var(--field-border);border-radius:10px;background:#fff;color:var(--text);font-size:16px;line-height:1.5;transition:border-color 120ms ease,box-shadow 120ms ease}.form-field input:hover:not(:disabled){border-color:#8c9f89}.form-field input:focus-visible{border-color:var(--focus);outline:3px solid rgb(53 107 80 / 22%);outline-offset:2px}.form-field input:disabled{cursor:not-allowed;background:#f1f3ed;color:#697569}.login-button{width:100%;min-width:0;min-height:48px;margin-top:4px;padding:12px 18px;border:1px solid var(--primary);border-radius:10px;background:var(--primary);color:#fff;font-size:16px;font-weight:700;line-height:1.5;cursor:pointer;transition:background-color 120ms ease,border-color 120ms ease}.login-button:hover:not(:disabled){border-color:var(--primary-hover);background:var(--primary-hover)}.login-button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.login-button:disabled{border-color:#d5ddcf;background:#dfe5d9;color:#61705f;cursor:not-allowed}.login-alert,.login-notice{min-width:0;margin:0 0 20px;padding:12px 14px;border:1px solid;border-radius:10px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}.login-alert{border-color:#e7c8be;background:#fff4ee;color:#843c2e}.login-notice{border-color:#ded9bd;background:#faf8ed;color:#66582b}.login-footer{margin-top:22px;padding:0 6px;text-align:center;font-size:12px;line-height:1.7}.login-footer a{display:inline-block;padding:4px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.login-footer a:hover{color:var(--primary)}.login-footer a:focus-visible{border-radius:3px;outline:2px solid var(--focus);outline-offset:3px}.login-footer p{margin:6px 0 0;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:480px){body{padding:32px 20px}.login-brand{margin-bottom:22px}.login-card{padding:25px 22px;border-radius:18px}.login-intro h1{font-size:23px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* CS Study mobile sign-in. */
@media (max-width: 800px) {
  body { padding: max(24px, env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .login-card { padding: 24px 22px; }
  .login-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .form-field input, .login-button { min-height: 50px; }
}
@media (max-height: 620px) {
  body { display: block; padding-top: 20px; }
  .login-shell { margin: 0 auto; }
  .login-brand { margin-bottom: 16px; }
  .book-mark { display: none; }
}


/* Minimal friend sign-in, 20261103. All rules are limited to the login page. */
body.minimal-login-page {
  color-scheme: light;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  background: #f5f6f8;
  color: #1f2937;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.minimal-login-page *,
.minimal-login-page *::before,
.minimal-login-page *::after {
  box-sizing: border-box;
}
.minimal-login-page .minimal-login-card {
  width: 100%;
  max-width: 360px;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid #e1e5ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 24px rgb(31 41 55 / 4%);
  text-align: left;
}
.minimal-login-page .minimal-login-form {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
}
.minimal-login-page .minimal-login-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.minimal-login-page .minimal-login-form input[type="hidden"] {
  display: none;
}
.minimal-login-page .minimal-login-form input:not([type="hidden"]) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  height: 50px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #c8cfd8;
  border-radius: 9px;
  background: #fff;
  color: #1f2937;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.minimal-login-page .minimal-login-form input::placeholder {
  color: #687384;
  opacity: 1;
}
.minimal-login-page .minimal-login-button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid #263445;
  border-radius: 9px;
  background: #263445;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
.minimal-login-page .minimal-login-button:hover:not(:disabled) {
  border-color: #192534;
  background: #192534;
}
.minimal-login-page .minimal-login-form input:focus-visible,
.minimal-login-page .minimal-login-button:focus-visible {
  outline: 3px solid #728daf;
  outline-offset: 3px;
}
.minimal-login-page .minimal-login-form input:disabled,
.minimal-login-page .minimal-login-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.minimal-login-page .minimal-login-message {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #edcac6;
  border-radius: 9px;
  background: #fff3f1;
  color: #8b332a;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width: 360px) {
  .minimal-login-page .minimal-login-card { padding: 20px; }
}
@media (max-height: 420px) {
  body.minimal-login-page { align-items: start; padding-top: 16px; padding-bottom: 16px; }
}