/* auth.css: log in, sign up and password reset. Requires app.css.
   The platform's header, then the "gentle" breathing animation in a
   panel (left, js/auth.js) and the form on the page (right). Same
   rules as the app's type and links, with the settings' 46px fields and buttons,
   a 28px headline, one 16px text size, quiet underlined links. Spacing: 12px
   inside a group, 24px between groups. */

/* theme.css's terracotta is only a fallback; follow the clay or sky palette as the app does */
:root{ --accent:var(--cta); }

body.auth{ background:var(--canvas); min-height:100dvh; display:flex; flex-direction:column; }
.auth-main{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:4px var(--wrap) 24px; }

/* the two halves: the breathing panel, and the form on the page itself */
.auth-art{ background:var(--panel); border-radius:var(--r-card); min-width:0; }
.auth-art{ order:-1; position:relative; overflow:hidden; }
.auth-gentle{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* no top or bottom padding: the headline starts level with the breathing panel's top, the legal line ends level with its foot */
.auth-col{ display:flex; flex-direction:column; gap:16px; padding:0 24px; min-width:0; }

/* the form and the legal line share one column, so their left edges match */
.auth-width{ width:100%; max-width:440px; margin-inline:auto; }
.auth-view{ width:100%; max-width:440px; margin:0 auto; flex:1; display:flex; flex-direction:column; gap:24px; }
/* the ways in sit together at the top; the sign-up line drops to the foot with the legal line */
.auth-view > .auth-foot{ margin-top:auto; }
.auth-view[hidden]{ display:none; }
.auth-view h1{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-card-title); line-height:1.1; letter-spacing:-0.02em; color:var(--ink-900); }
.auth-sub{ color:var(--ink-700); margin-top:-12px; } /* sits 12px under the headline, as part of its group */
.auth-sub[hidden]{ display:none; }
.auth-form{ display:flex; flex-direction:column; gap:24px; }

/* fields: on the bare page they take the panel colour (white on white would vanish) */
.form-field{ display:flex; flex-direction:column; gap:10px; font-weight:600; color:var(--ink-900); }
.form-field input{
  width:100%; height:46px; padding:0 16px; font:inherit; font-weight:400; color:var(--ink-900);
  background:var(--panel); border:0; border-radius:var(--r-btn);
}
.form-field input:focus{ outline:none; background:var(--card); box-shadow:inset 0 0 0 2px var(--accent); }
.form-field.has-error input{ box-shadow:inset 0 0 0 2px var(--terracotta-700); }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.label-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
/* log in: email and password as one close pair, then remember-me beside forgot password */
.field-pair{ display:flex; flex-direction:column; gap:12px; }
.check-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.password-wrap{ position:relative; display:block; }
.password-wrap input{ padding-right:72px; }
/* show/hide: quiet grey text inside the field */
.reveal{ position:absolute; right:16px; top:50%; transform:translateY(-50%); font-weight:400; color:var(--ink-500); }
.reveal:hover{ color:var(--ink-900); }
.hint{ font-size:var(--fs-text); color:var(--ink-500); }
.field-error{ font-size:var(--fs-text); font-weight:600; color:var(--terracotta-700); }
.field-error[hidden]{ display:none; }
.form-field.has-error .hint{ display:none; }
/* the label in the same quiet ink as "forgot password?" beside it */
.check{ display:flex; align-items:center; gap:12px; color:var(--ink-700); cursor:pointer; }
/* drawn, not the browser's: flush with the fields' left edge, in the field colour */
.check input{
  appearance:none; -webkit-appearance:none; margin:0; flex:none; width:20px; height:20px; border-radius:6px;
  background:var(--panel) center/14px no-repeat; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 18%, transparent); cursor:pointer;
}
.check input:checked{
  background-color:var(--cta); box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* buttons: one filled action; Google, Microsoft and resend are quiet */
.auth-view .btn{ height:46px; padding:0 16px; font-size:var(--fs-text); }
.btn-block{ width:100%; }
.sso{ display:flex; flex-direction:column; gap:12px; }
/* white with a soft edge, so they read as buttons and never as fields to type in */
.auth-view .btn-secondary{ background:var(--card); color:var(--ink-900); border:1px solid color-mix(in srgb, var(--ink-900) 14%, transparent); font-weight:600; }
.auth-view .btn-secondary:hover{ background:var(--panel); border-color:color-mix(in srgb, var(--ink-900) 24%, transparent); }

.auth-foot{ color:var(--ink-700); }
.auth-legal{ color:var(--ink-500); }
.link-quiet{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; }
.link-quiet:hover{ text-decoration-color:currentColor; }
.auth-icon{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--panel); color:var(--tone-600); }
.auth-icon-ok{ color:var(--ink-900); }

/* phones: the platform's header, the form, then the breathing panel below it */
@media (max-width: 900px){
  /* one column on the header's 16px edge: the form, the panel and the legal line share both edges */
  .auth-main{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; align-content:start; row-gap:48px; padding:4px 16px 32px; }
  .auth-col{ display:contents; } /* its form and legal line become the grid's own rows, around the breathing panel */
  .auth-view, .auth-art, .auth-width{ width:100%; max-width:560px; margin-inline:0; } /* edge to edge on phones, left-aligned under the brand on tablets */
  .auth-view{ order:1; padding-top:24px; }
  .auth-art{ order:2; height:min(240px, 32vh); }
  .auth-legal{ order:3; margin-top:-24px; } /* 24px under the panel, not the 48px that sets the form apart */
  .form-grid-2{ grid-template-columns:1fr; }
}

/* ---------- the log-in, refined ----------
   The form sits centred beside the breathing panel; teams or loop is
   chosen first, and the panel says what each one is. Links sit under
   the button on the form's left edge. */
.auth-view{ justify-content:center; }
.auth-view > .auth-foot{ margin-top:0; }
.auth-view .btn{ font-weight:600; letter-spacing:0; }
.auth-links{ display:flex; gap:24px; flex-wrap:wrap; margin-top:-8px; }
.auth-error{ padding:12px 16px; border-radius:var(--r-btn); background:var(--terracotta-50); color:var(--terracotta-700); font-weight:600; }
.auth-sub.auth-error{ margin-top:0; }
.auth-note{ color:var(--ink-700); }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }