/* cec-info: a small circled "i" at the top right of a card; the explanation opens on hover, focus or tap (govreg-cec demo, 18 Oct 2026) */
body.ux.cec .cec-card-h:has(.cec-info) { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
body.ux.cec .cec-info { position: relative; z-index: 5; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border: 1.5px solid #8a8d91; border-radius: 50%; color: #55575b; font-size: 0.74rem; line-height: 1; cursor: help; background: #fff; }
body.ux.cec .cec-info:hover, body.ux.cec .cec-info:focus-visible, body.ux.cec .cec-info.open { border-color: var(--c-red, #c8102e); color: var(--c-red, #c8102e); outline: none; }
body.ux.cec .cec-info-pop { display: none; position: absolute; top: calc(100% + 8px); right: -6px; z-index: 1000; width: 280px; max-width: 78vw; padding: 0.7rem 0.85rem; background: #fff; border: 1px solid var(--c-line, #e3e3e3); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); color: #3d3f43; font-size: 0.8rem; line-height: 1.45; font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; text-align: left; cursor: auto; }
body.ux.cec .cec-info:hover .cec-info-pop, body.ux.cec .cec-info:focus-visible .cec-info-pop, body.ux.cec .cec-info.open .cec-info-pop { display: block; }
body.ux.cec .cec-info-h { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
body.ux.cec .cec-info-pop .cec-info-more { display: block; margin-top: 0.45rem; }
body.ux.cec .cec-info-i { font: italic 700 0.78rem/1 Georgia, serif; }
body.ux.cec .cec-info:hover, body.ux.cec .cec-info:focus-within, body.ux.cec .cec-info.open { z-index: 1001; }
body.ux.cec .cec-card-h:has(.cec-info) > h2 { margin-right: auto; }
body.ux.cec .cec-info.cec-info-inline { vertical-align: -5px; margin-left: 0.3rem; width: 20px; height: 20px; }

/* 19 Oct 2026: touch + narrow screens. The popup opens only on tap, as a sheet pinned inside the viewport; tap it, tap outside or press Esc to close. */
@media (hover: none) { body.ux.cec .cec-info:hover:not(.open) .cec-info-pop, body.ux.cec .cec-info:focus-within:not(.open) .cec-info-pop { display: none; } }
@media (max-width: 640px) {
  body.ux.cec .cec-info:hover:not(.open) .cec-info-pop, body.ux.cec .cec-info:focus-within:not(.open) .cec-info-pop, body.ux.cec .cec-info:focus-visible:not(.open) .cec-info-pop { display: none; }
  body.ux.cec .cec-info.open .cec-info-pop { display: block; position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; max-height: 65vh; overflow-y: auto; padding: 0.9rem 1rem 1rem; font-size: 0.88rem; box-shadow: 0 -4px 28px rgba(0,0,0,.22); z-index: 2147483000; overscroll-behavior: contain; }
  body.ux.cec .cec-info.open .cec-info-pop::after { content: "Tap to close"; display: block; margin-top: 0.6rem; font-size: 0.72rem; color: #8a8d91; text-align: right; }
  body.ux.cec .cec-info { width: 28px; height: 28px; }
}
/* 19 Oct 2026: on narrow screens a header (i) stays at the top right even when the header stacks (Board card) */
@media (max-width: 640px) { body.ux.cec .cec-card-h:has(> .cec-info) { position: relative; } body.ux.cec .cec-card-h:has(> .cec-info) > .cec-info { position: absolute; top: 0; right: 0; } body.ux.cec .cec-card-h:has(> .cec-info) > h2 { padding-right: 2.4rem; } }