/* Marketing on the desk (desk-marketing.js and desk-mk-*.js; design_handoff_marketing_tab). High Desert
   tokens from app.css/desk.css. One rust button per page; badges are rust and mean "needs you"; Anton
   only for titles and big numbers. Class names start with mk-. */

.mk-page { padding-top: 10px; gap: 14px; }
.mk-flex1 { flex: 1; }
.mk-hidden { display: none; }
.mk-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-row--wrap { flex-wrap: wrap; }
.mk-row--between { justify-content: space-between; }
.mk-row--tight { gap: 4px; }
.mk-stack-xs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-stack-s { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mk-pad { padding: 10px 14px; margin: 0; }
.mk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mk-dim { color: var(--ink-500); }
.mk-meta { font-size: 12.5px; color: var(--ink-600); }
.mk-mono { font: 500 12.5px var(--mono); }
.mk-mono-s { font: 500 11.5px var(--mono); color: var(--ink-600); }
.mk-mono-xs { font: 500 10.5px var(--mono); color: var(--ink-500); }
.mk-label { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.mk-lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mk-h2 { font: 400 26px/.9 var(--display); text-transform: uppercase; color: var(--ink-900); }
.mk-h2--s { font-size: 24px; }
.mk-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-600); }
.mk-note--box { padding: 12px 14px; border-radius: 12px; background: var(--d-box); }
.mk-stripes { background-image: repeating-linear-gradient(135deg, rgba(31, 26, 22, .07) 0 8px, rgba(31, 26, 22, .02) 8px 16px); background-color: var(--sand-200); }
.mk-textlink { border: 0; background: none; padding: 0 4px; cursor: pointer; font: 600 12.5px var(--d-chrome); color: var(--rust-600); white-space: nowrap; }
.mk-textlink:hover { text-decoration: underline; }
.mk-ulink { border: 0; background: none; padding: 0; cursor: pointer; font: 600 11.5px var(--d-chrome); color: var(--ink-600); text-decoration: underline; text-underline-offset: 2px; }
.mk-ulink:hover { color: var(--ink-900); }
.mk-emptycard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; border-radius: 14px; background: var(--d-card); }

