/* ════════════════════════════════════════════════════════════════════════════
   media-centre.css — Media Centre design system (D-2026-07-22, approved 2026-07).
   Single source of truth for the Media Centre look in BOTH the Brain match-day tab
   and the standalone matchday app. Ported verbatim from the approved mockups
   (design/matchday-app-screens.html + matchday-media-refined.html). Everything is
   scoped to .mc-root with LOCAL tokens so it renders identically on any host.
   Airy light. Black score block with an attached orange timer. Collapsible
   sections. Compact 4-across buttons. Black for primary actions, orange a whisper.
   ════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

.mc-root{
  --ink:#141419; --ink2:#5A5A66; --muted:#9A9AA6; --faint:#C4C4CE; --hair:#EDEDF1;
  --bg:#EDEEF1; --card:#FFFFFF; --wash:#F5F5F8;
  --orange:#F7921A; --orange-d:#E07C0A; --green:#22A366; --red:#E5533B; --yellow:#F4C020; --black:#0C0C10;
  --disp:'Barlow Condensed',sans-serif; --ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --lift:0 26px 50px -26px rgba(20,22,45,.22),0 8px 18px -12px rgba(20,22,45,.10);
  --lift-sm:0 14px 30px -18px rgba(20,22,45,.16),0 2px 6px -3px rgba(20,22,45,.06);
  --lift-btn:0 16px 28px -12px rgba(12,12,16,.5);
  font-family:var(--ui); color:var(--ink); position:relative; padding-bottom:20px;
}
.mc-root *{box-sizing:border-box}
.mc-root svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* header */
.mc-top{display:flex;align-items:center;padding:8px 10px 4px;gap:13px}
.mc-top .mc-ic{width:37px;height:37px;border-radius:12px;background:var(--card);box-shadow:var(--lift-sm);display:grid;place-items:center;color:var(--ink2);border:none;cursor:pointer}
.mc-top .mc-ic svg{width:18px;height:18px}
.mc-top .mc-ttl{flex:1;text-align:center}
.mc-top .mc-ttl .e{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-d)}
.mc-top .mc-ttl .n{font-family:var(--disp);font-weight:800;font-size:18px;text-transform:uppercase;line-height:1;margin-top:2px}

