:root {
  --chat-max-width: 480px;
  --chat-bubble-width: calc(min(85vw, .85 * var(--chat-max-width)));
  --response-h-padding: 2ex;
  --slider-thumb-width: 2.75ex;
  --bubble-radius: 2ex;
  --response-bg: #58e;
  --response-bg-active: #3af;
  --response-bg-muted: #58e;
  --white-on-bg: #abf;
  --transition-time: 0.2s;
  --mostly-opaque: .66;
}

.no-transitions * {
  transition: none !important;
}

.no-animations * {
  animation-delay: 0s !important;
  animation-duration: 0s !important;
}

.no-animations .chilling .response-container,
.no-animations .pending,
.no-animations .item.typing .response-container {
  display: block !important;
}

.no-animations .item.typing .prompt>span {
  display: inline !important;
}

.no-animations img.typing {
  display: none !important;
}

.no-animations .item.typing .prompt.emoji {
  font-size: 250%;
  background: transparent;
  padding: 0 0.5ex;
}

body {
  margin: 0;
  /* 1ex; */
  background: #fff;
  color: #222;
  /*
  font: 16px/1.35 "Source Serif 4 Variable", Georgia, serif;
  font-variation-settings: "opsz" 19;
  */
  /* opsz: default here is 16, but 18 – 20 is better */

  font: 430 18px/1.33 "Jost*", sans-serif;
  font-feature-settings: "ss01" 1;
  /* "ss01" 1 => rounded lowercase a */
}

* {
  /* block pinch-to-zoom */
  touch-action: pan-y;
}

#translation {
  padding: 2em 5em;
  white-space: pre-wrap;
  font: 14px 'Monaco', 'Menlo', monospace;
  user-select: text;
  -webkit-user-select: text;
}

