ScryNew {
  --br: 5px
  --boundary: 1rem
  --feature-color: hsla(295, 67%, 60%, 1)

  font-family: sans, arial

  display: grid
  grid-template-columns: auto 1fr
  grid-template-rows: auto auto
  grid-column-gap: 1rem
  grid-row-gap: 0

  div.cal-picker {
    background: #fff
    padding: var(--boundary) 3rem
    border-radius: var(--br)

    div.month-picker {
      color: #444
      font-family: sans
      font-size: 1.15rem

      display: flex
      justify-content: space-between
      align-items: center

      margin-bottom: 1rem

      button {
        color: var(--feature-color)
        font-size: .8rem

        background: none
        border: none
        cursor: pointer
        font-size: 1.5rem

        :focus { outline: none }
      }
    }

    div.Marama {}
  }

  div.time-picker {
    grid-row: 1 / 3
    grid-column: 2

    max-width: 350px
    color: #fff
    background: hsla(0, 0%, 100%, .3)
    border-radius: var(--br)

    display: grid
    grid-template-rows: auto 1fr auto
    align-items: start

    label {
      font-size: .7rem
      letter-spacing: 1px
      font-weight: 600
      text-transform: uppercase

      margin: var(--boundary) var(--boundary) calc(var(--boundary) / 2) var(--boundary)
    }

    div.picker {
      color: #666
      background: #fff
      border-radius: var(--br)
      margin: 0 var(--boundary) var(--boundary)

      div.time-entry {
        padding: calc(var(--boundary) / 2)
        border-bottom: 1px solid hsla(0, 0%, 0%, .2)

        display: flex
        justify-content: space-between

        div.close { cursor: pointer }
      }

      div.new-time-entry {
        font-size: .9rem
        position: relative

        div.dropdown {
          position: absolute
          left: calc(var(--boundary) / 2)
          right: calc(var(--boundary) / 2)
          top: calc(var(--boundary) / 2)

          background: #fff
          max-height: 20vh
          overflow-y: scroll
          padding: calc(var(--boundary) / 2)

          div {
            padding: 2px
            :hover {
              background: var(--feature-color)
              color: #fff
            }
          }
        }

        div.add {
          color: var(--feature-color)
          padding: calc(var(--boundary) / 2)
          cursor: pointer

          display: flex
          justify-content: center
        }
      }
    }

    div.timezone {
      padding: var(--boundary)
      border-top: hsla(0, 0%, 100%, .5) 1px dashed

      label {}

      div.zone {
        margin-top: .3rem

        font-weight: 600
        display: flex
        align-items: center

        span {
          margin-left: .5rem
          font-weight: initial
          font-size: .8rem
        }
      }
    }
  }

  div.time-picker-pristine {
    grid-row: 1 / 3
    grid-column: 2

    color: #fff
    max-width: 350px

    display: grid
    grid-gap: .5rem
    justify-content: center
    justify-items: center
    align-content: center

    label {
      font-size: .8rem
      letter-spacing: 1px
      font-weight: 600
      text-transform: uppercase
    }
    div.instruction {
    }
  }
}

/* over-rides or extension to marama */

Marama {
  grid-template-rows: repeat(7, var(--tile-width)) !important
}

MaramaDayLabel {
  font-size: 1rem
}

MaramaDayTile {
  border-radius: 4rem
  border: 1px solid hsla(0, 0%, 100%, 0)

  -past {
    cursor: not-allowed
    background: none
    color: hsl(0, 0%, 60%)

    -events {
      border: 1px solid hsl(0, 0%, 40%)

      -attending {
        background: hsl(0, 0%, 40%)
        color: #fff
      }
    }
  }

  -future {
    background: none
    --color: hsla(320, 100%, 60%, 1)
    /* deepskyblue */

    -events {
      border: 1px solid var(--color)
      color: var(--color)

      -attending {
        background: var(--color)
        color: #fff
      }
    }
  }

  -range {
    background: deeppink

    -future {
      background: deepskyblue
    }
  }
}