/* Tequio — themed to publicos.dev ("Civic Modernism").
 *
 * Tokens, background layers and type are lifted from Publicos.dev/css/style.css so this
 * page reads as the same product, not a cousin. The marigold `--accent` of the prototype
 * was explicitly provisional; it is now the site's real palette:
 *
 *   teal   = the brand, and the ACTION colour (Claim, Paid)
 *   amber  = money (OX amounts) and IN-PROGRESS — the site already uses amber+pulse for
 *            its "connecting" status dot, so Processing borrows it rather than inventing
 *   dot grid + tri-radial wash = the site's hero background, made page-wide and fixed
 */

:root{
  /* ── publicos.dev tokens (verbatim) ────────────────────────────────────────── */
  --bg:#0a0a0f; --bg-elevated:#111118; --bg-subtle:#16161f;

  --surface:rgba(255,255,255,.025);
  --surface-hover:rgba(255,255,255,.045);
  --glass:rgba(255,255,255,.015);
  --glass-border:rgba(255,255,255,.08);
  --glass-hover:rgba(255,255,255,.03);

  --text-1:#f0f0f0; --text-2:#94a3b8; --text-3:#64748b; --text-4:#475569;

  --teal:#14b8a6; --teal-bright:#2dd4bf; --teal-dim:rgba(20,184,166,.12);
  --amber:#f59e0b; --amber-dim:rgba(245,158,11,.12);
  --purple:#8b5cf6; --pink:#ec4899; --pink-dim:rgba(236,72,153,.12);
  --red:#ef4444;

  --border:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.12);

  --r:16px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none;}

body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text-1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px; line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* The site's hero background, promoted to the whole page. Two fixed layers behind
   everything: the tri-radial wash, then the 32px teal dot grid at 4% opacity. */
body::before,body::after{content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;}
body::before{
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(20,184,166,.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 25% 70%, rgba(139,92,246,.03) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 25%, rgba(245,158,11,.025) 0%, transparent 55%);
}
body::after{
  background-image:radial-gradient(circle, var(--teal) .5px, transparent .5px);
  background-size:32px 32px; opacity:.04;
}

.sg{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;}

.wrap{max-width:560px; margin:0 auto; padding:0 18px calc(48px + env(safe-area-inset-bottom));}

/* ---------- header ---------- */
header{padding:calc(34px + env(safe-area-inset-top)) 0 20px; text-align:center;}

/* The brand lockup — publicos.dev's hero pattern: emblem INSIDE the h1, sitting on the
   same baseline as the wordmark. The title takes the site's text-clip gradient
   (text-1 -> text-2); the emblem opts back out of it (`-webkit-text-fill-color:initial`)
   so it stays solid white instead of inheriting the transparent fill. */
