/* Every Settings row is the card the app draws in SettingsMenuRow:
   RoundedCornerShape(18.dp), a 1dp #ECE9F0 border, white, shadowElevation 2.dp,
   padding(vertical = 5.dp) between rows, height(64.dp), padding(horizontal =
   14.dp, vertical = 8.dp), and a 32dp gradient tile holding an 18dp icon
   tinted #51627D. There is no section heading and no eyebrow above the title,
   so the rules for those are gone. */
.settings-row-button
{
  border:0;
  width:100%;
  background:transparent
}
.settings-row
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  color:#2c2733;
  text-align:left
}
.settings-row span:first-child
{
  min-width:0
}
.settings-row small
{
  display:block;
  margin-top:2px;
  color:#77717f;
  font-size:11px;
  line-height:15px
}
.settings-arrow
{
  font-size:24px;
  color:#9a92a1;
  line-height:1
}
.settings-choice-list
{
  display:grid;
  gap:8px
}
.settings-choice
{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid #e6e0ee;
  border-radius:12px;
  background:#fff;
  color:#2c2733;
  text-align:left
}
.settings-choice.selected
{
  border-color:#cbb8ec;
  background:#faf7ff;
  color:#5c2ac7
}
.settings-choice b
{
  font-weight:700
}
.about-mark
{
  width:52px;
  height:52px;
  margin:8px auto 12px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#f2ebff;
  color:#5c2ac7;
  font-weight:800;
  font-size:24px
}
.about-title
{
  text-align:center;
  margin:0 0 6px
}
.about-copy
{
  text-align:center;
  color:#756f7f;
  line-height:1.5;
  margin:0 0 18px
}
.about-meta
{
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  border-top:1px solid #eee8f4;
  font-size:13px
}
.about-meta span
{
  color:#756f7f
}
.settings-content
{
  display:block;
  padding:18px 18px 104px;
  background:#fff;
  height:calc(100vh - 76px);
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  box-sizing:border-box
}
.settings-content[hidden]
{
  display:none!important
}
.settings-page-head
{
  padding:6px 0 16px
}
.settings-page-head h1
{
  margin:0;
  font-size:26px;
  letter-spacing:-.6px;
  color:#1f1b24
}
.settings-page-head p:last-child
{
  margin:7px 0 0;
  color:#77717f;
  font-size:12px;
  line-height:1.55
}
.settings-option-row,
.settings-row-toggle
{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  box-sizing:border-box;
  margin:0 0 5px;
  padding:8px 14px;
  background:#fff;
  border:1px solid #ece9f0;
  border-radius:18px;
  box-shadow:0 1px 2px rgba(31,27,36,.06)
}
.settings-option-row
{
  justify-content:flex-start;
  cursor:pointer
}
.settings-option-icon-wrap
{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#f3effa);
  color:#51627d
}
.settings-option-icon
{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.settings-row-text
{
  min-width:0;
  flex:1
}
.settings-row-text b
{
  display:block;
  font-size:13px;
  line-height:17px;
  font-weight:600;
  color:#2c2733
}
.settings-row-text small
{
  display:block;
  margin-top:2px;
  color:#77717f;
  font-size:11px;
  line-height:15px
}
.settings-option-row:active .settings-option-icon-wrap,
.settings-row-toggle:active .settings-option-icon-wrap
{
  color:#6330db
}
.settings-content .settings-arrow
{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:none;
  color:#aaa3b0
}
.settings-content .settings-arrow .settings-option-icon
{
  width:18px;
  height:18px
}
.settings-content .toggle
{
  flex:none
}
.settings-toggle
{
  margin-left:4px
}
.settings-content .settings-row
{
  border-bottom:0
}

/* The app shell is a bounded vertical flex layout. Without this, child
   overflow regions cannot resolve their available height consistently. */
#app.phone-shell
{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  overflow:hidden !important;
}

/* Settings is a real route inside the fixed app shell. Keep it isolated from
   Accounts and let only the route body own vertical scrolling. */
#app.phone-shell > .settings-content {
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}

#app.phone-shell > #content[hidden],
#app.phone-shell > #settingsContent[hidden],
#app.phone-shell > #searchWrap[hidden],
#app.phone-shell > #addBtn[hidden] {
  display:none !important;
}

@media(max-width:360px)
{
  .settings-content
  {
    padding-left:15px;
    padding-right:15px
  }
  .settings-page-head h1
  {
    font-size:24px
  }
  .settings-option-row,
  .settings-row-toggle
  {
    padding:8px 12px
  }
}

.brand-mark,
.auth-mark
{
  width:32px;
  height:32px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(145deg,#6d35e8,#8744ee);
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 15px #703be333
}
.brand strong,
.drawer-brand strong,
.auth-brand strong
{
  color:#6330db;
  font-size:19px;
  font-weight:800;
  line-height:1
}
.brand small,
.drawer-brand small,
.auth-brand small
{
  display:none!important
}
.auth-brand
{
  display:flex;
  align-items:center;
  gap:9px
}
.about-mark
{
  background:linear-gradient(145deg,#6d35e8,#8744ee);
  color:#fff;
  border-radius:10px;
  font-size:18px;
  font-weight:900
}