/* F192. Account row subtitles stay on one line at 320 and 393.
   The subtitle takes the full row, under the title and the chevron.
   Type stays at least 16px. The row stays at least 44px tall. No ellipsis.
   Line height 1.4 keeps the title and subtitle glyph boxes apart at 200% text. */

body[data-page="account"] .ffs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title chev" "sub sub";
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 6px;
}
body[data-page="account"] .ffs-row .grow {
  display: contents;
}
body[data-page="account"] .ffs-row .n-title {
  grid-area: title;
  min-width: 0;
  font-size: max(1.02rem, 16px);
  line-height: 1.4;
}
body[data-page="account"] .ffs-row .n-sub,
body[data-page="account"] .ffs-row small {
  grid-area: sub;
  display: block;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: max(1rem, 16px);
  line-height: 1.4;
  /* A subtitle may use more than one line. nowrap made translated lines wider than the screen. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
body[data-page="account"] .ffs-row .chev {
  grid-area: chev;
  align-self: center;
}

/* Web account card: the refer line is the same subtitle.
   On a phone the account panel padding is what squeezes it, so the
   line uses the card width and the panel padding drops to zero. */
body[data-page="account"] #acct-refer > .n-sub {
  display: block;
  margin: 0 0 8px;
  font-size: max(1rem, 16px);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 420px) {
  body[data-page="account"] .wrap,
  html.ffs body[data-page="account"] .wrap {
    padding-left: 8px;
    padding-right: 8px;
  }
  body[data-page="account"] #page-root.panel {
    padding-left: 0;
    padding-right: 0;
  }
  body[data-page="account"] #page-root.panel > :not(.acct-card) {
    margin-left: 8px;
    margin-right: 8px;
  }
  body[data-page="account"] #acct-refer.acct-card {
    padding-left: 8px;
    padding-right: 8px;
  }
  body[data-page="account"] #acct-refer > .n-sub {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}