style.css

@import url('https://fonts.cdnfonts.com/css/hk-groteks');

:root { --color-bg: #f4f0bb; }

/* Apparently this isn't used anywhere? Bethany? #SCHDEL
.thing {
color: #da2c38
#43291f
#f4f0bb
#226f54
#87c38f
}
*/

body {
  font-family: HK Grotesk;
  color: hsl(17deg 13% 19%);
  background-color: var(--color-bg);
}

h1 { color: hsl(17deg 13% 19%); }

/* These seem like standardish recommendations for prose on web pages? */
p {
  font-size: 18px;
  max-width: 600px;
  line-height: 145%; /* the max that practicaltypography.com recommends */
}

/* Fancy distinctive display of examples of text the user can type in the 
Expectorant input field */
code {
  padding: 2px 4px;
  color: #d14;
  white-space: nowrap;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

/* Put the version in itty-bitty gray font in the bottom corner of the page */
.versiontag {
  /* color: hsla(17deg 13% 19% 20%); */
  color: #999999;
  font-size: 9px;
  position: fixed;
  bottom: 0;
  right: 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

button {
  background: hsl(159deg 53% 28%);
  border-radius: 12px;
  border: none;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
}
.button-text {
  display: block;
  padding: 12px 42px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: hsl(128deg 33% 65%);
  transform: translateY(-6px);
}
button:active .button-text {
  transform: translateY(-2px);
}

.spin-wrap {
	width: 100%;
	height: 100%;
	position: relative;
  margin-top: 35px;
  margin-bottom: 25px;
}
#spinneroo, :before, :after {
  box-sizing:border-box;
  margin:0;
  padding:0;
} 
#spinneroo {
	max-width: 250px;
  max-height: 250px;
  position: relative;
  margin: auto;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #ffffff;
	box-shadow: 0px 2px 5px 1px rgba(0,0,0, 0.3);
}

/* Little pointer triangle at the top of the spinner */
#spinneroo:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 14px;
  height: 30px;
  margin-left: -7px;
  margin-bottom: -5px;
  border-style: solid;
  border-color: transparent;
  border-width: 7px;
  border-bottom: 0px;
  border-top: 30px solid #FFA514;
}

/* .spin */
#spinneroo { transform-origin: 50% 50%; }

input {
  height: 24px;
  padding: 8px;
  font-size: 16pt;
  width: 390px; /* 390px is just enough for the placeholder text */
}

input.exact-change {
  width: 335px;
}

/* Bee doesn't like the "p=0.123" being gray. Dreev kinda does. The idea was to
deemphasize it a lot because it's just there as a sanity check -- mostly you
care about your representation of the probability that you typed (like your 
"1/4", not the "0.25") and the spinner, which also shows the probability, as a 
percentage. That was also the rationale for having it off to the side, when it
fits there, or right below what you're typing otherwise. Having it normal text
color and centered would slightly miss the point. As a highlighted output, it's
redundant. The idea is to just have it as a very down-popped real-time check on
what you're typing. Like the computer whispering "just to be sure, here's what
I'm hearing you as saying". The percentages on the spinner mostly already do
that but it might not be enough if you type something like "1/200" so I find it
reassuring to have that extra "here's the exact eval on what you typed". It's
kind of an anti-magic provision.
Anyway, we'll see if any of that is persuasive to Bee! She's the one with the 
best aesthetic sense for such things. 
PS: I added an "n=123" on the right as well and also think of that as something
that wants down-popped a lot. */
#prob-wrap { color: #999999; }
#counter-wrap { 
  color: #999999; 
  float: right;
}