/* $JEVLINE token section + the @runJEVLINE link in the top bar.
   Everything here is styled from the site's own tokens (:root in styles.css), so it reads as part
   of the page rather than a bolt-on. Loaded after styles.css, so it wins on equal specificity. */

/* --- top bar: @runJEVLINE (beside Source code, before the star button) ---------------------- */
.x-link { display: inline-flex; align-items: center; gap: 6px; margin-left: -24px; color: var(--text-2);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.x-link:hover { color: var(--text); }
.x-link svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }

/* --- token panel --------------------------------------------------------------------------- */
.token-panel .panel-body { padding: 22px 24px 24px; }
.token-ca { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--inset); }
.token-ca-label { flex: 0 0 auto; color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; }
.token-ca-value { flex: 1 1 260px; min-width: 0; color: var(--text); font: 14px/1.5 var(--mono);
  overflow-wrap: anywhere; }
/* The placeholder ("Coming soon") must not be greyed out into the background, and the mint must wrap
   rather than clip: overflow-wrap only, never word-break/ellipsis (a 43-char mint cannot be ellipsised). */
.token-ca-value[data-ca=""] { color: var(--seed); }
#token-copy { flex: 0 0 auto; }
#token-copy[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
#token-copy[aria-disabled="true"]:hover { background: var(--raised); border-color: var(--line-strong); }

.token-note { margin: 12px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.token-heading { margin: 26px 0 10px; }
.token-utility { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.token-utility li + li { margin-top: 8px; }
.token-utility strong { color: var(--text); font-weight: 600; }
.token-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  margin: 22px 0 0; border: 1px solid var(--line); border-radius: 6px; background: var(--line); overflow: hidden; }
.token-fact { padding: 12px 14px; background: var(--panel); }
.token-fact dt { color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; }
.token-fact dd { margin: 3px 0 0; color: var(--text); font-size: 14px; }
.token-fact dd.pre { color: var(--seed); }
.token-scam { margin: 20px 0 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 6px;
  background: var(--inset); color: var(--text-2); font-size: 13.5px; line-height: 1.65; }
.token-scam strong { color: var(--text); }
.token-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.token-x { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 16px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--raised); color: var(--text);
  font-size: 14px; font-weight: 550; text-decoration: none; }
.token-x:hover { background: #272b31; border-color: rgba(255,255,255,.26); color: var(--text); }
.token-x svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.token-fine { margin: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 600px) {
  /* The top bar becomes a block on phones and hides .repo-link; keep the handle visible on its own row
     instead of dropping the only way to reach the account from the top of the page. */
  .x-link { margin: 2px 0 6px; height: 32px; }
  .token-ca { padding: 12px 14px; }
  .token-ca-value { flex: 1 1 100%; font-size: 13px; }
  #token-copy { width: 100%; }
}