/* tweetpad feature pages (/autoclaim, /custom) in the app's default skin, "2012" (assets/skin-2012.css): the blue bar, white
   rounded cards, Helvetica, the segmented buttons. Everything sits in one tweet-sized frame, 480 by 480 like the card on X:
   the bar stays put and the content scrolls inside it. ?embed is the X player card (the frame fills it), ?popup the pop-out
   window (the same), ?card the still the card image is captured from, and with neither the full page (the frame centred). */
:root {
  --bg: #e6e6e6; --card: #fff; --line: #e3e3e3; --edge: #c8c8c8; --text: #333; --dim: #999; --soft: #777;
  --ok: #2e9e4f; --warn: #c7870a; --bad: #d0343a; --accent: #0084b4; --blue-hi: #33bcef; --blue-lo: #019ad2;
  --ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { color: var(--text); font: 13px/1.35 var(--ui); -webkit-font-smoothing: antialiased; background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

/* buttons: the app's grey gradient button, and the blue primary */
button, .btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; color: var(--text);
  font: bold 12px/1 var(--ui); text-shadow: 0 1px 0 #fff; white-space: nowrap; background: linear-gradient(#fff, #e6e6e6);
  border: 1px solid #bbb; border-bottom-color: #a2a2a2; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 1px rgba(0, 0, 0, .08); }
button:hover, .btn:hover { background: linear-gradient(#fff, #dcdcdc); text-decoration: none; }
button:disabled { opacity: .5; cursor: default; }
.btn.primary { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: linear-gradient(var(--blue-hi), var(--blue-lo)); border-color: #057ed0; border-bottom-color: #0466a8; }
.btn.primary:hover { background: linear-gradient(#2ab4ea, #0287c6); }

/* ---------- the frame: the blue bar, then a scrolling column of cards ---------- */
.frame { position: relative; display: flex; flex-direction: column; width: 480px; height: 480px; max-width: 100%; max-height: 100vh; overflow: hidden;
  background: var(--bg); }
.head { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 10px; color: #fff; background: linear-gradient(#63b8ee, #3c9ad9 50%, #2b86cc);
  border-bottom: 1px solid #1d6aa5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .25); }
.head .home { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 4px; color: #fff; border-radius: 14px; }
.head .home:hover { text-decoration: none; background: rgba(255, 255, 255, .15); }
.head .back { font: bold 20px/1 var(--ui); opacity: .85; }
.head .gem { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .25)); }
.head .word { font: 600 19px/1 "Fredoka", "Arial Rounded MT Bold", var(--ui); letter-spacing: -.01em; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); }
.head .title { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 4px 9px; font: bold 13px/1 var(--ui); text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; }
/* a chain's mark, from the app's logos: the Ethereum diamond, the Solana bars */
.mark { display: inline-block; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.mark.eth { -webkit-mask-image: url(ethereum.svg); mask-image: url(ethereum.svg); }
.mark.sol { -webkit-mask-image: url(solana.svg); mask-image: url(solana.svg); }
.scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; scrollbar-color: #bbb transparent; }
.scroll > * { flex: none; }
.lede { margin: 0; padding: 10px; color: #555; background: var(--card); border: 1px solid var(--edge); border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.lede b { color: var(--text); }

/* a post, as the launch form's welcome post (skin-2012.css .welcome) */
.tweet { display: flex; gap: 10px; padding: 10px; background: var(--card); border: 1px solid var(--edge); border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tweet-ava { flex: none; width: 48px; height: 48px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); object-fit: cover; }
.tweet-body { flex: 1; min-width: 0; }
.tweet-head { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tweet-head b { font: bold 14px/1.2 var(--ui); color: #333; }
.tweet-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px/1.2 var(--ui); color: var(--dim); }
.parody { padding: 1px 5px; color: #fff; font: bold 9px/1.3 var(--ui); letter-spacing: .04em; text-transform: uppercase; background: #999; border-radius: 3px; }
.tweet-time { margin-left: auto; font: 12px/1.2 var(--ui); color: var(--dim); }
.tweet-copy { margin: 3px 0 0; font: 14px/1.35 Georgia, "Times New Roman", serif; color: #333; }
.hashtag { color: var(--accent); }
/* a mention chip: the account's picture with its chain's badge in the corner, like a coin image */
.mention { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 1px; vertical-align: 1px; color: var(--accent); font: bold 11px/1 var(--ui);
  background: #f5f8fa; border: 1px solid var(--line); border-radius: 16px; }
.mention:hover { text-decoration: none; border-color: #c3d9e8; }
.mention-pic { position: relative; width: 16px; height: 16px; flex: none; }
.mention-pic img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.mention-pic .mark { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; padding: 1.5px; color: #fff; background: #627eea;
  -webkit-mask: none; mask: none; border-radius: 50%; box-shadow: 0 0 0 1px #fff; }
.mention-pic .mark::after { content: ""; display: block; width: 100%; height: 100%; background: #fff; -webkit-mask: url(ethereum.svg) center / contain no-repeat;
  mask: url(ethereum.svg) center / contain no-repeat; }

/* the card image's picture of the feature (and the X card's) */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; background: var(--card);
  border: 1px solid var(--edge); border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.hero .pill { padding: 6px 10px; color: #555; font: bold 14px/1 var(--ui); background: linear-gradient(#fff, #ececec); border: 1px solid #ccc; border-radius: 14px; }
.hero .pill.gold { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: linear-gradient(var(--blue-hi), var(--blue-lo)); border-color: #057ed0; }
.hero .arrow { color: var(--accent); font: bold 20px/1 var(--ui); }
.hero b { flex-basis: 100%; color: var(--accent); font: bold 22px/1.1 var(--ui); letter-spacing: -.01em; text-align: center; }

/* the big numbers */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat { padding: 9px 10px; background: var(--card); border: 1px solid var(--edge); border-radius: 5px; }
.stat b { display: block; color: var(--text); font: bold 19px/1.1 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { color: var(--dim); font: bold 10px/1.2 var(--ui); letter-spacing: .03em; text-transform: uppercase; }

/* how it works, in steps */
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; background: var(--card); border: 1px solid var(--edge);
  border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.steps li { position: relative; padding: 8px 10px 8px 36px; color: var(--soft); border-top: 1px solid #eee; }
.steps li:first-child { border-top: 0; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 10px; top: 8px; width: 18px; height: 18px;
  display: grid; place-items: center; color: #fff; font: bold 11px/1 var(--ui); background: linear-gradient(var(--blue-hi), var(--blue-lo)); border-radius: 50%; }
.steps b { color: var(--text); }

/* recent activity, newest first */
.feed { margin: 0; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--edge); border-radius: 5px; }
.feed li { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-top: 1px solid #eee; }
.feed li:first-child { border-top: 0; }
.feed li .who { color: var(--text); font-weight: bold; }
.feed li span:not(.who) { color: var(--dim); }
.feed li .amt { margin-left: auto; color: var(--ok); font-weight: bold; }
.feed .empty { color: var(--dim); }
.actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fine { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.35; text-align: center; }

/* ---------- forms (the /custom deployer) ---------- */
.box { display: flex; flex-direction: column; gap: 7px; padding: 10px; background: var(--card); border: 1px solid var(--edge); border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.field-label { color: #555; font: bold 12px/1.2 var(--ui); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
input.text, textarea.text { width: 100%; padding: 7px 8px; color: var(--text); font: 13px/1.3 var(--ui); background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); outline: none; }
input.text:focus, textarea.text:focus { border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08), 0 0 6px rgba(82, 168, 236, .5); }
textarea.text { resize: vertical; min-height: 34px; }
/* chip rows: the app's segmented buttons */
.chips { display: flex; flex-wrap: wrap; }
.chips button { padding: 6px 10px; margin-left: -1px; color: #555; border-radius: 0; box-shadow: none; }
.chips button:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.chips button:last-child { border-radius: 0 4px 4px 0; }
.chips button[aria-pressed="true"] { position: relative; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: linear-gradient(#2c8fd6, #4aa9e9);
  border-color: #1d6aa5; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice button { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 9px; white-space: normal; text-align: left; text-shadow: none; }
.choice button b { color: var(--text); font: bold 13px/1 var(--ui); }
.choice button span { color: var(--soft); font: 11px/1.3 var(--ui); }
.choice button[aria-pressed="true"] { background: #eaf5fc; border-color: #56b4ef; box-shadow: 0 0 0 1px #56b4ef; }
.drop { position: relative; display: grid; place-items: center; width: 70px; height: 70px; flex: none; cursor: pointer; overflow: hidden; color: var(--dim);
  font: bold 11px/1 var(--ui); background: #f7f9fa; border: 1px dashed #bbb; border-radius: 5px; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.note { margin: 0; color: var(--soft); font-size: 12px; line-height: 1.35; }
.note b { color: var(--text); }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; }
.checks:empty { display: none; }
.checks li::before { content: "● "; font-size: 9px; vertical-align: 1px; }
.checks .ok { color: var(--ok); }
.checks .warn { color: var(--warn); }
.checks .bad { color: var(--bad); }
.checks a { margin-left: 6px; font-weight: bold; }
.wide { width: 100%; padding: 9px 12px; font-size: 13px; }
.coins { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.coins li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #f7f9fa; border: 1px solid var(--line); border-radius: 4px; }
.coins li .grow { color: var(--soft); font-size: 12px; }
.coins li button { padding: 5px 9px; font-size: 11px; }
pre.brief { margin: 0; padding: 8px; white-space: pre-wrap; color: var(--text); font: 11px/1.4 Menlo, Monaco, monospace; background: #fafafa; border: 1px solid #ddd;
  border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.deployer { display: flex; flex-direction: column; gap: 8px; }

/* ---------- modes ---------- */
/* full page: the frame centred at the card's size, like the landing page */
html[data-mode="page"] body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100vh; padding: 16px; }
html[data-mode="page"] .frame { border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); }
.brand { display: flex; align-items: center; gap: 8px; color: #333; font: 600 22px/1 "Fredoka", "Arial Rounded MT Bold", sans-serif; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.brand span { color: var(--dim); font-size: 18px; }
html:not([data-mode="page"]) .brand { display: none; }
html:not([data-mode="page"]) body { overflow: hidden; }
/* the X card, the pop-out and the card still fill their window, which is the card's size */
html:is([data-mode="embed"], [data-mode="popup"], [data-mode="card"]) .frame { width: 100vw; height: 100vh; max-width: none; max-height: none; }
html[data-mode="card"] .live { display: none; }   /* the still shows what it does, not numbers that will have moved */
html:not([data-mode="card"]) .still { display: none; }
html:is([data-mode="embed"], [data-mode="card"]) .deployer { display: none; }
html:is([data-mode="page"], [data-mode="popup"]) .intro { display: none; }
html[data-mode="embed"] #cl-agent { display: none; }   /* the card's "Use your agent" opens the deployer at the brief */
/* the X card with the deployer opened in place (custom.js openDeployer): as the pop-out shows it */
html[data-mode="embed"][data-open] .intro { display: none; }
html[data-mode="embed"][data-open] .deployer, html[data-mode="embed"][data-open] #cl-agent { display: flex; }
html[data-mode="card"] .custom-steps { display: none; }   /* the card image: the post, what it is and the small print, all in view */