.chat-container,
.home-container {
  /* block text selection and text size changes (main UI only) */
  user-select: none;
  -webkit-user-select: none;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

.chat-container {
  margin: auto;
  padding: 1ex;
  max-width: var(--chat-max-width);
}

.home-main-gradient {
  height: 60px;
  background: linear-gradient(90deg, #31FFDE 0, #FFD12F 75%);
}

.home-additional-gradient {
  width: 60%;
  height: 60px;
  position: absolute;
  top: 30px;
  right: 0;
  background: linear-gradient(90deg, #58e 0, #f66 90%);
}

.home-background {
  background-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 10;
}

.home-container {
  margin: auto;
  max-width: var(--chat-max-width);
  background: #fff;
  position: relative;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sml {
  font-size: 50%;
}

.unconfirmed .touched {
  background: var(--response-bg-active);
}

b {
  font-weight: 600;
}

i {
  /* Chrome needs this: https://bugs.chromium.org/p/chromium/issues/detail?id=1064756 */
  font-variation-settings: "ital" 1;
}

#photoinputform {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#photoinput {
  user-select: none;
  -webkit-user-select: none;
}

#chat {
  padding: 1ex 0 12ex;
}

.not-found {
  color: #f00;
}

.response-container {
  text-align: right;
}

.prompt,
.response {
  display: inline-block;
  max-width: var(--chat-bubble-width);
  box-sizing: border-box;
  padding: 1.2ex var(--response-h-padding) 1.1ex;
  margin: 0.1ex 0;
  border-radius: var(--bubble-radius);
  overflow: hidden;
  text-align: left;
}

.unresponded .response {
  cursor: pointer;
}

.prompt+.response-container,
.item.has-response+.item.has-prompt {
  margin-top: 1.35ex;
}

.item:not(.typing) .prompt.emoji {
  font-size: 250%;
  background: transparent;
  padding: 0 0.5ex;
}

.item.pending {
  display: none;
}

.item.typing .prompt>img.typing {
  display: block;
}

.item img.typing {
  display: none;
}

.item.typing img.typing {
  display: block;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.item.typing .prompt>span,
.item.typing .response-container {
  display: none;
}

.item.chilling .response-container {
  display: none;
}

.item.typing .info {
  opacity: 0;
}

.response-container {
  opacity: 0;
  animation: fade-in var(--transition-time) linear var(--transition-time) forwards;
}

.hide-info .info {
  opacity: 0;
  transition: opacity var(--transition-time);
}

.unpadded {
  padding: 0;
}

.prompt {
  border-bottom-left-radius: 0;
  background: #ddd;
  color: #222;
}

.response {
  position: relative;
  border-bottom-right-radius: 0;
  background: var(--response-bg);
  transition: background var(--transition-time);
  color: #fff;
}

.filter>div>.response {
  color: inherit;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--bubble-radius);
  padding-left: 4.5ex;
  background-image: url(images/search.svg);
  background-position: 1.5ex 50%;
  background-size: 2ex 2ex;
  background-repeat: no-repeat;
}

.transparent {
  background: transparent !important;
}

.response.green-bg {
  background: #9c6 !important;
}

.response.amber-bg {
  background: #ec3 !important;
}

.response.red-bg {
  background: #d35 !important;
}

.response.white-outlined {
  background: #fff !important;
  border: 1px solid #ccc;
}

.confirmed .response {
  background: var(--response-bg-muted);
}

.no-location {
  color: #bbb;
  text-align: center;
  padding: 1.75ex 3ex;
}

.no-location:before {
  --noloc-symbol-size: 2.2ex;
  display: inline-block;
  content: " ";
  background-image: url(images/no-location.svg);
  background-size: var(--noloc-symbol-size) var(--noloc-symbol-size);
  height: var(--noloc-symbol-size);
  width: var(--noloc-symbol-size);
  margin: -0.3ex 1ex 0 0;
  vertical-align: middle;
}

.info {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .9);
  transition: opacity var(--transition-time) calc(var(--transition-time) * 3);
  color: #bbb;
  text-align: center;
  padding: 1.75ex 3ex;
}

.info:before {
  --info-symbol-size: 2.2ex;
  display: inline-block;
  content: " ";
  background-image: url(images/info.svg);
  background-size: var(--info-symbol-size) var(--info-symbol-size);
  height: var(--info-symbol-size);
  width: var(--info-symbol-size);
  margin: -0.3ex 1ex 0 0;
  vertical-align: middle;
}

.filter .confirm {
  display: none;
}

.confirm {
  --check-symbol-w: 2.75ex;
  --check-symbol-h: 2.53ex;
  display: inline-block;
  margin: 0 1.75ex calc(var(--bubble-radius) / 1.75) 0;
  width: var(--check-symbol-w);
  height: var(--check-symbol-h);
  /* border-radius: calc(var(--check-symbol-size) / 2); */
  background: center/var(--check-symbol-w) var(--check-symbol-h) no-repeat;
  transition: opacity var(--transition-time), margin var(--transition-time);
  vertical-align: bottom;
}

.confirm.disabled {
  background-image: url(images/enter-disabled.svg);
}

.confirm.enabled {
  background-image: url(images/enter.svg);
}

.confirm.skip {
  background-image: url(images/enter.svg);
}

.selectnumber {
  width: calc(var(--chat-bubble-width) - 2 * var(--response-h-padding));
  position: relative;
  height: 4.5ex;
}

.selectnumber .numbers-line {
  position: absolute;
  height: 1px;
  background: var(--white-on-bg);
  top: 1.75ex;
  width: calc(var(--chat-bubble-width) - 2 * var(--response-h-padding));
  transition: background var(--transition-time);
}

.selectnumber-opt {
  position: absolute;
  font-weight: 600;
  line-height: 1.3;
  width: 3.45ex;
  height: 3.45ex;
  overflow: hidden;
  border-radius: 1.725ex;
  box-sizing: border-box;
  text-align: center;
  background: var(--response-bg);
  border: 3px solid var(--response-bg);
}

.responded .selectnumber-opt {
  background: var(--response-bg-muted);
  border: 3px solid var(--response-bg-muted);
  color: var(--white-on-bg);
}

.responded .selectnumber .numbers-line {
  background: var(--white-on-bg);
}

.responded .selectnumber-opt.selected {
  background: #fff;
  color: var(--response-bg-muted);
  z-index: 10;
}

.slider {
  width: calc(var(--chat-bubble-width) - 2 * var(--response-h-padding));
  padding: 2.9ex 0 2.7ex;
}

.slider.tall {
  padding-top: 3.9ex;
}

.responded .slider {
  background-image: url(images/slider-arrow.svg);
  background-repeat: no-repeat;
  background-size: var(--slider-thumb-width) calc(var(--slider-thumb-width) / 2.4 * 2.1);
  background-position-y: 0.3ex;
}

.responded .slider.tall {
  background-position-y: 1.3ex;
}

.slider-track {
  height: 0.67ex;
  margin: 0 calc(var(--slider-thumb-width) / 2);
  border-top: 2px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.confirmed .slider-track {
  border-top-color: var(--white-on-bg);
  border-left-color: var(--white-on-bg);
  border-right-color: var(--white-on-bg);
}

.selectnumber-min,
.selectnumber-max,
.slider-min,
.slider-mid,
.slider-max {
  font-size: 80%;
  font-weight: 600;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.125ex;
  line-height: .925;
}

.slider-min,
.slider-mid,
.slider-max {
  margin-top: 1.8ex;
  padding: 0 calc(var(--slider-thumb-width) / 2);
}

.selectnumber-min,
.selectnumber-max {
  margin-top: 6ex;
}

.selectnumber-min,
.slider-min {
  float: left;
}

.selectnumber-max,
.slider-max {
  float: right;
  text-align: right;
}

.slider-mid,
.selectnumber-mid {
  display: block;
  position: absolute;
  text-align: center;
  box-sizing: border-box;
  width: calc(var(--chat-bubble-width) - 2 * var(--response-h-padding) / .75);
}

.slider-caption {
  position: absolute;
  min-width: 5ex;
  text-align: center;
  top: .9ex;
  font-weight: 600;
  background: #fff;
  padding: 2px 8px 1px;
  border-radius: 7px;
  color: var(--response-bg);
  white-space: nowrap;
}

.unconfirmed .touched .slider-caption {
  color: var(--response-bg-active);
}

.item.unconfirmed .selectmany-opt.unselected,
.item.unconfirmed .selectmany-opt.selected {
  position: relative;
  padding-left: 5ex;
}

.item .selectmany-opt.selected:before {
  --check-symbol-size: 1.8ex;
  display: block;
  position: absolute;
  left: 1.5ex;
  top: 1.65ex;
  content: " ";
  background-image: url(images/check.svg);
  background-size: var(--check-symbol-size) var(--check-symbol-size);
  height: var(--check-symbol-size);
  width: var(--check-symbol-size);
  transition: opacity var(--transition-time);
}

.item .selectmany-opt.condensed.selected:before {
  top: 1.2ex;
}

.item .selectmany-opt.condensed.selected:first-child:before {
  top: 1.45ex;
}

.item.confirmed .selectmany-opt.selected:before {
  opacity: 0;
}

.selectmany-opt,
.selectone-v-opt {
  padding: 1.2ex var(--response-h-padding);
  border-bottom: .5px solid var(--white-on-bg);
  transition: all var(--transition-time);
  max-width: var(--chat-bubble-width);
  max-height: 5em;
}

.selectmany-opt.disabled {
  color: var(--white-on-bg);
}

.selectmany-opt.condensed,
.selectone-v-opt.condensed {
  padding-top: .7ex;
  padding-bottom: .7ex;
}

.selectmany-opt.condensed:first-child,
.selectone-v-opt.condensed:first-child {
  padding-top: .95ex;
}

.selectmany-opt.condensed:last-child,
.selectone-v-opt.condensed:last-child {
  padding-bottom: .95ex;
}

.item.confirmed .selectmany-opt.condensed,
.selectone-v.responded .selectone-v-opt.condensed {
  padding: 1.2ex var(--response-h-padding);
}

.item.confirmed .selectmany-opt.condensed,
.item.confirmed .selectmany-opt {
  padding-bottom: 0;
}

.item.confirmed .selectmany-opt.last-selected {
  padding-bottom: 1.2ex;
}

.selectmany-opt:first-child,
.selectone-v-opt:first-child {
  border-top-left-radius: var(--bubble-radius);
  border-top-right-radius: var(--bubble-radius);
}

.selectmany-opt:last-child,
.selectone-v-opt:last-child {
  border: none;
  border-bottom-left-radius: var(--bubble-radius);
}

.separator {
  height: 1.5px;
  background: var(--white-on-bg);
}

.item.confirmed .separator {
  display: none;
}

.item.confirmed .selectmany-opt,
.selectone-v.responded .selectone-v-opt {
  border-bottom: 0px solid rgba(255, 255, 255, 0);
}

.item.confirmed .selectmany-opt.unselected,
.selectone-v.responded .selectone-v-opt.unselected {
  font-size: 0;
  padding: 0;
  max-width: 0;
  max-height: 0;
  opacity: 0;
}

.selectone-h-opt {
  display: inline-block;
  padding: 1.2ex 1.8ex 1.1ex;
  border-right: 1px solid var(--white-on-bg);
  transition: all var(--transition-time);
  max-width: var(--chat-bubble-width);
  max-height: 5em;
}

.selectone-h-opt:first-child {
  padding-left: var(--response-h-padding);
  border-top-left-radius: var(--bubble-radius);
  border-bottom-left-radius: var(--bubble-radius);
}

.selectone-h-opt:last-child {
  padding-right: var(--response-h-padding);
  border: none;
  border-top-right-radius: var(--bubble-radius);
}

.selectone-h.responded .selectone-h-opt {
  border-right: 0px solid rgba(255, 255, 255, 0);
  /* font-size: 100%; */
}

.selectone-h.responded .selectone-h-opt.unselected,
.selectone-tags.responded .selectone-tags-opt.unselected {
  font-size: 0;
  padding: 0;
  max-height: 0;
  max-width: 0;
  opacity: 0;
}

.selectone-tags {
  text-align: right;
}

.selectone-tags-opt {
  display: inline-block;
  background: var(--response-bg);
  border-radius: var(--bubble-radius);
  padding: 1.2ex 1.8ex 1.1ex;
  margin: 0 0 .7ex .75ex;
  transition: all var(--transition-time);
}

.textentry {
  position: relative;
}

.textentry textarea,
.textentry textarea:disabled {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  line-height: inherit;
  background: transparent;
  font: inherit;
  border: none;
  outline: none;
  color: #fff;
  caret-color: #fff;
  padding: 0;
  margin: 0;
  min-width: 2ex;
  min-height: 1em;
  opacity: 1;
  overflow: hidden;
  resize: none;
}

/* 
.textentry.skipped textarea,
.textentry.skipped .phantom {
  font-weight: 600;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.125ex;
} 
*/

.textentry textarea::placeholder {
  color: var(--white-on-bg);
}

.textentry .phantom {
  visibility: hidden;
  white-space: pre-wrap;
  min-width: 2ex;
  min-height: 1em;
}

.filter .textentry textarea {
  color: inherit;
  caret-color: inherit;
  resize: none;
}

.filter .textentry textarea::placeholder {
  color: #ccc;
}

.photo .camera-icon {
  --camera-symbol-size: 3.2ex;
  width: var(--camera-symbol-size);
  height: var(--camera-symbol-size);
  padding: 1.6ex 2.8ex;
  background: 50% 50% / var(--camera-symbol-size) url(images/camera.svg) no-repeat;
}

.photo .processing-icon {
  --hourglass-symbol-size: 3.2ex;
  width: var(--hourglass-symbol-size);
  height: var(--hourglass-symbol-size);
  padding: 1.6ex 2.8ex;
  background: 50% 50% / 2.5ex url(images/hourglass.svg) no-repeat;
}

.photo img.pic,
.photo canvas.pic {
  display: block;
  max-width: var(--chat-bubble-width);
  max-height: var(--chat-bubble-width);
  border-radius: var(--bubble-radius);
  border-bottom-right-radius: 0;
}

.infosheet-icon {
  --infosheet-symbol-size: 3.2ex;
  width: var(--infosheet-symbol-size);
  height: var(--infosheet-symbol-size);
  padding: 1.6ex 2.8ex;
  background: 50% 50% / var(--infosheet-symbol-size) url(images/infosheet.svg) no-repeat;
}

.infosheet-check-icon {
  --infosheet-check-symbol-size: 2ex;
  position: absolute;
  top: 1.25ex;
  left: 1.15ex;
  width: var(--infosheet-check-symbol-size);
  height: var(--infosheet-check-symbol-size);
  padding: 1.6ex 0 1.6ex 4ex;
  background: 50% 50% / var(--infosheet-check-symbol-size) url(images/check.svg) no-repeat;
}

.await-gps {
  width: 250px;
  height: 250px;
  background: center/28px 28px no-repeat url(images/puff.svg);
}

.await-gps img {
  display: block;
  margin: calc(250px / 2 - 28px / 2) 0 0 calc(250px / 2 - 28px / 2);
  width: 28px;
  height: 28px;
}

.await-gps span {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ccc;
  border-top-left-radius: 10px;
  padding: 2px 8px 1px 10px;
}

img.gps-map {
  display: block;
  width: 250px;
  height: 250px;
}

.map {
  width: 250px;
  height: 250px;
  pointer-events: none;
}

.map * {
  pointer-events: none !important;
}

#undo {
  --undo-symbol-size: 2.4ex;
  z-index: 1100;
  position: fixed;
  top: 1.25ex;
  right: 1ex;
  width: 5ex;
  height: 5ex;
  background: 50% 42.5% / var(--undo-symbol-size) var(--undo-symbol-size) url(images/undo.svg) no-repeat /* rgba(255, 255, 255, var(--mostly-opaque)) */;
  border-radius: 2.5ex;
  transition: opacity var(--transition-time);
}

#undo.disabled {
  background-image: url(images/undo-disabled.svg);
}

