/* Captcha 2.0: the verification widget inside Discord. One card in the client's dark
   palette, a box to tick like the captchas people know, a spinner while the tap is
   checked, a green check when it is done, and the wordmark of the module in the corner:
   "Powered by ILP Captcha", "Captcha" in the same Audiowide face Pulse signs its images with. */

@font-face {
  font-family: 'Audiowide';
  src: url(fonts/Audiowide-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Safe areas: on the phone the Discord client draws its own bar over the top of the
   Activity (and the notch takes its share). Discord hands the insets over as
   --discord-safe-area-inset-*; app.js copies them into --cv-* as they arrive (they can come
   late, SDK issue 304) and falls back to the client bar's height on mobile until then;
   env() covers a plain browser and the notch. */
:root { --cv-top: env(safe-area-inset-top, 0px); --cv-bottom: env(safe-area-inset-bottom, 0px);
  --cv-left: env(safe-area-inset-left, 0px); --cv-right: env(safe-area-inset-right, 0px); }
html, body { margin: 0; height: 100%; background: #1e1f22; color: #dbdee1;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; }
main { max-width: 420px; margin: 0 auto; position: relative;
  padding: calc(36px + var(--cv-top)) calc(16px + var(--cv-right)) calc(36px + var(--cv-bottom)) calc(16px + var(--cv-left)); }
p { margin: 0; line-height: 1.45; }

/* the card */
.widget { background: #2b2d31; border: 1px solid #3f4248; border-radius: 10px;
  padding: 16px 16px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
section[hidden] { display: none; }

/* the main row: the box and its label, like the captchas people know */
.row-main { display: flex; align-items: center; gap: 14px; min-height: 38px; width: 100%;
  box-sizing: border-box; padding: 4px 6px; border-radius: 8px; }
button.check { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer;
  text-align: left; -webkit-tap-highlight-color: transparent; }
button.check:hover:not(:disabled) { background: rgba(255, 255, 255, .04); }
button.check:hover:not(:disabled) .box { border-color: #dbdee1; }
button.check:focus-visible { outline: 2px solid #5865f2; outline-offset: 2px; }
button.check:disabled { cursor: default; }
.label { font-size: 15px; font-weight: 500; color: #f2f3f5; }

/* the box: empty to tick, a ring while it is checked, a check when it is done */
.box { flex: none; width: 30px; height: 30px; box-sizing: border-box; border: 2px solid #80848e;
  border-radius: 6px; background: #1e1f22; position: relative; transition: border-color .15s, background .15s; }
.box::after { content: ''; position: absolute; display: none; }
.box.spin, button.check:disabled .box { border-radius: 50%; border-color: rgba(88, 101, 242, .25);
  border-top-color: #5865f2; animation: cv-spin .8s linear infinite; }
.box.ok { border-color: #23a559; background: #23a559; }
.box.ok::after { display: block; left: 9px; top: 4px; width: 8px; height: 14px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.box.err { border-color: #f23f43; background: #f23f43; }
.box.err::after, .box.warn::after { display: block; left: 0; right: 0; top: 0; bottom: 0;
  font-weight: 700; font-size: 18px; line-height: 26px; text-align: center; }
.box.err::after { content: '!'; color: #fff; }
.box.warn { border-color: #f0b232; }
.box.warn::after { content: '?'; color: #f0b232; }
@keyframes cv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .box.spin, button.check:disabled .box { animation: none; } }

#boot.failed .box { border-radius: 6px; border-color: #f23f43; background: #f23f43; animation: none; }
#boot.failed .box::after { content: '!'; display: block; left: 0; right: 0; top: 0; bottom: 0;
  color: #fff; font-weight: 700; font-size: 18px; line-height: 26px; text-align: center; }
#boot.failed .label { color: #f23f43; }

.text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hint { display: block; color: #f0b232; font-size: 13px; font-weight: 400; margin: 0; }
.hint:empty { display: none; }
#taskHint { margin-top: 6px; text-align: center; }
.remark { color: #a3a9b1; font-size: 14px; line-height: 1.5; margin-top: 10px; }
/* flush with the label: the box (30px) + the gap (14px) + the row's padding (6px) */
#validate > .remark { margin: 16px 0 0 50px; }
/* The readings panel stays in the DOM (app.js fills it and the device check depends on it)
   but is not shown for now: hidden on request 2026-09-25 while the look is settled. */
#validate .device { display: none; }
.sub { display: block; color: #dbdee1; font-size: 14px; font-weight: 400; line-height: 1.4; }
.sub:empty { display: none; }
#doneText { white-space: pre-line; }   /* the welcome on its own line */

/* the shape task, inside the same card */
#choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 6px; }
.shape { width: 64px; height: 64px; margin: 0 auto; border: 0; cursor: pointer; display: block; }
.shape.red { background: #f23f43; }
.shape.blue { background: #5865f2; }
.shape.circle { border-radius: 50%; }
.shape.square { border-radius: 8px; }
.shape.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape:focus-visible { outline: 2px solid #f2f3f5; outline-offset: 3px; }

.row { display: flex; gap: 12px; justify-content: center; margin: 14px 0 0; }
button:not(.shape):not(.check) { font: inherit; padding: 9px 18px; border-radius: 6px; border: 0;
  cursor: pointer; background: #4e5058; color: #fff; }
button.primary { background: #248046; }
button:disabled { opacity: .6; cursor: default; }

/* the wordmark, like the one Pulse signs its images with */
.brand { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px;
  padding-top: 8px; border-top: 1px solid #3f4248; color: #8a90a0; font-size: 11px; }
.brand .shield { width: 14px; height: 14px; color: #8a90a0; }
.brand .mark { font-family: 'Audiowide', system-ui, sans-serif; font-size: 15px; color: #FF5FD2;
  letter-spacing: .3px; margin-left: 1px; }

/* the honeypot: out of sight, not out of the DOM */
.trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the device panel: every value the tap sends, readable before the tap */
.device { text-align: left; margin-top: 12px; font-size: 12px; color: #b5bac1; }
.device[hidden] { display: none; }
.device summary { cursor: pointer; color: #b5bac1; }
.device summary:hover { color: #dbdee1; }
.device table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.device td { padding: 3px 4px; vertical-align: top; border-top: 1px solid #3f4248; word-break: break-all; }
.device td.k { color: #949ba4; width: 40%; word-break: normal; }
.device .tag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  background: #3f4248; color: #dbdee1; font-size: 11px; white-space: nowrap; }

@media (max-width: 400px) {
  main { padding: calc(20px + var(--cv-top)) calc(12px + var(--cv-right)) calc(20px + var(--cv-bottom)) calc(12px + var(--cv-left)); }
}