:root {
  /* スクロールバーの有無にかかわらず、画面全体の中央に配置する。 */
  scrollbar-gutter: stable both-edges;
  color-scheme: light dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page-padding: 1rem;
  --card-min-height: 31rem;
  /* 内容が増えてもカード上端を動かさず、下方向へ伸ばす。 */
  --page-top: max(var(--page-padding), calc((100svh - var(--card-min-height)) / 2));
  --page-surface: light-dark(#f7faff, #0b1220);
  --scrollbar-thumb: light-dark(#8290a6, #61718c);
  --card-surface: light-dark(#ffffff, #141f34);
  --text: light-dark(#101a40, #edf3ff);
  --muted: light-dark(#53668e, #b9c9ec);
  background: var(--page-surface);
  scrollbar-color: var(--scrollbar-thumb) var(--page-surface);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-height: 100svh;
  padding: var(--page-top) var(--page-padding) var(--page-padding);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: start center;
  background: var(--page-surface);
  color: var(--text);
}
.auth-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 28.5rem;
  min-width: 0;
  margin-inline: auto;
  min-height: var(--card-min-height);
  padding: 2rem clamp(1.25rem, 6vw, 2.5rem) 8.5rem;
  border: 1px solid light-dark(#dfeafb, #314366);
  border-radius: 1.5rem;
  background: var(--card-surface);
  box-shadow: 0 16px 56px light-dark(rgb(55 101 161 / 8%), rgb(0 0 0 / 24%));
}
.auth-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 7.5rem;
  background: url("/assets/auth-waves.svg") center bottom / 100% 100% no-repeat;
  --wave-mask: light-dark(#ffffff, rgb(255 255 255 / 35%));
  mask-image: linear-gradient(var(--wave-mask), var(--wave-mask));
  pointer-events: none;
}
.language-picker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: -1.125rem -0.5rem 1.375rem 0;
  font-size: 0.8125rem;
  color: light-dark(#dfeafb, #53668e);
}
.language-picker button {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.language-picker button[aria-pressed="true"] {
  color: var(--text);
  font-weight: 700;
}
.language-picker button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.language-picker button:focus-visible {
  outline: 3px solid light-dark(#315ee6, #a5bbff);
  outline-offset: 2px;
}
.auth-content {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  text-align: center;
}
.brand {
  --brand-mark-size: 8rem;
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0 0 2.25rem;
  font-size: calc(var(--brand-mark-size) * 0.375);
  line-height: 1;
}
.brand-name {
  font-family: "Oxygen", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.brand-name b {
  font-weight: 700;
}
.auth-card .brand::after {
  content: "";
  width: 5rem;
  height: 0.125rem;
  margin-top: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, light-dark(#d8c6df, #bcacc5), light-dark(#93afe5, #829dce));
}
.auth-card .brand[data-tone="signed-in"]::after {
  background: linear-gradient(90deg, #ffba74, #ff8abf 35%, #98bafa 70%, #756aff);
}
.auth-card .brand[data-tone="error"]::after {
  background: linear-gradient(90deg, light-dark(#ffa887, #e4a28f), light-dark(#f3a0b1, #d79bb1) 50%, light-dark(#cd95ce, #bb94bf));
}
.brand-mark {
  display: block;
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  /* 画像内の透明な余白を含めて、文字との間隔を揃える。 */
  margin-bottom: calc(var(--brand-mark-size) * -0.05);
  object-fit: contain;
}
h1 {
  min-height: 1.45em;
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.45;
  text-wrap: balance;
}
p {
  line-height: 1.8;
}
.guidance {
  color: var(--muted);
  text-align: start;
}
.guidance p {
  margin: 1rem 0 0;
}
.account {
  margin: 0;
}
.account dt {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}
.account dd {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#sign-in,
#sign-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  min-width: min(14rem, 100%);
  max-width: 100%;
  min-height: 3.25rem;
  margin-inline: auto;
  padding: 0.625rem 1.25rem;
  border: 1px solid #92c9ff;
  border-radius: 0.875rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 150ms ease, filter 150ms ease;
}
#sign-in {
  background: linear-gradient(180deg, #1e6fe9, #1462dd);
  box-shadow: 0 8px 22px rgb(27 109 231 / 22%), inset 0 1px 0 rgb(255 255 255 / 30%);
  color: #ffffff;
}
#sign-out {
  margin-top: 1.5rem;
  border-color: light-dark(#96a9c6, #768daf);
  background: transparent;
  color: var(--text);
}
#sign-out:hover:not(:disabled) {
  background: light-dark(#f0f5fc, #22334e);
}
#sign-in:hover:not(:disabled) {
  filter: brightness(0.96);
  box-shadow: 0 10px 26px rgb(27 109 231 / 30%), inset 0 1px 0 rgb(255 255 255 / 30%);
}
#sign-in:focus-visible,
#sign-out:focus-visible {
  outline: 3px solid light-dark(#15366f, #d4e6ff);
  outline-offset: 4px;
}
#sign-in:disabled,
#sign-out:disabled {
  opacity: 0.65;
  cursor: wait;
}
.provider-icon {
  display: grid;
  place-items: center;
  flex: 0 0 1.75rem;
  height: 1.75rem;
  border: 1px solid #dce9fc;
  border-radius: 50%;
  background: #ffffff;
}
.provider-icon img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
#message {
  margin: 1.25rem 0 0;
  color: light-dark(#a51c47, #ffb3c8);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.7;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
#message[data-kind="info"] { color: inherit; font-weight: 400; }
#message:empty {
  margin: 0;
}
@media (max-width: 380px) {
  :root {
    --card-min-height: 28rem;
  }
  /* 長い状態名も1行に収め、状態によってボタン位置を変えない。 */
  h1 { font-size: clamp(1.25rem, 6vw, 1.375rem); }
  #sign-in, #sign-out { padding-inline: 0.75rem; }
  .auth-card {
    padding-bottom: 7rem;
  }
  .auth-card::after {
    height: 6rem;
  }
  .brand {
    --brand-mark-size: 7rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #sign-in,
  #sign-out {
    transition: none;
  }
}

.account-link {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
  color: light-dark(#245cac, #9dc5ff);
  text-underline-offset: 0.2em;
}
.account-link:focus-visible,
.settings-button:focus-visible,
#display-name:focus-visible {
  outline: 3px solid light-dark(#315ee6, #a5bbff);
  outline-offset: 4px;
}
.settings-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid light-dark(#dfeafb, #314366);
  text-align: start;
}
.settings-section h2 { margin: 0 0 1rem; font-size: 1.125rem; }
.settings-section h3 { margin: 0 0 1rem; font-size: 1rem; }
.settings-section label { display: block; font-weight: 600; }
#display-name {
  width: 100%;
  min-width: 0;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid light-dark(#96a9c6, #768daf);
  border-radius: 0.5rem;
  background: var(--card-surface);
  color: var(--text);
  font: inherit;
}
.field-help { margin: 0.75rem 0 1rem; font-size: 0.875rem; color: var(--muted); }
.settings-button {
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid light-dark(#1462dd, #759fe8);
  border-radius: 0.625rem;
  background: #1462dd;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.settings-button:disabled { cursor: default; opacity: 0.55; }
.settings-button--secondary { border-color: light-dark(#96a9c6, #768daf); background: transparent; color: var(--text); }
.settings-button--danger { border-color: light-dark(#b32f46, #ff95a8); background: transparent; color: light-dark(#a91c37, #ffb4c1); }
#confirm-delete { background: light-dark(#b32f46, #922239); color: #fff; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.settings-notice { margin: 1rem 0 0; overflow-wrap: anywhere; }
.settings-notice:empty, #account-status:empty { display: none; }
.settings-notice[data-kind="error"], #delete-message { color: light-dark(#b51a3a, #ffb4c1); }
.settings-notice[data-kind="success"] { color: light-dark(#216541, #a0dbba); }
.delete-confirmation {
  margin-top: 1rem; padding: 1rem;
  border: 1px solid light-dark(#e7b8c1, #985666);
  border-radius: 0.75rem;
}
.delete-confirmation p { font-size: 0.9375rem; overflow-wrap: anywhere; }
#delete-account-name { font-weight: 700; }
#google-email { font-size: 1rem; }
.settings-back { margin-top: 2rem; }