/* A coin's page: its header with buy links, its company at work (the live console for worlds, a
   findings board for research, a page being assembled for sites), its numbers, fuel ledger, wave
   reports and the shape of its company. Sample data until launches open. */

.cn {
  background: var(--page);
  color: var(--text);
}
.cn-head {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 132px;
  padding-bottom: 48px;
  background: #000;
}
.cn-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000 url(../assets/6154246d314fea2001bff264427e012d.png) center top / max(100%, 1100px) auto no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.cn-head-in {
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .cn-head-in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 48px;
  }
}
.cn-back {
  justify-self: start;
  color: var(--text-2);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cn-back:hover {
  color: var(--accent);
}
.cn-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin: 0;
}
.cn-tick {
  color: var(--accent);
}
.cn-name {
  color: var(--text-3);
}
.cn-mission {
  max-width: 720px;
  margin: 0;
  color: var(--text-2);
}
.cn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-chips li {
  padding: 4px 10px;
  background: var(--surface);
  color: var(--text-2);
  text-transform: uppercase;
  clip-path: var(--px-notch);
}
.cn-chips li.is-sample {
  background: var(--surface-2);
  color: var(--copper-400);
}
.cn-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The company at work */
.cn-work {
  padding-block: 40px 24px;
}
.cn-work-frame {
  position: relative;
  z-index: 45;
}
.cn-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 520px;
  background: var(--surface);
}
.cn-board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-2);
}
.cn-board-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
@media (min-width: 1024px) {
  .cn-board-body {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
.cn-board-main {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
  min-width: 0;
}
.cn-board-side {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--surface-2);
}
@media (min-width: 1024px) {
  .cn-board-side {
    border-top: 0;
    border-left: 1px solid var(--surface-2);
  }
}
.cn-find {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-find li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--page);
  color: var(--text-2);
  animation: cn-in 9s steps(1, end) infinite;
}
.cn-find li:nth-child(2) { animation-delay: 0.8s; }
.cn-find li:nth-child(3) { animation-delay: 1.6s; }
.cn-find li:nth-child(4) { animation-delay: 2.4s; }
.cn-find li:nth-child(5) { animation-delay: 3.2s; }
.cn-find li:nth-child(6) { animation-delay: 4s; }
@keyframes cn-in {
  0% { opacity: 0; }
  3% { opacity: 1; background: rgba(237, 103, 15, 0.16); }
  10% { background: var(--page); }
  92% { opacity: 1; }
  100% { opacity: 0; }
}
.cn-find .who {
  color: var(--text-3);
  white-space: nowrap;
}
.cn-sources {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
}
.cn-sources li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cn-sources b {
  font-weight: 400;
  color: #fff;
}
/* a site being assembled */
.cn-page {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #0b0a09;
}
.cn-page-hero {
  height: 140px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px), var(--accent);
}
.cn-page-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cn-page-row span {
  height: 72px;
  background: var(--surface);
}
.cn-page-row span.is-todo {
  background: transparent;
  outline: 1px dashed var(--stone-600);
  outline-offset: -1px;
}
.cn-page-row span.is-now {
  animation: ex-build 2.6s steps(4, end) infinite;
}
.cn-page-crew {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 52px;
}