.navigable #undo {
  opacity: 0;
}

.navigable.new-moving-left-to-top #undo,
.navigable.top #undo {
  opacity: 1;
}

#scroll-to-bottom {
  --scroll-symbol-size: 3.3ex;
  z-index: 29;
  position: fixed;
  bottom: 13ex;
  left: 1ex;
  width: 5ex;
  height: 5ex;
  border-radius: 2.5ex;
  background: 50% 42.5% / var(--scroll-symbol-size) var(--scroll-symbol-size) url(images/chevron-down.svg) no-repeat rgba(255, 255, 255, var(--mostly-opaque));
  opacity: 0;
  transition: opacity var(--transition-time);
  pointer-events: none;
}

.scrolled-up .navigable.new-moving-left-to-top #scroll-to-bottom,
.scrolled-up .navigable.top #scroll-to-bottom {
  opacity: 1;
  pointer-events: auto;
}

#reset {
  --reset-symbol-size: 3.3ex;
  z-index: 1100;
  position: fixed;
  top: 1.25ex;
  right: 6.5ex;
  width: 5ex;
  height: 5ex;
  border-radius: 2.5ex;
  background: 50% 50% / var(--reset-symbol-size) var(--reset-symbol-size) url(images/reset.svg) no-repeat rgba(255, 255, 255, var(--mostly-opaque));
}