h1{
  display:flex; align-items:baseline; justify-content:center; gap:.5rem;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px;
  letter-spacing:-.02em; line-height:1.15; margin:0 0 8px;
  background:linear-gradient(135deg, var(--text-1) 0%, var(--text-2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
h1 .emblem{
  width:1em; height:1em; flex-shrink:0; overflow:visible;
  fill:var(--text-1);                 /* white, not teal — it is the wordmark's sibling */
  -webkit-text-fill-color:initial;    /* undo the h1's text-clip so the SVG paints */
}

/* The orbit. The moon rides around the body's centre; the shadow trails 1.2px below.
   Origin is the BODY centre in viewBox units (rect x5 y12 w14 h14 -> centre 12,19). */
.moon-group{transform-origin:12px 19px;}
.moon-group.main.is-orbiting{animation-name:orbit; animation-timing-function:ease-in-out; animation-fill-mode:forwards;}
.moon-group.shadow.is-orbiting{animation-name:orbit-shadow; animation-timing-function:ease-in-out; animation-fill-mode:forwards;}
@keyframes orbit{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
@keyframes orbit-shadow{0%{transform:translate(0,1.2px) rotate(0deg);} 100%{transform:translate(0,1.2px) rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .moon-group.is-orbiting{animation:none !important;}
}

.tag{color:var(--text-1); font-size:15px; font-weight:500;}
.mean{color:var(--text-3); font-size:12.5px; margin-top:9px; max-width:400px; margin-inline:auto; line-height:1.5;}
.mean b{color:var(--text-2); font-weight:600;}

/* ---------- how it works ---------- */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0 8px;}
.step{background:var(--glass); border:1px solid var(--glass-border); border-radius:13px; padding:13px 10px; text-align:center;}
.step .n{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); font-weight:600;}
.step .t{font-size:11.5px; color:var(--text-2); margin-top:6px; line-height:1.4;}
.step .t b{color:var(--text-1); font-weight:600;}
/* ---------- sections ---------- */
section{margin-top:32px;}
.shead{display:flex; align-items:baseline; justify-content:space-between; padding:0 4px 12px;}
.shead .st{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em;}
/* the site's .label: mono, uppercase, tracked, teal */
.shead .sn,.shead .sc{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal);}

/* ---------- quest card ---------- */
.q{display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:13px 14px; margin-bottom:10px; transition:border-color .18s, background .18s;}
.q:active{background:var(--surface-hover);}
@media(hover:hover){.q:hover{border-color:var(--border-strong); background:var(--surface-hover);}}
.q .ic{flex-shrink:0; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px;
  background:var(--glass); border:1px solid var(--glass-border);}
.q .bd{flex:1; min-width:0;}
.q .bd .ti{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; line-height:1.3;}
.q .bd .bl{font-size:12.5px; color:var(--text-3); margin-top:2px; line-height:1.4;}
.q .rt{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;}
.q .ox{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13px; color:var(--amber); white-space:nowrap;}
.q .ox small{color:var(--text-4); font-weight:500;}

.claim{-webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:5px;
  min-height:34px; padding:0 15px; border-radius:99px;
  border:1px solid rgba(20,184,166,.42); background:var(--teal-dim); color:var(--teal-bright);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px;
  white-space:nowrap; transition:background .15s, transform .05s, box-shadow .2s;}
.claim:hover:not(:disabled){background:rgba(20,184,166,.22); box-shadow:0 0 0 3px rgba(20,184,166,.08);}
.claim:active:not(:disabled){transform:scale(.96);}
.claim:disabled{opacity:.45; cursor:default;}
.claim svg{width:12px; height:12px;}

/* daily strip */
.daily-note{display:flex; align-items:center; gap:7px; margin:-2px 4px 12px; font-size:11.5px; color:var(--text-3);}
.daily-note i{width:6px; height:6px; border-radius:50%; background:var(--teal); display:inline-block;}

footer{margin-top:44px; padding-top:22px; border-top:1px solid var(--border); text-align:center;
  color:var(--text-3); font-size:11.5px; line-height:1.7;}
footer .mono{color:var(--text-4);}
footer b{color:var(--text-2); font-weight:600;}

/* ═══════════════ the states the server can actually be in ═══════════════ */

.loading{color:var(--text-3); text-align:center; padding:40px 0; font-size:13px;}

/* --- earned hero (signed in only) --- */
.hero{margin:24px 0 4px; padding:16px 18px; background:var(--glass);
  border:1px solid var(--glass-border); border-radius:var(--r); text-align:left;}
.hero .earned .n{font-family:'JetBrains Mono',monospace; font-size:30px; font-weight:600;
  color:var(--amber); letter-spacing:-.02em;}
.hero .earned .u{font-size:13px; color:var(--text-2); font-weight:600;}
.hero .capline{display:flex; align-items:center; gap:10px; margin-top:12px;}
.capbar{flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden;}
.capbar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--amber), var(--teal)); transition:width .5s ease;}
.hero .capline .mono{font-size:10px; color:var(--text-4); white-space:nowrap;
  letter-spacing:.06em; text-transform:uppercase;}

/* --- sign-in strip --- */
.signin{margin-top:18px; padding:11px 14px; border-radius:12px; font-size:12.5px;
  background:var(--glass); border:1px dashed var(--border-strong); color:var(--text-2);}
.signin.warn{border-style:solid; border-color:rgba(245,158,11,.42); background:var(--amber-dim); color:var(--amber);}

/* --- PROCESSING: reserved + queued; the money has NOT moved yet.
       amber + pulse, the same signal the site uses for its "connecting" status dot. --- */
.pill{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 13px; border-radius:99px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; white-space:nowrap;
  border:1px solid var(--border); background:var(--glass); color:var(--text-2);}
.pill.processing{border-color:rgba(245,158,11,.40); background:var(--amber-dim); color:var(--amber);}
.pill.processing i{width:6px; height:6px; border-radius:50%; background:var(--amber); animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.4;}}

/* --- PAID: the chain confirmed it. The card recedes; the hash is the receipt. --- */
.q.paid{background:transparent; border-color:rgba(20,184,166,.20);}
.q.paid .ic{opacity:.7;}
.q.paid .bd .ti{color:var(--text-2);}
.pill.paid{border-color:rgba(20,184,166,.40); background:var(--teal-dim); color:var(--teal-bright);}
.pill.paid svg{width:12px; height:12px;}
.txh{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-4);
  max-width:120px; overflow:hidden; text-overflow:ellipsis;}
a.txh:hover{color:var(--teal-bright);}

/* --- Ask the assistant --- */
.ask{display:inline-block; margin-top:5px; padding:0; font-family:'JetBrains Mono',monospace;
  font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-4); transition:color .15s;}
.ask:hover{color:var(--teal);}

/* --- per-card error: a refusal is information, not a dead end --- */
.qerr{margin:-4px 4px 12px; padding:9px 12px; border-radius:10px; font-size:11.5px; line-height:1.5;
  background:var(--pink-dim); border:1px solid rgba(236,72,153,.28); color:var(--pink);}