.menu-list {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  padding: var(--grid-gap) calc(var(--grid-gap) - 4px) var(--grid-gap)
    var(--grid-gap);
  gap: var(--grid-gap);

  overflow: hidden;
  overflow-y: scroll;
}

/* avoid right pad as much as possible on firefox
(ff cannot set scrollbar width precisely ("thin"))*/
@-moz-document url-prefix() {
  .menu-list {
    padding: var(--grid-gap) 0 var(--grid-gap) var(--grid-gap);
  }
}

.menu-list-item {
  background-color: none;
  text-align: left;
  display: grid;

  padding: calc(var(--grid-gap) * 1) var(--grid-gap);
  border-radius: var(--inner-border-radius);
  border: 1px solid transparent;

  grid-template-columns: auto 1fr;
  grid-template-rows: 1em auto;
  grid-template-areas:
    'icon title'
    'icon desc';

  column-gap: 1em;
  row-gap: 0.33em;

  box-shadow: 0 0.25em 1em color-mix(in oklab, black 0%, transparent);

  transition:
    background-color calc(var(--spd-insp) * 1.5) ease,
    border-color var(--spd-insp) ease 50ms,
    box-shadow calc(var(--spd-insp) * 3) ease;

  .icon {
    font-size: 1.25em;
    grid-area: icon;
    opacity: 0.666;
  }
  .title {
    grid-area: title;
    font-size: 1em;
    font-weight: 600;
  }
  .desc {
    grid-area: desc;
    font-size: 0.8em;
    /* font-style: italic; */
    font-weight: 200;
    opacity: 0.666;
  }

  &:hover {
    background-color: color-mix(in oklab, var(--c-bright-bg) 60%, transparent);
  }

  &.current {
    box-shadow: 0 0.25em 1em color-mix(in oklab, black 25%, transparent);
    background-color: color-mix(
      in oklab,
      var(--power-ui01-color) 20%,
      transparent
    );
    border-color: color-mix(in oklab, var(--power-ui01-color) 30%, transparent);
    .icon {
      color: oklch(0.714 0.203 305.504);
      opacity: 1;
    }
  }
}

.page-plain {
  position: absolute;
  margin-right: 0;
  overflow: hidden;
  overflow-y: scroll;
  padding: 2em;

  .block.header {
    margin: 0 0 2em 0;
    .title {
      font-weight: 600;
      font-size: 1.5em;
    }
    .subtitle {
      font-weight: 400;
      font-size: 1em;
      margin-top: 0.75em;
      color: #fff;
      opacity: 0.666;
    }
  }
}

.pwrform {
  --border-inpt-color: rgba(255, 255, 255, 0.1);
  --border-inpt: 1px solid var(--border-inpt-color);
  --bg-inpt: rgba(0, 0, 0, 0.33);

  margin: 0 0 1.5em 0;

  .label {
    padding: 0 0 0.5em 0;
    font-size: 1em;
    font-weight: 500;
    color: oklch(0.872 0.01 258.338);
  }
  input.file.hidden {
    display: none;
  }
  .valueline {
    background-color: var(--bg-inpt);
    border-radius: var(--inner-border-radius);
    border: var(--border-inpt);

    display: flex;
    align-items: start;
    justify-content: stretch;
    gap: 0.5em;

    padding: 0.5em;

    transition: border-color-shadow var(--spd-insp) ease;

    .icon {
      color: rgba(255, 255, 255, 0.666);
      font-size: 1.44em;
      aspect-ratio: 1;
      transition: text-shadow var(--spd-insp) ease;
    }

    &:has(input:focus),
    &:has(textarea:focus),
    &:has(select:focus) {
      border-color: var(--power-ui01-color);
      .icon {
        text-shadow: 0 0 0.25ch var(--power-ui01-color);
      }
    }
  }
  input,
  textarea,
  select {
    background: none;
    color: #ffffff;
    border: none;

    font-size: 0.9em;

    height: stretch;
    width: 100%;
    width: stretch;

    &:focus {
      outline: none;
    }
  }

  textarea {
    width: 100%;
    height: 12ch;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    line-height: 1.5;
  }

  .linecount,
  .help-text {
    font-size: 0.8em;
    opacity: 0.666;
    margin: 0.25em 0 0 0;
    text-align: right;
  }

  .imgpreview {
    display: block;
    border: var(--border-inpt);
    background-color: var(--bg-inpt);
    border-radius: var(--grid-corners-radius);
    .userIcon {
      width: 100%;
      font-weight: 600;
      font-size: 2em;
    }
  }

  div.imgpreview {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  &.icon {
    .imgpreview {
      height: 10ch;
      object-fit: cover;
      aspect-ratio: 1;
    }
  }

  &.cover {
    .fileimggrid {
      aspect-ratio: 32/9;
      position: relative;
      width: 100%;
      width: stretch;
    }

    .imgpreview {
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .iconinputbuttons {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      label {
        margin: 0 auto;
      }
    }
  }

  &.round {
    .imgpreview {
      border-radius: 99em;
    }
  }

  .fileimggrid {
    position: relative;
    display: flex;
    gap: 1em;
  }
}

.pwrverticallist {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: stretch;
  justify-content: stretch;
  justify-items: stretch;
}

.pwrbutton {
  --c: #fff;
  --bg-c: var(--power-ui01-color);
  --hover-bg-c: color-mix(in oklab, var(--bg-c) 80%, black);
  background-color: var(--bg-c);
  color: var(--c);

  display: flex;
  align-items: center;
  justify-content: stretch;
  width: fit-content;
  gap: 0.5em;

  font-size: 1em;
  padding: 0.5em;
  border-radius: var(--inner-border-radius);

  transition: background-color var(--spd-insp) ease;

  &:hover {
    background-color: var(--hover-bg-c);
  }
  .icon {
    font-size: 1.5em;
  }
  .text {
    font-size: 1em;
    padding-right: 0.25em;
  }
}

.pwrsep {
  height: 1px;

  border: 0.05em dashed rgba(255, 255, 255, 0.05);
  box-shadow: 0 0.4em 0.65em 0 rgba(0, 0, 0, 0.2);
  margin: 2.5em auto;
  /* width: 33%; */
}

.pwrbadge {
  --c: white;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 0.9em;
  gap: 0.5em;
  padding: 0.33em 0.75em 0.33em 0.5em;

  border-radius: var(--inner-border-radius);
  font-weight: 600;

  color: var(--c);
  background-color: color-mix(in oklab, var(--c) 20%, transparent);
  box-shadow: 0.1em 0.2em 0.5em 0px oklch(0 0 0 / 0.16);

  .text {
    color: color-mix(in oklab, var(--c) 66%, oklab(100% 0 0));
  }
  .icon {
    font-size: 1.25em;
    text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.33);
  }
}

.pwruserbadge {
  display: flex;
  gap: 1em;
  align-items: start;

  .userIcon {
    width: 2.6em;
    font-size: 1.25em;
    box-shadow: 0.1em 0.2em 0.5em 0px oklch(0 0 0 / 0.16);
  }
  .uinfo {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
  }
  .uname {
    font-weight: 700;
    font-size: 1.125em;
  }
  .uemail {
    font-size: 0.9em;
    font-weight: 400;
    opacity: 0.5;
  }
}

.pwrdot {
  /* Ladies & gentlemens: how to make a led in css */
  --c: oklab(0.88 -0.24 0.2);
  --intensity: 1;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, var(--intensity)) 0%,
      transparent 25%,
      black 100%
    ),
    var(--c);
  box-shadow:
    inset 0 0 1px 1px rgba(0, 0, 0, 0.666),
    0 0 0.8em 1px
      color-mix(in oklab, var(--c) calc(33% * var(--intensity)), transparent);
  width: 0.8em;
  aspect-ratio: 1;
  border-radius: 50%;
  /* border: .05em solid rgb(179, 179, 179); */
}

