@charset "utf-8";

@layer form {
/* // Form
---------------------------------------------------------------------------------------------------- */
section.form {
  margin: 30px 10%;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  overflow: clip;
  background-color: var(--section-bg-color);

  > *:not(:first-child) {
    margin-left : .5em;
    margin-right: .5em;
  }
  > h2 {
    padding: .1em .2em;
    font-size: 2rem;
    > small {
      font-size: 1.4rem;
      font-weight: normal;
    }
  }
  > h3 {
    padding: .2em .2em;
  }
  > :is(h2,h3):first-child {
    background: linear-gradient(to bottom, var(--h2-color), transparent);
    mix-blend-mode: multiply;
    .night & { mix-blend-mode: screen; }
    > .material-symbols-outlined {
      display: inline-block;
      vertical-align: middle;
      margin: 0 .15em;
      transform: scale(1.3);
      transform-origin: bottom;
      user-select: none;
    }
  }
}

.form p {
  position: relative;
  margin: 1em;
  padding: 0 0.5em;
  text-align: center;

  & > label > span {
    display: inline-block;
    width: 11em;
    text-align: right;
  }
  & > label >  input + b {
    display: inline-block;
    position: absolute;
    bottom: 2px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: visible;
    font-size: 12px;
  }
  & > input[type="submit"],
  & button {
    width: 5em;
  }

  button {
    font-weight: normal;

    &[disabled] {
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
.form dl {
  margin: 1em;
  padding: 0 0.5em;
  line-height: 2;
  > dd {
    padding-left: 1em;
  }
}
aside#login-state {
  max-width: none !important;
  margin: 30px 10% !important;
  border-width: 0px !important;
  border-radius: 0;
  > ul {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 10px;
    > li {
      border-width: 1px;
      border-style: solid;
      padding: .5em 1em;
      border-radius: 10px;
      text-align: center;
    }
    > li.logout-button {
      white-space: nowrap;
    }
  }
}
#confirm-adult-age {
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 1em;
  &:not(:has(input:checked)) + dl {
    > dt:has(input[data-type^="R-18"]) {
      opacity: 0.3;
      user-select: none;
      pointer-events: none;
      & label {
        padding-left: 0;
        padding-right: 0;
        &::before {
          content: "OFF";
          color: #777;
        }
        &::after {
          display: none;
        }
      }
    }
  }
}
#delete-account {
  & button.submit {
    width: max-content;
    background: linear-gradient(to bottom, #fdd550, #ff5555);
    &:hover { background: red; color: white; }
  }
}

#convertform section.form {
  margin: 2em 10%;

  & section+section {
    margin-top: 1em;
    border-top-width: 1px;
    border-top-style: solid;
  }
  & h4 {
    font-size: 110%;
    &:before { content: "●"; }
  }
  & p {
    margin: .5em .5em 1em;
  }
  & section:last-child p:last-child {
    margin-bottom: .5em;
  }
  & dl {
    margin-left: .5em;
    + dl { margin-top: .8em; }
  }
  & dl dd + dt {
    margin-top: .2em;
  }
  & dl dt::before {
    content: "◆";
  }
  & dl dd {
    font-size: 95%;
    &::before {
      content: "・";
    }
    & i {
      font-style: normal;
      color: #5599aa;
    }
  }
}

#edit-help section.form {
  dl {
    display: grid;
    grid-template-columns: minmax(3em, max-content) 1fr;
    border-width: 0 0 1px;
    border-style: dotted;
    dl + & { margin-top: 0; }
    &:has(+ dl) { margin-bottom: 0; }
    > dt {
      position: relative;

      &::after {
        content: "：";
        position: absolute;
        right: -1em;
      }
    }
    > dd {
      --dt-width: attr(data-dt-em em);
      > dl {
        grid-template-columns: minmax(var(--dt-width), max-content) 1fr;
        margin-top: 0;
        margin-left: 0;
        &:last-child {
          border-bottom: 0;
          margin-bottom: 0;
        }
      }
    }
  }
  .multiline-rule dl {
    grid-template-columns: minmax(4em, max-content) 1fr;
  }
  code {
    margin: 0 1px;
    padding: 0.2em 0.4em;
    font-size: 90%;
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,meiryo,monospace,serif;
    background-color: rgba(100,250,170,0.4);
  }
}
/* ////////// LayerEnd ////////// */
}