/* Chief Sign-in Card */
/* One 380px card carries every sign-in screen: a navy bar over a light panel.
   Both auth rooms render layouts/_auth_card, and layouts/electron.css carries
   the three ways the app's own window differs from a browser tab. */

body.auth-layout {
  background: var(--bg-dark);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.auth-container {
  width: var(--panel-width);
  max-width: 100%;
}

.auth-card {
  border-radius: var(--panel-radius);
  overflow: hidden;
  box-shadow: var(--panel-shadow);
}

.auth-bar {
  height: var(--top-bar-height);
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: var(--bg-section);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015));
  color: var(--color-text);
}

/* Shown only in the app window, where there is a frameless window to move. */
.auth-bar-grip {
  display: none;
  width: 4px;
  height: 18px;
  flex-shrink: 0;
  border-left: 1px solid var(--panel-grip);
  border-right: 1px solid var(--panel-grip);
}

.auth-wordmark {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.5px;
}

.auth-wordmark::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 20%;
  height: 2px;
  background: var(--color-primary);
}

.auth-bar-status {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.auth-panel {
  background: var(--panel-bg);
  /* The window is dark and says so, which is true of the bar above but not of
     this card. Chrome draws autofill, scrollbars and its other widgets from the
     scheme it is given, so the panel names the one it actually is. */
  color-scheme: light;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Ink on the light panel, for the one phrase in a sentence being checked */
.auth-emphasis {
  font-weight: var(--font-weight-semibold);
  color: var(--bg-dark);
}

/* Heading block */
.auth-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* The screen title is an h1, and base/typography.css draws h1 for the marketing
   ramp — 56px on -2px tracking. On a 380px card it needs its own tracking back. */
.auth-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  line-height: 1.32;
  color: var(--bg-dark);
}

.auth-subtitle {
  font-size: var(--font-size-panel);
  line-height: var(--line-height-normal);
  color: var(--light-text-secondary);
}

/* A subtitle that runs past one line gets room to breathe */
.auth-subtitle-long {
  line-height: 1.75;
  text-wrap: pretty;
}

/* Verification box — states live on the glyph and the meaning line, never as
   a wash over the box, so being fine never reads as an alert. */
.auth-verify {
  background: var(--light-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.auth-verify-main {
  padding: var(--spacing-md);
  display: flex;
  gap: 10px;
}

.auth-verify-glyph {
  width: 16px;
  flex-shrink: 0;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.auth-verify-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.auth-verify-meaning {
  font-size: var(--font-size-panel);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--bg-dark);
}

.auth-verify-facts {
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  color: var(--light-text-secondary);
}

/* The pairing code heads its box in the navy the app's own chrome wears, so
   the one number both screens must agree on reads first on each. */
.auth-codeband {
  padding: var(--spacing-md) 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--bg-section);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015));
  color: var(--color-text);
}

.auth-codeband-digits {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-2xl);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
}

.auth-codeband-text {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: rgb(255 255 255 / 0.6);
}

/* The waiting screen's band stands alone, so it brings its own box. */
.auth-codeband-box {
  background: var(--light-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.auth-verify-caution .auth-verify-glyph,
.auth-verify-caution .auth-verify-meaning {
  color: var(--panel-caution);
}

/* A button whose label carries an org name wraps rather than clipping. */
.auth-btn-wrap {
  height: auto;
  min-height: 40px;
  padding: 10px var(--spacing-md);
  line-height: 1.32;
  text-wrap: balance;
}

/* Indented to the body column rather than the box edge */
.auth-verify-note {
  padding: var(--spacing-sm) var(--spacing-md) 10px 38px;
  background: var(--light-bg-subtle);
  border-top: 1px solid var(--panel-border);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--light-text-secondary);
}

.auth-verify-verified .auth-verify-glyph {
  color: var(--panel-verified);
}

.auth-verify-blocked .auth-verify-glyph,
.auth-verify-blocked .auth-verify-meaning {
  color: var(--panel-caution);
}

.auth-verify-neutral .auth-verify-glyph {
  color: var(--light-text-secondary);
}

/* Forms carry the panel's own rhythm, so a form's fields and its button sit on
   the same 16px column as everything else on the panel. */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Fields */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.auth-form-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--light-text-secondary);
}

.auth-form-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--spacing-md);
  background: var(--light-bg);
  border: 1px solid var(--light-border-strong);
  border-radius: var(--border-radius-sm);
  color: var(--bg-dark);
  font-size: var(--font-size-panel);
  font-family: inherit;
  transition: var(--transition-fast);
}

.auth-form-input::placeholder {
  color: var(--light-text-muted);
}

