/* Ensure site profile avatars keep intended size, unaffected by Read Buddy styles */
header.navbar .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
/* Larger avatar inside the profile hover if needed (already inline for one element) */
#profileHC .menu .row .avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
/* Constrain Read Buddy styles within its view when possible */
/* Make Read Buddy panel an overlay when active */
#readBuddyView { display: none; }
#readBuddyView.active { display: block; position: fixed; inset: 0; z-index: 9999; background: var(--bg); overflow: auto; }

/* Read Buddy UX improvements (scoped) */
#readBuddyView .story-book {
  max-width: 1220px;
  margin: 20px auto;
  background: var(--bg);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 14px;
  padding: 10px 12px 20px 12px;
}
#readBuddyView .story-page { padding: 8px; background: var(--bg); }
/* Row layout: avatar row, then reading row */
#readBuddyView .layout { display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: min-content; gap: 16px; align-items: start; }
#readBuddyView .avatar-panel { order: 1; display:block !important; position: static; }
#readBuddyView #avatar { display:block; margin: 6px auto 8px; max-width: 260px; }
#readBuddyView .read-panel { order: 2; }

/* Make reading card comfortable width */
#readBuddyView .read-panel .card { max-width: 900px; margin: 0 auto; }
#readBuddyView .exercise-prompt {
  max-width: none;
  width: 100%;
  padding: 18px 20px;
  font-size: 22px;
  line-height: 1.65;
  column-count: 1;
  columns: auto;
  column-gap: normal;
  -webkit-column-count: 1;
  -webkit-columns: auto;
}
#readBuddyView .exercise-actions { display: flex; gap: 8px; justify-content: center; }
/* Remove Prev/Next controls */
#readBuddyView .exercise-actions { display: none !important; }

/* Compact meters in a responsive grid */
#readBuddyView .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#readBuddyView .metrics .bar { height: 8px; }
#readBuddyView .metrics .fill { height: 8px; }

/* Tidy header controls */
#readBuddyView .app-header { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
#readBuddyView .app-header .controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; }
#readBuddyView .app-header .controls > * { margin: 2px 0; }
#readBuddyView .treat-display { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:10px; background: color-mix(in srgb, var(--text) 6%, transparent); }
#readBuddyView .pill#statePill { text-transform: capitalize; }

/* Sticker board rows more dense */
#readBuddyView .sticker-board { display:flex; flex-wrap:wrap; gap:6px; }

/* Reduce visual clutter from any patterned backgrounds inside Read Buddy */
#readBuddyView .panel, #readBuddyView .card { background: var(--panel, #fff); }
#readBuddyView .read-panel .metrics, #readBuddyView .read-panel .stickers { opacity: .0; pointer-events: none; transition: opacity .2s ease; }
#readBuddyView.reading .read-panel .metrics, #readBuddyView.reading .read-panel .stickers { opacity: 1; pointer-events: auto; }
#readBuddyView .panel .sparkle { display: none; }
/* Make the hint smaller and muted */
#readBuddyView .read-panel .card .hint { font-size: 14px; color: color-mix(in srgb, var(--text) 60%, transparent); margin-top: 4px; }
/* Ensure hint does not get drop-cap styling */
#readBuddyView .read-panel .card .hint::first-letter { font-size: inherit; color: inherit; font-weight: inherit; float: none; margin: 0; }
/* Hide the progress bar and header; keep stars */
#readBuddyView .read-panel .progress .progress-head,
#readBuddyView .read-panel .progress .progress-bar { display: none !important; }

/* Responsive: stack on small screens */
@media (max-width: 960px) {
  #readBuddyView .layout { grid-template-columns: 1fr; }
  #readBuddyView .avatar-panel { position: static; order: 2; }
  #readBuddyView .read-panel { order: 1; }
}