/* Explicit per-link choices apply to the name and its legacy font/span children only. */
html body a.link-display-style[data-managed-link-id][data-link-style-bold],
html body span.link-display-style[data-managed-link-id][data-link-style-bold],
html body a.link-display-style[data-managed-link-id][data-link-style-bold] *,
html body span.link-display-style[data-managed-link-id][data-link-style-bold] * {
  font-weight: var(--link-display-weight) !important;
}

html body a.link-display-style[data-managed-link-id][data-link-style-color],
html body span.link-display-style[data-managed-link-id][data-link-style-color],
html body a.link-display-style[data-managed-link-id][data-link-style-color] *,
html body span.link-display-style[data-managed-link-id][data-link-style-color] * {
  color: var(--link-display-color) !important;
}

html body a.link-display-style[data-managed-link-id][data-link-style-size],
html body span.link-display-style[data-managed-link-id][data-link-style-size],
html body a.link-display-style[data-managed-link-id][data-link-style-size] *,
html body span.link-display-style[data-managed-link-id][data-link-style-size] * {
  font-size: var(--link-display-size) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Give large names their own line box, so a narrow desktop/mobile cell expands to fit. */
html body a.link-display-style[data-managed-link-id][data-link-style-size],
html body span.link-display-style[data-managed-link-id][data-link-style-size] {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* a4 lists expand for a configured font size, without cutting off the text. */
html body .webbox_list li:has(> a[data-link-style-size]),
html body .webbox_list li:has(> .a4-front-admin-wrap > a[data-link-style-size]) { height: auto; min-height: 32px; }
html body .webbox_list a.link-display-style[data-link-style-size] { overflow: visible; text-indent: 0; padding-left: 28px; }
html body .webbox_title.has-category-notes { display: flex; flex-wrap: wrap; align-items: center; height: auto; min-height: 32px; overflow: visible; gap: 8px 20px; }
html body .webbox_title.has-category-notes > p { display: none; }
html body .webbox_title.has-category-notes > .left { flex: 0 0 150px; }
html body .a4-category-notes { display: flex; flex: 1 1 220px; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 8px 12px; border-radius: 6px; background: var(--wx-primary, #6e55c8); line-height: 1.6; }
html body [data-managed-category] > .a4-category-notes { margin: 0 12px 10px; }
html body .a4-category-notes > .a4-category-note { color: var(--section-text-color); min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) {
  html body .webbox_title.has-category-notes { gap: 6px; }
  html body .webbox_title.has-category-notes > .a4-category-notes { flex-basis: 100%; }
}

/* Mark other managed links too; keep the existing list/search background marker single. */
a.hot[data-managed-link-id]::before,
span.hot[data-managed-link-id]::before,
.logo-web-list .hot[data-managed-link-id] .logo-web-title::before,
.words .words_box .words_list a.hot[data-managed-link-id] > div::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-inline-end: 4px;
  vertical-align: -2px;
  background: url(images/hot.gif) center / 16px 16px no-repeat;
}
.webbox_list li a.hot[data-managed-link-id]::before,
a.site-search-link.hot[data-managed-link-id]::before,
.logo-web-list .hot[data-managed-link-id]:has(.logo-web-title)::before,
.words .words_box .words_list a.hot[data-managed-link-id]:has(> div)::before { content: none; }

/* Image-only links keep their image geometry; place their marker over the corner. */
a.hot[data-managed-link-id]:has(> img:only-child),
span.hot[data-managed-link-id]:has(> img:only-child) { position: relative; display: inline-block; max-width: 100%; }
a.hot[data-managed-link-id]:has(> img:only-child)::before,
span.hot[data-managed-link-id]:has(> img:only-child)::before { position: absolute; top: 4px; left: 4px; z-index: 1; margin: 0; pointer-events: none; }
.ck-slide-wrapper a.hot[data-managed-link-id]:has(> img:only-child),
.ck-slide-wrapper span.hot[data-managed-link-id]:has(> img:only-child) { display: block; height: 100%; }