/* Socostars — the sign-in and account pages.
   Deliberately the legal pages' sibling rather than a separate design: same document shell, same
   palette, same card. A reader who clicks through from the footer should not feel they left the site
   to hand over a password, and the credential form is exactly where that reassurance matters most. */

/* The `hidden` attribute has to beat the layout rules in this file. A method the deployment does not
   offer is removed with `hidden`, and `.auth-google { display: flex }` would otherwise keep a dead
   "Continue with Google" button on screen — which is the one control a reader must never be handed
   when it cannot work. `!important` is deliberate: the alternative is auditing every display rule on
   this page against every element that is ever hidden, which is the bug this rule exists to stop. */
[hidden] { display: none !important; }

html, body { margin: 0; }
body.auth-page {
  background: #f5f6f9;
  color: #1b2434;
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.auth-wrap { max-width: 470px; margin: 0 auto; padding: 42px 20px 72px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-mark {
  width: 42px; height: 42px; flex: none; border-radius: 13px; padding: 6px;
  background: linear-gradient(158deg, #1d2c47, #0c1626);
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(12,20,36,.2);
}
.auth-mark svg { width: 100%; height: 100%; display: block; }
.auth-mark .auth-orbit { fill: none; stroke: #ef7c35; stroke-width: 2.4; stroke-dasharray: 3.5 5; opacity: .6; }
.auth-mark .auth-star { fill: #ef7c35; }
.auth-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.auth-brand strong { display: block; font-size: 17px; }
.auth-brand span { color: #66748a; font-size: 12px; }
.auth-brand a:hover strong { color: #b8562a; }

.auth-page h1 { font-size: 24px; margin: 0 0 6px; }
.auth-lede { color: #66748a; font-size: 13px; margin: 0 0 22px; }

.auth-card { background: #fff; border: 1px solid #e3e7ee; border-radius: 14px; padding: 22px 24px; }

/* Tabs are two buttons, not radios: they switch panels without a form submission, and a screen reader
   hears them as tab controls via aria-selected rather than as a group of choices to submit. */
.auth-tabs { display: flex; gap: 6px; background: #eef1f6; border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 9px 10px;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #66748a; cursor: pointer;
}
.auth-tab[aria-selected="true"] { background: #fff; color: #1b2434; box-shadow: 0 1px 3px rgba(12,20,36,.12); }
.auth-tab:focus-visible { outline: 2px solid #ef7c35; outline-offset: 2px; }

.auth-field { margin-bottom: 15px; }
.auth-field label { display: block; font-size: 12px; font-weight: 700; color: #33415a; margin-bottom: 6px; }
.auth-field input {
  width: 100%; box-sizing: border-box; border: 1px solid #d8dee8; border-radius: 9px;
  padding: 11px 12px; font-size: 15px; color: #1b2434; background: #fff;
}
.auth-field input:focus { outline: 2px solid #ef7c35; outline-offset: 1px; border-color: #ef7c35; }
.auth-field input[aria-invalid="true"] { border-color: #c0392b; }
.auth-hint { font-size: 11.5px; color: #66748a; margin: 6px 0 0; }

.auth-submit {
  width: 100%; border: 0; border-radius: 10px; padding: 13px 16px; cursor: pointer;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff; background: #ef7c35; box-shadow: 0 8px 18px rgba(239,124,53,.24);
}
.auth-submit:hover { background: #b8562a; }
.auth-submit[disabled] { opacity: .6; cursor: progress; box-shadow: none; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #8b97a8; font-size: 11.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e3e7ee; }

/* A plain link, not a Google script. The page loads with no third-party JavaScript at all, which is
   both faster and the reason the button works with the site's own origin controls. */
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  box-sizing: border-box; text-decoration: none; border: 1px solid #d8dee8; border-radius: 10px;
  padding: 12px 16px; background: #fff; color: #1b2434;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.auth-google:hover { border-color: #b8562a; color: #b8562a; }
.auth-google svg { width: 18px; height: 18px; flex: none; }

.auth-message { border-radius: 10px; padding: 12px 14px; font-size: 13px; margin: 0 0 16px; }
.auth-error { background: #fdecea; border: 1px solid #f5c6c0; color: #8c2b20; }
.auth-ok { background: #eef7f0; border: 1px solid #cbe6d3; color: #1f5c34; }
.auth-note { background: #fff6ef; border: 1px solid #f6d8c1; color: #7a4a22; }

.auth-fine { font-size: 12px; color: #66748a; margin: 18px 0 0; }
.auth-fine a { color: #b8562a; }
.auth-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; font-size: 13px; }
.auth-links a { color: #b8562a; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* The signed-in panel. Kept to what the account actually does today — no settings that do nothing. */
.auth-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.auth-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, #1d2c47, #0c1626); color: #ef7c35;
  font-weight: 750; font-size: 16px; overflow: hidden;
}
.auth-avatar img { width: 100%; height: 100%; object-fit: cover; }
.auth-identity strong { display: block; font-size: 15px; }
.auth-identity small { color: #66748a; font-size: 12px; }

.auth-rows { border-top: 1px solid #e8ecf2; }
.auth-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid #e8ecf2;
}
.auth-row div strong { display: block; font-size: 13.5px; }
.auth-row div small { color: #66748a; font-size: 12px; }
.auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-button {
  border: 1px solid #d8dee8; background: #fff; border-radius: 8px; padding: 8px 13px;
  font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #33415a; cursor: pointer; text-decoration: none;
}
.auth-button:hover { border-color: #b8562a; color: #b8562a; }
.auth-button.danger { color: #8c2b20; }
.auth-button.danger:hover { border-color: #c0392b; background: #fdecea; }

.auth-operator { margin-top: 18px; font-size: 12px; color: #66748a; }
.auth-operator summary { cursor: pointer; }
.auth-operator code { background: #eef1f6; border-radius: 5px; padding: 1px 5px; font-size: 11.5px; }

@media (prefers-color-scheme: dark) {
  /* The main app has a dark theme, so a light-only page here would flash white between the two. */
  body.auth-page { background: #070d1b; color: #e7ecf5; }
  .auth-page h1 { color: #f2f6fc; }
  .auth-brand strong { color: #f2f6fc; }
  .auth-card { background: #0e1729; border-color: #1e2b45; }
  .auth-tabs { background: #131f36; }
  .auth-tab { color: #8b97a8; }
  .auth-tab[aria-selected="true"] { background: #1b2942; color: #f2f6fc; box-shadow: none; }
  .auth-field label { color: #b9c4d6; }
  .auth-field input { background: #0b1424; border-color: #263651; color: #e7ecf5; }
  .auth-google { background: #0b1424; border-color: #263651; color: #e7ecf5; }
  .auth-divider::before, .auth-divider::after { background: #1e2b45; }
  .auth-row { border-bottom-color: #1e2b45; }
  .auth-rows { border-top-color: #1e2b45; }
  .auth-button { background: #0b1424; border-color: #263651; color: #c6d0e0; }
  .auth-avatar { background: linear-gradient(150deg, #22314f, #101c30); }
  .auth-error { background: #2a1417; border-color: #4d2028; color: #f0b4ab; }
  .auth-ok { background: #10241a; border-color: #1d4530; color: #9fdcb5; }
  .auth-note { background: #2a1d10; border-color: #4d3a1c; color: #e8c193; }
  .auth-operator code { background: #131f36; }
  .auth-field input[aria-invalid="true"] { border-color: #8c2b20; }
  .auth-button.danger { color: #f0b4ab; }
  .auth-button.danger:hover { background: #2a1417; border-color: #8c2b20; }
}