/* MainMenu template (templates/mainMenu.js): list screens in one panel. Only tokens and sizes already in
   use in style.css (36 px buttons, 48 px bar, 8/16 px gaps, 12/14/16 px text). Where the panel sits inside
   the app (under the header, fading in with the menu plate) is style.css: .mainmenu--panel. */
.mainmenu {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: var(--primary);
}

.mainmenu .btn-icon {
  background: var(--bg-primary);
  color: var(--primary);
}

.mainmenu .btn-icon:disabled {
  opacity: 0.4;
}

/* the list: the Scroll template, as a free-standing column (no plate) filling what the bar leaves */
.mainmenu .mainmenu__scroll {
  flex: 1;
  min-height: 0;
  height: auto;
}

.mainmenu .mainmenu__scroll > .scroll__inner {
  padding: 0 0 var(--gutter);
}

/* a row with a sub-screen is a fold: the body grows from 0 to its height under the row */
.mainmenu__foldbody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.mainmenu__fold.is-open > .mainmenu__foldbody {
  grid-template-rows: 1fr;
}

.mainmenu__foldinner {
  min-height: 0;
  padding: 0 8px;
  overflow: hidden;
}

.mainmenu__fold.is-open > .mainmenu__foldbody > .mainmenu__foldinner {
  padding-bottom: 8px;
}

/* an unfolded row becomes a plate (Color 0) that holds its sub-screen; what sits on it is drawn on the surface color */
.mainmenu__fold {
  border-radius: 24px;
  transition: background-color var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}

.mainmenu__fold.is-open {
  border-radius: 16px;
  background: var(--bg-primary);
}

.mainmenu__fold.is-open .btn-icon,
.mainmenu__fold.is-open .mainmenu__field {
  background: var(--bg-secondary);
}

.mainmenu__fold.is-open .mainmenu__fold.is-open {
  background: var(--bg-secondary);
}

.mainmenu__fold.is-open .mainmenu__fold.is-open .btn-icon,
.mainmenu__fold.is-open .mainmenu__fold.is-open .mainmenu__field {
  background: var(--bg-primary);
}

@media (prefers-reduced-motion: reduce) {
  .mainmenu__fold,
  .mainmenu__foldbody,
  .mainmenu__chevron {
    transition: none;
  }
}

.mainmenu__block {
  padding-bottom: 8px;
}

.mainmenu__block--spaced {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mainmenu__heading {
  margin: 0;
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.mainmenu__text {
  margin: 0;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--primary);
}

.mainmenu__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mainmenu__item {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 24px;
  color: var(--primary);
  font-size: 14px;
  text-align: left;
}

button.mainmenu__item:active {
  background: var(--color-neutral);
}

.mainmenu__item.is-disabled {
  opacity: 0.4;
}

.mainmenu__item.is-danger {
  font-weight: 700;
}

.mainmenu__item.is-selected {
  font-weight: 700;
}

.mainmenu__icon {
  flex: none; /* the row's own gap (8px) sets the space to the name */
}

.mainmenu__item.is-muted > .mainmenu__icon {
  color: var(--primary);
}

.mainmenu__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mainmenu__label > span {
  font-weight: 700;
}

.mainmenu__sub,
.mainmenu__value {
  font-size: 12px;
  color: var(--color-neutral);
}

.mainmenu__chevron {
  flex: none;
  width: 6px;
  height: 9px;
  background: var(--primary);
  transform: none; /* chevron.svg points left = folded */
  transition: transform var(--dur) var(--ease);
  -webkit-mask: url(/icons/chevron.svg) center / contain no-repeat;
  mask: url(/icons/chevron.svg) center / contain no-repeat;
}

.mainmenu__fold.is-open > .mainmenu__row .mainmenu__chevron {
  transform: rotate(-90deg); /* down = unfolded: from left straight down, not round over the top */
}

/* text field + button (new group, rename) */
.mainmenu__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 8px;
}

.mainmenu__field {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: var(--bg-primary);
  color: var(--primary);
  font: inherit;
  font-size: 16px; /* 16 px keeps phones from zooming into the field */
  outline: none;
}

