/* Common Ground. Two faces: his lockup keeps the rounded geometric sans it was drawn in,
   everything the site says for itself is set in a pixel mono, because the world is pixels. */

@font-face {
  font-family: "Departure Mono";
  src: url("assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #030401;
  --far: #061503;
  --mid: #0f2c01;
  --glow: #1f4401;
  --grass: #386401;
  --soil: #26150b;
  --stone: #e8d59f;
  --cream: #fdf4e1;
  --lime: #b0f805;

  --ink: var(--cream);
  --dim: #9fae86;

  --mono: "Departure Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans: "Satoshi", "Segoe UI", system-ui, sans-serif;

  --gap: clamp(14px, 2vw, 28px);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* the ground: his plate's light, plus the faint survey ticks that sit over it */
.page {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap);
  padding: var(--gap);
  padding-bottom: max(var(--gap), env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 90% at 50% 44%, var(--glow) 0%, var(--mid) 30%, var(--far) 62%, var(--void) 100%);
  overflow-x: clip;
}

.page::before {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='none' stroke='%23b0f805' stroke-width='1' opacity='.34'%3E%3Cpath d='M64 56v16M56 64h16'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ mast -- */
.mast {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.wordmark {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--cream);
}

.wordmark__dot {
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin-left: 0.14em;
  background: var(--lime);
  vertical-align: baseline;
}

.mast__line {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 19px);
  color: var(--stone);
}

.mast__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.ticker {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 20px);
  letter-spacing: 0.1em;
  color: var(--lime);
}

.signs {
  display: flex;
  gap: 8px;
}

.mast__note {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
  text-align: right;
}

.hint {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--stone);
  background: transparent;
  color: var(--cream);
  font: inherit;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

.btn[aria-disabled="true"] {
  border-color: #4b5a3a;
  color: var(--dim);
  cursor: not-allowed;
}

.btn:disabled {
  border-color: #4b5a3a;
  color: var(--dim);
  cursor: not-allowed;
}

.btn--sign {
  min-width: 68px;
}

.btn[data-state="ok"] {
  border-color: var(--lime);
  color: var(--lime);
}

