/*
 * Currawong ID. The logo's palette (teal, envelope orange, the eye's yellow),
 * as on email.currawong.dev's front page. Light by default, dark when the
 * device asks; every colour is a token below.
 */
:root {
  --cw-deep: #00283a;
  --cw-teal: #003e56;
  --cw-teal-2: #0c617c;
  --cw-orange: #f17f22;
  --cw-yellow: #f9c80e;

  --bg: #eef2f3;
  --surface: #ffffff;
  --ink: #14212a;
  --muted: #5b6b75;
  --line: #d8e0e3;
  --accent: var(--cw-teal-2);
  --accent-ink: #ffffff;
  --ok-bg: #eefaf2;
  --ok: #17663d;
  --bad-bg: #fdf1f1;
  --bad: #a92626;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1418;
    --surface: #13232b;
    --ink: #e6eef1;
    --muted: #9fb2bb;
    --line: #24404d;
    --accent: #3aa6c8;
    --accent-ink: #00283a;
    --ok-bg: #0f2a1c;
    --ok: #8fdcae;
    --bad-bg: #331616;
    --bad: #f4a5a5;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 70px;
  background: linear-gradient(160deg, var(--cw-teal) 0%, var(--cw-deep) 100%);
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand b {
  color: var(--cw-yellow);
}
.who {
  font-size: 14px;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

main {
  flex: 1;
  width: 100%;
  max-width: 460px;
  margin: -52px auto 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(0, 40, 58, 0.1);
}
h1 {
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0 0 8px;
}
h2 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
}
.card > h2:first-child {
  margin-top: 0;
}
p {
  margin: 0 0 14px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 14px;
}
a {
  color: var(--accent);
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
}
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
input {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--cw-yellow);
  outline-offset: 2px;
}
button {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-ink);
}
button.big {
  width: 100%;
  padding: 15px 22px;
  font-size: 17px;
  background: var(--cw-orange);
  color: var(--cw-deep);
}
button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
button.link {
  background: none;
  color: var(--bad);
  padding: 4px 0;
  font-weight: 600;
}
button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.or {
  text-align: center;
  color: var(--muted);
  margin: 4px 0 10px;
}

.flash {
  padding: 10px 14px;
  border-radius: 10px;
}
.flash-ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.flash-error {
  background: var(--bad-bg);
  color: var(--bad);
}
.handover-code {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.apps,
.passkeys {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.apps li a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  font-weight: 700;
  text-decoration: none;
}
.apps li + li {
  margin-top: 8px;
}
.apps small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.passkeys li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.passkeys li span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.passkeys small {
  color: var(--muted);
}
.passkeys form {
  margin: 0;
}
.signout {
  align-items: center;
}

.foot {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.sha {
  margin-left: 8px;
  font-family: ui-monospace, Menlo, monospace;
  opacity: 0.6;
}