/* buttons: rust = the page's main action, ink = main action in a card, quiet = repeated actions */
.mk-btn.d-btn--s { height: 28px; padding: 0 13px; font-size: 12.5px; }
.mk-btn--quiet { background: var(--d-tint); color: var(--ink-900); }
.mk-btn--ink { background: var(--ink-900); color: var(--sand-100); }
.mk-btn--ink:hover { background: var(--ink-800); color: var(--sand-100); }
.mk-btn--dark { background: var(--ink-800); color: var(--sand-100); }
.mk-btn--dark:hover { background: #3a332d; color: var(--sand-50); }

/* ---------- toolbar: the client picker ---------- */
.d-tb__acts.mk-acts { display: flex; }
.mk-pickbtn { flex: none; height: 34px; min-width: 220px; max-width: 300px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 13px var(--d-chrome); color: var(--ink-900);
  background: rgba(251, 247, 240, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 .5px rgba(31, 26, 22, .12), 0 4px 14px -6px rgba(31, 26, 22, .25); }
.mk-pickbtn:hover { background: rgba(251, 247, 240, .95); }
.mk-pickbtn__name { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pickbtn__meta { font: 500 11px var(--mono); color: var(--ink-500); white-space: nowrap; }
.mk-pickbtn__caret { font-size: 10px; color: var(--ink-500); }
@media (max-width: 1180px) { .mk-pickbtn { min-width: 0; max-width: 240px; } .mk-pickbtn__meta { display: none; } }

.mk-av { flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--ink-900); color: var(--sand-100); font: 400 12px var(--display); overflow: hidden; }
.mk-av--s { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
.mk-av--all { background: var(--rust-600); color: var(--sand-50); font: 400 12px var(--d-chrome); }

.mk-pick { position: fixed; z-index: 75; width: 360px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; font-family: var(--d-chrome);
  background: rgba(251, 247, 240, .92); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 12px 36px -8px rgba(31, 26, 22, .4), 0 0 0 .5px rgba(31, 26, 22, .15); }
.mk-pick__search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 9px; background: rgba(31, 26, 22, .05); }
.mk-pick__icon, .mk-pick__icon svg { width: 14px; height: 14px; display: flex; color: var(--ink-500); flex: none; }
.mk-pick__in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--body); color: var(--ink-900); }
.mk-pick__esc { font: 500 11px var(--mono); color: var(--ink-500); }
.mk-pick__chips { display: flex; gap: 4px; padding: 2px 2px 4px; flex-wrap: wrap; }
.mk-chip { height: 24px; padding: 0 10px; border-radius: 999px; cursor: pointer; font: 600 11.5px var(--body); white-space: nowrap; background: transparent; color: var(--ink-900); border: 1px solid rgba(31, 26, 22, .2); }
.mk-chip.is-on { background: var(--ink-900); color: var(--sand-100); border-color: var(--ink-900); }
.mk-pick__list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; }
.mk-pick__list::-webkit-scrollbar { display: none; }
.mk-pick__head { padding: 8px 10px 3px; font-size: 11px; font-weight: 600; color: var(--ink-500); }
.mk-pick__row { width: 100%; text-align: left; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: transparent; color: var(--ink-900); font: inherit; }
.mk-pick__row.is-hi { background: rgba(31, 26, 22, .08); }
.mk-pick__row:hover { background: var(--rust-600); color: var(--sand-50); }
.mk-pick__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-pick__name { font: 600 13px var(--d-chrome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pick__meta { font-size: 11.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pick__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.mk-pick__ck { width: 12px; font-size: 12px; }
.mk-pick__none { padding: 18px 10px; text-align: center; font-size: 13px; color: var(--ink-600); }
.mk-pick__foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px 4px; border-top: 1px solid var(--line); font: 500 11px var(--mono); color: var(--ink-500); }

/* ---------- tab row ---------- */
.mk-tabs { display: flex; align-items: flex-end; gap: 16px; border-bottom: 1.5px solid var(--ink-900); }
.mk-tabs__main { display: flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mk-tabs__main::-webkit-scrollbar { display: none; }
.mk-tabs__gap { flex: none; width: 1px; height: 18px; margin: 0 6px 9px; background: rgba(31, 26, 22, .18); }
.mk-tab { flex: none; cursor: pointer; border: 0; background: transparent; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px 8px 0 0; font: 600 13px var(--d-chrome); white-space: nowrap; color: var(--ink-600); }
.mk-tab:hover { color: var(--ink-900); }
.mk-tab.is-on { color: var(--ink-900); background: rgba(251, 247, 240, .85); box-shadow: inset 0 -3px 0 var(--rust-600); }
.mk-tab__caret { font-size: 10px; }
.mk-badge { min-width: 18px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font: 700 11px var(--d-chrome); display: inline-flex; align-items: center; justify-content: center; background: var(--rust-600); color: var(--sand-50); }
.mk-view { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- shared bits ---------- */
.mk-seg > button { color: var(--ink-900); font-family: var(--d-chrome); }
.mk-seg > [aria-pressed="true"] { box-shadow: 0 1px 3px rgba(31, 26, 22, .18), 0 0 0 .5px rgba(31, 26, 22, .08); }
.mk-seg--xs > button { height: 22px; padding: 0 10px; font-size: 11.5px; }
.mk-seg--scroll { overflow-x: auto; scrollbar-width: none; }
.mk-seg--scroll::-webkit-scrollbar { display: none; }
.mk-nets { display: inline-flex; gap: 3px; flex: none; }
.mk-net { min-width: 20px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 5px; background: rgba(31, 26, 22, .07); display: inline-flex; align-items: center; justify-content: center; font: 700 9.5px var(--mono); color: var(--ink-900); }
.mk-net--dark { min-width: 22px; height: 20px; background: var(--ink-900); color: var(--sand-100); }
.mk-net--ok { background: var(--sage-100); color: var(--sage-ink); }
.mk-net--bad { background: var(--rust-600); color: var(--sand-100); }
.mk-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 999px; font: 600 11px var(--body); white-space: nowrap; flex: none; }
.mk-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mk-pill--live { background: var(--sage-100); color: var(--sage-ink); } .mk-pill--live .mk-pill__dot { background: var(--sage-600); }
.mk-pill--ink { background: rgba(31, 26, 22, .07); color: var(--ink-900); } .mk-pill--ink .mk-pill__dot { background: var(--ink-900); }
.mk-pill--wait { background: var(--ochre-100); color: var(--ochre-ink); } .mk-pill--wait .mk-pill__dot { background: var(--ochre); }
.mk-pill--bad { background: var(--warn-bg); color: var(--warn-ink); } .mk-pill--bad .mk-pill__dot { background: var(--rust-600); }
.mk-pill--off { background: transparent; color: var(--ink-500); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .2); } .mk-pill--off .mk-pill__dot { background: var(--ink-400); }
.mk-check { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--sand-50); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(31, 26, 22, .3); }
.mk-check.is-on { background: var(--rust-600); box-shadow: none; }
.mk-input { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(251, 247, 240, .95); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .12); font: 400 14px var(--body); color: var(--ink-900); outline: 0; min-width: 0; box-sizing: border-box; }
.mk-input:focus, .mk-textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.mk-input--pill { height: 36px; border-radius: 999px; padding: 0 14px; }
.mk-input--mono { font: 500 13px var(--mono); }
.mk-input--s { height: 30px; font-size: 12px; padding: 0 10px; }
.mk-input--auto { align-self: flex-start; }
.mk-select { cursor: pointer; }
.mk-textarea { width: 100%; box-sizing: border-box; resize: vertical; outline: 0; padding: 12px 14px; border: 0; border-radius: 14px; font: 400 14.5px/1.5 var(--body); color: var(--ink-900); background: rgba(251, 247, 240, .85); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .08); }
.mk-textarea[readonly] { color: var(--ink-600); }
.mk-textarea--s { padding: 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; background: rgba(251, 247, 240, .9); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .1); }
.mk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-field--s { flex: 0 1 180px; }
.mk-field__l { font-size: 12.5px; font-weight: 600; }
.mk-range { width: 100%; margin: 0; accent-color: var(--rust-600); }
.mk-box { background: var(--d-box); border-radius: 14px; }
.mk-box--rows { overflow: hidden; }
.mk-scrollx { overflow-x: auto; scrollbar-width: none; }
.mk-scrollx::-webkit-scrollbar { display: none; }
.mk-tablecard { background: var(--d-card); border-radius: 14px; }
.mk-progress { flex: 1; display: block; height: 6px; min-width: 60px; border-radius: 999px; background: var(--sand-300); overflow: hidden; }
.mk-progress > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--rust-600); transition: width .2s; }
.mk-progress--s { height: 5px; }
.mk-progress--w90 { flex: none; width: 90px; }
.mk-progress--edge { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: rgba(31, 26, 22, .2); }
.mk-progress--edge > span { border-radius: 0; }

