/* Kinara sign-in pages. The same look as kinara.media: a flat dark page,
   the site's header, a heading above a plain card, pill buttons. */
:root {
  --bg: #0e1014;
  --bg-deep: #0a0c10;
  --surface: #181b22;
  --surface-hi: #222631;
  --line: #1c2028;
  --border: #2c313c;
  --border-hi: #3a3f4b;
  --text: #f3f1ec;
  --light: #c9cdd5;
  --muted: #a9aeb9;
  --faint: #7f8592;
  --accent: #3fb0e0;
  --accent-soft: #8fd4f2;
  --on-accent: #04151f;
  --good: #5bc98b;
  --danger: #ff8f80;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --warn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm0 3.2a.9.9 0 0 0-.9.9v3.4a.9.9 0 0 0 1.8 0V5.1a.9.9 0 0 0-.9-.9zm0 6.3a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-soft); text-decoration: none; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header and footer, as on kinara.media */
.top { border-bottom: 1px solid var(--line); }
.top-in {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px; border-radius: 8px;
  color: var(--text); font: 700 22px/1 var(--display); letter-spacing: -0.01em;
}
.brand:hover { color: var(--text); }
.brand .mark { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.top-link { font-size: 15px; font-weight: 500; color: var(--light); }
.foot { padding: 28px 24px 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; font-size: 14px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

/* The page */
.shell { flex: 1; width: 100%; max-width: 488px; margin: 0 auto; padding: 72px 24px 40px; }
.eyebrow {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-soft);
}
h1 { margin: 0; font: 700 44px/1.04 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.lead { margin: 14px 0 32px; color: var(--muted); font-size: 17px; text-wrap: pretty; }
.lead strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.fine { margin: 24px 0 0; text-align: center; color: var(--faint); font-size: 13px; }

/* A result: one card, centered */
.card.status { text-align: center; }
.status h1 { font-size: 32px; }
.status .lead { margin: 10px 0 26px; font-size: 16px; }
.badge {
  width: 64px; height: 64px; margin: 4px auto 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--good);
  background: rgba(91, 201, 139, 0.12); border: 1px solid rgba(91, 201, 139, 0.4);
}
.badge svg { width: 34px; height: 34px; }
.badge.info { color: var(--accent); background: rgba(63, 176, 224, 0.12); border-color: rgba(63, 176, 224, 0.4); }
.badge.bad { color: var(--danger); background: rgba(255, 143, 128, 0.1); border-color: rgba(255, 143, 128, 0.38); }
.draw { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.5s 0.15s cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Fields */
.field { margin: 0 0 18px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
label, .label { display: block; color: var(--light); font-size: 14px; font-weight: 600; }
.label-row label { margin: 0; }
.field > label { margin: 0 0 8px; }
input[type="email"], input[type="text"], input[type="password"] {
  display: block; width: 100%; height: 50px; margin: 0; padding: 0 16px;
  background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  font: 400 16px/1.2 var(--body); outline: none;
  transition: border-color 0.15s;
}
input::placeholder { color: var(--faint); }
input:hover { border-color: var(--border-hi); }
input:focus { border-color: var(--accent); }
input[aria-invalid="true"] { border-color: var(--danger); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--bg-deep) inset; transition: background-color 9999s;
}
.pw { position: relative; }
.pw input { padding-right: 54px; }
.pw-toggle {
  position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.pw-toggle:focus-visible { outline-offset: 0; }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle .i-hide { display: none; }
.pw-toggle[aria-pressed="true"] .i-show { display: none; }
.pw-toggle[aria-pressed="true"] .i-hide { display: block; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.field:has(.field-err:not([hidden])) .hint { display: none; }
.field-err { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; color: var(--danger); font-size: 13.5px; font-weight: 500; }
.field-err::before, .alert::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
  -webkit-mask: var(--warn-icon) center / contain no-repeat; mask: var(--warn-icon) center / contain no-repeat;
}
.alert {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; background: rgba(255, 120, 100, 0.08); border: 1px solid rgba(255, 143, 128, 0.32);
  color: #ffc9c0; font-size: 14.5px; line-height: 1.45; text-align: left;
}
.alert:empty { display: none; }
.code-input {
  height: 72px !important; text-align: center;
  font: 700 32px/1 var(--display) !important; letter-spacing: 0.16em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  padding: 0 12px 0 calc(12px + 0.16em) !important;
}
.code-input::placeholder { color: #3a3f4b; }

/* Buttons: pills, as on kinara.media */
.btn {
  appearance: none; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: 700 16px/1 var(--body); text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--accent-soft); color: var(--on-accent); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn[aria-busy="true"] { cursor: progress; }
.btn + .btn { margin-top: 12px; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-hi); font-weight: 600; }
.btn.ghost:hover { border-color: var(--muted); color: var(--text); }
.btn.danger { background: #e5634f; color: #fff; }
.btn.danger:hover { background: #ef7663; color: #fff; }
.btn.light { background: #fff; color: #1f1f1f; font-weight: 600; }
.btn.light:hover { background: #ececec; color: #1f1f1f; }
.btn.light svg { width: 18px; height: 18px; flex: none; }
.spinner {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(4, 21, 31, 0.25); border-top-color: var(--on-accent);
  animation: spin 0.7s linear infinite;
}
.btn.ghost .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: var(--text); }
.btn.danger .spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
.btn.light .spinner { border-color: rgba(0, 0, 0, 0.15); border-top-color: #1f1f1f; }
@keyframes spin { to { transform: rotate(360deg); } }

a.link, button.link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--accent-soft); font: inherit; font-weight: 600; border-radius: 4px;
}
a.link:hover, button.link:hover { color: var(--text); }
.label-row .link { font-size: 14px; font-weight: 500; }
.meta { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 15px; }

/* Continue with Google / Apple */
.providers { margin: 0; }
.providers .meta { margin: 0 0 16px; }
.or { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--faint); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.who-line { margin: 0 0 18px; color: var(--muted); }
.who-line strong { color: var(--text); overflow-wrap: anywhere; }

/* What deleting an account does */
.facts { margin: 0 0 32px; padding: 0 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.facts li + li { margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; cursor: pointer; color: var(--light); font-size: 14.5px; line-height: 1.45; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.check + .field-err { margin: -10px 0 16px; }

/* What is being approved */
.item {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 16px;
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 14px;
}
.item-icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(63, 176, 224, 0.12); color: var(--accent);
}
.item-icon svg { width: 24px; height: 24px; }
.item-kind { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.item-name { display: block; font: 600 19px/1.25 var(--display); overflow-wrap: anywhere; }

/* Signed-in line under the card */
.who {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0 0; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--border); color: var(--muted); font-size: 14px;
}
.who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who strong { color: var(--text); font-weight: 600; }
.who .link { flex: none; white-space: nowrap; }

/* The Google sign-in window, while it hands back */
.handoff { text-align: center; padding-top: 30vh; color: var(--muted); }

@media (max-width: 520px) {
  .top-link { display: none; }
  .shell { padding: 40px 16px 32px; }
  h1 { font-size: 36px; }
  .status h1 { font-size: 28px; }
  .card { padding: 22px; }
  .code-input { font-size: 27px !important; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .draw { animation: none !important; }
  .draw { stroke-dashoffset: 0; }
  * { transition: none !important; }
}
@media (forced-colors: active) {
  .card, .item, .who { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
}