/* ============================================================
   AibhlínnAI shared sign-in UI.
   Deliberately unbranded — colours come from the host app's own CSS
   custom properties, which every AibhlínnAI app is expected to define.
   This file supplies structure and behaviour, not a palette.

   All seven it reads: --ink, --ink-muted, --card, --line, --accent,
   --urgent-text, and --bg (the page ground; the fields are filled with
   it). The fallbacks are one dark palette, so a host with a light
   theme should define all seven, or at least check each fallback on
   its light ground: text follows the host while an undefined fill
   stays dark, which is how Pie Timers' light theme lost its email
   field until it defined --bg.
   ============================================================ */

.aib-signin-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-width:44px; min-height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line, #3A2A47);
  background:var(--card, #241730);
  color:var(--ink, #EFE6F5);
  font:inherit; font-weight:600; font-size:.92rem;
  cursor:pointer;
}
.aib-signin-btn:hover{ border-color:var(--accent, #B07FE0); }
.aib-signin-btn:focus-visible{
  outline:3px solid var(--accent, #B07FE0);
  outline-offset:2px;
}

.aib-signin-context{
  font-size:.78rem;
  color:var(--ink-muted, #B4A3C0);
  margin:4px 0 0;
  max-width:32ch;
}

/* ── Panel ──
   A dropdown/dialog anchored under the button, not a full-screen
   modal — no interruption, no trapped focus stealing attention from
   whatever the person was doing. */
.aib-signin-panel{
  position:absolute; z-index:80;
  margin-top:8px;
  width:min(320px, 92vw);
  border-radius:16px;
  border:1px solid var(--line, #3A2A47);
  background:var(--card, #241730);
  color:var(--ink, #EFE6F5);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
  padding:18px;
}
.aib-signin-panel[hidden]{ display:none; }

.aib-signin-panel h2{
  margin:0 0 4px; font-size:1.05rem;
}
.aib-signin-panel .aib-sub{
  margin:0 0 14px; font-size:.84rem; color:var(--ink-muted, #B4A3C0);
}

.aib-signin-field{
  display:block; margin-bottom:12px;
}
.aib-signin-field span{
  display:block; margin-bottom:6px; font-size:.82rem; font-weight:600;
}
.aib-signin-field input{
  width:100%; box-sizing:border-box;
  min-height:44px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line, #3A2A47);
  background:var(--bg, #1C1024);
  color:inherit;
  font:inherit; font-size:1rem;
}
.aib-signin-field input:focus-visible{
  outline:3px solid var(--accent, #B07FE0);
  outline-offset:1px;
}

.aib-signin-submit{
  width:100%; min-height:44px;
  border-radius:10px; border:none;
  background:var(--accent, #B07FE0);
  color:#1C1024;
  font:inherit; font-weight:700; font-size:.96rem;
  cursor:pointer;
}
/* Flips the button's own two colours rather than shifting only one --
   a same-shaped bug (background moved, text didn't) is what made the
   host app's .btn-primary go invisible on hover in dark mode. Guarded
   against :disabled so "Sending…" doesn't fight the dimmed state. */
.aib-signin-submit:hover:not(:disabled){ background:#1C1024; color:var(--accent, #B07FE0); }
.aib-signin-submit:focus-visible{ outline:3px solid var(--ink, #EFE6F5); outline-offset:2px; }
.aib-signin-submit:disabled{ opacity:.6; cursor:default; }

.aib-signin-divider{
  display:flex; align-items:center; gap:10px;
  margin:14px 0; font-size:.76rem; color:var(--ink-muted, #B4A3C0);
}
.aib-signin-divider::before, .aib-signin-divider::after{
  content:''; flex:1; height:1px; background:var(--line, #3A2A47);
}

/* Google's branding guidelines require its official button, so this is
   Google's pre-approved artwork (signin-assets.zip → Android + Web → SVG
   → Light, text, pill), unmodified, drawn at its native 180×40. Do not
   redraw it, recolour the G, restyle the border or swap in live text —
   each of those was the non-compliance this replaced. The wording is
   baked into the file. Self-hosted beside this stylesheet (url() resolves
   against the CSS file), so it is not a third-party request. */
.aib-signin-google{
  display:block; width:180px; height:40px; margin:0 auto;
  padding:0; border:0; border-radius:20px;
  background:transparent url(google-signin-light-pill.svg) no-repeat center / 180px 40px;
  cursor:pointer;
}
.aib-signin-google:hover{ filter:brightness(.94); }
.aib-signin-google:focus-visible{ outline:3px solid var(--accent, #B07FE0); outline-offset:2px; }

.aib-signin-status{
  margin:12px 0 0; font-size:.84rem; min-height:1.2em;
}

/* "Did you mean …?" -- shown in place of a send when email-typos.js
   thinks the address is a slip. "Yes" reuses the send button's look,
   because it is the send; "keep" is the quieter way through. The
   address may break anywhere, having no spaces to wrap at. Focus is
   put on the box by script so the question is read out; it is not a
   control, so it draws no ring. */
.aib-signin-typo{
  margin:12px 0 0; padding:12px;
  border-radius:10px; border:1px solid var(--accent, #B07FE0);
  font-size:.88rem;
}
.aib-signin-typo[hidden]{ display:none; }
.aib-signin-typo:focus{ outline:none; }
.aib-signin-typo p{ margin:0 0 10px; }
.aib-signin-typo strong{ overflow-wrap:anywhere; }
.aib-signin-typo-actions{ display:flex; flex-direction:column; gap:8px; }
.aib-signin-typo-keep{
  min-height:44px;
  border-radius:10px; border:1px solid var(--line, #3A2A47);
  background:transparent; color:inherit;
  font:inherit; font-weight:600; font-size:.92rem;
  cursor:pointer;
}
.aib-signin-typo-keep:hover{ border-color:var(--accent, #B07FE0); }
.aib-signin-typo-keep:focus-visible{ outline:3px solid var(--accent, #B07FE0); outline-offset:2px; }
.aib-signin-status[data-tone="error"]{ color:var(--urgent-text, #FF9E9E); }

/* The type-in-a-code fallback, revealed once the email is on its way.
   Sits under a hairline so it reads as a second route, not part of
   the send form above it. */
.aib-signin-code{
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line, #3A2A47);
}
.aib-signin-code[hidden]{ display:none; }
.aib-signin-code .aib-signin-field{ margin-bottom:10px; }
.aib-signin-code input{
  letter-spacing:.16em; font-variant-numeric:tabular-nums;
}

.aib-signin-close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px;
  border-radius:8px; border:none; background:transparent;
  color:var(--ink-muted, #B4A3C0);
  font-size:1.1rem; line-height:1; cursor:pointer;
}
.aib-signin-close:focus-visible{ outline:3px solid var(--accent, #B07FE0); outline-offset:1px; }

@media (prefers-reduced-motion: no-preference){
  .aib-signin-panel{ animation:aib-panel-in .14s ease; }
}
@keyframes aib-panel-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* Where a product's bot check draws itself. Takes no room until
   something is rendered into it, so a product that supplies none
   leaves the panel exactly as it was. */
.aib-signin-challenge:not(:empty){ margin:.5rem 0 0; display:flex; justify-content:center; }

/* Sign out sits beside the app link once signed in. Deliberately
   quieter than it: leaving is not the action being encouraged, but it
   must be findable without hunting through settings. Same 44px target,
   so it is no harder to hit on a phone. */
.aib-signout-btn{
  margin-left:8px;
  min-height:44px; padding:0 14px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink-muted, #A794B5);
  font:inherit; font-size:.85rem;
  cursor:pointer;
}
.aib-signout-btn:hover:not(:disabled){
  border-color:var(--line, #3A2A47);
  color:var(--ink, #F3ECF7);
}
.aib-signout-btn:disabled{ opacity:.6; cursor:default; }