#log {
  z-index: 20;
  white-space: pre-wrap;
  font: 8px bold Monaco, Menlo, monospace;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5ex 2ex;
  overflow: scroll;
}

.chat-summary {
  margin-left: 32ex;
  user-select: text;
  -webkit-user-select: text;
}

.chat-summary,
#toc {
  font: 14px/1.5 sans-serif;
}

#toc {
  position: fixed;
  top: 2ex;
  left: 4ex;
  width: 28ex;
  font-size: 13px;
}

.toc-list-item {
  margin-bottom: .5ex;
  margin-top: .5ex;
}

#toc a {
  text-decoration: none;
}

hr {
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 1ex 0;
}

.item-link {
  cursor: pointer;
  text-decoration: underline;
}

.item-summary {
  margin: 1ex 0 4ex;
}

.notes {
  margin: 1em 0 1.5em;
  font-style: italic;
}

pre {
  background: #eee;
  font: 13px/1.5 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace;
  white-space: pre-wrap;
  padding: 1ex 2ex;
}

.item-id,
.item-key,
.item-conditional {
  text-transform: lowercase;
  font-variant: small-caps;
}

.item-skipif,
.item-showif,
.custom-jump {
  position: relative;
  padding-left: 10ex;
}

.item-skipif:before,
.item-showif:before,
.custom-jump:before {
  display: block;
  font-size: 80%;
  letter-spacing: 0.1ex;
  padding: 0.2ex 1ex;
  background: #888;
  color: #fff;
  position: absolute;
  left: 0;
}

