/* ===========================================================================
   v050 — target modules on the home card, and the rebuilt profile/settings panel
   =========================================================================== */

/* ---------- module chips on the home hero ----------
   The hero sits on the dark navy panel, so the chips are built from translucent
   white and only the selected ones take the brand gold. */
.heroModulesRow {
  align-items: center;
  gap: 8px;
}

.heroModuleChips {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.heroModuleChip {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.heroModuleChip:hover {
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

.heroModuleChip.on {
  background: #dbb44a;
  border-color: #dbb44a;
  color: #1a2438;
  font-weight: 800;
}

/* When the interface is enlarged the hero column gets tight, so let the row
   stack instead of squeezing the chips into an unreadable line. */
html[data-ui-eff="narrow"] .heroModulesRow,
html[data-ui-eff="mid"] .heroModulesRow {
  align-items: flex-start;
  flex-wrap: wrap;
}

html[data-ui-eff="narrow"] .heroModuleChips,
html[data-ui-eff="mid"] .heroModuleChips {
  justify-content: flex-start;
}

/* ---------- settings panel: details, avatar, export ----------
   The panel grew past the viewport once the fields were added, so it scrolls
   instead of running off the bottom of a short laptop screen. */
#settingsModal .loginCard {
  max-height: 88vh;
  overflow-y: auto;
}

.settingsField {
  margin: 0 !important;
}

.settingsField > span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 4px;
}

.settingsField > input {
  font: inherit;
  font-size: 13.5px;
  color: #16213a;
  margin: 0;
}

.avatarRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatarPreview {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #4d7cff, #2f4bd8);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(45, 70, 160, .28);
}

.avatarPickWrap {
  min-width: 0;
}

.avatarPickLabel {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 5px;
}

.avatarPick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.avatarOption {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  border: 1px solid var(--c-line-2, #d7deec);
  border-radius: 9px;
  background: #f7f9fd;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.avatarOption:hover {
  transform: translateY(-1px);
  border-color: #9db6ef;
}

.avatarOption.on {
  border-color: #4d7cff;
  background: #e8efff;
  box-shadow: inset 0 0 0 2px rgba(77, 124, 255, .25);
}

.settingsAdvanced > summary {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-muted);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}

.settingsAdvanced > summary::-webkit-details-marker {
  display: none;
}

.settingsAdvanced > summary::before {
  content: "+ ";
  font-weight: 800;
}

.settingsAdvanced[open] > summary::before {
  content: "- ";
}

.settingsAdvanced[open] > summary {
  margin-bottom: 6px;
}

.settingsHint {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: #8b95ab;
  margin-top: 5px;
}

html[data-ui-eff="narrow"] .avatarRow,
html[data-ui-eff="mid"] .avatarRow {
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- sidebar account card: fit the settings icon without squeezing ----------
   The guest card has to carry the settings gear AND the sign-in button. Laid out
   side by side they leave the copy column about 27px, which wraps "Sync progress"
   and the plan badge one character per line. Stacking the two actions keeps the
   copy readable. */
body.ial-v030 #sidebarAccountMirror .acctStack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex: none;
}

body.ial-v030 #sidebarAccountMirror .acctStack .acctIcon {
  align-self: flex-end;
}

body.ial-v030 #sidebarAccountMirror .acctPlan {
  white-space: nowrap;
}