/* Share buttons on single stories (inc/mx-share.php). Brand colours readers know at a glance; Mahaxan forest and gold for the card. */
:root {
    --mxs-fb: #1877F2; --mxs-wa: #0F9D4A; --mxs-line: #05A847; --mxs-x: #14171A; --mxs-copy: #173F35;
    --mxs-ms: linear-gradient(45deg, #0A84FF 0%, #A033FF 60%, #FF5C87 100%);
    --mxs-forest: #173F35; --mxs-forest-d: #0F2B24; --mxs-sun: #F3C95B; --mxs-cream: #F5F0E4;
    --mxs-fab-b: 24px;
}
.mxs-i { display: block; width: 20px; height: 20px; }

/* which buttons show: Messenger only on touch phones, the phone's own sheet only where the browser has one */
.mxs-b--ms, .mxs-b--more { display: none !important; }
html.mxs-touch .mxs-b--ms { display: inline-flex !important; }
html.mxs-touch.mxs-native .mxs-b--more { display: inline-flex !important; }

/* ---------- buttons ---------- */
.mxs-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; overflow: hidden;
    font: 700 14px/1.2 Phetsarath, sans-serif; color: #fff !important; text-decoration: none !important; cursor: pointer; border: 0; border-radius: 999px;
    -webkit-tap-highlight-color: transparent; transition: transform .14s cubic-bezier(.3, .7, .4, 1.4), box-shadow .2s ease, filter .2s ease; }
.mxs-b:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mxs-b:active { transform: scale(.92); transition-duration: .06s; }
.mxs-b:focus-visible, .mxs-fab:focus-visible, .mxs-card__copy:focus-visible { outline: 3px solid var(--mxs-sun); outline-offset: 2px; }
.mxs-b--fb { background: var(--mxs-fb); box-shadow: 0 4px 14px rgba(24, 119, 242, .32); }
.mxs-b--ms { background: var(--mxs-ms); box-shadow: 0 4px 14px rgba(160, 51, 255, .28); }
.mxs-b--wa { background: var(--mxs-wa); box-shadow: 0 4px 14px rgba(15, 157, 74, .28); }
.mxs-b--line { background: var(--mxs-line); box-shadow: 0 4px 14px rgba(5, 168, 71, .28); --mxs-ink: var(--mxs-line); }
.mxs-b--x { background: var(--mxs-x); box-shadow: 0 4px 14px rgba(20, 23, 26, .22); }
.mxs-b--copy { background: var(--mxs-copy); box-shadow: 0 4px 14px rgba(23, 63, 53, .25); }
.mxs-b--more { background: var(--mxs-sun); color: var(--mxs-forest-d) !important; box-shadow: 0 4px 14px rgba(243, 201, 91, .45); }
.mxs-b.is-done { background: var(--mxs-forest) !important; }
/* the press ripple */
.mxs-b::after, .mxs-card__copy::after { content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px;
    background: rgba(255, 255, 255, .55); border-radius: 50%; opacity: 0; transform: scale(0); pointer-events: none; }
.mxs-b.is-pop::after, .mxs-card__copy.is-pop::after { animation: mxs-ripple .5s ease-out; }
@keyframes mxs-ripple { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(24); } }