/* Numbers */
.cn-nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--surface-2);
}
@media (min-width: 640px) {
  .cn-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cn-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.cn-nums div {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  background: var(--surface);
}
.cn-nums dt {
  color: var(--text-3);
  text-transform: uppercase;
}
.cn-nums dd {
  margin: 0;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Ledger and reports */
.cn-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 40px;
}
@media (min-width: 1024px) {
  .cn-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.cn-panel {
  position: relative;
  z-index: 45;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
}
.cn-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cn-panel-head h2 {
  margin: 0;
}
.cn-reports {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-reports li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--page);
}
.cn-reports b {
  font-weight: 400;
  color: #fff;
}
.cn-reports span {
  color: var(--text-2);
}

/* The shape of the company */
.cn-team {
  padding-block: 24px 64px;
}
.cn-team-head {
  margin: 0 0 20px;
}
.cn-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .cn-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cn-role {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
}
.cn-role b {
  display: block;
  font-weight: 400;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cn-role span {
  color: var(--text-3);
  text-transform: uppercase;
}
/* the number's heading style trims its line box, so the label needs its own row and a gap */
.cn-role p {
  display: grid;
  gap: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .cn-find li,
  .cn-page-row span.is-now {
    animation: none;
  }
}

/* Chapter vote: the current chapter's progress, the three drafts holders choose between (the leading
   one outlined in copper), and how the vote closes. Sample numbers. */
.cn-chap {
  padding-block: 8px 24px;
}
.cn-chap-in {
  display: grid;
  gap: 18px;
}
.cn-chap-now {
  display: grid;
  gap: 8px;
}
.cn-chap-goal {
  margin: 0;
  color: #fff;
}
.cn-chap-bar,
.cn-vote-bar {
  display: block;
  height: 8px;
  background: var(--surface-2);
}
.cn-chap-bar i,
.cn-vote-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.cn-vote-bar i {
  background: var(--stone-500);
}
.cn-chap-how {
  max-width: 720px;
  margin: 0;
  color: var(--text-2);
}
.cn-vote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .cn-vote { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cn-vote li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--page);
  clip-path: var(--px-notch);
}
.cn-vote li.is-lead {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cn-vote li.is-lead .cn-vote-bar i {
  background: var(--accent);
}
.cn-vote-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cn-vote-top b {
  font-weight: 400;
  color: #fff;
}
.cn-vote-top .num {
  color: var(--copper-400);
  font-variant-numeric: tabular-nums;
}
.cn-vote p {
  margin: 0;
  color: var(--text-2);
}
.cn-vote-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.cn-vote-foot p {
  margin: 0;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Research: a knowledge board. The question, what is known so far (each takeaway with how many cases
   back it and how well it was checked), the sub-questions each squad owns, the latest findings with
   their evidence, and on the side the sources read and what is being read right now. */
.cn-know {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .cn-know {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
.cn-know-main,
.cn-know-side {
  display: grid;
  align-content: start;
  gap: 26px;
  padding: 20px;
  min-width: 0;
}
.cn-know-side {
  border-top: 1px solid var(--surface-2);
}
@media (min-width: 1024px) {
  .cn-know-side {
    border-top: 0;
    border-left: 1px solid var(--surface-2);
  }
}
.cn-know-block {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.cn-q {
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.cn-takes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .cn-takes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cn-takes li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--page);
  clip-path: var(--px-notch);
}
.cn-takes b {
  font-weight: 400;
  color: #fff;
}
.cn-take-line {
  color: var(--text-2);
}
.cn-conf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--copper-400);
  text-transform: uppercase;
}
.cn-pips {
  display: inline-flex;
  gap: 2px;
}
.cn-pips i {
  width: 8px;
  height: 8px;
  background: var(--surface-2);
}
.cn-pips i.on {
  background: var(--accent);
}
.cn-subs {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-subs li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas: 'flag q n' 'flag bar who';
  gap: 8px 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--page);
  clip-path: var(--px-notch);
}
.cn-subs .ex-flag {
  grid-area: flag;
}
.cn-sub-q {
  grid-area: q;
  color: #fff;
}
.cn-sub-n {
  grid-area: n;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cn-sub-bar {
  grid-area: bar;
  display: block;
  height: 6px;
  background: var(--surface-2);
}
.cn-sub-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.cn-sub-who {
  grid-area: who;
  color: var(--text-3);
  white-space: nowrap;
}
.cn-subs li.is-queued .cn-sub-q {
  color: var(--text-2);
}
.ex-flag.is-dim {
  background: var(--surface);
  color: var(--text-3);
}
/* findings stay readable; a new one only flashes copper as it lands */
.cn-know .cn-find li {
  animation: cn-flash 10s steps(1, end) infinite;
}
@keyframes cn-flash {
  0% { background: rgba(237, 103, 15, 0.16); }
  6% { background: var(--page); }
}
@media (max-width: 639px) {
  .cn-know .cn-find li {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .cn-know .cn-find .who {
    grid-column: 2;
    white-space: normal;
  }
}
.cn-now {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-now li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cn-now-text {
  color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .cn-know .cn-find li {
    animation: none;
  }
}

/* the coin's look: its world theme and colour */
.cn-chips .cn-look {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cn-look i {
  width: 10px;
  height: 10px;
}

.cn-studio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  color: var(--copper-400);
  text-transform: uppercase;
}
.cn-studio:hover {
  color: #fff;
}

/* linked worlds */
.cn-links {
  padding-block: 0 40px;
}
.cn-links-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
@media (min-width: 1024px) {
  .cn-links-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cn-links-art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  clip-path: var(--px-notch);
}
.cn-links-list {
  display: grid;
  gap: 14px;
}
.cn-links-list ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-links-list li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--page);
  clip-path: var(--px-notch);
}
.cn-links-list li a {
  color: var(--copper-400);
  text-transform: uppercase;
}
.cn-links-list li b {
  font-weight: 400;
  color: #fff;
}
.cn-links-list p {
  margin: 0;
  color: var(--text-2);
}
.cn-links-list .cn-links-rule {
  color: var(--text-3);
}

/* a coin that does not exist yet */
.cn-lost {
  position: relative;
  overflow: hidden;
  padding: 160px 0 120px;
}
.cn-lost-in {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 18px;
}
.cn-lost-in h1 {
  margin: 0;
  color: #fff;
}
.cn-lost-in p {
  max-width: 56ch;
  margin: 0;
}
.cn-lost-bot {
  transform: rotate(-90deg);
  transform-origin: 50% 70%;
  filter: brightness(0.8);
}
.cn-lost-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cn-nums-tag {
  margin: 0 0 8px;
  color: var(--text-3);
  text-transform: uppercase;
}

/* the coin's own address, next to the studio link */
.cn-head-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

/* everything this company made */
.cn-made {
  padding-block: 0 40px;
}
.cn-made-in {
  display: grid;
  gap: 16px;
}
.cn-made-lede {
  margin: 0;
  max-width: 68ch;
  color: var(--text-2);
}
.cn-made-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-made-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 12px 14px;
  background: var(--page);
  color: var(--text-2);
  clip-path: var(--px-notch);
}
@media (min-width: 1024px) {
  .cn-made-list li {
    grid-template-columns: 96px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 14px;
  }
}
.cn-made-list b {
  font-weight: 400;
  color: #fff;
}
.cn-made-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cn-made-list i {
  font-style: normal;
  color: var(--text-3);
  text-transform: uppercase;
}
.cn-made-n,
.cn-made-st {
  color: var(--copper-400);
  text-transform: uppercase;
}
.cn-made-list li.is-now .cn-made-st {
  color: #fff;
}
.cn-made-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.cn-made-foot p {
  margin: 0;
  color: var(--text-3);
}

/* the countdown to the next hourly wave */
.cn-chips li.cn-next {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cn-made-more {
  margin: 0;
  color: var(--text-3);
}