/* score block WITH attached timer */
.mc-board{margin:18px 0 0;background:var(--black);border-radius:26px;padding:20px 9px 14px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--lift)}
.mc-board .mc-glow{position:absolute;inset:0;background:radial-gradient(120% 55% at 84% -10%,rgba(247,146,26,.3),transparent 52%)}
.mc-board .mc-rt{display:flex;justify-content:space-between;align-items:center;position:relative}
.mc-board .mc-live{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;color:rgba(255,255,255,.85)}
.mc-board .mc-live .d{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(247,146,26,.22)}
.mc-board .mc-vn{font-size:10px;font-weight:500;color:rgba(255,255,255,.5);text-align:right}
.mc-board .mc-ts{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:16px;position:relative}
.mc-board .mc-tm{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.mc-board .mc-cc{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:15px;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.mc-board .mc-cc.rb{background:var(--orange);color:#160c00;border:none}
.mc-board .mc-cc img{width:100%;height:100%;object-fit:contain}
.mc-board .mc-nm{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:11px;line-height:1.12;letter-spacing:.03em;color:rgba(255,255,255,.82);text-align:center;max-width:100%}
.mc-board .mc-nm-main{white-space:nowrap}
.mc-board .mc-nm-suffix{display:block;white-space:nowrap;margin-top:2px}
.mc-board .mc-sco{font-family:var(--disp);font-weight:900;font-size:50px;line-height:.82;font-variant-numeric:tabular-nums;text-align:center}
/* attached timer strip — orange time, tight */
.mc-tmr{margin-top:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:15px;padding:9px 6px 9px 9px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:8px;position:relative;overflow:hidden}
.mc-tmr .t{font-family:var(--disp);font-weight:900;font-size:23px;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums;cursor:pointer;background:none;border:none;padding:0}
.mc-tmr .hf{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer}
.mc-tmr .hf svg{width:12px;height:12px}
.mc-tmr .ctr{margin-left:auto;display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.mc-tmr .b{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;border:none;cursor:pointer}
.mc-tmr .b svg{width:14px;height:14px}
.mc-tmr .b.play{background:var(--green)}
.mc-tmr .b.end{background:rgba(255,255,255,.14)}
.mc-tmr .b[disabled]{opacity:.4}
/* padlock: guards the controls while the clock is live */
.mc-tmr .b.lock{background:rgba(247,146,26,.18);color:var(--orange);box-shadow:inset 0 0 0 1px rgba(247,146,26,.5)}
.mc-tmr .b.lock.open{background:rgba(34,163,102,.18);color:var(--green);box-shadow:inset 0 0 0 1px rgba(34,163,102,.5)}
.mc-tmr .t.locked{cursor:not-allowed;opacity:.6}
/* stacked read-out rows (Publer status / last-send) */
.mc-fl .ro.col{flex-direction:column;align-items:flex-start;gap:4px}
.mc-fl .ro.col span{display:block}
/* small in-panel button (e.g. Check last send) */
.mc-root .mc-btn{font-family:var(--ui);font-weight:700;font-size:12.5px;border-radius:10px;padding:9px 14px;border:none;cursor:pointer;background:var(--ink);color:#fff}
.mc-root .mc-btn.ghost{background:var(--wash);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.mc-root .mc-btn[disabled]{opacity:.5;cursor:default}
/* in-page yes/no confirm (sits above the create-post overlay) */
.mc-confirm{position:fixed;inset:0;z-index:980;display:grid;place-items:center;background:rgba(12,12,16,.34);opacity:0;transition:opacity .18s ease;padding:20px}
.mc-confirm.open{opacity:1}
.mc-confirm-card{background:var(--card);border-radius:20px;box-shadow:var(--lift);padding:22px 20px 16px;max-width:340px;width:100%;transform:translateY(10px);transition:transform .18s ease}
.mc-confirm.open .mc-confirm-card{transform:none}
.mc-confirm-card p{margin:0 0 16px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.mc-confirm-btns{display:flex;gap:9px}
.mc-confirm-btns button{flex:1;font-family:var(--ui);font-weight:700;font-size:13px;border-radius:12px;padding:11px;border:none;cursor:pointer}
.mc-confirm-btns .no{background:var(--wash);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.mc-confirm-btns .yes{background:var(--orange);color:#fff}
/* Per-post Yes/No network toggles. The decision sits to the right of the logo. */
.mc-nets{display:flex;gap:10px}
.mc-net{flex:1;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;background:#FCEBE7;color:var(--ink);border:0;border-radius:12px;padding:13px 12px;cursor:pointer;box-shadow:inset 0 0 0 1px #F1CBC3;font-family:var(--ui);text-align:left}
.mc-net.on{background:#E5F6ED;box-shadow:inset 0 0 0 1px #B9E4CD}
.mc-net .mc-net-ic{width:22px;height:22px;color:var(--ink);display:grid;place-items:center}
.mc-net .mc-net-ic svg{width:22px;height:22px}
.mc-net-name{font-size:12px;font-weight:700}
.mc-net-state{min-width:34px;border-radius:999px;padding:5px 7px;background:var(--red);color:#fff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase}
.mc-net.on .mc-net-state{background:var(--green)}
/* half picker (revealed) */
.mc-halfpick{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.mc-halfpick button{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);border:none;border-radius:100px;padding:8px 13px;cursor:pointer}
.mc-halfpick button.on{background:var(--orange);color:#160c00}

/* collapsible section */
.mc-sec{margin:14px 0 0;background:var(--card);border-radius:20px;box-shadow:var(--lift-sm);overflow:hidden}
.mc-sec-h{display:flex;align-items:center;gap:11px;padding:15px 17px;cursor:pointer;user-select:none}
.mc-sec-h b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.01em}
.mc-sec-h .n{font-size:11px;font-weight:700;color:var(--muted);background:var(--wash);padding:3px 9px;border-radius:100px}
.mc-sec-h .cv{margin-left:auto;color:var(--faint);transition:transform .2s ease}.mc-sec-h .cv svg{width:19px;height:19px}
.mc-sec-b{padding:2px 15px 16px}
.mc-sec.closed .mc-sec-b{display:none}
.mc-sec.closed .mc-sec-h{padding-bottom:16px}
.mc-sec.closed .mc-sec-h .cv{transform:rotate(180deg)}

/* Contextual match state, incident grid, then guarded recovery controls. */
.mc-acts{display:block;padding:4px 3px 0}
.mc-state-action{width:100%;min-height:58px;border:0;border-radius:15px;background:var(--orange);color:#1b1003;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;cursor:pointer;font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:.015em;box-shadow:0 8px 20px rgba(247,146,26,.22)}
.mc-state-action .i{width:25px;height:25px;display:grid;place-items:center}.mc-state-action .i svg{width:24px;height:24px}
.mc-state-action:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.mc-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 9px;padding:17px 0}
.mc-act{display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 0;background:none;border:none;cursor:pointer}
.mc-act:disabled{cursor:not-allowed;opacity:.35}
.mc-act .i{width:50px;height:50px;border-radius:15px;background:#E9E9ED;display:grid;place-items:center;color:#29292F;box-shadow:inset 0 0 0 1px rgba(0,0,0,.035)}
.mc-act .i svg{width:21px;height:21px}
.mc-act .i.o{background:#F9DDB6;color:#A84E00}.mc-act .i.yl{background:#F7E6A7;color:#8B6500}.mc-act .i.rd{background:#F4C9C1;color:#A6281B}
.mc-act span{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.015em;color:var(--ink);text-align:center;line-height:1.05}
.mc-safety-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;border-top:1px solid var(--hair);padding-top:14px}
.mc-safety-actions button{min-height:45px;border:0;border-radius:12px;background:var(--wash);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:var(--disp);font-size:12px;font-weight:900;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--hair)}
.mc-safety-actions button svg{width:18px;height:18px}.mc-safety-actions button.danger{background:#FBE7E3;color:var(--red);box-shadow:inset 0 0 0 1px #F3C8C0}

/* feed */
.mc-ev{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--hair)}
.mc-ev:last-child{border:none}
.mc-ev .m{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--faint);width:30px;font-variant-numeric:tabular-nums}
.mc-ev .tx{flex:1;min-width:0}
.mc-ev .tx b{display:block;font-size:13.5px;font-weight:700}
.mc-ev .tx span{font-size:11.5px;color:var(--muted)}
.mc-ev .r{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--green)}
.mc-ev .r.mut{color:var(--faint)}
.mc-ev .edit{margin-left:8px;color:var(--faint);background:none;border:none;cursor:pointer}.mc-ev .edit svg{width:16px;height:16px}
.mc-empty{text-align:center;color:var(--muted);font-size:12.5px;padding:16px 2px}

/* settings folds inside section */
.mc-fold{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--hair);cursor:pointer}
.mc-fold:last-child{border:none}
.mc-fold .fi{width:34px;height:34px;border-radius:11px;background:var(--wash);display:grid;place-items:center;color:var(--ink2)}
.mc-fold .fi svg{width:16px;height:16px}
.mc-fold .ft{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:14px}
.mc-fold .fs{font-size:11px;color:var(--muted);margin-top:1px}
.mc-fold .cv{margin-left:auto;color:var(--faint)}.mc-fold .cv svg{width:18px;height:18px}
/* expanded settings fields */
.mc-fields{padding:6px 2px 8px}
.mc-fl{margin-bottom:13px}
.mc-fl label{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--ink2);display:block;margin-bottom:7px}
.mc-fl .ro{display:flex;align-items:center;justify-content:space-between;background:var(--wash);border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600}
.mc-fl .ro .g{color:var(--muted);font-weight:500;font-size:12px}
.mc-inp{width:100%;background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.mc-inp:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,146,26,.12)}
.mc-emoji{display:flex;align-items:center;gap:9px}
.mc-emoji .big{width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--hair);display:grid;place-items:center;font-size:22px;cursor:pointer}

/* squad rows */
.mc-squad{display:grid;gap:7px}
.mc-squad .sh{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.03em;color:var(--muted);margin-top:6px}
.mc-sqrow{display:flex;gap:7px}
.mc-sqrow .num{width:46px;flex:0 0 auto;text-align:center}

/* ═══════════ create-post FULL PAGE overlay (album-screen) ═══════════ */
/* create-post: stays at the media-centre (mobile) width, centred, even on desktop */
.mc-cp{position:fixed;top:0;bottom:0;left:50%;width:min(560px,100%);z-index:900;
  background:radial-gradient(120% 60% at 50% -4%,#FDFDFE,transparent 46%),var(--bg);
  transform:translate(-50%,100%);transition:transform .34s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 70px rgba(20,22,45,.22)}
.mc-cp.open{transform:translate(-50%,0)}
.mc-cp-top{display:flex;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 22px 2px;gap:14px}
.mc-cp-top .mc-ic{width:38px;height:38px;border-radius:12px;background:var(--card);box-shadow:var(--lift-sm);display:grid;place-items:center;color:var(--ink2);border:none;cursor:pointer}
.mc-cp-top .mc-ic svg{width:18px;height:18px}.mc-cp-top .sp{flex:1}
.mc-cp-head{padding:14px 24px 0}
.mc-cp-head .e{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d)}
.mc-cp-head h2{font-family:var(--disp);font-weight:900;font-size:52px;line-height:.86;text-transform:uppercase;letter-spacing:.005em;margin-top:6px}
.mc-cp-head .sub{font-size:13px;color:var(--muted);margin-top:8px}
.mc-cp-form{padding:22px 22px 0}
.mc-cp-fl{margin-bottom:16px}
.mc-cp-fl label{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--ink2);display:block;margin-bottom:8px}
.mc-goal-quick{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.mc-goal-quick .mc-sel{width:96px}
.mc-goal-types>div{display:flex;gap:14px;min-height:44px;align-items:center}
.mc-goal-types .mc-quick-chk{display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap;font-family:var(--ui);font-weight:600;text-transform:none;font-size:12px;letter-spacing:0;cursor:pointer}
.mc-goal-types .mc-quick-chk input{width:17px;height:17px;margin:0;accent-color:var(--black)}
.mc-tog{display:inline-flex;background:var(--wash);border-radius:100px;padding:4px;width:100%}
.mc-tog button{flex:1;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:var(--muted);border:none;background:none;padding:10px 0;border-radius:100px;cursor:pointer}
.mc-tog button.on{background:var(--card);color:var(--ink);box-shadow:var(--lift-sm)}
.mc-sel{width:100%;background:var(--card);border:1px solid var(--hair);border-radius:15px;padding:15px 16px;font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:var(--lift-sm);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C4C4CE' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.mc-drop{background:var(--card);border-radius:15px;padding:20px;text-align:center;color:var(--muted);font-size:13px;font-weight:500;box-shadow:var(--lift-sm);display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:none;width:100%}
.mc-drop svg{width:18px;height:18px}
.mc-ta{width:100%;background:var(--card);border:none;border-radius:15px;padding:16px;font-family:var(--ui);font-size:14.5px;line-height:1.6;resize:none;box-shadow:var(--lift-sm);color:var(--ink);min-height:140px}
.mc-cp-pl{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--ink2);margin:6px 0 12px}
.mc-preview-label{font-family:var(--disp);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:14px 2px 7px}
.mc-subrow{display:grid;grid-template-columns:1fr 18px 1fr 34px;gap:8px;align-items:center;margin-bottom:8px}
.mc-subrow .ar{text-align:center;color:var(--faint)}
.mc-subrow .rm{background:var(--card);border:1px solid var(--hair);border-radius:10px;height:44px;color:var(--faint);cursor:pointer}
.mc-addsub{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em;color:var(--orange-d);background:none;border:none;cursor:pointer;padding:6px 0}

/* previews */
.mc-xp{background:var(--card);border-radius:18px;padding:15px;box-shadow:var(--lift-sm);margin-bottom:14px}
.mc-xp .r{display:flex;gap:12px}
.mc-xp .av{width:42px;height:42px;border-radius:50%;background:var(--black);display:grid;place-items:center;flex:0 0 auto;color:var(--orange)}
.mc-xp .av svg{width:21px;height:21px}
.mc-xp .nm{font-weight:700;font-size:14px;color:#0f1419}.mc-xp .nm .v{color:#1d9bf0}.mc-xp .nm .h{color:#536471;font-weight:400}
.mc-xp .tx{font-size:14px;line-height:1.45;color:#0f1419;margin-top:3px;white-space:pre-wrap}
.mc-xp .im{margin-top:11px;min-height:124px;border-radius:15px;background:linear-gradient(135deg,#241a10,#0b0b0e);position:relative;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:11px}
.mc-xp .im::after{content:'';position:absolute;inset:0;background:radial-gradient(90% 80% at 80% 0,rgba(247,146,26,.36),transparent 60%)}
.mc-xp .im span{position:relative;z-index:1}
.mc-xp .ico{display:flex;justify-content:space-between;max-width:220px;margin-top:12px;color:#8b98a5}.mc-xp .ico svg{width:17px;height:17px}
.mc-ig{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--lift-sm);margin-bottom:14px}
.mc-ig .r{display:flex;align-items:center;gap:10px;padding:12px 14px}
.mc-ig .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);padding:2px}.mc-ig .av i{display:block;width:100%;height:100%;border-radius:50%;background:var(--black)}
.mc-ig .nm{font-weight:700;font-size:13.5px}.mc-ig .mo{margin-left:auto;color:#111}
.mc-ig .im{min-height:200px;background:linear-gradient(135deg,#241a10,#0b0b0e);position:relative;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:11px}.mc-ig .im::after{content:'';position:absolute;inset:0;background:radial-gradient(90% 80% at 75% 10%,rgba(247,146,26,.4),transparent 60%)}.mc-ig .im span{position:relative;z-index:1}
.mc-xp .im.has-image,.mc-ig .im.has-image{min-height:0;background:#111}
.mc-xp .im.has-image::after,.mc-ig .im.has-image::after{display:none}
.mc-xp .im img,.mc-ig .im img{display:block;width:100%;height:auto;object-fit:contain}
.mc-ig .ico{display:flex;gap:16px;padding:12px 14px 3px;color:#111}.mc-ig .ico svg{width:23px;height:23px}
.mc-ig .cap{padding:2px 14px 15px;font-size:13.5px;line-height:1.45}.mc-ig .cap b{font-weight:700}

/* foot pills (Draft only / Post) */
.mc-cp-foot{display:flex;gap:13px;padding:16px 22px calc(env(safe-area-inset-bottom) + 22px)}
.mc-cp-foot .pill{flex:1;height:56px;border-radius:100px;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:16px;border:none;cursor:pointer}
.mc-cp-foot .pill.blk{background:var(--black);color:#fff;box-shadow:var(--lift-btn)}
.mc-cp-foot .pill.blk svg{width:20px;height:20px;color:#fff}
.mc-cp-foot .pill.gh{background:var(--card);color:var(--ink);box-shadow:var(--lift-sm)}
.mc-cp-foot .pill.gh svg{width:18px;height:18px}
.mc-cp-foot .pill[disabled]{opacity:.5}
.mc-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);padding:2px 24px 8px;cursor:pointer}
.mc-chk input{width:16px;height:16px;accent-color:var(--black)}

/* toast/msg */
.mc-msg{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--black);color:#fff;font-size:13px;font-weight:600;padding:12px 18px;border-radius:100px;z-index:950;box-shadow:var(--lift-btn);display:none;max-width:calc(100% - 44px);text-align:center}
.mc-msg.show{display:block}

/* social feed net marks */
.mc-sfnet{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:10px;color:#fff;flex:0 0 auto}
.mc-sfnet.x{background:var(--black)}.mc-sfnet.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}

/* emoji picker */
.mc-epick{position:fixed;z-index:960;background:var(--card);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--lift);padding:12px;width:288px;display:none}
.mc-epick.open{display:block}
.mc-epick input{width:100%;border:1px solid var(--hair);border-radius:10px;padding:9px 11px;font-size:13px;margin-bottom:10px;font-family:var(--ui)}
.mc-egrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-height:200px;overflow-y:auto}
.mc-egrid button{border:none;background:none;font-size:19px;padding:5px;border-radius:8px;cursor:pointer}
.mc-egrid button:hover{background:var(--wash)}

/* feed row: post-type icon (between minute + text) and network chips (left of Posted) */
.mc-root .mc-fic{width:26px;height:26px;flex:0 0 auto;color:var(--ink2);display:grid;place-items:center}
.mc-root .mc-fic svg{width:18px;height:18px}
.mc-root .mc-fr{margin-left:auto;display:flex;align-items:center;gap:6px}
.mc-root .mc-ev .r{margin-left:0}
.mc-root .mc-fnet{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:10px;color:#fff}
.mc-root .mc-fnet.x{background:var(--black)}
.mc-root .mc-fnet.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}

/* correction note in the edit panel */
.mc-root .mc-editnote{margin:2px 22px 8px;font-size:11.5px;color:#8a5217;background:#FDF0DE;border-radius:12px;padding:11px 13px;line-height:1.5}

/* settings fold chevron rotates when open */
.mc-root .mc-fold .cv{transition:transform .18s ease}
.mc-root .mc-fold.open .cv{transform:rotate(90deg)}

/* loading skeleton shimmer */
.mc-root .mc-skel{background:linear-gradient(100deg,#E7E7EE 30%,#F2F2F6 50%,#E7E7EE 70%);background-size:200% 100%;animation:mc-shim 1.15s linear infinite}
@keyframes mc-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Fixture emoji setup: shared by the standalone and embedded matchday views. */
.mc-emoji-setup{max-height:calc(100dvh - 40px);overflow:auto}
.mc-emoji-setup label{display:block;margin-bottom:8px}
.mc-emoji-options{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:220px;overflow:auto;margin:12px 0}
.mc-emoji-options button{font-size:26px;min-height:44px;border:2px solid transparent;border-radius:8px;background:var(--wash);cursor:pointer}
.mc-emoji-options button[aria-pressed=true]{border-color:var(--orange)}
.mc-emoji-options span{grid-column:1/-1}
.mc-emoji-setup .mc-emoji-error{color:var(--red,#b42318);font-size:13px}
.mc-stream-toggle{display:flex;align-items:center;gap:10px;min-height:44px}
.mc-stream-toggle input{appearance:none;width:44px;height:26px;background:var(--muted,#777);border-radius:20px;position:relative;cursor:pointer;margin:0}
.mc-stream-toggle input:checked{background:var(--orange)}
.mc-stream-toggle input::after{content:'';position:absolute;width:20px;height:20px;top:3px;left:3px;border-radius:50%;background:white;transition:transform .15s}
.mc-stream-toggle input:checked::after{transform:translateX(18px)}
