/* /assets/verify.css — Transit Verify theme (trans flag palette) */
:root{
  --blue: #5BCEFA;
  --pink: #F5A9B8;
  --white: #ffffff;

  /* Light theme */
  --bg: #ffffff;
  --ink: #0b1220;
  --muted: #606b85;
  --card: #ffffff;
  --border: #e5e7eb;

  --danger-bg: #fde2e8;
  --danger-bd: #f5a9b8;
  --info-bg: #e6f7fe;
  --info-bd: #5bcefa;

  --radius: 14px;
  --shadow: 0 6px 20px rgba(15,23,42,0.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0c10;
    --ink: #e9eef2;
    --muted: #9aa4af;
    --card: #111319;
    --border: #1f2937;

    --danger-bg: #33151a;
    --danger-bd: #f5a9b8;
    --info-bg: #0e2630;
    --info-bd: #5bcefa;

    --shadow: 0 6px 20px rgba(0,0,0,0.35);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:14px;color:var(--muted)}
::selection{ background: color-mix(in srgb, var(--blue) 65%, transparent); }

/* Top trans-flag bar */
.flagbar{
  height:8px;
  background:
    linear-gradient(90deg,
      var(--blue) 0 20%,
      var(--pink) 20% 40%,
      var(--white) 40% 60%,
      var(--pink) 60% 80%,
      var(--blue) 80% 100%
    );
}

/* Layout */
.container{max-width:720px;margin:42px auto;padding:0 20px}
.header{display:flex;gap:12px;align-items:center;margin:0 0 8px}
.title{margin:0;font-size:28px;letter-spacing:.2px}
.sub{margin:6px 0 18px;color:var(--muted)}

/* Trans-flag logo block */
.logo{
  width:40px;height:40px;border-radius:10px;flex:0 0 40px;
  background:
    linear-gradient(180deg,
      var(--blue) 0 20%,
      var(--pink) 20% 40%,
      var(--white) 40% 60%,
      var(--pink) 60% 80%,
      var(--blue) 80% 100%
    );
  box-shadow: var(--shadow);
}

/* Cards & alerts */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  margin:0 0 16px;
}
.alert{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  margin:0 0 16px;
}
.alert-danger{ background:var(--danger-bg); border-color:var(--danger-bd); }
.alert-info{    background:var(--info-bg);   border-color:var(--info-bd);  }

/* Form / actions */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px}
.cf-turnstile{min-width:300px}

/* Buttons — gradient, hover lift, animated sheen */
.btn{
  appearance:none;border:0;border-radius:12px;cursor:pointer;
  font-weight:800;padding:12px 18px;line-height:1;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  position:relative; overflow:hidden;
}
.btn-primary{
  color:#000;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  box-shadow: 0 6px 18px rgba(91,206,250,.25), 0 2px 6px rgba(0,0,0,.04);
}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91,206,250,.28), 0 4px 8px rgba(0,0,0,.06); }
.btn-primary:active{ transform: translateY(0);   box-shadow: 0 4px 12px rgba(91,206,250,.2), 0 2px 6px rgba(0,0,0,.06); }

/* Sheen */
.btn-primary::after{
  content:""; position:absolute; top:0; left:-160%;
  width:50%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events:none;
}
.btn-primary:hover::after{ left:160%; }

/* Secondary button */
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.btn-secondary{
  color:var(--ink);
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.btn-secondary:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

/* Accessible focus ring (+ fallback) */
.btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--blue) 60%, transparent);
  outline-offset: 2px;
}
@supports not (outline: 3px solid color-mix(in srgb, #000 50%, transparent)) {
  .btn:focus-visible{ outline: 3px solid rgba(91,206,250,.65); outline-offset:2px; }
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .btn, .btn::after{ transition: none !important; }
}

/* Profile row */
.profile{ display:flex; align-items:center; gap:12px; }
.pfp{
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--border); box-shadow: var(--shadow); object-fit:cover;
}
.handle{ font-weight:800; }

/* High-contrast / forced-colors support */
@media (forced-colors: active){
  .btn, .btn-secondary, .card, .alert{ border: 1px solid CanvasText; }
  .btn:focus-visible{ outline: 2px solid Highlight; }
}