/*
  تنسيق لسان المزيد في النسخة الثانية: أقسام بسطور كإعدادات تطبيق البنك.
  فيه سطور الصناديق بلون كل صندوق، وتبديل المستخدم، والمظهر وزرّ شكل الحاسوب، ومختبر الشكل، وروابط الأنظمة، وزرّ الأرقام التجريبية.
  والمفتاح الصغير نفسه في تنسيق لسان الحركات، لأن اللسانين يستعملانه.
  يُقرأ بعد التنسيق المشترك، والألوان كلها من رموز التصميم فيعمل في المظهرين الداكن والفاتح.
  وإن غاب ظهر لسان المزيد بالتنسيق المشترك وحده.
*/

.screen--more { gap: var(--sp-3); }
@media (min-width: 1024px) {
  .screen--more { max-width: 760px; gap: var(--sp-4); }
}
.more-sec { padding-bottom: 14px; }

/* Box rows: the round icon in the box colour, the name, the balance, the arrow to the box page */
.more-rows { list-style: none; margin: 0; padding: 0; }
.more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% + 16px);
  min-height: 58px;
  margin-inline: -8px;
  padding: 7px 8px;
  border-radius: var(--r-row);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.more-row:hover { background: var(--row-hover); }
.more-dot { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bx-tint); color: var(--bx-ink); }
.more-row-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.more-row-end { flex: none; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.more-chev { flex: none; color: var(--muted); }

/* Two equal persona buttons, three equal theme buttons: the balance comes from the grid */
.more-persona { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.more-persona .seg-btn { min-height: 48px; font-size: var(--fs-md); }
/* The chosen person wears the same gold ring as the chosen theme and lab choices below it */
.more-persona .seg-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-1); }
.more-theme { width: 100%; }

/* The desktop-shape switch: one whole row, the explanation behind the tip circle before it */
.more-switch-row { display: flex; align-items: center; margin-top: var(--sp-3); }
.more-switch-row .tip-wrap { margin-inline-end: 10px; }
.more-switch { flex: 1 1 auto; justify-content: flex-start; min-height: 52px; font-size: var(--fs-md); }
.more-switch .moves-switch-label { flex: 1 1 auto; text-align: start; }
.more-switch > .ico { flex: none; color: var(--muted); }

/* Links to the systems: one row each, a line between rows; two columns on the desktop */
.more-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-5); }
.more-links > li { border-top: 1px solid var(--line); min-width: 0; }
.more-links > li:first-child { border-top: 0; }
.more-links .src-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 2px;
  border-bottom: 0;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: color var(--dur-1) var(--ease);
}
.more-links .src-link .ico { flex: none; color: var(--muted); }
.more-links .src-link:hover { color: var(--gold-ink); }
.more-links .src-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .more-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-links > li:nth-child(2) { border-top: 0; }
}

.more-reset { gap: 10px; }

/* The button that opens the login page again sits a little below the login-shape choice. */
.more-entry-open { margin-top: var(--sp-3); }