/* The accepted Demo's shared SVG language; application-specific layout stays intact. */
.main-nav { position: relative; top: auto; align-self: stretch; isolation: isolate; }
.main-nav::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -28px -16px -28px -28px; background: oklch(.955 .025 252);
  border-radius: 24px 0 0 24px;
}
.main-nav .nav-picture { background: transparent; color: var(--story-purple); }
.main-nav [aria-current="page"] .nav-picture { background: transparent; color: inherit; }
.nav-picture > .ui-icon { width: 32px; height: 32px; }
.picture > .ui-icon { width: 40px; height: 40px; }
.mood-panel .picture > .ui-icon { width: 34px; height: 34px; }
.picture-choice .picture { display: grid; place-items: center; }
.profile-link > span:first-child, .child-name > span:first-child {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
}
.user-avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; min-width: 32px;
  flex: none; overflow: hidden; border-radius: 50%;
}
.user-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.user-avatar > .ui-icon { width: 24px; height: 24px; }
.compact-page-heading h1 > span { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.compact-page-heading h1 > span > .ui-icon { width: 32px; height: 32px; }
.eyebrow > span { display: inline-flex; vertical-align: middle; }
.button > .ui-icon,.upload-label > .ui-icon,.tabs button > .ui-icon { flex-shrink: 0; vertical-align: middle; }
.tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.nav-icon > .ui-icon { width: 26px; height: 26px; }
.material-icons[data-lexue-icon],.material-icons-round[data-lexue-icon] { display: inline-flex; align-items: center; justify-content: center; font-size: inherit; line-height: 1; }
.material-icons[data-lexue-icon]::before,.material-icons-round[data-lexue-icon]::before { content: none !important; }
.material-icons .ui-icon,.material-icons-round .ui-icon { width: 1.25em; height: 1.25em; }
@media(max-width:900px) {
  .main-nav::before { inset: -24px -24px 0; border-radius: 24px 24px 0 0; }
  .main-nav { padding-bottom: 12px; }
  .nav-picture > .ui-icon { width: 28px; height: 28px; }
}
@media(max-width:540px) {
  .main-nav::before { inset: -14px -14px 0; border-radius: 16px 16px 0 0; }
  .main-nav { padding-bottom: 8px; }
  .nav-picture > .ui-icon { width: 24px; height: 24px; }
  .mood-panel .picture > .ui-icon { width: 30px; height: 30px; }
}
@media(max-width:540px) {
  /* Keep the sentence readable beside its illustration; the action has its own short row. */
  .task-tile .task-copy { flex: 1 1 calc(100% - 80px); }
}