/* Login and registration share the Tailwind Plus simple-card layout.
   Keep Grunt's font, field material, and primary gradient. Auth-only sheet. */
:root {
  color-scheme: light;
  --ui-ink: #111827;
  --ui-muted: #6b7280;
  --ui-subtle: #596274;
  --ui-screen-background: #f9fafb;
  --ui-surface: #fff;
  --ui-surface-raised: #fff;
  --ui-surface-solid: #fff;
  --ui-surface-inset: #f3f4f6;
  --ui-surface-control: #fff;
  --ui-surface-hover: #f9fafb;
  --ui-surface-selected: #f3f4f6;
  --ui-edge: #e5e7eb;
  --ui-control-edge: #d1d5db;
  --ui-edge-strong: #9ca3af;
  --ui-panel: #fff;
  --ui-panel-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .06);
  --ui-field-shadow: 0 1px 2px rgb(41 41 41 / .05), 0 4px 10px -2px rgb(41 41 41 / .06), 0 0 0 1px rgb(41 41 41 / .05), inset 0 -1px 1px -.5px rgb(51 51 51 / .06);
  --ui-field-shadow-focus: 0 2px 4px rgb(41 41 41 / .06), 0 8px 18px -4px rgb(41 41 41 / .1), 0 0 0 1px rgb(41 41 41 / .6), inset 0 -1px 1px -.5px rgb(51 51 51 / .06);
}

html { scrollbar-gutter: stable; }
.grunt-screen {
  min-height: 100svh;
  color: var(--ui-ink);
  background: var(--ui-screen-background);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
}
.auth-layout :is(h1, h2, h3) { color: var(--ui-ink); text-wrap: balance; }
.auth-layout :is(p, label, small) { overflow-wrap: anywhere; }
.auth-layout :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
.auth-layout .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}
.auth-layout :is(.live-button, .signin-provider) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--ui-ink);
  background: #fff;
  border: 1px solid var(--ui-control-edge);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}
.auth-layout :is(.live-button, .signin-provider):not(:disabled):hover { background: var(--ui-surface-hover); border-color: var(--ui-control-edge); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.auth-layout :is(.live-button, .signin-provider):disabled { opacity: 1; color: var(--ui-muted); background: #fff; border-color: var(--ui-control-edge); box-shadow: 0 1px 2px rgb(0 0 0 / .05); cursor: not-allowed; }
.auth-layout .text-button { padding: 0; border: 0; background: none; color: var(--ui-link); font: inherit; font-size: 14px; font-weight: 600; line-height: 24px; }
.auth-layout .text-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
:root .auth-layout .live-form :is(input, textarea, select) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ui-control-edge);
  border-radius: 6px;
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  box-shadow: var(--ui-field-shadow);
  backdrop-filter: none;
  transition: box-shadow .2s ease;
}
:root .auth-layout .live-form :is(input, textarea, select):not(:disabled):hover { box-shadow: var(--ui-field-shadow); }
:root .auth-layout .live-form :is(input, textarea, select):focus-visible { outline: none; box-shadow: var(--ui-field-shadow-focus); }
:root .auth-layout .live-form :is(input, textarea, select):disabled { background: var(--ui-surface-inset); color: var(--ui-muted); }
:root :is(.grunt-screen) :is(input, textarea)::placeholder { color: var(--ui-subtle); opacity: .8; }
.auth-layout .live-form label { display:grid;gap:8px;color:var(--ui-ink);font-size:14px;font-weight:500;line-height:24px; }

/* Logo and heading sit above the white card; the account link sits below it. */
.signin-page.auth-layout { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding:48px 24px; }
.auth-layout .signin-form-panel { display:flex;flex-direction:column;width:100%;max-width:480px;min-width:0;padding:0;gap:0;flex:none; }
.auth-brand { display:flex;justify-content:center;align-self:center;margin-bottom:24px;min-height:44px; }
.auth-brand img { display:block;width:auto;height:40px; }
.auth-layout .signin-form-wrap { width:100%;max-width:none;margin:0;padding:0; }
.auth-entry-header { margin-bottom:40px;text-align:center; }
.auth-layout h1 { margin:0;font-size:24px;font-weight:700;letter-spacing:-.6px;line-height:36px; }
.auth-layout .signin-description { min-height:48px;margin:8px 0 0;margin-top:8px!important;font-size:14px;line-height:24px;color:var(--ui-muted); }
.auth-entry-card,
:root .live-app .auth-layout :is(.auth-entry-gate, .live-gate) { padding:48px;border:0;border-radius:8px;background:#fff;box-shadow:var(--ui-panel-shadow);backdrop-filter:none;-webkit-backdrop-filter:none; }
.auth-layout .live-gate { max-width:none;margin:0; }
.auth-layout .live-form { display:grid;gap:24px;margin:0; }
.auth-flow-stack { display:grid; }
.auth-flow-stack>:is(.auth-flow, .auth-sent) { grid-area:1/1;min-width:0; }
.auth-flow { opacity:1;transition:opacity .2s ease,visibility .2s ease; }
.auth-flow.is-hidden { opacity:0;visibility:hidden;pointer-events:none; }
.signin-email-slot { min-height:76px; }
.auth-sent { display:grid;align-content:center;gap:8px;min-height:76px; }
.auth-sent-message { margin:0;font-size:14px;line-height:24px;color:var(--ui-muted);overflow-wrap:anywhere; }
.auth-sent-message strong { color:var(--ui-ink);font-weight:600; }
.auth-sent-hint { margin:0;font-size:14px;line-height:24px;color:var(--ui-muted); }
.auth-social { margin-top:16px; }
.auth-divider { display:flex;align-items:center;gap:24px;font-size:14px;font-weight:500;line-height:24px;white-space:nowrap; }
.auth-divider::before,.auth-divider::after { content:"";flex:1;border-top:1px solid var(--ui-edge); }
.auth-layout .signin-providers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 0; }
.auth-layout .signin-provider { width:100%;min-width:0; }
.signin-provider .google-mark { display:block;width:20px;height:20px;flex-shrink:0;object-fit:contain; }
.auth-layout .microsoft-mark { display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;width:20px;height:20px;flex-shrink:0; }
.signin-action-slot>.primary-button { width:100%; }