/* selection bar (Library, Bulk post) */
.mk-selbar { position: sticky; bottom: 12px; z-index: 5; align-self: center; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink-900); color: var(--sand-100); box-shadow: 0 16px 40px -12px rgba(31, 26, 22, .5); font-family: var(--d-chrome); }
.mk-selbar strong { font-size: 13.5px; }
.mk-selbar__dim { font-size: 12.5px; color: var(--ink-300); }
.mk-selbar__clear { height: 30px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; font: 600 13px var(--d-chrome); background: transparent; color: var(--ink-300); }
.mk-selbar__clear:hover { color: var(--sand-50); }
.mk-darkseg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--ink-800); }
.mk-darkseg > button { height: 26px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 600 12.5px var(--d-chrome); background: transparent; color: var(--sand-100); }
.mk-darkseg > [aria-pressed="true"] { background: var(--sand-100); color: var(--ink-900); }

/* modal */
.mk-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(31, 26, 22, .35); }
.mk-modal { position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--sand-100); border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(31, 26, 22, .6); font-family: var(--d-chrome); color: var(--ink-900); scrollbar-width: none; }
.mk-modal::-webkit-scrollbar { display: none; }
.mk-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(31, 26, 22, .07); color: var(--ink-900); font-size: 12px; }
.mk-x:hover { background: rgba(31, 26, 22, .14); }
.mk-mhead { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.mk-mbody { padding: 16px 20px; max-height: 60vh; overflow-y: auto; }
.mk-mfoot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }
.mk-modal--lib { width: min(860px, calc(100vw - 48px)); overflow: hidden; display: flex; flex-direction: column; }
.mk-modal--text { width: min(560px, calc(100vw - 48px)); }
.mk-textbox { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.mk-textbox__head { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.mk-textbox__body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.mk-textbox__words { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-qr { width: 168px; height: 168px; flex: none; border-radius: 12px; background: #fff; }
.mk-bubble { margin: 0; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink-900); color: var(--sand-100); font: 400 14px/1.45 var(--body); white-space: pre-wrap; }

/* ---------- Calendar ---------- */
.mk-cal { display: flex; flex-direction: column; gap: 12px; }
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mk-kpi { border: 0; cursor: pointer; text-align: left; background: var(--d-card); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-900); font-family: var(--d-chrome); }
.mk-kpi:hover { background: rgba(251, 247, 240, .92); }
.mk-kpi__n { font: 400 42px/.9 var(--display); }
.mk-kpi__n.tone-sage { color: var(--sage-600); } .mk-kpi__n.tone-ochre { color: var(--ochre); } .mk-kpi__n.tone-rust { color: var(--rust-600); }
.mk-kpi__sub { font-size: 13px; color: var(--ink-600); }
.mk-fail { background: var(--warn-bg); border-radius: 14px; overflow: hidden; }
.mk-fail__head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; flex-wrap: wrap; color: var(--warn-ink); font-size: 12.5px; }
.mk-fail__head strong { font-size: 14px; }
.mk-fail__head .d-dot { width: 8px; height: 8px; }
.mk-fail__row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid rgba(194, 70, 31, .18); flex-wrap: wrap; }
.mk-fail__txt { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.mk-fail__what { font-size: 13.5px; }
.mk-fail__what strong { font-weight: 600; }
.mk-fail__why { font-size: 12.5px; color: var(--warn-ink); }
.mk-fail__ok { font-size: 12.5px; font-weight: 600; color: var(--sage-ink); }
.mk-calhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.mk-calhead__l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mk-calhead__r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-600); }
.mk-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mk-legend .d-dot { width: 8px; height: 8px; }
.mk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mk-day { background: var(--d-card); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; min-width: 0; }
.mk-day.is-over, .mk-mcell.is-over { box-shadow: inset 0 0 0 2px var(--rust-600); }
.mk-day__head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px 8px; color: var(--ink-900); }
.mk-day__head .mk-label { color: inherit; }
.mk-day__head.is-today { color: var(--rust-600); }
.mk-day__num { font: 400 22px/.9 var(--display); }
.mk-wpost { width: 100%; border: 0; border-top: 1px solid var(--line); border-left: 3px solid var(--ink-900); background: transparent; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 10px 9px; color: var(--ink-900); font-family: var(--d-chrome); min-width: 0; }
.mk-wpost:hover { background: rgba(31, 26, 22, .04); }
.mk-wpost.is-drag { cursor: grab; }
.mk-wpost.is-bad { background: var(--warn-bg); }
.mk-edge--sage { border-left-color: var(--sage-600); } .mk-edge--ink { border-left-color: var(--ink-900); } .mk-edge--ochre { border-left-color: var(--ochre); }
.mk-edge--rust { border-left-color: var(--rust-600); } .mk-edge--muted { border-left-color: var(--ink-400); }
.mk-wpost__top { display: flex; align-items: center; gap: 6px; }
.mk-wpost__img { width: 22px; height: 22px; flex: none; border-radius: 6px; background-color: var(--sand-300); }
.mk-wpost__time { font: 600 12px var(--mono); }
.mk-wpost__biz { font-weight: 600; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.mk-wpost__cap { font-size: 12.5px; line-height: 1.35; color: var(--ink-600); min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mk-wpost__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mk-day__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; margin: 4px 8px 0; border-radius: 10px; border: 1.5px dashed rgba(31, 26, 22, .18); text-align: center; font-size: 12.5px; color: var(--ink-600); }
.mk-day__empty .mk-btn { height: 26px; padding: 0 11px; font-size: 12px; }
.mk-day__add { margin: auto 8px 8px; height: 28px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(31, 26, 22, .05); font: 600 12px var(--d-chrome); color: var(--ink-600); flex: none; }
.mk-day__empty + .mk-day__add { margin-top: 8px; }
.mk-day__add:hover { background: rgba(31, 26, 22, .1); color: var(--ink-900); }
.mk-month { min-width: 880px; display: flex; flex-direction: column; gap: 6px; }
.mk-month__wd, .mk-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mk-month__wd .mk-label { padding: 0 8px; }
.mk-mcell { min-height: 112px; background: var(--d-card); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-mcell.is-today { background: rgba(194, 70, 31, .08); }
.mk-mcell.is-past { opacity: .65; }
.mk-mcell__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 2px; color: var(--ink-900); }
.mk-mcell.is-today .mk-mcell__head { color: var(--rust-600); }
.mk-mcell.is-past .mk-mcell__head { color: var(--ink-500); }
.mk-mcell__mon { font: 600 10.5px var(--mono); }
.mk-mcell__num { font: 400 18px/1 var(--display); }
.mk-mchip { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--sand-50); font: 400 11.5px var(--d-chrome); color: var(--ink-900); white-space: nowrap; overflow: hidden; min-width: 0; cursor: pointer; text-align: left; flex: none; }
.mk-mchip.is-drag { cursor: grab; }
.mk-mchip.is-bad { background: var(--warn-bg); }
.mk-mchip.is-done { background: rgba(31, 26, 22, .05); }
.mk-mchip .d-dot { width: 6px; height: 6px; }
.mk-mchip__t { font: 600 10.5px var(--mono); flex: none; }
.mk-mchip__b { overflow: hidden; text-overflow: ellipsis; }
.mk-mcell__more { border: 0; background: none; padding: 0 6px; text-align: left; cursor: pointer; font: 600 11px var(--d-chrome); color: var(--ink-600); }
.mk-modal--pd { width: min(860px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; display: flex; flex-wrap: wrap; }
.mk-pd__img { position: relative; flex: 0 0 auto; width: min(320px, 100%); aspect-ratio: 9 / 16; max-height: calc(100vh - 48px); margin: 0 auto; background-color: var(--sand-300); touch-action: pan-y; }
.mk-pd__body { flex: 2 1 340px; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.mk-pd__net { height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(31, 26, 22, .07); display: inline-flex; align-items: center; font: 600 11.5px var(--body); }
.mk-pd__net.is-ok { background: var(--sage-100); color: var(--sage-ink); }
.mk-pd__net.is-bad { background: var(--warn-bg); color: var(--warn-ink); }
.mk-pd__who { display: flex; flex-direction: column; gap: 4px; }
.mk-pd__biz { font: 600 20px/1.2 var(--body); }
.mk-pd__why { padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; font-weight: 500; }
.mk-pd__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-stat { background: var(--d-box); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-stat__n { font: 400 26px/.9 var(--display); }
.mk-pd__acts { padding-top: 4px; }

/* ---------- Library ---------- */
.mk-lib { display: flex; flex-direction: column; gap: 12px; padding-bottom: 84px; }
.mk-libtop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-dashed { height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 600 13px var(--body); background: transparent; color: var(--ink-900); border: 1.5px dashed rgba(31, 26, 22, .45); }
.mk-dashed:hover { border-color: var(--ink-900); }
.mk-fchip { height: 30px; padding: 0 13px; border-radius: 999px; cursor: pointer; font: 600 13px var(--body); white-space: nowrap; background: transparent; color: var(--ink-900); border: 1.5px solid var(--ink-900); }
.mk-fchip.is-on { background: var(--ink-900); color: var(--sand-100); }
.mk-libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mk-lcard { cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border: 0; border-radius: 14px; background: var(--d-box); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .08); text-align: left; color: var(--ink-900); font: inherit; min-width: 0; }
.mk-lcard.is-on { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.mk-lcard__img { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background-color: var(--sand-300); }
.mk-lcard__img .mk-check { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 6px; background: rgba(251, 247, 240, .6); }
.mk-lcard__img .mk-check.is-on { background: var(--rust-600); }
.mk-lcard__kind { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font: 600 11px var(--body); background: rgba(251, 247, 240, .92); color: var(--ink-900); }
.mk-lcard__kind.is-reel { background: var(--ink-900); color: var(--sand-100); }
.mk-lcard__st { position: absolute; top: 8px; right: 8px; }
.mk-lcard__st .mk-pill { background: rgba(251, 247, 240, .92); color: var(--ink-900); box-shadow: none; }
.mk-lcard__name { font: 500 12px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.mk-lcard__client { font-size: 12px; line-height: 1.3; color: var(--ink-600); padding: 0 2px; }
.mk-libtable { min-width: 860px; }
.mk-librow { display: grid; grid-template-columns: 24px 52px minmax(200px, 2fr) 80px 70px minmax(160px, 1.3fr) 130px; gap: 12px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.mk-librow:hover { background: rgba(31, 26, 22, .04); }
.mk-librow.is-on { background: rgba(194, 70, 31, .06); }
.mk-librow--head { border-top: 0; padding: 10px 16px; cursor: default; }
.mk-librow--head:hover { background: transparent; }
.mk-libthumb { width: 44px; height: 44px; border-radius: 8px; background-color: var(--sand-300); }
.mk-kchip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11.5px var(--body); background: rgba(31, 26, 22, .07); color: var(--ink-900); }
.mk-kchip.is-reel { background: var(--ink-900); color: var(--sand-100); }
.mk-libgrid--pick { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* ---------- Compose ---------- */
.mk-compose { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.mk-editor { flex: 1 1 520px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-cs { border-radius: 16px; background: rgba(251, 247, 240, .55); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .08); }
.mk-cs__head { width: 100%; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; color: var(--ink-900); font-family: var(--d-chrome); }
.mk-cs__n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(31, 26, 22, .1); color: var(--ink-900); display: flex; align-items: center; justify-content: center; font: 700 11px var(--mono); }
.mk-cs__head.is-open .mk-cs__n { background: var(--ink-900); color: var(--sand-100); }
.mk-cs__t { flex: none; font: 600 14.5px var(--body); }
.mk-cs__sum { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cs__chev { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(31, 26, 22, .07); font-size: 13px; transition: transform .18s; }
.mk-cs__head.is-open .mk-cs__chev { transform: rotate(180deg); }
.mk-cs__body { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.mk-csrow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-csrow--tight { gap: 6px; }
.mk-gfields { padding: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mk-prow { width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-align: left; color: var(--ink-900); font: inherit; }
.mk-box--rows > .mk-prow:first-child, .mk-box--rows > .mk-aurow:first-child { border-top: 0; }
.mk-prow.is-off { cursor: default; opacity: .55; }
.mk-prow--static { cursor: default; }
.mk-prow__tile { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--ink-900); color: var(--sand-100); display: flex; align-items: center; justify-content: center; font: 700 10px var(--mono); }
.mk-prow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-prow__name { font: 600 14px var(--body); }
.mk-prow__handle { font-size: 12.5px; color: var(--ink-600); }
.mk-prow__handle.is-bad { color: var(--rust-600); }
.mk-prow[aria-checked="true"] .d-switch { background: var(--sage-600); }
.mk-prow[aria-checked="true"] .d-switch__knob { transform: translateX(14px); }
/* Own captions (Compose → Caption): smaller rows, and the network's own caption under its row. */
.mk-prow--s { gap: 10px; padding: 8px 14px; }
.mk-prow--s .mk-prow__tile { width: 24px; height: 24px; border-radius: 7px; font-size: 9px; }
.mk-prow--s .mk-prow__name { font-size: 13.5px; }
.mk-prow--s .mk-prow__handle { font-size: 12px; }
.mk-prow__own { flex: none; font: 600 12px var(--body); color: var(--ink-600); }
.mk-capown { padding: 0 14px 12px 48px; }
.mk-csrow[hidden] { display: none; }
.mk-mtile { position: relative; width: 84px; height: 104px; flex: none; border-radius: 10px; background-color: var(--sand-300); display: flex; align-items: flex-end; padding: 6px; box-sizing: border-box; border: 0; }
.mk-mtile--add { cursor: pointer; background: rgba(31, 26, 22, .05); font-size: 20px; color: var(--ink-500); align-items: center; justify-content: center; }
.mk-mtile--add:hover { background: rgba(31, 26, 22, .1); }
.mk-mtile__dur { font: 600 10px var(--mono); background: var(--ink-900); color: var(--sand-100); padding: 2px 5px; border-radius: 4px; }
.mk-mtile__x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(31, 26, 22, .6); color: var(--sand-50); font-size: 10px; }
.mk-cropbox { padding: 14px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.mk-stage { position: relative; height: 300px; flex: none; max-width: 100%; border-radius: 10px; overflow: hidden; background-color: var(--sand-300); touch-action: none; user-select: none; }
.mk-crop { position: absolute; box-shadow: 0 0 0 2px var(--sand-50), 0 0 0 999px rgba(31, 26, 22, .55); cursor: move; border-radius: 2px; }
.mk-crop__v { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(251, 247, 240, .5); }
.mk-crop__v--1 { left: 33.33%; } .mk-crop__v--2 { left: 66.66%; }
.mk-crop__h { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(251, 247, 240, .5); }
.mk-crop__h--1 { top: 33.33%; } .mk-crop__h--2 { top: 66.66%; }
.mk-crop__ar { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 4px; background: var(--ink-900); color: var(--sand-100); font: 600 10px var(--mono); }
.mk-crop__feed { position: absolute; left: 0; right: 0; top: 14.84%; bottom: 14.84%; border-top: 1.5px dashed var(--sand-50); border-bottom: 1.5px dashed var(--sand-50); pointer-events: none; }
.mk-crop__feed span { position: absolute; right: 6px; top: 4px; font: 600 9.5px var(--mono); color: var(--sand-50); }
.mk-cropctl { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.mk-shape { cursor: pointer; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 10px; font: 600 12.5px var(--body); background: transparent; color: var(--ink-900); border: 1.5px solid var(--ink-900); }
.mk-shape.is-on { background: var(--ink-900); color: var(--sand-100); }
.mk-shape__box { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.mk-shape__ic { border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; }
.mk-shape__use { font: 500 10.5px var(--mono); opacity: .7; }
.mk-coverbox { padding: 14px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.mk-coverstrip { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.mk-strip { display: flex; gap: 3px; height: 76px; }
.mk-strip__f { flex: 1; min-width: 0; border: 0; padding: 0; border-radius: 6px; cursor: pointer; opacity: .75; background-color: var(--sand-300); }
.mk-strip__f.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--rust-600), 0 0 0 4px var(--sand-50); }
.mk-strip--10 .mk-strip__f { opacity: 1; cursor: default; border-radius: 5px; }
.mk-strip--10 .mk-strip__f.is-on { box-shadow: 0 0 0 2px var(--rust-600); }
.mk-coverprev { gap: 10px; align-items: flex-end; }
.mk-coverprev__i { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mk-cover { width: 72px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(31, 26, 22, .1); background-color: var(--sand-300); }
.mk-cover--reel { height: 128px; } .mk-cover--grid { height: 96px; }
.mk-aurow { width: 100%; border: 0; border-top: 1px solid var(--line); border-left: 3px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 11px; text-align: left; color: var(--ink-900); font: inherit; }
.mk-aurow:hover { background: rgba(31, 26, 22, .04); }
.mk-aurow.is-on { border-left-color: var(--rust-600); background: rgba(194, 70, 31, .06); }
.mk-aurow--static { cursor: default; border-left-color: var(--rust-600); }
.mk-aurow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-aurow__t { font: 600 13.5px var(--body); }
.mk-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-900); display: flex; align-items: center; justify-content: center; }
.mk-radio > span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-900); transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.mk-radio.is-on > span { transform: scale(1); }
.mk-trend { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px var(--body); background: var(--warn-bg); color: var(--warn-ink); flex: none; }
.mk-auplay { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; background: var(--ink-900); color: var(--sand-100); font-size: 10px; }
.mk-ausearch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.mk-box--rows > .mk-ausearch:first-child { border-top: 0; }
.mk-ausearch .mk-input { flex: 1 1 200px; }
.mk-aufoot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mk-tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(251, 247, 240, .85); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .08); }
.mk-tagbox--s { padding: 5px 8px; min-height: 36px; box-sizing: border-box; border-radius: 18px; }
.mk-tagbox__in { flex: 1; min-width: 160px; height: 26px; border: 0; outline: 0; background: transparent; font: 400 13.5px var(--body); color: var(--ink-900); }
.mk-tagbox--s .mk-tagbox__in { min-width: 120px; height: 24px; }
.mk-tag { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 11px; border: 0; border-radius: 999px; font: 600 12.5px var(--body); background: var(--ink-900); color: var(--sand-100); }
.mk-tag--s { height: 24px; padding: 0 6px 0 10px; font-size: 12px; }
.mk-tag__x { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--ink-800); }
.mk-tag__x--plain { background: none; font-size: 10px; opacity: .7; }
.mk-rowlbl { font-size: 12px; font-weight: 600; color: var(--ink-600); margin-right: 2px; }
.mk-otag { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font: 600 12.5px var(--body); background: transparent; color: var(--ink-900); border: 1px solid rgba(31, 26, 22, .2); }
.mk-otag:hover { border-color: var(--ink-900); }
.mk-otag--s { height: 24px; padding: 0 10px; font-size: 12px; }
.mk-qtag { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 0; border-radius: 999px; font: 600 12.5px var(--body); background: rgba(31, 26, 22, .07); color: var(--ink-900); }
.mk-togrow { align-self: flex-start; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; font: 600 12.5px var(--d-chrome); background: rgba(31, 26, 22, .05); color: var(--ink-900); }
.mk-cbar { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(251, 247, 240, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -10px 24px -16px rgba(31, 26, 22, .4), inset 0 0 0 1px rgba(31, 26, 22, .1); }
.mk-cbar__note { flex: 1; min-width: 160px; font-size: 12.5px; color: var(--ink-600); }
.mk-prevcol { flex: 1 1 340px; max-width: 420px; min-width: 0; position: sticky; top: 64px; display: flex; flex-direction: column; gap: 8px; }

/* the post preview (Compose and the reel editor) */
.mk-pv { background: var(--sand-50); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(31, 26, 22, .06); }
.mk-pv__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mk-pv__av { flex: none; width: 30px; height: 30px; border-radius: 50%; background-color: var(--ink-900); color: var(--sand-100); display: inline-flex; align-items: center; justify-content: center; font: 400 13px var(--display); overflow: hidden; }
.mk-pv__av--s { width: 22px; height: 22px; font-size: 10px; box-shadow: 0 0 0 1.5px #fff; }
.mk-pv__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-pv__name { font-weight: 600; font-size: 13px; }
.mk-pv__sub { font-size: 11.5px; color: var(--ink-500); }
.mk-pv__img { position: relative; overflow: hidden; margin: 0 auto; background-color: var(--ink-900); }
.mk-pv__reel { position: absolute; left: 0; right: 0; bottom: 0; padding: 52px 52px 12px 12px; background: linear-gradient(transparent, rgba(31, 26, 22, .7)); color: #fff; display: grid; gap: 6px; align-content: end; }
.mk-pv__reelwho { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: #fff; }
.mk-pv__follow { padding: 1px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); font-size: 11px; }
.mk-pv__reelcap { display: block; font-size: 12px; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.mk-pv__music { font: 500 11px var(--mono); }
.mk-pv__rail { position: absolute; right: 10px; bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-pv__rail > span { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.mk-pv__rail > .mk-pv__railpic { border-radius: 7px; box-shadow: 0 0 0 1.5px #fff; background-color: var(--ink-800); }
.mk-pv__story { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; background: linear-gradient(rgba(31, 26, 22, .45), transparent 22%, transparent 78%, rgba(31, 26, 22, .45)); color: #fff; }
.mk-pv__storytop { display: flex; flex-direction: column; gap: 8px; }
.mk-pv__bars { display: flex; gap: 3px; }
.mk-pv__bars > span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.mk-pv__bars > .is-on { background: #fff; }
.mk-pv__ago { font-weight: 400; opacity: .8; }
.mk-pv__storybot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mk-pv__sticker { padding: 6px 12px; border-radius: 8px; background: #fff; color: var(--ink-900); font: 600 12.5px var(--body); }
.mk-pv__send { align-self: stretch; height: 32px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); display: flex; align-items: center; padding: 0 12px; font-size: 12px; }
.mk-pv__badge { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(31, 26, 22, .6); color: #fff; font: 600 11px var(--body); }
.mk-pv__feedmusic { display: block; padding: 10px 14px 0; font: 500 11.5px var(--mono); color: var(--ink-600); }
.mk-pv__cap { margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.mk-pv__tags { margin: -6px 0 0; padding: 0 14px 12px; font-size: 13px; line-height: 1.45; color: var(--rust-ink); overflow-wrap: anywhere; }
.mk-pv__comment { margin: 0 14px 12px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; }
.mk-pv__comment strong { font-weight: 600; }
.mk-pv__ctags { color: var(--rust-ink); }
.mk-pv__cnote { display: block; font: 500 10.5px var(--mono); color: var(--ink-500); margin-top: 2px; }
.mk-pv__offer { margin: 0 14px 14px; padding: 12px 14px; border-radius: 12px; background: var(--sand-200); display: flex; flex-direction: column; gap: 6px; }
.mk-pv__offer strong { font-size: 15px; }
.mk-pv__code { align-self: flex-start; padding: 4px 10px; border-radius: 6px; border: 1.5px dashed var(--ink-900); font: 600 13px var(--mono); }
.mk-pv__cta { padding: 0 14px 14px; }
.mk-pv__cta span { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--ink-900); color: var(--sand-100); font-size: 12.5px; font-weight: 600; }

/* ---------- Bulk post ---------- */
.mk-bulk { display: flex; flex-direction: column; gap: 12px; }
.mk-bulkhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-btable { min-width: 960px; }
.mk-brow { display: grid; grid-template-columns: 24px minmax(220px, 1.2fr) minmax(240px, 2fr) 210px 110px; gap: 14px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); }
.mk-brow > .mk-check { margin-top: 27px; }
.mk-brow.is-on { background: rgba(194, 70, 31, .06); }
.mk-brow--head { border-top: 0; padding: 10px 16px; align-items: center; }
.mk-brow--head > .mk-check { margin-top: 0; }
.mk-bcell { display: flex; gap: 10px; align-items: center; min-width: 0; }
.mk-bcell__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mk-bthumb { position: relative; width: 56px; height: 72px; flex: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px; background-color: var(--sand-300); }
.mk-bthumb__dur { position: absolute; left: 4px; bottom: 4px; font: 600 9.5px var(--mono); background: var(--ink-900); color: var(--sand-100); padding: 1px 4px; border-radius: 3px; }
.mk-berr { font-size: 12px; color: var(--rust-600); }
.mk-bdesc__foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-500); }
.mk-pillselect { height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(31, 26, 22, .07); font: 600 13px var(--d-chrome); color: var(--ink-900); cursor: pointer; }
.mk-ptog { cursor: pointer; border: 0; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font: 700 10px var(--mono); background: transparent; color: var(--ink-400); box-shadow: inset 0 0 0 1px rgba(31, 26, 22, .22); text-decoration: line-through; }
.mk-ptog.is-on { background: var(--ink-900); color: var(--sand-100); box-shadow: none; text-decoration: none; }
.mk-bacts { justify-content: flex-end; padding-top: 2px; gap: 6px; }
.mk-roundx { width: 28px; height: 28px; flex: none; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; background: rgba(31, 26, 22, .07); color: var(--ink-900); }
.mk-roundx:hover { background: rgba(31, 26, 22, .14); }
.mk-bdrop { width: 100%; cursor: pointer; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-900); }
.mk-tablecard.is-over { box-shadow: inset 0 0 0 2px var(--rust-600); }
.mk-modal--ed { width: min(1120px, calc(100vw - 48px)); height: min(760px, calc(100vh - 48px)); overflow: hidden; }
.mk-ed { height: 100%; display: flex; }
.mk-ed__rail { width: 190px; flex: none; background: rgba(251, 247, 240, .7); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.mk-ed__steps { display: flex; flex-direction: column; gap: 2px; }
.mk-ed__lbl { padding: 0 10px 10px; }
.mk-ed__step { cursor: pointer; border: 0; height: 34px; border-radius: 8px; display: flex; align-items: center; gap: 10px; padding: 0 10px; font: 600 13.5px var(--d-chrome); text-align: left; background: transparent; color: var(--ink-900); }
.mk-ed__step.is-on { background: rgba(194, 70, 31, .14); color: var(--rust-ink); }
.mk-ed__dot { width: 20px; height: 20px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 10.5px var(--mono); box-shadow: inset 0 0 0 1.5px rgba(31, 26, 22, .4); }
.mk-ed__step.is-on .mk-ed__dot { background: var(--rust-600); color: var(--sand-50); box-shadow: none; }
.mk-ed__step.is-done .mk-ed__dot { background: var(--ink-900); color: var(--sand-50); box-shadow: none; }
.mk-ed__pos { padding: 0 10px; font-size: 12px; }
.mk-ed__col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-ed__head { height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.mk-ed__head .mk-h2 { font-size: 24px; }
.mk-ed__mid { flex: 1; min-height: 0; display: flex; }
.mk-ed__main { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; }
.mk-ed__side { width: 330px; flex: none; overflow-y: auto; padding: 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; background: rgba(251, 247, 240, .5); scrollbar-width: none; }
.mk-ed__foot { height: 58px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-top: 1px solid var(--line); }
.mk-ed__vid { position: relative; margin: 0 auto; background-color: var(--ink-900); }
.mk-ed__time { position: absolute; left: 10px; bottom: 10px; font: 600 11px var(--mono); color: #fff; background: rgba(31, 26, 22, .6); padding: 2px 6px; border-radius: 4px; }
.mk-sugg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mk-sugg__f { position: relative; aspect-ratio: 9/16; border: 0; padding: 0; cursor: pointer; border-radius: 8px; background-color: var(--sand-300); }
.mk-sugg__f.is-on { box-shadow: 0 0 0 2px var(--rust-600), 0 0 0 4px var(--sand-100); }
.mk-sugg__ck { position: absolute; left: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--rust-600); color: var(--sand-50); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mk-upbox { cursor: pointer; border: 0; border-radius: 14px; padding: 22px; background: var(--d-card); box-shadow: inset 0 0 0 1.5px rgba(31, 26, 22, .18); display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-900); font-family: var(--d-chrome); }
.mk-upbox strong { font-size: 14px; font-weight: 600; }
@media (max-width: 980px) { .mk-ed__side { display: none; } .mk-ed__rail { width: 150px; } }

/* ---------- Google profile (Get Found and Trusted inside Marketing) ---------- */
.mk-google { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mk-google__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.d-trhead { align-items: flex-end; }
.d-trhead__l { gap: 4px; }
.d-trhead__t { font: 400 26px/.9 var(--display); text-transform: uppercase; }
.mk-weekly { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font: 600 11px var(--body); white-space: nowrap; background: var(--sage-100); color: var(--sage-ink); }
.mk-loose { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--d-card); }
.mk-loose__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mk-loose__item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 0; border-left: 3px solid var(--ochre); border-radius: 8px; background: var(--sand-50); cursor: pointer; text-align: left; font: 400 12.5px var(--d-chrome); color: var(--ink-900); }
.mk-loose__item:hover { background: rgba(251, 247, 240, .6); }
.mk-loose__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-loose__txt strong { font-size: 13px; font-weight: 600; }
.mk-loose__txt .mk-ellipsis { color: var(--ink-600); }

/* Video previews play in place (desk-mk-kit.js playable). */
.mk-playable { position: relative; }
.mk-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; width: 56px; height: 56px; border: 0; border-radius: 999px; display: grid; place-items: center; background: rgba(31, 26, 22, .72); cursor: pointer; }
.mk-play:hover, .mk-play:focus-visible { background: rgba(31, 26, 22, .9); }
.mk-play__tri { width: 0; height: 0; margin-left: 4px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.mk-play__video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; background: #000; }
.mk-pd__img .mk-play__video { object-fit: contain; }
.mk-lcard__img .mk-play { width: 40px; height: 40px; }
.mk-lcard__img .mk-play__tri { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 3px; }
.mk-pd__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 4; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(251, 247, 240, .9); color: var(--ink-900); font: 600 22px/1 var(--body); cursor: pointer; box-shadow: 0 1px 3px rgba(31, 26, 22, .2); }
.mk-pd__nav--prev { left: 10px; }
.mk-pd__nav--next { right: 10px; }
.mk-pd__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.mk-pd__dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(251, 247, 240, .55); box-shadow: 0 0 0 1px rgba(31, 26, 22, .15); }
.mk-pd__dots span.is-on { background: #fff; }

/* Calendar paging (desk-mk-calendar.js). */
.mk-calhead__t { display: flex; align-items: center; gap: 10px; }
.mk-calnav { display: inline-flex; align-items: center; gap: 4px; }
.mk-calnav__b { width: 30px; height: 30px; border: 0; border-radius: 999px; background: rgba(31, 26, 22, .07); color: var(--ink-900); font: 600 18px/1 var(--body); cursor: pointer; }
.mk-calnav__b:hover, .mk-calnav__b:focus-visible { background: rgba(31, 26, 22, .14); }
.mk-calnav__today { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ink-900); color: var(--sand-50, #fbf7f0); font: 600 12.5px var(--body); cursor: pointer; }
.mk-mcell.is-out { opacity: .45; }