.pwrlistsearch {
  background-color: var(--bg-inpt);
  border: var(--border-inpt);
  border-radius: var(--inner-border-radius);
  display: flex;
  align-items: center;
  margin: 0 0 1em 0;

  transition: border-color var(--spd-insp) ease;

  input {
    height: 2em;
    width: 100%;
    width: stretch;
  }
  .icon {
    font-size: 1.5em;
    padding: 0.33em;
  }
  &:has(input:focus) {
    border-color: var(--power-ui01-color);
  }
}

.pwrlist {
  border-radius: var(--inner-border-radius);
  border: var(--border-inpt);
  overflow: hidden;
}

.slgrid {
  display: grid;
  grid-gap: 0;
  width: 100%;
}

.slcell {
  padding: 0.75em 1em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 0.9em;
  gap: 0.75em;
  border: none;
  color: var(--text-primary);

  transition: background-color var(--spd-insp) ease;

  position: relative;

  /* no line element, yet we can select adjacent cells*/
  &:hover,
  &:hover + .slcell,
  &:hover + .slcell + .slcell,
  &:hover + .slcell + .slcell + .slcell,
  &:hover + .slcell + .slcell + .slcell + .slcell,
  .slcell:has(+ &:hover),
  .slcell:has(+ .slcell + &:hover),
  .slcell:has(+ .slcell + .slcell + &:hover),
  .slcell:has(+ .slcell + .slcell + .slcell + &:hover) {
    background-color: oklab(0% 0 0 / 0.2);
  }

  &:is(button) {
    width: 100%;
    width: stretch;
    transition: background-color var(--spd-insp) ease;
    cursor: ns-resize;
    &:hover,
    &:has(.sorted) {
      background-color: color-mix(
        in oklab,
        var(--power-ui01-color) 66%,
        transparent
      );
    }
  }
  &.header {
    background-color: rgba(0, 0, 0, 0.212);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    position: relative;
    padding-right: 2em;

    .icon {
      font-size: 1.25em;
      position: absolute;
      justify-self: end;

      top: 50%;
      right: 0.5em;
      transform: translateY(-50%);
    }
  }
  &.al-right {
    justify-content: end;
  }
  &.al-center {
    justify-content: center;
  }
  small {
    opacity: 0.75;
  }
}

.sllinesep {
  height: 1px;
  /* margin: 1em 0; */
  width: 100%;
  padding: 0;
  background-color: var(--border-inpt-color);
}

.pwrcollapsiblecard {
  --i-c: var(--power-ui01-color);
  background-color: var(--bg-inpt);
  border-radius: var(--inner-border-radius);
  border: var(--border-inpt);
  margin: 0;
  padding: 0.75em;

  &.open {
    --border-inpt-color: var(--power-ui01-color);
    header {
      padding-bottom: 1em;
    }
  }

  &:not(.open) {
  }

  header {
    display: flex;
    align-items: start;
    gap: 1em;
    cursor: pointer;
    padding: 0 0 0.5em 0;

    *:not(button) {
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    > .icon {
      font-size: 1.25em;
      color: var(--i-c);
    }
    .headcomp {
      width: 100%;
      width: stretch;
      display: flex;
      align-items: start;
    }
  }

  main {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5em 0.75em 0em 0.75em;
  }
}