/* Gebeya Intel — glass design system (blue).
   Colours mirror the Tailwind config in Views/partials/head.php. */

:root {
  --ink: #0F172A;
  --muted: #64748B;
  --brand: #2563EB;        /* the original Gebeya Intel blue (Tailwind blue-600) */
  --brand-700: #1D4ED8;
  --brand-400: #60A5FA;
  --brand-50: #EFF6FF;
  --navy: #0B1736;
  --danger: #DC2626;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .7);
  --hairline: rgba(15, 23, 42, .08);
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: #F4F7FC;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
:lang(am), .am { font-family: "Noto Sans Ethiopic", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; letter-spacing: 0; }

/* Soft blue light behind the glass. Fixed so panels blur a calm, slowly varying field. */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
}
.aurora::before {
  width: 62vw; height: 62vw; left: -14vw; top: -22vw;
  background: radial-gradient(circle at 40% 40%, #93C5FD, #3B82F6 45%, transparent 70%);
}
.aurora::after {
  width: 55vw; height: 55vw; right: -16vw; top: 18vh;
  background: radial-gradient(circle at 50% 50%, #A5B4FC, #60A5FA 40%, transparent 70%);
  opacity: .45;
}
.aurora > span {
  position: absolute; width: 46vw; height: 46vw; left: 22vw; bottom: -30vw; border-radius: 50%;
  background: radial-gradient(circle, #BFDBFE, transparent 65%); filter: blur(70px); opacity: .7;
}

/* Glass surfaces */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 50px -24px rgba(30, 64, 175, .28), 0 2px 6px -2px rgba(15,23,42,.06);
}
.glass-strong { background: var(--glass-strong); }
.glass-dark {
  background: linear-gradient(160deg, rgba(37, 99, 235, .92), rgba(11, 23, 54, .94));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 30px 60px -28px rgba(29, 78, 216, .6);
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,.94); }
}

/* Gradient headline (used once per page) */
.text-gradient {
  background: linear-gradient(100deg, #0F172A 10%, #1D4ED8 55%, #3B82F6 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Form controls */
.gi-input {
  display: block; width: 100%;
  border: 1px solid rgba(15,23,42,.1); border-radius: 14px; background: rgba(255,255,255,.75);
  padding: .78rem .95rem; font-size: 1rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.gi-input::placeholder { color: #94A3B8; }
.gi-input:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
.gi-input[aria-invalid="true"] { border-color: var(--danger); }
.gi-label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.gi-error { margin-top: .4rem; font-size: .8125rem; color: var(--danger); }

.gi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; padding: .74rem 1.3rem; font-weight: 600; font-size: .95rem;
  transition: background-color .15s, box-shadow .15s, transform .08s; cursor: pointer; border: 1px solid transparent;
}
.gi-btn:active { transform: scale(.98); }
.gi-btn-primary {
  background: linear-gradient(180deg, #3B82F6, #2563EB); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(37,99,235,.7);
}
.gi-btn-primary:hover { background: linear-gradient(180deg, #2F74EE, #1D4ED8); }
.gi-btn-light { background: #fff; color: var(--brand-700); box-shadow: 0 8px 20px -10px rgba(15,23,42,.4); }
.gi-btn-light:hover { background: var(--brand-50); }
.gi-btn-ghost { background: rgba(255,255,255,.6); color: var(--ink); border-color: rgba(15,23,42,.1); }
.gi-btn-ghost:hover { background: #fff; }

:focus-visible { outline: 3px solid rgba(37,99,235,.55); outline-offset: 2px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.gi-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Locked data: placeholder rows, blurred, not selectable */
.locked-row { filter: blur(5px); user-select: none; pointer-events: none; }

/* The coin used for credit amounts */
.coin {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #BFDBFE, #3B82F6 55%, #1D4ED8);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 2px 6px -2px rgba(29,78,216,.6);
  color: #fff; font-size: .7em; font-weight: 800;
}

/* One orchestrated moment: the record card floats in on first load */
@media (prefers-reduced-motion: no-preference) {
  .card-arrive { animation: arrive .9s cubic-bezier(.2,.8,.2,1) both .1s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* Password reveal button */
.pw-wrap { position: relative; }
.pw-wrap .gi-input { padding-right: 3rem; }
.pw-toggle { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); padding: .4rem; color: var(--muted); border-radius: 10px; }
.pw-toggle:hover { color: var(--ink); }

/* Radio cards (buy credits): the checked card shows a filled dot */
input:checked + div .radio-dot { opacity: 1; }
input:checked + div .radio-ring { border-color: var(--brand); }

/* Links for robots only: off-screen, not focusable, hidden from screen readers (see Fences::trapLink) */
.gi-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Terms / privacy text */
.legal h2 { font-size: 1.125rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; letter-spacing: -.01em; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li + li { margin-top: .35rem; }
.legal p + p { margin-top: .6rem; }
.legal strong { color: var(--ink); font-weight: 600; }