/* Story byline (inc/mx-byline.php) */
.mxb-host { align-self: center; }
.mxb { display: flex; align-items: center; gap: 12px; font-family: Phetsarath, sans-serif; color: #15181C; }
.mxb-i { display: block; width: 15px; height: 15px; flex: none; }

/* avatar with a gold ring */
.mxb__av { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; overflow: hidden;
    font: 700 19px/1 Phetsarath, sans-serif; color: #F3C95B; background: linear-gradient(135deg, #173F35, #0F2B24);
    border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F3C95B, 0 6px 16px rgba(15, 43, 36, .2); }
.mxb__av img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mxb__txt { min-width: 0; }
.mxb__who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; line-height: 1.35; }
.mxb__by { font-size: 13px; color: #6B756F; }
.mxb__name { font-size: 16px; font-weight: 700; color: #0F2B24; }
.mxb__upd { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; font-size: 12px; font-weight: 700; line-height: 1.5;
    color: #0B7A3B; background: #E6F6EC; border: 1px solid #BFE6CD; border-radius: 999px; }
.mxb__upd .mxb-i { width: 13px; height: 13px; }

.mxb__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 13px; line-height: 1.4; color: #5D6A63; }
.mxb__when { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mxb__when time { color: #2C3631; font-weight: 600; }
.mxb__ago { color: #6B756F; }
.mxb__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 12.5px; line-height: 1.4; white-space: nowrap;
    color: #173F35; background: #F5F0E4; border: 1px solid #E8E1CF; border-radius: 999px; }
.mxb__chip .mxb-i { width: 14px; height: 14px; }
.mxb__chip b { font-variant-numeric: tabular-nums; }
.mxb__chip--views { color: #0F2B24; background: #FFF4D1; border-color: #F3DD9A; }

/* tablets and phones: the byline takes its own line above the share row */
@media (max-width: 1024px) {
    .mxb-host { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 600px) {
    .mxb { gap: 11px; }
    .mxb__av { width: 42px; height: 42px; font-size: 17px; }
    .mxb__name { font-size: 15px; }
    .mxb__meta { gap: 6px 8px; font-size: 12.5px; }
    .mxb__chip { padding: 2px 8px; font-size: 12px; }
}

/* with the byline on: the share row gets its own line under it on desktop, between two thin rules */
@media (min-width: 1025px) {
    body:has(.mxb-host) .mxs-host--top { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin: 14px 0 4px !important; }
    body:has(.mxb-host) .mxs-top { padding: 10px 0; border-top: 1px solid #ECE6D6; border-bottom: 1px solid #ECE6D6; }
}
@media (max-width: 1024px) {
    body:has(.mxb-host) .mxs-host--top { margin-top: 14px !important; }
}