/* An autofilled field is painted by the browser, which will not take a
   background: the fill is laid down as an inset shadow instead, in the panel's
   own blue so a remembered address still reads as remembered. */
.auth-form-input:autofill {
  box-shadow: inset 0 0 0 100px var(--light-bg-blue);
  -webkit-text-fill-color: var(--bg-dark);
}

.auth-form-input:hover {
  border-color: var(--panel-accent);
}

.auth-form-input.is-invalid {
  border-color: var(--light-danger);
}

.auth-form-note {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--light-text-secondary);
}

.auth-form-error {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--panel-danger-text);
}

/* Buttons — one primary per screen */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.auth-btn {
  width: 100%;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-panel);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.auth-btn-primary {
  background: var(--panel-accent);
  border: none;
  color: var(--light-bg);
}

.auth-btn-primary:hover {
  background: var(--panel-accent-hover);
}

.auth-btn-secondary {
  background: var(--light-bg);
  border: 1px solid var(--light-border-strong);
  color: var(--bg-dark);
}

.auth-btn-secondary:hover {
  border-color: var(--panel-accent);
}

.auth-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The escape hatch under the button. A sentence, so it keeps reading weight
   rather than dropping to the muted metadata grey. */
.auth-aside {
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  color: var(--light-text-secondary);
  text-align: center;
}

.auth-aside a {
  color: var(--panel-accent);
  text-decoration: none;
}

.auth-aside a:hover {
  text-decoration: underline;
}

.auth-legal {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--light-text-muted);
  text-align: center;
}

.auth-legal a {
  color: var(--light-text-secondary);
  text-decoration: none;
}

.auth-legal a:hover {
  text-decoration: underline;
}

/* A white card of rows, split by hairlines: accounts to pick, coaches to tick */
.auth-rows {
  background: var(--light-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

/* No rows to show means no hairline box floating on the panel */
.auth-rows:not(:has(.auth-row)) {
  display: none;
}

.auth-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.auth-row + .auth-row {
  border-top: 1px solid var(--panel-border);
}

.auth-row:hover {
  background: var(--light-bg-subtle);
}

.auth-row-name {
  font-size: var(--font-size-panel);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--bg-dark);
}

.auth-row-detail {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--light-text-secondary);
}

.auth-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* The radio draws itself rather than hiding behind a decoy span, so the row
   stays a real control for the keyboard and for anything driving the page. */
.auth-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--light-border-strong);
  border-radius: 999px;
  background: var(--light-bg);
  cursor: pointer;
  transition: var(--transition-fast);
}

.auth-radio:checked {
  border-color: var(--panel-accent);
  background: radial-gradient(circle at center, var(--light-bg) 0 3px, var(--panel-accent) 3px);
}

.auth-row:has(.auth-radio:checked) {
  background: var(--light-bg-blue);
}

.auth-row:has(.auth-radio:checked) .auth-row-name {
  color: var(--panel-accent);
}

/* Checkbox rows sit against the top of a description that wraps */
.auth-check-row {
  align-items: flex-start;
  gap: 10px;
}

.auth-check {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--panel-accent);
  cursor: pointer;
}

.auth-check-row .auth-row-detail {
  line-height: 1.45;
}

/* The marketing opt-in is a lone row on the panel rather than a card of one */
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.auth-consent-text {
  flex: 1;
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  color: var(--light-text-secondary);
}

.auth-consent-text a {
  color: var(--panel-accent);
  text-decoration: none;
}

.auth-consent-text a:hover {
  text-decoration: underline;
}

/* Waiting for the email to be opened */
.auth-status-row {
  background: var(--light-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-status-text {
  flex: 1;
  font-size: var(--font-size-panel);
  line-height: var(--line-height-normal);
  color: var(--bg-dark);
}

.auth-status-meta {
  font-size: var(--font-size-xs);
  color: var(--light-text-muted);
}

.auth-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgb(37 99 235 / 0.3);
  border-top-color: var(--panel-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Flash messages, inside the panel so they arrive on the card */
.auth-message {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-panel-fine);
  line-height: 1.4;
  color: var(--bg-dark);
  animation: fadeInDown 0.3s ease;
}

.auth-message-notice,
.auth-message-success {
  background: var(--light-bg-subtle);
  border: 1px solid var(--panel-border);
}

.auth-message-alert,
.auth-message-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.auth-message-info {
  background: var(--light-bg-blue);
  border: 1px solid #bfdbfe;
}

.auth-message-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

/* On the light panel the framework's navy focus ring loses its contrast */
.auth-panel :focus-visible {
  outline: 2px solid var(--panel-accent);
  outline-offset: 2px;
}