/* Keep the primary appearance while sign-in initializes or waits for CAPTCHA.
   Native disabled semantics still prevent submission until it is available.
   Changing the registered gradient colors interpolates the sent state. */
.auth-layout .signin-action-slot>.primary-button {
  --hero-button-start: var(--ui-primary-start);
  --hero-button-end: var(--ui-primary-end);
  color: var(--ui-primary-foreground);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hero-button-start), black var(--ui-primary-shade)),
    color-mix(in srgb, var(--hero-button-end), black var(--ui-primary-shade)));
  border: 1px solid var(--ui-primary-border);
  box-shadow: var(--ui-primary-shadow);
  transition: --hero-button-start .32s ease, --hero-button-end .32s ease,
    --ui-primary-shade var(--ui-primary-transition), color .32s ease,
    border-color .32s ease, box-shadow .32s ease;
}
.auth-layout .signin-action-slot>.primary-button.is-sent:disabled {
  --hero-button-start: #3c7e55;
  --hero-button-end: #2f6845;
  color: #fff;
  border-color: #2f6845;
  box-shadow: 0 4px 12px #2f684526;
  cursor: default;
}
.auth-layout [data-auth-submit-check] { display:grid;place-items:center; }
.auth-entry.is-waiting .auth-entry-header>div,
.auth-sent:not([hidden]),
.auth-layout [data-auth-submit-check]:not([hidden]),
.auth-feedback-content>:not([hidden]) { animation:auth-content-in .24s ease; }
@keyframes auth-content-in { from { opacity:0;translate:0 4px; } to { opacity:1;translate:0 0; } }

/* Feedback space is retained so resend/change-email links never move the card. */
.auth-layout .signin-feedback { min-height:48px;overflow-wrap:anywhere; }
.auth-feedback-content { display:grid;gap:12px;padding-top:16px; }
.auth-layout .live-auth-options { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin:0; }
.auth-layout .live-hint { margin:0;font-size:14px;line-height:24px;color:var(--ui-muted); }
.auth-layout .live-error,.auth-layout .live-note { margin:0;padding:12px;border:1px solid var(--ui-edge);border-radius:6px;font-size:14px;line-height:24px; }
.auth-layout .live-error { color:var(--ui-danger);background:var(--ui-surface-danger); }
.auth-layout .live-note { color:var(--ui-warning);background:var(--ui-surface-warning); }
.auth-layout .live-error .text-button { margin-left:8px; }
.auth-entry-footer { margin-top:40px;text-align:center;font-size:14px;line-height:24px;color:var(--ui-muted); }
.auth-entry-footer a { color:var(--ui-link);font-weight:600; }
.auth-entry-footer a:hover { text-decoration:underline;text-underline-offset:3px; }
.auth-layout .auth-entry-note { margin-top:8px;font-size:14px;line-height:24px; }
.auth-layout .signin-panel-footer { display:flex;justify-content:center;margin-top:24px;padding:0;border:0;font-size:14px;line-height:24px;color:var(--ui-muted); }
.auth-layout .signin-panel-header { display:flex;justify-content:flex-end;padding:0 0 16px; }
.auth-notice { padding-bottom:24px; }
.auth-layout .live-session-notice { position:static;max-width:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:16px;border:1px solid var(--ui-edge);border-radius:8px;background:#fff;font-size:14px;line-height:24px; }
.auth-gate-icon { display:grid;place-items:center;width:44px;height:44px;margin-bottom:24px;border-radius:8px;color:var(--ui-purple);background:var(--ui-surface-inset); }
.auth-layout .auth-description,.auth-layout .live-gate>p { margin:8px 0 24px;font-size:14px;line-height:24px;color:var(--ui-muted); }
.auth-layout .auth-entry-gate>.primary-button { width:100%; }
.auth-control-group { display:contents;border:0;padding:0;margin:0;min-width:0; }
.auth-mfa-fields { display:grid;gap:16px; }

.signin-security-slot { padding-top:24px; }
.live-captcha { position:relative;min-width:0; }
.live-captcha>div { max-width:100%; }
.live-captcha>div:first-child { min-height:65px; }
.live-captcha-hcaptcha>div:first-child { min-height:144px; }
.live-captcha-status { position:absolute;inset:0;pointer-events:none; }
.live-captcha-status:not(:empty) { pointer-events:auto;background:#fff; }
.signin-page [hidden] { display:none!important; }
@media(max-width:639px) {
  .signin-page.auth-layout { padding:40px 16px; }
  .auth-entry-card,
  :root .live-app .auth-layout :is(.auth-entry-gate, .live-gate) { padding:32px 24px; }
}
@media(max-width:359px) { .auth-layout .signin-providers { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .auth-layout *, .auth-layout *::before, .auth-layout *::after { animation:none!important;transition:none!important; } }
@media (forced-colors: active) {
  :root .auth-layout .live-form :is(input, textarea, select) { border:1px solid ButtonBorder; }
  :root .auth-layout .live-form :is(input, textarea, select):focus-visible { outline:2px solid Highlight;outline-offset:2px; }
}