style.css

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

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

.testingColors { 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 */
}

/* Beginner mode styles */
.beginner-container {
  width: 390px; /* Match expr input width */
  margin: 1em auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.beginner-field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.beginner-field label {
  font-size: 14px;
  color: hsl(17deg 13% 19%);
  text-align: left;
  margin-left: 4px;
}

.amount-owed {
  align-self: center;
  width: 108px;
}

.beginner-row {
  display: flex;
  gap: 2em;  /* Increased from 1em */
  width: 100%;
}

.beginner-row .beginner-field {
  flex: 1;
}

.implies-arrow {
  text-align: center;
  /* ADJUST VERTICAL WHITESPACE HERE:
     First number (0.7em) = space above arrow
     Second number (0.1em) = space below arrow */
  margin: 0.7em 0 0.1em 0;
  font-size: 24px;
  color: #666;
  font-family: "Times New Roman", serif;
}

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

input.exact-change {
  width: 100%;
  height: 24px;
  padding: 4px 8px;
  font-size: 14pt;
}

/* 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;
  padding: 0 1rem;
  max-width: 100%;
  margin: 0 auto;
}

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%;
  max-width: 250px;
  height: auto;
  position: relative;
  margin: 35px auto 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%; }

/* 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;
}

@media (max-width: 380px) {
  input {
    font-size: 14pt;
  }
  
  .button-text {
    padding: 10px 30px;
    font-size: 1.1rem;
  }
}