/* Site build view (SiteView.dc.html): the coin's page as a building site. The browser window stands on
   the ground; the yard (crate, pile of parts, tools) sits to its left, the hoist tower and crane to its
   right. Scaffold boards, poles and ladders go up level by level as the page is built from the footer
   up; the crew of capsule workers and every rig part are placed by script in whole art pixels (--p CSS
   px each: 2 on wide screens, 1 on phones). Beside it: the sections' states, the crew and the work log. */
.sv {
  --p: 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface);
}
@media (min-width: 1024px) {
  .sv { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 639px) {
  .sv { --p: 1px; }
}
.sv-stage {
  position: relative;
  min-width: 0;
  padding: 60px 72px 36px 108px;
  overflow: hidden;
}
@media (max-width: 639px) {
  .sv-stage { padding: 32px 40px 26px 12px; }
}
.sv-browser {
  background: #0b0a09;
  clip-path: var(--px-notch);
}
.sv-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px calc(var(--p) * 24) 10px 12px;
  background: var(--surface-2);
  color: var(--text-3);
  text-transform: uppercase;
}
.sv-chrome i {
  width: 8px;
  height: 8px;
  background: var(--stone-600);
}
.sv-chrome span {
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-chrome b {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
}
.sv-chrome b.is-live {
  color: var(--copper-400);
}
.sv-page {
  display: grid;
  gap: 18px;
  padding: 18px 18px 0;
}
.sv-sec {
  position: relative;
  min-height: 44px;
  padding: 14px;
  outline: 1px dashed var(--stone-600);
  outline-offset: -1px;
}
.sv-sec[data-state="scaffold"],
.sv-sec[data-state="building"] {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 12px);
  outline-color: var(--stone-500);
}
.sv-sec[data-state="checking"] {
  outline: 2px solid var(--copper-400);
}
.sv-sec[data-state="done"] {
  outline-color: transparent;
}
.sv-chip {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 1px 6px;
  background: var(--surface-2);
  color: var(--text-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-sec[data-state="building"] .sv-chip,
.sv-sec[data-state="checking"] .sv-chip {
  background: var(--accent);
  color: #fff;
}
.sv-sec[data-state="done"] .sv-chip {
  color: var(--copper-400);
}
/* parts: hidden on the blueprint, grey blocks on the scaffold, themselves once placed */
.sv-sec[data-state="planned"] .sv-part {
  visibility: hidden;
}
.sv-part:not(.is-on) {
  color: transparent !important;
  background: var(--surface-2) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.sv-part:not(.is-on) * {
  visibility: hidden;
}
.sv-part.is-target {
  outline: 2px dashed var(--copper-400);
  outline-offset: 2px;
  animation: sv-mark 0.6s steps(2, end) infinite;
}
@keyframes sv-mark {
  50% { outline-color: transparent; }
}
.sv-part.is-on {
  animation: sv-pop 0.42s steps(3, jump-none);
}
@keyframes sv-pop {
  from { transform: scale(0.92); outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* the coin's page itself */
.sv-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sv-logo {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--accent);
  clip-path: var(--px-notch);
}
.sv-brand {
  min-width: 2.5em;
  min-height: 1em;
  color: #fff;
  font-weight: 400;
}
.sv-links {
  display: flex;
  gap: 8px;
  min-height: 8px;
  margin-left: auto;
}
.sv-links i {
  width: 34px;
  height: 6px;
  background: var(--stone-500);
}
.sv-btn {
  display: inline-block;
  justify-self: start;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  clip-path: var(--px-notch);
}
.sv-btn--sm {
  padding: 3px 8px;
}
.sv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
@media (min-width: 900px) {
  .sv-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.sv-hero-text {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.sv-h {
  min-height: 1.15em;
  margin: 0;
  color: #fff;
  font: 400 28px/1.1 var(--font-display, 'IL Serif', Georgia, serif);
}
.sv-p {
  min-height: 2.6em;
  margin: 0;
  color: var(--text-2);
}
.sv-art {
  display: block;
  min-height: 120px;
  background: #000 url(../assets/9891243aa47384d9d2b24b8ce2597815.png) center bottom / cover no-repeat;
  image-rendering: pixelated;
}
.sv-art.is-on {
  animation: sv-paint 1.4s steps(8, jump-none);
}
@keyframes sv-paint {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0); }
}
.sv-stats,
.sv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sv-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
}
.sv-stat i {
  color: var(--text-3);
  font-style: normal;
  text-transform: uppercase;
}
.sv-stat b {
  color: #fff;
  font-weight: 400;
}
.sv-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
}
.sv-card b {
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
}
.sv-card > i {
  height: 5px;
  background: var(--stone-600);
}
.sv-card > i + i {
  width: 70%;
}
.sv-foot-in {
  display: flex;
  gap: 12px;
  min-height: 6px;
}
.sv-foot-in i {
  width: 60px;
  height: 6px;
  background: var(--stone-600);
}
@media (max-width: 639px) {
  .sv-page { gap: 14px; padding: 12px 12px 0; }
  .sv-links { display: none; }
  .sv-h { font-size: 22px; }
  .sv-stats, .sv-cards { grid-template-columns: minmax(0, 1fr); }
  .sv-card > i { display: none; }
}
/* the ground, the rig and the crew */
.sv-ground {
  height: 10px;
  background:
    repeating-linear-gradient(90deg, #3d3934 0 2px, transparent 2px 6px) 0 2px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, #292623 3px 5px) 0 6px / 100% 2px no-repeat,
    #201c19;
  box-shadow: 0 -2px 0 #645e54;
}
.sv-rig {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sv-rig > * {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  will-change: transform;
}
.sv-tower {
  width: calc(var(--p) * 30);
  background: url(../assets/6aebd476536e9044d51328e600a79852.png) 0 0 / calc(var(--p) * 30) calc(var(--p) * 36) repeat-y;
}
.sv-crane {
  width: calc(var(--p) * 36);
  height: calc(var(--p) * 44);
  background: url(../assets/b56e0dde57d32cabfedea0a4acc0e0e6.png) 0 0 / 100% 100% no-repeat;
}
.sv-rope {
  width: calc(var(--p) * 3);
  background: url(../assets/1a3cb31a5a41608742060c997bb367fe.png) 0 0 / calc(var(--p) * 3) calc(var(--p) * 2) repeat-y;
}
.sv-hook {
  width: calc(var(--p) * 10);
  height: calc(var(--p) * 16);
  background: url(../assets/51c065da9296b188c35892c7e9d6eb06.png) 0 0 / 100% 100% no-repeat;
}
/* what hangs on the hook: a part (a white block), a scaffold board or a ladder lying flat */
.sv-load {
  position: absolute;
  display: none;
  left: 50%;
  top: 100%;
  image-rendering: pixelated;
}
.sv-load.is-part {
  display: block;
  width: calc(var(--p) * 12);
  height: calc(var(--p) * 9);
  margin-left: calc(var(--p) * -6);
  background: #fff;
  box-shadow: inset 0 calc(var(--p) * -3) 0 #9f9b92, inset 0 0 0 var(--p) #000;
}
.sv-load.is-plank {
  display: block;
  width: calc(var(--p) * 40);
  height: calc(var(--p) * 5);
  margin-left: calc(var(--p) * -20);
  background:
    url(../assets/c2e767d74774f0e6b28e5d85a1a10d74.png) left top / calc(var(--p) * 4) calc(var(--p) * 5) no-repeat,
    url(../assets/995353b90ee56f0de144534945317681.png) right top / calc(var(--p) * 4) calc(var(--p) * 5) no-repeat,
    url(../assets/4e3a1bf565bc26a60e7a9af409582dc1.png) 0 0 / calc(var(--p) * 8) calc(var(--p) * 5) repeat-x;
}
.sv-load.is-ladder {
  display: block;
  width: calc(var(--p) * 14);
  height: calc(var(--p) * 35);
  margin-left: calc(var(--p) * -7);
  background: url(../assets/1ee8862ee6e4c7b6c7a43a7464a74f47.png) 0 0 / calc(var(--p) * 14) calc(var(--p) * 7) repeat-y;
  transform: translateY(calc(var(--p) * -11)) rotate(90deg);
}
/* scaffold boards with a pole down to the level below at each end */
.sv-plank {
  height: calc(var(--p) * 5);
  background:
    url(../assets/c2e767d74774f0e6b28e5d85a1a10d74.png) left top / calc(var(--p) * 4) calc(var(--p) * 5) no-repeat,
    url(../assets/995353b90ee56f0de144534945317681.png) right top / calc(var(--p) * 4) calc(var(--p) * 5) no-repeat,
    url(../assets/4e3a1bf565bc26a60e7a9af409582dc1.png) 0 0 / calc(var(--p) * 8) calc(var(--p) * 5) repeat-x;
}
.sv-plank.is-set::before,
.sv-plank.is-set::after {
  content: "";
  position: absolute;
  top: 100%;
  width: calc(var(--p) * 4);
  height: var(--h, 0);
  background: url(../assets/bb93e88cb7fb3d3294b11d133b262081.png) 0 0 / calc(var(--p) * 4) var(--p) repeat-y;
}
.sv-plank.is-set::before { left: 0; }
.sv-plank.is-set::after { right: 0; }
.sv-ladder {
  width: calc(var(--p) * 14);
  background:
    url(../assets/7a69779d664441001029d2dc0da61c55.png) 0 0 / calc(var(--p) * 14) calc(var(--p) * 3) no-repeat,
    url(../assets/1ee8862ee6e4c7b6c7a43a7464a74f47.png) 0 calc(var(--p) * 3) / calc(var(--p) * 14) calc(var(--p) * 7) repeat-y;
}
.sv-plank.is-off,
.sv-ladder.is-off {
  animation: sv-strike 0.36s steps(3, end) forwards;
}
@keyframes sv-strike {
  to { opacity: 0; translate: 0 calc(var(--p) * 12); }
}
/* the yard */
.sv-yard--crate {
  width: calc(var(--p) * 22);
  height: calc(var(--p) * 23);
  background: url(../assets/411d37253f7ad590946af86eb5ee9e35.png) 0 0 / 100% 100% no-repeat;
}
.sv-yard--pile {
  width: calc(var(--p) * 20);
  height: calc(var(--p) * 19);
  background: url(../assets/a8fb162e8458b56c64b6405e60930814.png) 0 0 / 100% 100% no-repeat;
}
.sv-yard--tools {
  width: calc(var(--p) * 18);
  height: calc(var(--p) * 17);
  background: url(../assets/4369adbed3c2d78edea8c39cbfe7fae4.png) 0 0 / 100% 100% no-repeat;
}
.sv-roofflag {
  width: calc(var(--p) * 13);
  height: calc(var(--p) * 22);
  background: url(../assets/39042c67329b18d70d16f75cd1859b0a.png) 0 0 / 100% 100% no-repeat;
}
.sv-bot {
  --s: calc(var(--p) * 26);
  animation-duration: 0.44s;
}
.sv-bot.bot--hammer { animation-duration: 0.4s; }
.sv-bot.bot--flag { animation-duration: 0.6s; }
.sv-bot.bot--lantern { animation-duration: 0.8s; }
/* poses beyond .bot's five: climbing (from behind), reaching up, pointing with the blueprint, sitting,
   and a ladder carried on the shoulder (two cells wide) */
.bot2 {
  --s: 52px;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  background: url(../assets/515c79a2c322149a0f4f5a0b2f82c53d.png) 0 0 / calc(var(--s) * 4) calc(var(--s) * 7) no-repeat;
  image-rendering: pixelated;
}
.bot2--climb { background-position-y: 0; animation: bot2-4 0.48s steps(4) infinite; }
.bot2--push { background-position-y: calc(var(--s) * -1); animation: bot2-a 0.5s steps(2) infinite; }
.bot2--rope { background-position-y: calc(var(--s) * -1); animation: bot2-b 0.5s steps(2) infinite; }
.bot2--sit { background-position-y: calc(var(--s) * -2); animation: bot2-a 0.9s steps(2) infinite; }
.bot2--point { background-position-y: calc(var(--s) * -2); animation: bot2-b 0.8s steps(2) infinite; }
.bot2--type { background-position-y: calc(var(--s) * -3); animation: bot2-a 0.36s steps(2) infinite; }
.bot2--read { background-position-y: calc(var(--s) * -3); animation: bot2-b 1.2s steps(2) infinite; }
.bot2--folder { background-position-y: calc(var(--s) * -4); animation: bot2-a 0.4s steps(2) infinite; }
.bot2--hand { background-position-y: calc(var(--s) * -4); animation: bot2-b 0.7s steps(2) infinite; }
.bot2--pin { background-position-y: calc(var(--s) * -5); animation: bot2-a 0.6s steps(2) infinite; }
.bot2--ladder { width: calc(var(--s) * 2); background-position-y: calc(var(--s) * -6); animation: bot2-4 0.5s steps(2) infinite; }
.bot2--still { animation: none; }
@keyframes bot2-4 { from { background-position-x: 0; } to { background-position-x: calc(var(--s) * -4); } }
@keyframes bot2-a { from { background-position-x: 0; } to { background-position-x: calc(var(--s) * -2); } }
@keyframes bot2-b { from { background-position-x: calc(var(--s) * -2); } to { background-position-x: calc(var(--s) * -4); } }
@media (prefers-reduced-motion: reduce) {
  .bot2 { animation: none; }
}
/* side: section states and the work log */
.sv-side {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--surface-2);
}
@media (min-width: 1024px) {
  .sv-side {
    border-top: 0;
    border-left: 1px solid var(--surface-2);
  }
}
.sv-secs,
.sv-log {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.sv-secs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-2);
}
.sv-state {
  padding: 1px 6px;
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 400;
  text-transform: uppercase;
}
.sv-state.is-scaffold {
  color: var(--text-2);
}
.sv-state.is-building,
.sv-state.is-checking {
  background: var(--accent);
  color: #fff;
}
.sv-state.is-done {
  color: var(--copper-400);
}
.sv-log li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  color: var(--text-2);
}
.sv-log time {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.sv-log li.is-a,
.sv-log li.is-b {
  animation: cs-new-a 0.6s steps(3, end);
}
.sv-empty {
  margin: 0;
  color: var(--text-3);
}
.sv-crewline {
  margin: 0 0 8px;
  color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .sv-part.is-target,
  .sv-plank.is-off,
  .sv-ladder.is-off,
  .sv-part.is-on,
  .sv-art.is-on,
  .sv-log li.is-a,
  .sv-log li.is-b {
    animation: none;
  }
}

/* the coin's colour: its page and its crew turn from copper to it */
.sv-stage {
  filter: hue-rotate(var(--hue, 0deg));
}