.btn[data-state="bad"] {
  border-color: var(--stone);
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.btn--wallet[data-on="yes"] {
  border-color: var(--lime);
  color: var(--lime);
}

/* ---------------------------------------------------------------- picker -- */
.picker {
  width: min(400px, calc(100vw - 24px));
  padding: 0;
  border: 2px solid var(--stone);
  background: var(--void);
  color: var(--ink);
  overflow: hidden;
}

.picker::backdrop {
  background: rgba(3, 4, 1, 0.76);
}

.picker__body {
  --col: 74px;
  --rail: 16px;
  padding: 16px 18px 20px;
}

.picker__body .order__para {
  margin: 0 0 14px;
  font-size: 14px;
}

.picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.picker__wallet {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 2px solid var(--stone);
  background: transparent;
  color: var(--cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.picker__wallet:hover:not(:disabled),
.picker__wallet:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

.picker__wallet:disabled {
  border-color: #4b5a3a;
  color: var(--dim);
  cursor: progress;
}

.picker__wallet img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  image-rendering: auto;
}

.picker__blank {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--dim);
}

.picker__addr {
  overflow-wrap: anywhere;
  user-select: all;
}

.picker__body .rows {
  margin-bottom: 18px;
}

/* ------------------------------------------------------------------ plot -- */
.yard {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: 0;
}

.plot {
  position: relative;
  width: min(100%, 1040px);
  height: 100%;
  min-height: 260px;
  display: grid;
  place-items: center;
}

.plot canvas {
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

.plot__hits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lot:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 0;
}

.plot__label {
  position: absolute;
  margin: 0;
  padding: 6px 10px;
  background: var(--void);
  border: 1px solid var(--lime);
  color: var(--cream);
  font-size: 13px;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms linear;
}

.plot__label b {
  color: var(--lime);
  font-weight: 400;
}

.plot__label i {
  font-style: normal;
  color: var(--dim);
}

.plot.is-hot .plot__label {
  opacity: 1;
}

.register {
  display: none;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
  border-top: 1px solid rgba(232, 213, 159, 0.24);
}

.register__row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid rgba(232, 213, 159, 0.24);
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.register__row b {
  font-weight: 400;
  color: var(--lime);
}

.register__row em {
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
}

.register__row:hover span,
.register__row:focus-visible span {
  color: var(--lime);
}

/* ------------------------------------------------------------------ deed -- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.deed {
  position: relative;
  justify-self: start;
  max-width: 400px;
  padding: 10px 14px;
  border: 2px solid rgba(232, 213, 159, 0.4);
  background: rgba(3, 4, 1, 0.6);
}

.deed__title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}

.deed__line {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--stone);
}

.deed__rows {
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  font-size: 13px;
}

.deed__rows dt {
  color: var(--dim);
}

.deed__rows dd {
  margin: 0;
  color: var(--cream);
}

.deed__ca {
  overflow-wrap: anywhere;
  user-select: all;
}

.deed__ca[data-empty="yes"] {
  color: var(--stone);
  user-select: auto;
}

.btn--copy {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 13px;
}

/* ------------------------------------------------------------------- key -- */
.key {
  position: relative;
  justify-self: end;
  align-self: end;
  grid-row: 3;
  grid-column: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12px;
  color: var(--dim);
}

.key li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.key__sw {
  width: 10px;
  height: 10px;
  border: 1px solid;
}

.key__sw--built {
  background: var(--stone);
  border-color: var(--stone);
}
.key__sw--building {
  background: repeating-linear-gradient(45deg, var(--stone) 0 2px, transparent 2px 4px);
  border-color: var(--stone);
}
.key__sw--proposed {
  background: var(--cream);
  border-color: var(--cream);
  width: 5px;
}
.key__sw--open {
  background: transparent;
  border-color: var(--lime);
}

.deed {
  grid-row: 3;
  grid-column: 1;
}

/* --------------------------------------------------------------- dialog --- */
.order {
  width: min(560px, calc(100vw - 24px));
  max-height: min(84svh, 760px);
  padding: 0;
  border: 2px solid var(--stone);
  background: var(--void);
  color: var(--ink);
  overflow: hidden;
}

.order::backdrop {
  background: rgba(3, 4, 1, 0.76);
}

.order__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  background: var(--stone);
  color: var(--void);
}

.order__brand {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.order__close {
  min-height: 32px;
  padding: 4px 12px;
  border: 2px solid var(--void);
  background: transparent;
  color: var(--void);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.order__close:hover,
.order__close:focus-visible {
  background: var(--void);
  color: var(--stone);
}

.order__close:focus-visible {
  outline: 2px solid var(--void);
  outline-offset: 2px;
}

.order__body {
  /* one left rail and one gap for every block on the card. The estimate, the payments,
     the treasury steps and the wallet rows all hang off these two numbers, so the second
     column starts at the same x wherever you are on the card. */
  --col: 84px;
  --rail: 16px;

  max-height: calc(min(84svh, 760px) - 50px);
  overflow-y: auto;
  padding: 18px 20px 24px;
}

.order__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 213, 159, 0.28);
}

.order__n {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.order__name {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--cream);
}

/* lime is anything the reader can still act on, stone is anything already settled */
.chip {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  padding: 3px 10px;
  border: 1px solid var(--lime);
  color: var(--lime);
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.chip--built,
.chip--laid {
  border-color: var(--stone);
  color: var(--stone);
}

.chip--building {
  border-color: var(--cream);
  color: var(--cream);
}

.order__line {
  margin: 14px 0 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--cream);
}

.order__para {
  margin: 0 0 10px;
  color: var(--stone);
}

/* inside a block everything is one size, whether it is a table or a sentence */
.order__block .order__para,
.order__result .order__para {
  font-size: 14px;
}

.order__result,
.order__block {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 213, 159, 0.28);
}

.order__result h3,
.order__block h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
}

.rows {
  margin: 0;
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: 6px var(--rail);
  font-size: 14px;
}