.mainmenu__field::placeholder {
  color: var(--color-neutral);
  font-size: 14px; /* same as the row text it opens from */
  font-weight: 400;
}

.mainmenu__submit {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--color-neutral);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
}

.mainmenu__hint {
  margin: 0;
  padding: 4px 16px 0 calc(var(--hint-left, 0px) + 18px); /* starts where the field's bottom-left corner ends its curve (radius 18px) */
  font-size: 12px;
  color: var(--error);
}

.mainmenu__hint:empty {
  display: none;
}

/* the handle of a draggable row (like a note line's handle) and the row lifted by it */
.mainmenu__grip {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  border-radius: 12px;
  color: var(--primary);
  cursor: grab;
  touch-action: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mainmenu__grip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url(/icons/bullet.svg) center / 9px 12px no-repeat;
  mask: url(/icons/bullet.svg) center / 9px 12px no-repeat;
}

.mainmenu__grip:active {
  background: var(--color-neutral);
  color: var(--primary);
}

.mainmenu__row.is-dragging,
.mainmenu__fold.is-dragging {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-pop);
}

/* a row whose name is being edited: the name is a field (r.edit), the hint and the delete question sit under it */
.mainmenu__row.is-editing {
  position: relative;
}

/* the name field lies over the row: from the name's left edge to the row's right edge, under the OK button */
.mainmenu__editfield {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: var(--to);
  height: 36px;
  margin-top: -18px;
  border-radius: 18px;
  background: var(--bg-secondary);
  font-size: 14px; /* the size of the row's name it grows from, not bold */
  font-weight: 400;
}

/* the delete question instead of the field: the text, then Cancel and the confirming button, all inside the plate */
.mainmenu__ask {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
  font-size: 14px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); /* the plate is 10% darker while it asks */
}

.mainmenu__asktext {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--primary);
}

.mainmenu__askbtn {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  transition: color 0.2s ease;
}

.mainmenu__askbtn:active {
  color: var(--primary);
}

.mainmenu__row.is-editing > .btn-icon {
  position: relative;
  z-index: 2;
}

.mainmenu__editfield.is-out {
  animation: mainmenu-field-out var(--dur) var(--ease);
}

@keyframes mainmenu-field-out {
  from {
    width: var(--from);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mainmenu__editfield.is-out {
    animation: none;
  }
}

.mainmenu__editor > .mainmenu__row {
  padding-right: 0;
}

.mainmenu__ok {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

/* the pencil has no plate at rest, it shows only while pressed (selectors this long to beat the plate colors above) */
.mainmenu .mainmenu__row > .mainmenu__edit.btn-icon:not(:active) {
  background: none;
}

.mainmenu .mainmenu__row > .mainmenu__edit.btn-icon:active {
  background: var(--color-neutral);
}

/* a row opened by tapping anywhere on it (the "New group" row): one plate for the whole row */
.mainmenu__row.is-taprow:active {
  border-radius: 24px;
  background: var(--color-neutral);
}

.mainmenu__row.is-taprow > button.mainmenu__item:active {
  background: none;
}

.mainmenu__grip--space {
  visibility: hidden;
}

.mainmenu__item.is-muted .mainmenu__label > span {
  color: var(--primary);
  font-weight: 400;
}

.mainmenu__chevron--leaves {
  transform: rotate(180deg); /* chevron.svg points left */
}

/* a row swiped to the left (templates/mainMenu.js, `swipe`): the row itself turns red while it goes out; under it the word at
   the right edge of its place, then in that place the line that waits 10 s for a double tap to be taken back, fades and closes */
.mainmenu__reveal,
.mainmenu__row--gone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  color: var(--error);
  font-size: 14px;
}

.mainmenu__reveal {
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
}

.mainmenu__reveal > span {
  color: var(--error);
  opacity: var(--p, 0);
}

.mainmenu__row.is-swiping {
  position: relative; /* above the word it uncovers */
  z-index: 1;
}

.mainmenu__row--gone {
  min-height: 40px;
  overflow: hidden;
  user-select: none;
  transition: opacity 250ms ease, height 250ms ease, min-height 250ms ease;
}

.mainmenu__row--gone.is-fading {
  opacity: 0;
}


.mainmenu__count {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}