.cao-page {
  position: fixed;
  top: 3em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  display: grid;
  gap: 1em;
  grid-template-columns: 40ch 2fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "disorganized header"  
                       "disorganized organized";
}

.cao-header {
  grid-area: header;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.cao-header h1 {
  font-weight: bold;
}


.cao-header-filters {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.5em;
}
.cao-header-filters label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  gap: 0.5ch;
  align-items: center;
}

.cao-organized {
  grid-area: organized;
  background-color: green;
  border: dashed 2px black;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: start;
  gap: 0.5em;
  padding: 0.5em;
}
.cao-disorganized {
  grid-area: disorganized;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5em;
  padding: 0.5em;
  overflow-y: scroll;
}

.cao-page [data-dragging="yes"] {
  opacity: 0.3;
}

.cao-area, .cao-climb {
  border-top: solid 2px transparent;
  background-color: #ebebeb;
  cursor: move;
}
:is(.cao-area, .cao-climb):hover:not(:has(.cao-area:hover, :cao-climb:hover)) {
  background-color: #fff;
}
.cao-name {
  display: inline-block;
  width: 30ch;
}
.cao-area > .cao-name { font-weight: bold; }
.cao-climb > .cao-name { font-style: italic; }

:is(.cao-disorganized, .cao-organized) > :is(.cao-climb, .cao-area) {
  padding: 5px;
}

.cao-area-children {
  padding-left: 1ch;
  position: relative;
  padding-bottom: 1em;
  margin-top: 0.25em;
}
.cao-area-children::before {
  content: ' ';
  position: absolute;
  display: block;
  left: 0.5ch;
  top: -0.2em;
  width: 1.5ch;
  bottom: 0.5em;
  border-left: solid 1px gray;
  border-bottom: solid 1px gray;
  border-bottom-left-radius: 3px;
}
.cao-area-children::after {
  position: absolute;
  display: block;
  content: '+';
  left: 2.5ch;
  bottom: 0em;
  color: #555;
}
.cao-area-children .cao-name {
  padding-left: 1.5ch;
  position: relative;
}
.cao-area-children .cao-name::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0.5em;
  left: -0.5ch;
  width: 1.5ch;
  border-top: solid 1px gray;
}
.cao-area-children .cao-area-children { /* not top level */
  margin-left: 1.5ch;
}
.cao-name {
  pointer-events: none;
}

/*
 * horrifying. 
 * this selects the smallest climb or area that is hovered
 */
:is(.cao-area, .cao-climb):hover:not(:has(:is(.cao-climb,.cao-area):hover)) {
  > .cao-name::before {
    display: none;
  }
  &, & :is(.cao-climb, .cao-area) {
    background-color: white;
  }
}

header:has(.cao-collapse-organized-climbs:checked) ~ .cao-organized .cao-climb {
  display: none;
}


/* 
 * this unpleasant selection conditionally highlights
 * the name of areas that contain both areas and climbs
 *
 */
header:has(.cao-highlight-mixed-areas:checked) ~ .cao-organized {
  .cao-area:has( > .cao-area-children > :is( .cao-climb ~ .cao-area
                                           , .cao-area  ~ .cao-climb )
               ) > .cao-name  {
    color: orange;
  }
}


.cao-area-children.show-drop-position::before {
  border-left: solid 2px black;
  border-bottom: solid 2px black;
  border-bottom-left-radius: 3px;
}
.cao-area.show-drop-position,
.cao-climb.show-drop-position {
  border-top: solid 2px black;
}