.rows + .btn {
  margin-top: 18px;
}

.rows dt {
  color: var(--dim);
}

.rows dd {
  margin: 0;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.fine {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--dim);
}

/* shelf, steps, payments */
.shelf {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.shelf p {
  /* line up with the label inside the button above, not with the button's border */
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--dim);
}

.btn--file {
  width: 100%;
  justify-content: flex-start;
}

.steps {
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
  display: grid;
  gap: 10px;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  gap: 4px var(--rail);
  font-size: 14px;
  color: var(--stone);
}

.steps em {
  grid-column: 2;
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
}

.steps__mark {
  justify-self: start;
  align-self: start;
  padding: 1px 8px;
  border: 1px solid var(--dim);
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.steps li.is-done .steps__mark {
  border-color: var(--lime);
  color: var(--lime);
}

.steps li.is-done .steps__label {
  color: var(--cream);
}

/* the how to is prose, not a labelled rail, so it gets a marker rather than a column */
.steps--plain li {
  grid-template-columns: 16px 1fr;
  color: var(--cream);
}

.steps--plain li::before {
  content: "+";
  color: var(--lime);
}

.pay {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pay li {
  display: grid;
  grid-template-columns: var(--col) 1fr auto;
  align-items: baseline;
  gap: 2px var(--rail);
  font-size: 14px;
}

.pay__amount {
  color: var(--lime);
}

.pay__label {
  color: var(--cream);
}

.pay__state {
  grid-column: 3;
  grid-row: 1;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

/* the tool */
.tool__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.tool__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool__input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid rgba(232, 213, 159, 0.5);
  background: rgba(15, 44, 1, 0.5);
  color: var(--cream);
  font: inherit;
  font-size: 14px;
}

.tool__input:focus-visible {
  border-color: var(--lime);
}

.tool__out {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--stone);
}

.bag {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.bag li {
  display: grid;
  grid-template-columns: var(--col) 1fr auto;
  gap: var(--rail);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(232, 213, 159, 0.18);
}

.bag b {
  font-weight: 400;
  color: var(--lime);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bag span {
  color: var(--cream);
  overflow-wrap: anywhere;
}

.bag em {
  font-style: normal;
  color: var(--dim);
}

/* the vote */
.bars {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.bars li {
  display: grid;
  grid-template-columns: 1fr 92px 34px;
  align-items: center;
  gap: 10px;
  color: var(--dim);
}

.bars li.is-this {
  color: var(--cream);
}

.bars__track {
  height: 8px;
  border: 1px solid rgba(232, 213, 159, 0.4);
}

.bars__track i {
  display: block;
  height: 100%;
  background: var(--lime);
}

.bars__n {
  text-align: right;
  color: var(--cream);
}

.vote__status {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--dim);
}

.btn--vote {
  width: 100%;
}

/* a phone cannot spare 84 px of rail out of a 296 px card */
@media (max-width: 520px) {
  .order__body {
    --col: 74px;
    --rail: 10px;
  }
}

/* ------------------------------------------------------------- no scroll -- */
/* On a desktop the whole thing is one screen: the plot is the flexible row and it
   sizes itself to whatever height is left over. The lock is dropped below 620 px of
   viewport, because clipping the page there would put the contract block out of reach. */
@media (min-width: 781px) and (min-height: 620px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .page {
    height: 100svh;
    min-height: 0;
    overflow: clip;
  }

  .yard,
  .plot {
    min-height: 0;
  }
}

/* --------------------------------------------------------------- narrow --- */
@media (max-width: 780px) {
  .page {
    grid-template-rows: auto auto auto auto;
    padding: 12px;
  }

  .mast {
    align-items: flex-end;
  }

  .mast__meta {
    align-items: flex-start;
  }

  .mast__note {
    text-align: left;
  }

  .plot {
    min-height: 200px;
  }

  .register {
    display: block;
  }

  .hint {
    display: none;
  }

  .deed,
  .key {
    grid-row: auto;
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  .key {
    align-self: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plot__label {
    transition: none;
  }
}