@charset "UTF-8";

:root {
  --accent-color:rgb(0,0,170);
  --sel-color:rgb(255,255,64);
}

.menubtn {
  cursor: pointer;
  display: flex;
  flex-flow: column;
  gap: 4px;
  span {
    width: 1.25em;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.3s;
  }
}

nav {
  pointer-events: none;
  position: fixed;

  .menubtn {
    pointer-events: auto;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    padding: 10px;
  }

  dialog {
    pointer-events: auto;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
	padding: 0;
    border: 0 none transparent;
    border-right: 1px solid oklch(from var(--accent-color) 0.65 0.1 h);
	border-radius: 8px;
    min-width: 15em;
    max-width: 30vw;
    height: 100dvh; 
    max-height: none;
	overflow:hidden;

	color: oklch(from var(--accent-color) calc((0.65 - l) * 100000) 0 h);
    background: linear-gradient(to left,
								var(--accent-color),
								oklch(from var(--accent-color) 0.2 c h));

    form {
	  margin-top: 34px;
	  padding: 0 3px;
	  height: calc(100% - 34px);
	  overflow:auto;

	  scrollbar-width: thin;
	  scrollbar-color: oklch(from currentColor l c h / 0.5) transparent;
	  scrollbar-gutter: stable both-edges;

      dl {
        margin: 0; 
        padding: 0;
		line-height: 1.75em;

		dt {
		  margin: 0.2em 0;
		  margin-bottom: 1em;
		  @media (min-width: 1025px) and (pointer: fine) {
			margin-bottom: 0.5em;
		  }
		  padding: 0;

          label {
			color: oklch(from var(--accent-color) 1 0.4 220);

			cursor: pointer;
            display: flex;
			max-width: 100%;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: clip;
			vertical-align: middle;

			margin: 0;
			padding: 2px 4px;
			border-radius: 4px;
            span {
              display: inline-block;
            }
            &:focus {
              outline: 2px solid currentColor;
            }
			&.sel {
			  background:linear-gradient(to left bottom,
										 oklch(from var(--sel-color) l c h / 0.6),
										 transparent);
			}
          }
        }
      }
      button {
        top: 2px;
      }
    }

    &:focus {
      outline: none;
    }

	&::backdrop {
	  background:rgba(0,0,0,0.3);
	}
  }
}

div,p {
  .menubtn {
	cursor: unset;
	display: inline-flex;
	vertical-align: middle;
	margin: 0 0.2em;
  }
}