.item-skipif:before {
  content: 'SKIP IF';
}

.item-showif:before {
  content: 'SHOW IF';
}

.custom-jump:before {
  content: 'JUMP TO';
}

.item-key {
  color: #999;
  display: inline-block;
  min-width: 16ex;
  margin-right: 1em;
}

.item-type {
  font-style: italic;
  font-variation-settings: "ital" 1;
  margin: 0.5ex 0;
}

.item-prompt {
  font-size: 110%;
  margin: 0.5ex 0 1ex;
}

.item .map {
  border: 1px solid #ccc;
}

.leaflet-bottom.leaflet-right {
  padding: 0 0 3px 10px !important;
}

.leaflet-control-attribution {
  text-align: right !important;
  line-height: 1.15 !important;
  font-size: 75% !important;
}

.leaflet-control-attribution a {
  color: inherit !important;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 5px 3px #58e;
  }

  to {
    box-shadow: 0 0 1px 1px #58e;
  }
}

.leaflet-div-icon {
  width: 8px !important;
  height: 8px !important;
  margin-left: -4px !important;
  margin-top: -4px !important;
  background: var(--response-bg) !important;
  border: 2px solid #fff !important;
  border-radius: 6px;
  animation: 1s infinite alternate pulse;
  animation-timing-function: linear;
}

/* info sheet */

.infosheet .frame {
  position: fixed;
  z-index: 1000;
  overflow-y: scroll;
  top: 3ex;
  left: 2ex;
  width: calc(100vw - 4ex);
  height: calc(100vh - 6ex);
  box-shadow: 0 0 100px rgba(0, 0, 0, .3);
  border-radius: var(--bubble-radius);
  background: #fff;
  /*
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  */
  cursor: default;
}

.navigable.has-nav-bar .infosheet .frame {
  top: 10.5ex;
  height: calc(100vh - 13.5ex);
}


.infosheet .close {
  border-radius: var(--bubble-radius);
  background: var(--response-bg);
  padding: .75em;
  text-align: center;
  margin: 5ex 3.5ex;
  cursor: pointer;
}

.infosheet .close:active {
  background: var(--response-bg-active);
}

.infosheet .text {
  color: #222;
  margin: 5ex 3.5ex;
  font: 15px/1.35 "Source Serif 4 Variable", Georgia, serif;
  font-variation-settings: "opsz" 19;
  /* opsz: default here is 16, but 18 – 20 is better */
}

.infosheet .text h1 {
  font-size: 1.6em;
  line-height: 1;
  margin: 1em 0 1.5em 0;
  padding: 0;
}

.infosheet .text h2 {
  font-size: 1.25em;
  line-height: 1.15;
  margin: 2em 0 1em;
}

.infosheet .text h3 {
  font-size: 1.1em;
  line-height: 1.15;
  margin: 1.5em 0 1em;
}

.infosheet .text h3:before {
  content: '';
  display: inline-block;
  width: 1.2ex;
  height: 1.2ex;
  background: #222;
  margin-right: 1.6ex;
}

.infosheet .text a {
  color: #58e;
  text-decoration: none;
}

.infosheet .text .email {
  white-space: nowrap;
}

.infosheet .text .people {
  margin-left: 1ex;
  padding-left: 2ex;
  border-left: 3px solid #ccc;
}

.hrv-calc {
  max-height: 500px;
  overflow: hidden;
  transition: max-height var(--transition-time);
}

.responded .hrv-calc {
  max-height: 0;
}

.hrv-calc canvas {
  display: block;
  margin-right: 0;
  margin-left: auto;
  border: 1px solid #ccc;
}

.hrv-calc video.hrv-video {
  border-radius: var(--bubble-radius);
}

.hrv .bpm {
  display: inline-block;
  font-size: 1.25em;
  font-weight: 500;
  font-variant: small-caps;
  color: #fff;
  padding: .75ex 1.75ex;
  margin-top: .5ex;
  background-color: #d44;
  border-radius: var(--bubble-radius);
  border-bottom-right-radius: 0;
}

.panel-container {
  display: flex;
  margin: 1ex;
}

.panel {
  flex: 1;
  background: #fff;
  border-radius: 1em;
  padding: 1em;
  margin: 1ex;
}

.status-message {
  font-variation-settings: "ital" 1;
  padding: .5ex;
  background: #58e;
  opacity: .5;
  color: white;
  text-align: center;
  font-style: oblique;
}

.top-line-stats .number {
  font-size: 180%;
  font-weight: 500;
}