/* desktop tooltips on the round buttons */
@media (hover: hover) {
    .mxs-top .mxs-b:not(.mxs-b--fb), .mxs-rail .mxs-b { overflow: visible; }
    .mxs-top .mxs-b:not(.mxs-b--fb)::before, .mxs-rail .mxs-b::before { content: attr(data-tip); position: absolute; z-index: 3; bottom: calc(100% + 8px); left: 50%;
        padding: 5px 9px; font: 700 12px/1.2 Phetsarath, sans-serif; color: #fff; white-space: nowrap; background: var(--mxs-forest-d); border-radius: 7px;
        opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
    .mxs-rail .mxs-b::before { bottom: auto; top: 50%; left: calc(100% + 10px); transform: translate(-4px, -50%); }
    .mxs-top .mxs-b:hover::before { opacity: 1; transform: translate(-50%, 0); }
    .mxs-rail .mxs-b:hover::before { opacity: 1; transform: translate(0, -50%); }
}

/* ---------- 1. row under the title ---------- */
.mxs-host--top { margin-left: auto !important; }
.mxs-top { display: flex; align-items: center; gap: 10px; }
.mxs-top__lab { display: inline-flex; align-items: center; gap: 5px; font: 700 13px/1.2 Phetsarath, sans-serif; color: var(--mxs-forest); white-space: nowrap; }
.mxs-top__lab .mxs-i { width: 16px; height: 16px; }
.mxs-top__btns { display: flex; align-items: center; gap: 8px; }
.mxs-top .mxs-b { width: 40px; height: 40px; }
.mxs-top .mxs-b .mxs-b__t { display: none; }
.mxs-top .mxs-b--fb { width: auto; padding: 0 18px 0 12px; }
.mxs-top .mxs-b--fb .mxs-b__t { display: inline; }
.mxs-top .mxs-b--fb .mxs-i { width: 22px; height: 22px; }
.mxs-b__t { white-space: nowrap; }
.mxs-b__pre, .mxs-b__mid { display: none; }
@media (max-width: 1024px) { .mxs-top .mxs-b__pre, .mxs-top .mxs-b__mid { display: inline; } }
@media (max-width: 600px) { .mxs-top .mxs-b__mid, .mxs-top .mxs-b__brand { display: none; } .mxs-top .mxs-b--fb { font-size: 15px; } }

/* tablets and phones: the row takes its own line, Facebook stretches */
@media (max-width: 1024px) {
    .mxs-host--top { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin: 10px 0 2px !important; }
    .mxs-top { box-sizing: border-box; width: 100%; padding: 10px 12px; background: #F7F4EC; border: 1px solid #E8E1CF; border-radius: 16px; }
    .mxs-top__btns { flex: 1; min-width: 0; }
    .mxs-top .mxs-b:not(.mxs-b--fb) { width: 44px; height: 44px; flex: none; }
    .mxs-top .mxs-b--fb { flex: 1; min-width: 0; height: 44px; }
}
@media (max-width: 600px) {
    .mxs-top { gap: 8px; padding: 8px; }
    .mxs-top__lab { display: none; }
    .mxs-top__btns { gap: 6px; }
    .mxs-top .mxs-b:not(.mxs-b--fb) { width: 42px; height: 42px; }
    .mxs-top .mxs-b--fb { padding: 0 10px; height: 42px; }
    html.mxs-touch .mxs-top .mxs-b--x { display: none; }
}
@media (max-width: 370px) {
    html.mxs-touch.mxs-native .mxs-top .mxs-b--copy { display: none; }
    .mxs-top .mxs-b:not(.mxs-b--fb) { width: 38px; height: 38px; }
    .mxs-top .mxs-b--fb { height: 38px; }
}

/* ---------- 2. card after the story ---------- */
.mxs-host--card { width: 100% !important; max-width: 100% !important; }
.mxs-card { position: relative; overflow: hidden; margin: 8px 0 6px; padding: 24px 26px 20px; color: #fff; font-family: Phetsarath, sans-serif;
    background: linear-gradient(135deg, var(--mxs-forest) 0%, var(--mxs-forest-d) 100%); border-radius: 22px; box-shadow: 0 14px 36px rgba(15, 43, 36, .22); }
.mxs-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--mxs-sun), #FFE7A3, var(--mxs-sun)); }
.mxs-card__glow { position: absolute; top: -120px; right: -80px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(243, 201, 91, .28), rgba(243, 201, 91, 0) 65%); }
.mxs-card__head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.mxs-card .mxs-card__t { margin: 0 0 4px !important; font: 700 24px/1.35 Phetsarath, sans-serif !important; color: var(--mxs-sun) !important; }
.mxs-card__s { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.mxs-card__proof { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 12px; font-size: 13px; line-height: 1.2; white-space: nowrap;
    color: var(--mxs-forest-d); background: var(--mxs-sun); border-radius: 999px; box-shadow: 0 4px 14px rgba(243, 201, 91, .3); }
.mxs-card__proof .mxs-i { width: 17px; height: 17px; }
.mxs-card__proof b { font-variant-numeric: tabular-nums; }
.mxs-card__grid { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.mxs-card .mxs-b { height: 54px; padding: 0 14px; font-size: 15px; border-radius: 15px; }
.mxs-card .mxs-b .mxs-i { width: 22px; height: 22px; flex: none; }
.mxs-card .mxs-b--fb { font-size: 16px; }
.mxs-card .mxs-b--fb .mxs-i { width: 26px; height: 26px; }
/* a light sweep across the Facebook button when the card comes into view */
.mxs-card .mxs-b--fb::before { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
.mxs-card.is-seen .mxs-b--fb::before { animation: mxs-shine 1.1s ease-in-out .35s 2; }
@keyframes mxs-shine { to { left: 120%; } }
.mxs-card__link { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 6px 6px 14px;
    background: rgba(255, 255, 255, .08); border: 1px dashed rgba(243, 201, 91, .45); border-radius: 14px; }
.mxs-card__url { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 14px; color: rgba(255, 255, 255, .85); }
.mxs-card__url span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2px; }
.mxs-card__url .mxs-i { width: 17px; height: 17px; flex: none; opacity: .7; }
.mxs-card__copy { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; margin: 0; padding: 0 16px;
    font: 700 14px/1.2 Phetsarath, sans-serif; color: var(--mxs-forest-d); cursor: pointer; background: var(--mxs-sun); border: 0; border-radius: 11px;
    transition: transform .14s cubic-bezier(.3, .7, .4, 1.4), background-color .2s ease; }
.mxs-card__copy:hover { background: #FFD873; color: var(--mxs-forest-d); }
.mxs-card__copy:active { transform: scale(.94); }
.mxs-card__copy .mxs-i { width: 18px; height: 18px; }
.mxs-card__copy.is-done { color: #fff; background: #0F9D4A; }

/* touch phones and tablets: Facebook on its own line, then Messenger, WhatsApp, LINE and the phone's sheet */
html.mxs-touch .mxs-card__grid { grid-template-columns: repeat(4, 1fr); }
html.mxs-touch .mxs-card .mxs-b--fb { grid-column: 1 / -1; }
html.mxs-touch.mxs-native .mxs-card .mxs-b--x { display: none; }
@media (max-width: 1024px) {
    .mxs-card { padding: 22px 20px 18px; }
}
@media (max-width: 600px) {
    .mxs-card { margin: 4px -4px; padding: 20px 16px 16px; border-radius: 20px; }
    .mxs-card__head { flex-direction: column; gap: 10px; margin-bottom: 16px; }
    .mxs-card .mxs-card__t { font-size: 21px !important; }
    .mxs-card__s { font-size: 14.5px; }
    .mxs-card__grid { gap: 8px; }
    .mxs-card__link { padding-left: 12px; }
    .mxs-card__url { font-size: 12.5px; }
    .mxs-card__url .mxs-i { display: none; }
    .mxs-card .mxs-b { height: 52px; }
    .mxs-card .mxs-b:not(.mxs-b--fb) { flex-direction: column; gap: 3px; height: 64px; padding: 6px 2px; font-size: 11.5px; border-radius: 14px; }
    .mxs-card .mxs-b:not(.mxs-b--fb) .mxs-i { width: 24px; height: 24px; }
    html:not(.mxs-touch) .mxs-card__grid { grid-template-columns: repeat(3, 1fr); }
    html:not(.mxs-touch) .mxs-card .mxs-b--fb { grid-column: 1 / -1; }
}

/* ---------- 3a. desktop rail beside the story ---------- */
.mxs-rail { position: fixed; z-index: 900; top: 50%; left: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px;
    background: rgba(255, 255, 255, .92); border: 1px solid #ECE6D6; border-radius: 999px; box-shadow: 0 10px 30px rgba(15, 43, 36, .14);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transform: translate(-10px, -50%); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.mxs-rail.is-on { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .25s ease, transform .25s ease; }
.mxs-rail__lab { font: 700 11px/1.2 Phetsarath, sans-serif; color: var(--mxs-forest); }
.mxs-rail .mxs-b { width: 42px; height: 42px; box-shadow: none; }
.mxs-rail .mxs-b__t { display: none; }
@media (max-width: 1024px), (hover: none) { .mxs-rail { display: none; } }

/* ---------- 3b. phone and tablet button ---------- */
.mxs-fab { display: none; }
@media (max-width: 1024px), (hover: none) {
    .mxs-fab { position: fixed; z-index: 9988; right: 14px; bottom: calc(var(--mxs-fab-b) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px;
        height: 54px; min-width: 54px; margin: 0; padding: 0 15px; font: 700 15px/1 Phetsarath, sans-serif; color: var(--mxs-forest-d); cursor: pointer;
        background: var(--mxs-sun); border: 2px solid var(--mxs-forest-d); border-radius: 999px; box-shadow: 0 8px 22px rgba(15, 43, 36, .35);
        -webkit-tap-highlight-color: transparent; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8);
        transition: opacity .22s ease, transform .3s cubic-bezier(.3, .7, .4, 1.4), visibility 0s linear .3s, padding .25s ease; }
    .mxs-fab .mxs-i { width: 23px; height: 23px; flex: none; }
    .mxs-fab__t { max-width: 90px; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, opacity .2s ease; }
    .mxs-fab.is-mini { padding: 0 14px; }
    .mxs-fab.is-mini .mxs-fab__t { max-width: 0; opacity: 0; margin-left: -8px; }
    .mxs-fab.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s cubic-bezier(.3, .7, .4, 1.4), padding .25s ease; }
    .mxs-fab:active { transform: scale(.9); transition-duration: .06s; }
    .mxs-fab.is-hello::after { content: ""; position: absolute; inset: -2px; border: 3px solid var(--mxs-sun); border-radius: inherit; animation: mxs-ring 1.4s ease-out 2; pointer-events: none; }
}
@keyframes mxs-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
/* above the phone bottom bar and the Today ticker (mxt-appnav.css, mx-nudge.css) */
@media (max-width: 767px) {
    body.mxt-has-appnav { --mxs-fab-b: 92px; }
    body.mxn-has-tick { --mxs-fab-b: 144px; }
}

/* ---------- share sheet (phones whose browser has no share sheet) ---------- */
.mxs-sheet { position: fixed; z-index: 9996; inset: 0; font-family: Phetsarath, sans-serif; }
.mxs-sheet[hidden] { display: none; }
.mxs-sheet__bg { position: absolute; inset: 0; background: rgba(15, 43, 36, .55); animation: mxs-fade .2s ease; }
.mxs-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    color: #15181C; background: var(--mxs-cream); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: mxs-up .28s cubic-bezier(.2, .8, .3, 1); }
.mxs-sheet__grab { display: block; width: 40px; height: 4px; margin: 0 auto 10px; background: #CFC8B4; border-radius: 4px; }
.mxs-sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 18px; }
.mxs-sheet__x, .mxs-sheet__x:hover, .mxs-sheet__x:focus { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; color: #15181C; background: #E6DFCD; border: 0; border-radius: 50%; }
.mxs-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.mxs-sheet .mxs-b { flex-direction: column; gap: 7px; height: auto; padding: 0; font-size: 12.5px; color: #15181C !important; background: none !important; box-shadow: none; border-radius: 14px; }
.mxs-sheet .mxs-b__ic { display: grid; place-items: center; width: 56px; height: 56px; color: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.mxs-sheet .mxs-b__ic .mxs-i { width: 26px; height: 26px; }
.mxs-sheet .mxs-b--fb .mxs-b__ic { background: var(--mxs-fb); }
.mxs-sheet .mxs-b--ms .mxs-b__ic { background: var(--mxs-ms); }
.mxs-sheet .mxs-b--wa .mxs-b__ic { background: var(--mxs-wa); }
.mxs-sheet .mxs-b--line .mxs-b__ic { background: var(--mxs-line); }
.mxs-sheet .mxs-b--x .mxs-b__ic { background: var(--mxs-x); }
.mxs-sheet .mxs-b--copy .mxs-b__ic { background: var(--mxs-copy); }
.mxs-sheet .mxs-b.is-done .mxs-b__ic { background: #0F9D4A; }
.mxs-sheet .mxs-b.is-done { background: none !important; }
@keyframes mxs-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mxs-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- toast ---------- */
.mxs-toast { position: fixed; z-index: 9997; left: 50%; bottom: calc(var(--mxs-fab-b) + 70px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 9px;
    max-width: calc(100vw - 32px); padding: 12px 18px; font: 700 14.5px/1.4 Phetsarath, sans-serif; color: #fff; background: var(--mxs-forest-d);
    border: 1px solid rgba(243, 201, 91, .5); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; transform: translate(-50%, 14px); transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s; }
.mxs-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .25s cubic-bezier(.3, .7, .4, 1.4); }
.mxs-toast .mxs-i { width: 20px; height: 20px; flex: none; color: var(--mxs-sun); }
@media (min-width: 1025px) { .mxs-toast { bottom: 32px; } }

@media (prefers-reduced-motion: reduce) {
    .mxs-b, .mxs-fab, .mxs-rail, .mxs-toast, .mxs-card__copy { transition: none !important; }
    .mxs-b::after, .mxs-card .mxs-b--fb::before, .mxs-fab::after, .mxs-sheet__panel, .mxs-sheet__bg { animation: none !important; }
}

/* ---------- share count (presses + Facebook's own count), shown from 10 up ---------- */
.mxs-count[hidden] { display: none !important; }
.mxs-count b { font-variant-numeric: tabular-nums; }
.mxs-count.is-bump b { display: inline-block; animation: mxs-bump .55s cubic-bezier(.3, .7, .4, 1.6); }
@keyframes mxs-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: var(--mxs-sun); } 100% { transform: scale(1); } }
.mxs-count--top { display: inline-block; margin-left: 4px; padding: 2px 8px; font-size: 12px; line-height: 1.4; color: #fff; background: var(--mxs-forest); border-radius: 999px; }
.mxs-rail__lab { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.mxs-count--rail { font-size: 15px; line-height: 1.1; color: var(--mxs-forest-d); }
.mxs-card__proofs { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.mxs-card__proof--share { color: var(--mxs-forest-d); background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.mxs-card__proof--share::before { content: ""; width: 8px; height: 8px; background: #0F9D4A; border-radius: 50%; box-shadow: 0 0 0 3px rgba(15, 157, 74, .2); }
@media (max-width: 600px) { .mxs-card__proofs { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.mxs-card__proof--like { color: #fff; background: var(--mxs-fb); box-shadow: 0 4px 14px rgba(24, 119, 242, .35); }
.mxs-card__proof--like::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12zm20-11a2 2 0 0 0-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1L13.2 1 6.6 7.6C6.2 8 6 8.5 6 9v10a2 2 0 0 0 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12zm20-11a2 2 0 0 0-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1L13.2 1 6.6 7.6C6.2 8 6 8.5 6 9v10a2 2 0 0 0 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E") center / contain no-repeat; }