/* Economics (#economics, src/js/orbtic/economics.js): "Follow $100" (an orbit with moons and a receipt), staking kept
   light, costs as price tags, and AI credits. Tones: ember for burns, glow for stakers, stone for the team, marble for
   CREDIT, brass for the platform, deep brass for Orbio. */

.ec {
  padding-block: 132px 96px;
  color: var(--text);
}
.ag .ec { padding-top: 48px; }
.ec-kind {
  color: var(--copper-300);
  text-transform: uppercase;
}
.ec-muted { color: var(--text-2); }
.ec-hl {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(255, 223, 163, .35);
}

/* tone swatches, shared by moons, coins, receipt lines */
.ec-ember { fill: #b9704f; background: #b9704f; }
.ec-glow { fill: #ffdfa3; background: #ffdfa3; }
.ec-stone { fill: #746e64; background: #746e64; }
.ec-marble { fill: #ece3d3; background: #ece3d3; }
.ec-brass { fill: #d6b47c; background: #d6b47c; }
.ec-deep { fill: #6b4c1d; background: #6b4c1d; }

/* the top: title left, lede right, on one baseline */
.ec-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: end;
}
.ec-top h1 { margin: 16px 0 0; }
.ec-lede { color: var(--text-2); }

/* Follow $100 */
.ec-follow {
  margin-top: 56px;
  padding: 28px;
  background: var(--surface);
  clip-path: var(--px-notch);
  box-shadow: inset 0 0 0 2px var(--surface-2);
}
.ec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ec-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-2);
  background: var(--page);
  clip-path: var(--px-notch);
  text-transform: uppercase;
  cursor: pointer;
}
.ec-tab:hover { color: var(--text); }
.ec-tab[aria-selected="true"] {
  color: var(--page);
  background: var(--accent);
}
.ec-tab:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 2px; }
.ec-tn {
  font-family: var(--font-mono);
  opacity: .7;
}
.ec-src-lede {
  margin-top: 16px;
  max-width: 760px;
  color: var(--text-2);
}
.ec-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}
.ec-sky { margin: 0; justify-self: center; width: 100%; max-width: 620px; }
.ec-orbit {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ec-ring {
  fill: none;
  stroke: rgba(214, 180, 124, .32);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}
.ec-ring--in { stroke: rgba(214, 180, 124, .14); }
.ec-path {
  fill: none;
  stroke: rgba(214, 180, 124, .28);
  stroke-width: 2;
  transition: stroke .2s steps(2, end);
}
.ec-coin { shape-rendering: crispEdges; }
.ec-core { image-rendering: pixelated; }
.ec-core-t {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.ec-moon { outline: none; cursor: default; transition: opacity .2s steps(2, end); }
.ec-route { transition: opacity .2s steps(2, end); }
.ec-halo {
  fill: none;
  stroke: var(--copper-300);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0;
}
.ec-body {
  stroke: #0c0b0e;
  stroke-width: 3;
}
.ec-amt-t {
  fill: var(--text);
  font-family: var(--font-heading);
  font-size: 22px;
}
.ec-name-t {
  fill: var(--text-3);
  font-family: var(--font-caption);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ec-moon.is-on .ec-halo,
.ec-moon:focus-visible .ec-halo { opacity: 1; }
.ec-route.is-on .ec-path { stroke: var(--copper-300); }
.ec-stage.is-focus .ec-moon:not(.is-on),
.ec-stage.is-focus .ec-route:not(.is-on) { opacity: .3; }
.ec-stage.is-focus .ec-rlines li:not(.is-on) { opacity: .45; }

/* the receipt: ivory paper with a torn bottom edge */
.ec-receipt {
  position: relative;
  padding: 22px 22px 34px;
  background: #fefaee var(--binary-ivory);
  color: #171614;
  rotate: 1.2deg;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 16px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 16px 8px repeat-x;
}
.ec-rh {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px dashed #b9b19f;
  color: #6b665e;
  text-transform: uppercase;
}
.ec-rlines {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.ec-rlines li {
  display: grid;
  grid-template-columns: 10px auto minmax(12px, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  transition: opacity .2s steps(2, end);
}
.ec-rlines li.is-on .ec-rl b { text-decoration: underline; text-underline-offset: 3px; }
.ec-rlines .ec-sw {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 1px #171614;
}
.ec-rl b {
  display: block;
  color: #171614;
  font-weight: 400;
  font-size: 15px;
}
.ec-rl i {
  display: block;
  max-width: 200px;
  color: #6b665e;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}
.ec-dots {
  align-self: end;
  margin-bottom: 4px;
  border-bottom: 2px dotted #b9b19f;
}
.ec-rv {
  font-family: var(--font-mono);
  font-size: 15px;
}
.ec-rt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 2px solid #171614;
  font-family: var(--font-mono);
  font-size: 18px;
}
.ec-rt .t-cap-sm { text-transform: uppercase; }
.ec-rfoot {
  margin: 14px 0 0;
  color: #6b665e;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}

/* staking, kept light */
.ec-stake {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  margin-top: 96px;
}
.ec-stake h2 { margin: 14px 0 0; }
.ec-stake-l > p.t-alt-md { margin-top: 14px; max-width: 640px; }
.ec-light {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.ec-light li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px 12px;
  padding: 16px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(214, 180, 124, .08), transparent 70%);
}
.ec-light .ico { grid-row: span 2; margin-top: 2px; }
.ec-light b { font-weight: 400; font-family: var(--font-heading); font-size: 20px; }
.ec-light span:last-child { color: var(--text-2); font-size: 14px; line-height: 1.4; }
.ec-calc {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: var(--page);
  box-shadow: inset 0 0 0 2px var(--surface-2);
  clip-path: var(--px-notch);
}
.ec-field {
  display: grid;
  gap: 6px;
}
.ec-field .t-cap-sm { color: var(--text-3); text-transform: uppercase; }
.ec-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--surface-2);
}
.ec-in:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.ec-in i { color: var(--text-3); font-style: normal; font-family: var(--font-mono); }
.ec-in input {
  flex: 1;
  width: 0;
  min-width: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  outline: none;
}
.ec-out {
  display: grid;
  gap: 4px;
  margin: 4px 0;
  padding: 14px 0;
  border-block: 1px solid var(--surface-2);
}
.ec-out .t-cap-sm { color: var(--text-3); text-transform: uppercase; }
.ec-out b {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--copper-300);
}

/* costs as price tags */
.ec-costs { margin-top: 96px; }
.ec-costs h2 { margin: 14px 0 0; }
.ec-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.ec-tags li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 18px 20px 30px;
  background: var(--surface);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.ec-tag-hole {
  position: absolute;
  left: 12px;
  top: 24px;
  width: 8px;
  height: 8px;
  background: var(--page);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.ec-tags .t-cap-sm { color: var(--text-3); text-transform: uppercase; }
.ec-tags b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 17px;
  color: var(--copper-300);
}
.ec-tags .t-alt-xs { color: var(--text-2); line-height: 1.45; }

/* AI credits */
.ec-credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-top: 96px;
}
.ec-credit h2 { margin: 14px 0 0; }
.ec-credit p.t-alt-md { margin-top: 14px; }
.ec-addr {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-addr li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px;
  background: var(--surface);
  clip-path: var(--px-notch);
}
.ec-addr .t-cap-sm { min-width: 120px; color: var(--copper-300); text-transform: uppercase; }
.ec-addr code { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
.ec-copy {
  margin-left: auto;
  padding: 6px 10px;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--surface-2);
  text-transform: uppercase;
  cursor: pointer;
}
.ec-copy:hover { color: var(--accent); }
.ec-fine {
  max-width: 760px;
  margin-top: 64px;
  color: var(--text-3);
}

@media (max-width: 1099px) {
  .ec-stage, .ec-stake, .ec-credit, .ec-top { grid-template-columns: minmax(0, 1fr); }
  .ec-receipt { max-width: 440px; justify-self: center; width: 100%; }
  .ec-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ec { padding-block: 104px 64px; }
  .ec-follow { padding: 18px 14px; }
  .ec-tab { flex: 1 1 auto; justify-content: center; }
  .ec-light, .ec-tags { grid-template-columns: minmax(0, 1fr); }
  .ec-amt-t { font-size: 28px; }
  .ec-name-t { font-size: 15px; }
  .ec-core-t { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-receipt { rotate: none; }
}

/* the live amount in the title: a serif number you can scroll, drag, type or step */
.ec-amt-ctl {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 0 6px 0 4px;
  color: var(--accent);
  text-shadow: 0 0 22px rgba(255, 223, 163, .35);
  box-shadow: inset 0 -3px 0 rgba(214, 180, 124, .45);
  cursor: ns-resize;
  touch-action: none;
}
.ec-amt-ctl:hover, .ec-amt-ctl:focus-within { box-shadow: inset 0 -3px 0 var(--accent); background: rgba(214, 180, 124, .07); }
.ec-amt-in {
  min-width: 2ch;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
  outline: none;
  cursor: inherit;
  field-sizing: content;
}
.ec-amt-in:focus { cursor: text; }
.ec-spin {
  display: inline-grid;
  align-self: center;
  margin-left: 6px;
  font-size: 12px;
  line-height: 1.1;
  color: var(--text-3);
  text-shadow: none;
}
.ec-spin i { font-style: normal; cursor: pointer; padding: 0 2px; }
.ec-spin i:hover { color: var(--accent); }
.ec-follow-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.ec-slide {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  text-transform: uppercase;
}
.ec-slide input { width: 200px; accent-color: #d6b47c; }
.ec-slide-v {
  min-width: 96px;
  color: var(--copper-300);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}
.ec-stage { align-items: center; margin-top: 16px; }
.ec-sky { max-width: 640px; }
@media (max-width: 639px) {
  .ec-slide { width: 100%; }
  .ec-slide input { flex: 1; width: auto; }
}
.ec-srcs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }