.climb-page-physical-inputs {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: var(--dissimilar-input-gap);
}
.climb-page-physical-inputs .climb-location {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  min-height: 50vh;
}
.climb-page-physical-inputs .climb-terrain {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.climb-page-physical-inputs .climb-steepness {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.climb-terrain {
  background-color: pink;
}
.climb-terrain__bars {
  display: flex;
  flex-flow: row nowrap;
}
.climb-terrain__bar:not(:last-child) {
  border-right: solid 1px gray;
}
.climb-terrain__segments {
  display: flex;
  flex-flow: column nowrap;
}
.climb-terrain__segment {
  display: flex;
  flex-flow: row nowrap;
}
.climb-terrain__segment-start {
  width: 8ch;
}
.climb-terrain__segment-desc {}
.climb-terrain__segment-split {
}

.climb-steepness {
  background-color: orange;
  font-size: 0.7rem;
}
.climb-steepness__circles {
  display: flex;
  flex-flow: row nowrap;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
}
.climb-steepness__circle {
  border-radius: 50%;
  overflow: hidden;
}
.climb-steepness__circle::before,
.climb-steepness__circle::after {
  display: block;
  position: absolute;
  content: ' ';
  top: 0;
  width: 50%;
  height: 100%;
}
.climb-steepness__circle::after {
  background-color: #ddd;
  left: 50%;
}
.climb-steepness__circle::before {
  background-color: #555;
  left: 0;
}

.climb-steepness__bar:not(:last-child) {
  border-right: solid 1px gray;
}
.climb-steepness__segments {
  display: flex;
  flex-flow: column nowrap;
}
.climb-steepness__segment {
  display: flex;
  flex-flow: row nowrap;
}
.climb-steepness__segment-start {
  width: 8ch;
}
.climb-steepness__segment-desc {}
.climb-steepness__segment-split {
}

.climb-page-flexible-data-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--dissimilar-input-gap);
}
.climb-page-flexible-data-inputs .climb-fields {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.climb-page-flexible-data-inputs .climb-tags {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.climb-page-flexible-data-inputs .climb-notes {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.climb-page-other-inputs {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--dissimilar-input-gap);
}
.climb-page-other-inputs .climb-resources {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.climb-page-other-inputs .climb-alternate-names {
  grid-row: 2 / 3;
}
.climb-page-other-inputs .climb-history {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.climb-history-event {
  margin-bottom: 0.5em;
}
.climb-history-event {
  display: flex;
  flex-flow: row nowrap;
}
.climb-history-event__date {
  width: 7em;
}
.climb-history-event__event {
  width: 5em;
}
.climb-history-event__party {
  flex-grow: 1;
}

.climb-name {
  margin-bottom: var(--dissimilar-input-gap);
  width: 30ch;
}

.climb-uuid {
  font-family: var(--system-mono);
}
.climb-uuid::before {
  display: inline;
  content: 'climbs/';
}
.climb-uuid::after {
  content: '.json';
}

.climb-alternate-names {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--similar-input-gap);
}
.climb-alternate-names li {
  display: contents;
}

.climb-rating {
  display: flex;
  flex-flow: column nowrap;
  width: 30ch;
}

.climb-project-status {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: 35ch;
  height: 2em;
}
.climb-project-status__checkbox {
  margin: 0 0.5em;
}
.climb-project-status__checkbox ~ .climb-project-status__text {
  display: none;
}
.climb-project-status__checkbox ~ .climb-project-status__not-project {
  display: block;
  opacity: 0.5;
}
.climb-project-status__checkbox:checked ~ .climb-project-status__text {
  display: block;
  border: none;
  width: 100%
}
.climb-project-status__checkbox:checked ~ .climb-project-status__not-project {
  display: none;
}

.climb-page__main {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.climb-length {
  display: inline-flex;
  flex-flow: row;
  align-items: center;
}
.climb-length__lower,
.climb-length__upper {
  width: 5ch;
  padding-left: 1ch;
  padding-right: 0;
}
.climb-length__tilde { opacity: 0.5; }
.climb-length__lower { margin-right: 0.5ch; }
.climb-length__upper { margin-left: 0.5ch; }
.climb-length__unit {
  margin-left: 1ch;
  width: 10ch;
}


.climb-resources {
  display: flex;
  flex-direction: column;
  gap: var(--similar-input-gap);
}
.climb-resource {
  display: flex;
  flex-direction: column;
}
.climb-resource__resource {
  font-size: 0.8rem;
}
.climb-resource__title { }
.climb-resource__description { }


.climb-tags {
  display: flex;
  flex-flow: row wrap;
  gap: 0.25em;
}
.climb-tags__tag {
   max-width: 15ch;
}

.climb-notes {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--similar-input-gap);
}
.climb-note {
  display: flex;
  flex-flow: column nowrap;
}
.climb-note__topic { }
.climb-note__content {
  height: 100%;
}

.climb-fields {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--similar-input-gap);
}
.climb-field { display: flex; flex-flow: row; }
.climb-field__field { width: 15ch; }
.climb-field__value { width: auto; flex-grow: 1; flex-shrink: 1; }

.climb-location {
  background: white;
  display: flex;
  flex-flow: column nowrap;
}
.climb-location__map {
  flex-grow: 1;
  height: calc(100% - 2em);
  box-sizing: border-box;
}
.climb-location__controls {
  line-height: 2em;
  display: flex;
  justify-content: space-between;
}
.climb-location__add-point,
.climb-location__remove-point {
  line-height: 2em;
  border-radius: 0;
  padding: 0 1em;
}
.climb-location__radius-input {
  padding-left: 0.5em;
}
.climb-location__faint-text {
  opacity: 0.5;
}
.climb-location__meters {
  border: none;
  width: 5ch;
}
.climb-location__controls {
  height: 2em;
}

.climb-page__photo-links {
  background: rgba(255,255,255,0.5);
  margin-top: 5vh;
  padding: 1em;
}
.climb-page__photo-links ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  max-width: 1000px;
  gap: 1em;
}
.climb-page__photo-links p {
  text-align: right;
  opacity: 0.5;
}
.climb-page__photo-links svg {
  display: block;
  height: 180px;
  width: auto;
}