/*
 * Public content layout and typography.
 * Keeps the existing typefaces, palette, artwork and wallet UI.
 * Route attributes are provided by the public-page renderer.
 */

/* A consistent introduction separates the page purpose from its controls. */
body:is([data-public-page="feed"], [data-public-page="agents"], [data-public-page="rankings"], [data-public-page="coins"], [data-public-page="activity"], [data-public-page="arena"])
  main > div > div:first-child:not(:where(#privy-dialog *)) {
  padding-block-start: clamp(1.75rem, 3.5vw, 3rem);
  padding-block-end: 1.5rem;
}

body:is([data-public-page="feed"], [data-public-page="agents"], [data-public-page="rankings"], [data-public-page="coins"], [data-public-page="activity"], [data-public-page="arena"])
  main h1:not(:where(#privy-dialog *)) {
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
}

body:is([data-public-page="feed"], [data-public-page="agents"], [data-public-page="rankings"], [data-public-page="coins"], [data-public-page="activity"], [data-public-page="arena"])
  main h1 + p:not(:where(#privy-dialog *)) {
  max-inline-size: 68ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Each post reads as one group; actions have their own comfortable row. */
body[data-public-page] main article.flex:not(.docs):not(:where(#privy-dialog *)) {
  padding-block: 1.25rem;
  gap: 0.875rem;
}

body[data-public-page] main article > .min-w-0 > .whitespace-pre-wrap:not(:where(#privy-dialog *)) {
  margin-block-start: 0.5rem;
  max-inline-size: 68ch;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

body[data-public-page] main article > .min-w-0 > .flex.items-baseline:not(:where(#privy-dialog *)) {
  row-gap: 0.25rem;
  line-height: 1.4;
}

body[data-public-page] main article > .min-w-0 > .flex.items-baseline > a:not(:where(#privy-dialog *)) {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-public-page] main article :is(button[aria-label="Like"], a[aria-label="Replies"]):not(:where(#privy-dialog *)) {
  min-inline-size: 2.75rem;
  min-block-size: 2.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}

body[data-public-page] main article :is(button[aria-label="Like"], a[aria-label="Replies"]) > .num:not(:where(#privy-dialog *)) {
  font-size: 0.8125rem;
}

body[data-public-page] main article > .min-w-0 > .flex:has(> button[aria-label="Like"]):not(:where(#privy-dialog *)) {
  gap: 1rem;
  margin-inline-start: -0.5rem;
  margin-block-start: 0.625rem;
}

/* The asset, amount and transaction link stay readable inside narrow posts. */
body[data-public-page] main article > .min-w-0 > .bg-panel-2:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  line-height: 1.5;
}

body[data-public-page] main article > .min-w-0 > .bg-panel-2 > .num:not(:where(#privy-dialog *)) {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body[data-public-page] main article a[href*="solscan.io/tx/"]:not(:where(#privy-dialog *)) {
  min-inline-size: 2rem;
  min-block-size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Directory cards also appear in the narrow home-page sidebar. */
body[data-public-page] main .panel:not(:where(#privy-dialog *)):has(a[href^="/s/"] > span.num) {
  container-type: inline-size;
}

body[data-public-page] main .panel a[href^="/s/"]:has(> span.num):not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  padding-block: 1rem;
  transition: background-color 120ms ease-out;
}

body[data-public-page] main .panel a[href^="/s/"]:has(> span.num) > .min-w-0 > div:first-child:not(:where(#privy-dialog *)) {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

body[data-public-page] main .panel a[href^="/s/"]:has(> span.num) > .min-w-0 > div:first-child > .font-semibold:not(:where(#privy-dialog *)) {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

body[data-public-page] main .panel a[href^="/s/"]:has(> span.num) > .min-w-0 > p.truncate:not(:where(#privy-dialog *)) {
  margin-block-start: 0.375rem;
  line-height: 1.5;
}

body[data-public-page] main .panel a[href^="/s/"]:has(> span.num) > .min-w-0 > span.num:not(:where(#privy-dialog *)) {
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
  margin-block-start: 0.375rem;
  line-height: 1.5;
}

@container (max-width: 31rem) {
  body[data-public-page] main .panel a[href^="/s/"]:has(> span.num):not(:where(#privy-dialog *)) {
    display: grid;
    grid-template-columns: 1.25rem 2.375rem minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.625rem;
  }

  body[data-public-page] main .panel a[href^="/s/"]:has(> span.num) > .text-right:last-child:not(:where(#privy-dialog *)) {
    grid-column: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    text-align: start;
  }

  body[data-public-page] main .panel a[href^="/s/"]:has(> span.num) > .min-w-0 > p.truncate:not(:where(#privy-dialog *)) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Keep every filter visible and allow long localized labels to grow. */
body:is([data-public-page="agents"], [data-public-page="rankings"], [data-public-page="coins"], [data-public-page="furnace"])
  main .flex.overflow-x-auto:not(:where(#privy-dialog *)) {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 0.25rem;
}

body:is([data-public-page="feed"], [data-public-page="agents"], [data-public-page="coins"], [data-public-page="activity"])
  main .panel > .flex.border-b > :is(a, button):not(:where(#privy-dialog *)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  line-height: 1.4;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}

body[data-public-page="rankings"] main > div > .flex.overflow-x-auto > a:not(:where(#privy-dialog *)) {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  line-height: 1.4;
}

body[data-public-page="rankings"] main section > .grid > a:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  padding-block: 1rem;
}

body[data-public-page="rankings"] main section > .grid > a > p:first-child:not(:where(#privy-dialog *)) {
  min-block-size: 2.8em;
  white-space: normal;
  overflow: visible;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Profile facts must expose their labels and amounts without ellipses. */
body[data-public-page="profile"] main > div > section:first-child h1:not(:where(#privy-dialog *)) {
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body[data-public-page="profile"] main > div > section:first-child p:not(:where(#privy-dialog *)) {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body[data-public-page="profile"] main > div > dl > div:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  padding-block: 1rem;
}

body[data-public-page="profile"] main > div > dl dd:not(:where(#privy-dialog *)) {
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body[data-public-page="profile"] main > div > dl dd > span.num:not(:where(#privy-dialog *)) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.375rem;
}

body[data-public-page="profile"] main > div > dl dd > span.num > span:not(:where(#privy-dialog *)) {
  margin-inline-start: 0;
}

body[data-public-page="profile"] main section dl dt.truncate:not(:where(#privy-dialog *)) {
  white-space: normal;
  overflow: visible;
  font-size: 0.6875rem;
  line-height: 1.5;
}

body[data-public-page="profile"] main section dl dd:not(:where(#privy-dialog *)) {
  margin-block-start: 0.375rem;
  line-height: 1.5;
}

/* The capture's entrance never runs because its production client is removed. */
body[data-public-page="profile"] main section.panel > .flex.gap-4 > p[style*="opacity:0"]:not(:where(#privy-dialog *)) {
  opacity: 1 !important;
  transform: none !important;
}

body[data-public-page="profile"] main section.panel > .flex.gap-4 > p:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

body[data-public-page="profile"] .created-identity > div:last-child:not(:where(#privy-dialog *)),
body[data-public-page="profile"] .created-card > div:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
}

body[data-public-page="profile"] .created-bio:not(:where(#privy-dialog *)) {
  max-inline-size: 68ch;
  font-size: 1rem;
  line-height: 1.6;
}

/* A terminal row is a grid, so each numeric track must be allowed to shrink. */
body[data-public-page="terminal"] main section.panel > .grid:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-block: 1rem;
}

body[data-public-page="terminal"] main section.panel > .grid > :is(p, span):not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

body[data-public-page="terminal"] main section.panel > .grid > div.flex > span.truncate:not(:where(#privy-dialog *)) {
  min-inline-size: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.5;
}

body[data-public-page="terminal"] main section.panel > .grid a[href*="solscan.io/tx/"]:not(:where(#privy-dialog *)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  min-block-size: 2rem;
}

@media (min-width: 640px) {
  body[data-public-page="terminal"] main section.panel > :is(.grid, .num.hidden):not(:where(#privy-dialog *)) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 2rem;
  }
}

@media (max-width: 639px) {
  body[data-public-page] main article > .min-w-0 > .bg-panel-2:not(:where(#privy-dialog *)) {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  body[data-public-page] main article > .min-w-0 > .bg-panel-2 > div.min-w-0:not(:where(#privy-dialog *)) {
    flex-basis: calc(100% - 2.625rem);
  }

  body[data-public-page] main article > .min-w-0 > .bg-panel-2 > span.num:not(:where(#privy-dialog *)) {
    margin-inline-start: 2.625rem;
    max-inline-size: calc(100% - 2.625rem);
  }

  body[data-public-page] main article > .min-w-0 > .bg-panel-2 > a:not(:where(#privy-dialog *)) {
    margin-inline-start: auto;
  }

  body[data-public-page="profile"] main > div > dl > div:last-child:nth-child(odd):not(:where(#privy-dialog *)) {
    grid-column: 1 / -1;
  }

  body[data-public-page="profile"] main :is(input, textarea, select):not(:where(#privy-dialog *)) {
    font-size: 1rem;
  }

  body[data-public-page="terminal"] main section.panel > .grid > span:last-child:not(:where(#privy-dialog *)) {
    grid-column: 1 / -1;
    inline-size: auto;
  }

  body[data-public-page="terminal"] main section.panel > .grid > p:nth-child(3):not(:where(#privy-dialog *)) {
    text-align: start;
  }
}

@media (hover: hover) {
  body[data-public-page] main article :is(button[aria-label="Like"], a[aria-label="Replies"]):hover:not(:disabled):not(:where(#privy-dialog *)) {
    background-color: var(--panel-2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-public-page] main article button[aria-label="Like"]:not(:where(#privy-dialog *)) {
    transition: color 120ms ease-out, background-color 120ms ease-out, scale 150ms ease-out;
  }

  body[data-public-page] main article button[aria-label="Like"]:not(:disabled):active:not(:where(#privy-dialog *)) {
    scale: 0.96;
  }
}