/* Marketing on a phone (mk-phone.js; design_handoff_marketing_mobile): the full-screen layer, its header,
   tab bar and sheets, then each desk tab (desk-mk-*.js) restyled for one column. Everything is scoped to
   .mkm (the layer) or html.mkm-on (the dialogs and sheets the tabs open on <body>). */

/* ---------- the layer ---------- */
html.mkm-on, html.mkm-on body { overflow: hidden; }
.mkm {
  --sand-600: #cbbfad; --ochre: #c98a1e; --ochre-100: #f6ead2; --ochre-ink: #7a520c; --sage-ink: #3f4a36; --sage-100: #e3e7da;
  --warn-bg: #f6e2d6; --warn-ink: #8a3415; --rust-ink: #a83a17; --line: rgba(31, 26, 22, .14);
  --mkm-ease: cubic-bezier(.2, .7, .3, 1);
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--sand-100); color: var(--ink-900); font: 400 14px/1.45 var(--d-chrome); -webkit-text-size-adjust: 100%;
}
.mkm button, .mkm input, .mkm textarea, .mkm select { font-family: inherit; }
.mkm :focus-visible, html.mkm-on .mkm-sheet :focus-visible { outline: 2px solid var(--rust-600); outline-offset: 2px; }

.mkm-head { flex: none; display: flex; flex-wrap: wrap; flex-direction: column; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px; }
.mkm-head__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mkm-back { flex: none; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(251, 247, 240, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(31, 26, 22, .1); font: 600 15px var(--d-chrome); color: var(--ink-900); }
.mkm-back__g { font-size: 20px; line-height: 1; margin-top: -2px; }
.mkm-chip { min-width: 0; max-width: 150px; height: 44px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(251, 247, 240, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(31, 26, 22, .1); color: var(--ink-900); }
.mkm-chip__av { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.mkm-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px var(--d-chrome); }
.mkm-chip__caret { flex: none; font-size: 10px; color: var(--ink-500); }
.mkm-logo { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.mkm-title { margin: 6px 0 0; font: 400 34px/.88 var(--display); text-transform: uppercase; letter-spacing: 0; }
.mkm-sub { margin: 0; font-size: 12px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mkm-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.mkm-scroll::-webkit-scrollbar { display: none; }
.mkm-body { padding: 2px 16px 28px; }
.mkm-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mkm-loading, .mkm-err { margin: 24px 0; text-align: center; color: var(--ink-600); }
.mkm-err { color: var(--warn-ink); }

/* tab bar: Calendar · Inbox · New post · Library · More */
.mkm-bar { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(52px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(251, 247, 240, .94); border-top: 1px solid var(--line); }
.mkm-tab { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 0 0; color: var(--ink-600); min-width: 0; }
.mkm-tab[aria-current="page"] { color: var(--rust-600); }
.mkm-tab__ic { position: relative; height: 32px; display: grid; place-items: center; }
.mkm-tab__ic svg { width: 24px; height: 24px; }
.mkm-tab__l { font: 600 10.5px var(--d-chrome); }
.mkm-tab--new .mkm-tab__l { color: var(--ink-900); }
.mkm-new { width: 44px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--rust-600); color: var(--sand-50); }
.mkm-new svg { width: 22px; height: 22px; }
.mkm-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center;
  background: var(--rust-600); color: var(--sand-50); font: 700 10.5px var(--d-chrome); box-shadow: 0 0 0 2px var(--sand-50); }
.mkm-badge--inline { position: static; box-shadow: none; flex: none; }

/* Compose and an open Inbox thread cover the header and the tab bar. */
.mkm.is-compose .mkm-head, .mkm.is-compose .mkm-bar, html.mkm-thread .mkm-head, html.mkm-thread .mkm-bar { display: none; }
.mkm.is-compose .mkm-body { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-bottom: 0; }

/* ---------- sheets (More, the client switcher) ---------- */
.mkm-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(31, 26, 22, .35); opacity: 0; transition: opacity .3s; }
.mkm-scrim.is-on { opacity: 1; }
.mkm-sheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 8px 16px calc(34px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0;
  background: var(--sand-100); color: var(--ink-900); font: 400 14px/1.45 var(--d-chrome); box-shadow: 0 -10px 40px -10px rgba(31, 26, 22, .3);
  transform: translateY(105%); transition: transform .35s var(--mkm-ease, ease); }
.mkm-sheet.is-on { transform: none; }
.mkm-sheet--tall { height: 80dvh; }
.mkm-sheet__grab { width: 36px; height: 5px; flex: none; margin: 0 auto 2px; border-radius: 999px; background: rgba(31, 26, 22, .2); }
.mkm-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mkm-sheet__title { margin: 0; font: 400 26px/1 var(--display); text-transform: uppercase; }
.mkm-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: rgba(31, 26, 22, .07); color: var(--ink-900); font-size: 14px; }
.mkm-list { flex: none; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--sand-50); }
.mkm-li { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.mkm-list > .mkm-li:first-child, .mkm-list__head + .mkm-li { border-top: 0; }
.mkm-li.is-on { background: rgba(194, 70, 31, .08); }
.mkm-li__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mkm-li__l, .mkm-li__s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkm-li__l { font: 600 15px var(--d-chrome); }
.mkm-li__s { font-size: 12.5px; color: var(--ink-600); }
.mkm-li__chev { flex: none; color: var(--ink-400); font-size: 20px; }
.mkm-li--client { min-height: 52px; }
.mkm-li__av { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.mkm-li__ck { width: 16px; flex: none; color: var(--rust-600); font-weight: 700; }
.mkm-list__head { padding: 12px 14px 4px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.mkm-none { margin: 0; padding: 14px; font-size: 13px; color: var(--ink-600); }
.mkm-search { width: 100%; height: 44px; flex: none; border: 0; border-radius: 999px; padding: 0 16px; background: var(--sand-50); box-shadow: inset 0 0 0 1px var(--line); font: 500 16px var(--d-chrome); color: var(--ink-900); -webkit-appearance: none; appearance: none; }
.mkm-chips { flex: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.mkm-chips::-webkit-scrollbar { display: none; }
.mkm-chipbtn { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(31, 26, 22, .07); color: var(--ink-900); font: 600 13px var(--d-chrome); white-space: nowrap; }
.mkm-chipbtn[aria-pressed="true"] { background: var(--ink-900); color: var(--sand-50); }

/* ---------- what the tabs open on <body>, on a phone ---------- */
html.mkm-on .d-toast { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; width: auto; max-width: none; border-radius: 18px; background: rgba(251, 247, 240, .96); }
html.mkm-on .d-dialog { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; max-width: none; max-height: calc(100dvh - 64px); border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
html.mkm-on .d-dialog__foot .d-btn, html.mkm-on .d-dialog input, html.mkm-on .d-dialog textarea { min-height: 44px; font-size: 16px; }
html.mkm-on .d-menu { left: 12px !important; right: 12px !important; width: auto !important; }
html.mkm-on .d-menu__item { min-height: 44px; }
/* Post detail and the other mk modals: a bottom sheet with the picture as a strip on top. */
html.mkm-on .mk-scrim { z-index: 70; }
html.mkm-on .mk-modal { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; max-width: none; max-height: calc(100dvh - 64px); border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
html.mkm-on .mk-modal--pd { display: block; }
html.mkm-on .mk-pd__img { width: 100%; height: 180px; aspect-ratio: auto; max-height: none; }
html.mkm-on .mk-pd__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.mkm-on .mk-modal--ed { height: calc(100dvh - 24px); max-height: none; }
html.mkm-on .mk-modal .mk-row--wrap .d-btn, html.mkm-on .mk-modal .mk-btn { min-height: 44px; }
html.mkm-on .mk-modal input, html.mkm-on .mk-modal textarea, html.mkm-on .mk-modal select { font-size: 16px; }
/* Invite a Marketing client (desk-mk-plan.js): one column, thumb-sized fields and buttons. */
html.mkm-on .mka-invite { padding: 16px 16px 20px; }
html.mkm-on .mka-invite__grid { grid-template-columns: minmax(0, 1fr); }
html.mkm-on .mka-invite .mk-input { height: 44px; }
html.mkm-on .mka-invite .d-seg { max-width: 100%; }
html.mkm-on .mka-invite__foot .mk-btn { flex: 1; }
html.mkm-on .mka-invite .mk-qr { display: none; }
/* Set up a client: full screen above the layer, one column. */
html.mkm-on .mka-su { z-index: 75; }
html.mkm-on .mka-su__body { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 40px; }
html.mkm-on .mka-su__aside { position: static; }
html.mkm-on .mka-su__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.mkm-on .mka-su__head, html.mkm-on .mka-su > header { flex-wrap: wrap; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ---------- shared bits of the desk tabs ---------- */
.mkm .mk-scrollx { overflow-x: visible; }
.mkm .d-btn, .mkm .mk-btn { min-height: 38px; }
.mkm input, .mkm textarea, .mkm select { font-size: 16px; }
.mkm .mk-row--wrap { row-gap: 8px; }
.mkm .mk-seg, .mkm .d-seg { max-width: 100%; }

/* KPI strip: scrolls sideways, edge to edge */
.mkm .mk-kpis, .mkm .mka-kpis { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; gap: 8px; }
.mkm .mk-kpis::-webkit-scrollbar, .mkm .mka-kpis::-webkit-scrollbar { display: none; }
.mkm .mk-kpi, .mkm .mka-kpi { flex: none; width: 136px; padding: 12px 14px; border-radius: 14px; background: rgba(251, 247, 240, .75); }
.mkm .mk-kpi .mk-label { font-size: 10px; }
.mkm .mk-kpi__n { font-size: 34px; }
.mkm .mk-kpi__sub { font-size: 12px; }

/* "Didn't go out": stacked blocks */
.mkm .mk-fail__head { flex-wrap: wrap; padding: 12px 14px; }
.mkm .mk-fail__row { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; }
.mkm .mk-fail__txt { min-width: 0; }
.mkm .mk-fail__why { font-size: 12.5px; color: var(--warn-ink); }
.mkm .mk-fail__row .mk-row--wrap .d-btn, .mkm .mk-fail__row .mk-row--wrap .mk-btn { min-height: 38px; }

/* ---------- Calendar (phoneCal in desk-mk-calendar.js) ---------- */
.mk-pcal { display: flex; flex-direction: column; gap: 12px; }
.mk-pcal__nav { display: flex; align-items: center; gap: 8px; }
.mk-pcal__range { flex: 1; min-width: 0; font: 400 26px/1.1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pcal__today { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(31, 26, 22, .07); color: var(--ink-900); font: 600 13px var(--d-chrome); }
.mk-pcal__arrow { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: var(--ink-900); color: var(--sand-50); font-size: 22px; line-height: 1; }
.mk-pcal__seg { display: flex; padding: 3px; border-radius: 999px; background: rgba(31, 26, 22, .07); }
.mk-pcal__seg button { flex: 1; height: 36px; border: 0; border-radius: 999px; cursor: pointer; background: none; color: var(--ink-700, var(--ink-900)); font: 600 13.5px var(--d-chrome); }
.mk-pcal__seg button[aria-pressed="true"] { background: var(--sand-50); color: var(--ink-900); box-shadow: 0 1px 3px rgba(31, 26, 22, .14); }
.mk-pcal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mk-pcal__day { height: 72px; padding: 6px 0; border: 0; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(251, 247, 240, .75); color: var(--ink-900); }
.mk-pcal__wd { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.mk-pcal__num { font: 400 22px/1 var(--display); }
.mk-pcal__dots { display: flex; gap: 3px; height: 5px; }
.mk-pcal__dots .d-dot { width: 5px; height: 5px; }
.mk-pcal__day.is-today, .mk-pcal__cell.is-today { background: rgba(194, 70, 31, .12); }
.mk-pcal__day.is-today .mk-pcal__num, .mk-pcal__cell.is-today .mk-pcal__num { color: var(--rust-600); }
.mk-pcal__day.is-on, .mk-pcal__cell.is-on { background: var(--ink-900); color: var(--sand-50); }
.mk-pcal__day.is-on .mk-pcal__wd, .mk-pcal__day.is-on .mk-pcal__num, .mk-pcal__cell.is-on .mk-pcal__num { color: var(--sand-50); }
.mk-pcal__day.is-on .d-dot--ink, .mk-pcal__cell.is-on .d-dot--ink { background: var(--sand-50); }
.mk-pcal__month { padding: 8px; border-radius: 14px; background: rgba(251, 247, 240, .75); display: flex; flex-direction: column; gap: 4px; }
.mk-pcal__wds, .mk-pcal__mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.mk-pcal__wds span { text-align: center; font: 600 10.5px var(--mono); color: var(--ink-500); padding: 2px 0; }
.mk-pcal__cell { height: 46px; border: 0; border-radius: 12px; cursor: pointer; background: none; color: var(--ink-900); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.mk-pcal__cell .mk-pcal__num { font-size: 17px; }
.mk-pcal__cell.is-out { opacity: .4; }
.mk-pcal__legend { flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.mk-pcal__agenda { display: flex; flex-direction: column; gap: 8px; }
.mk-pcal__ahead { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 0; }
.mk-pcal__list { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: rgba(251, 247, 240, .75); }
.mk-pcal__post { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px 12px 11px; border: 0; border-left: 3px solid transparent; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: inherit; width: 100%; }
.mk-pcal__post:first-child { border-top: 0; }
.mk-pcal__post.mk-edge--sage { border-left-color: var(--sage-600); }
.mk-pcal__post.mk-edge--ink { border-left-color: var(--ink-900); }
.mk-pcal__post.mk-edge--ochre { border-left-color: var(--ochre); }
.mk-pcal__post.mk-edge--rust { border-left-color: var(--rust-600); }
.mk-pcal__thumb { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--sand-300) center / cover no-repeat; }
.mk-pcal__ptxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-pcal__ptop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-pcal__time { font: 600 11px var(--mono); color: var(--ink-600); }
.mk-pcal__biz { font: 600 14px var(--d-chrome); }
.mk-pcal__cap { font-size: 13px; color: var(--ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-pcal__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-pcal__empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(251, 247, 240, .75); color: var(--ink-600); }
.mk-pcal__add { height: 46px; border: 1.5px dashed rgba(31, 26, 22, .3); border-radius: 14px; background: none; cursor: pointer; color: var(--ink-700, var(--ink-900)); font: 600 14px var(--d-chrome); }
.mkm .mk-loose__list { grid-template-columns: minmax(0, 1fr); }

/* ---------- Compose (desk-mk-compose.js, one step at a time) ---------- */
.mk-pc { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - env(safe-area-inset-top, 0px) - 10px); }
.mk-pc__head { display: flex; align-items: flex-start; gap: 12px; }
.mk-pc__x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: rgba(31, 26, 22, .07); color: var(--ink-900); font-size: 14px; }
.mk-pc__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-pc__step { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pc__title { font: 400 26px/1 var(--display); text-transform: uppercase; }
.mk-pc__bars { display: flex; gap: 4px; }
.mk-pc__bar { flex: 1; height: 14px; border: 0; padding: 4px 0; background: none; cursor: pointer; }
.mk-pc__bar span { display: block; height: 6px; border-radius: 999px; background: rgba(31, 26, 22, .14); }
.mk-pc__bar.is-on span { background: var(--rust-600); }
.mk-pc__body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-pc__body .mk-prevcol { position: static; max-width: none; flex: none; }
.mk-pc__body .mk-cbar__note { font-size: 12.5px; color: var(--ink-600); }
.mk-pc__body .mk-csrow { flex-wrap: wrap; }
.mk-pc__body .mk-cropctl, .mk-pc__body .mk-coverstrip { min-width: 0; flex-basis: 100%; }
.mk-pc__body .mk-gfields { grid-template-columns: minmax(0, 1fr); padding: 0; }
.mk-pc__body .mk-sugg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-pc__foot { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 8px; margin: 0 -16px; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(243, 236, 224, .96); border-top: 1px solid var(--line); }
.mk-pc__foot--last .mk-row { flex-wrap: wrap; width: 100%; }
.mk-pc__foot--last .d-btn, .mk-pc__foot--last .mk-btn { min-height: 46px; flex: 1 1 auto; }
.mk-pc__back, .mk-pc__next { height: 46px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px var(--d-chrome); padding: 0 20px; }
.mk-pc__back { background: rgba(31, 26, 22, .07); color: var(--ink-900); }
.mk-pc__next { flex: 1; background: var(--ink-900); color: var(--sand-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Inbox (desk-mk-inbox.js: the list, then a full-screen thread) ---------- */
.mk-ib--phone { display: block; height: auto; min-height: 0; border-radius: 14px; overflow: visible; background: none; box-shadow: none; }
.mk-ib--phone .mk-ib__left { border-right: 0; }
.mk-ib--phone .mk-ib__lhead { position: relative; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; background: none; }
.mk-ib--phone .mk-ib-setbtn { height: 38px; }
.mk-ib--phone .mk-ib-shield { display: none; }
.mk-ib--phone .mk-ib-setpop { position: static; width: 100%; box-shadow: none; }
.mk-ib--phone .mk-ib__list { overflow: visible; border-radius: 14px; background: rgba(251, 247, 240, .75); }
.mk-ib--phone .mk-ib-row { min-height: 60px; border-left: 3px solid transparent; }
.mk-ib--phone .mk-ib-row.is-needs { border-left-color: var(--rust-600); }
.mk-ib--phone .mk-ib-row__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.mk-ib--phone .mk-ib-row.is-on { background: none; }
.mk-ib--phone .mk-ib__right { display: none; }
.mk-ib--phone.is-empty .mk-ib__right { display: flex; border-radius: 14px; background: rgba(251, 247, 240, .75); margin-top: 10px; }
.mk-ib--phone.is-thread .mk-ib__right { display: flex; position: fixed; inset: 0; z-index: 65; background: var(--sand-100); padding-top: env(safe-area-inset-top, 0px); }
.mk-ib--phone .mk-ib__rhead { flex-wrap: wrap; padding: 12px 16px; }
.mk-ib-backbtn { flex: 0 0 100%; text-align: left; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--rust-600); font: 600 15px var(--d-chrome); }
.mk-ib--phone .mk-ib__thread { padding: 14px 16px; }
.mk-ib--phone .mk-ib-bubble { font-size: 15px; }
.mk-ib--phone .mk-ib__composer { padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.mk-ib--phone .mk-ib__chint { display: none; }
.mk-ib--phone .mk-ib-area { font-size: 15px; background: #fff; border-radius: 14px; }
.mk-ib--phone .mk-ib-saved { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.mk-ib--phone .mk-ib-saved::-webkit-scrollbar { display: none; }
.mk-ib--phone .mk-ib-chip { flex: none; height: 34px; }
.mk-ib--phone .mk-ib-acts { justify-content: stretch; }
.mk-ib--phone .mk-ib-acts > * { flex: 1 1 0; min-height: 44px; }
.mk-ib--phone .mk-ib-acts .d-btn__kbd { display: none; }

/* ---------- Library: the grid at two across, no List view ---------- */
.mkm .mk-libgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mkm .mk-libtable { min-width: 0; }
.mkm .mk-seg[aria-label="Library view"] { display: none; }
.mkm .mk-selbar { position: sticky; bottom: 12px; border-radius: 20px; align-self: stretch; flex-wrap: wrap; }

/* ---------- Bulk post: a card per reel ---------- */
.mkm .mk-bulkhead { flex-wrap: wrap; gap: 8px; }
.mkm .mk-bulkhead .mk-flex1 { display: none; }
.mkm .mk-tablecard { background: none; box-shadow: none; overflow: visible; }
.mkm .mk-btable { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mkm .mk-brow--head { display: flex; align-items: center; gap: 10px; padding: 0 2px; border: 0; }
.mkm .mk-brow--head > .mk-label { display: none; }
.mkm .mk-brow--head::after { content: "All"; font: 600 13px var(--d-chrome); }
.mkm .mk-brow:not(.mk-brow--head) { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ck reel x" "desc desc desc" "when when when"; gap: 10px; padding: 12px; border: 0; border-radius: 14px; background: rgba(251, 247, 240, .75); }
.mkm .mk-brow:not(.mk-brow--head) > :nth-child(1) { grid-area: ck; }
.mkm .mk-brow:not(.mk-brow--head) > :nth-child(2) { grid-area: reel; min-width: 0; }
.mkm .mk-brow:not(.mk-brow--head) > :nth-child(3) { grid-area: desc; }
.mkm .mk-brow:not(.mk-brow--head) > :nth-child(4) { grid-area: when; flex-direction: row; flex-wrap: wrap; align-items: center; }
.mkm .mk-brow:not(.mk-brow--head) > :nth-child(5) { grid-area: x; align-self: start; }
.mkm .mk-bthumb { width: 56px; height: 72px; }
.mkm .mk-pillselect { height: 40px; flex: 1 1 140px; }
.mkm .mk-ptog { width: 36px; height: 36px; }
.mkm .mk-roundx { width: 36px; height: 36px; }

/* ---------- Accounts: a card per client ---------- */
.mkm .mka-filters { flex-wrap: wrap; }
.mkm .mka-search { flex: 1 1 100%; max-width: none; height: 44px; }
.mkm .mka-chip, .mkm .mka-filters .mk-chip { height: 38px; }
.mkm .mka-tcard { background: none; box-shadow: none; overflow: visible; }
.mkm .mka-table { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mkm .mka-trow--head { display: none; }
.mkm .mka-trow:not(.mka-trow--top):not(.mka-trow--plan) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; padding: 12px 12px 12px 11px; border-radius: 14px; background: rgba(251, 247, 240, .75); border-left: 3px solid var(--sage-600); }
.mkm .mka-trow.is-expired { border-left-color: var(--rust-600); }
.mkm .mka-trow:not(.mka-trow--top):not(.mka-trow--plan) > .mka-biz { grid-column: 1 / 4; grid-row: 1; min-width: 0; }
.mkm .mka-trow:not(.mka-trow--top):not(.mka-trow--plan) > .mka-act { grid-column: 4 / 5; grid-row: 1; justify-self: end; align-self: center; }
.mkm .mka-cell { min-width: 0; }
.mkm .mka-handle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkm .mka-trow .mka-act { flex-wrap: nowrap; }

/* ---------- Results: Top posts as a list ---------- */
.mkm .mka-two, .mkm .mka-grid2 { grid-template-columns: minmax(0, 1fr); }
.mkm .mka-trow--top { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "th cap act" "th biz act" "th nums nums"; gap: 2px 12px; padding: 10px 12px; border-radius: 14px; background: rgba(251, 247, 240, .75); }
.mkm .mka-trow--top > :nth-child(1) { grid-area: th; width: 44px; height: 44px; }
.mkm .mka-trow--top > :nth-child(2) { grid-area: cap; }
.mkm .mka-trow--top > :nth-child(3) { grid-area: biz; }
.mkm .mka-trow--top > :nth-child(4) { grid-area: nums; justify-self: start; }
.mkm .mka-trow--top > :nth-child(5), .mkm .mka-trow--top > :nth-child(6) { display: none; }
.mkm .mka-trow--top > :nth-child(7) { grid-area: act; align-self: center; }
.mkm .mka-chart { grid-template-columns: 36px minmax(0, 1fr); }
/* Views and engagement from posts made here: two side by side, not in the sideways strip. */
.mkm .mka-kpis.mka-kpis--lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
.mkm .mka-kpis--lead .mka-kpi { width: auto; }
.mkm .mka-kpi--lead .mka-kpi__n { font-size: 40px; }
.mkm .mka-kpi--lead .mka-sub { font-size: 12px; }
/* Each lead tile: label ›, the number, the change and its platform mix as a bar; the words under it are in its sheet. */
.mkm .mka-kpi--lead { padding: 14px; }
.mkm .mka-kpi--lead .mka-kpi__sub { display: none; }
.mkm .mka-kpi--lead .mka-strip { margin-top: 4px; }
/* The six numbers in two rows of three, all on screen (no sideways scroll); long labels wrap to two lines. */
.mkm .mka-kpis.mka-kpis--five { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; overflow: visible; }
.mkm .mka-kpis--five > * { grid-column: span 2; }
.mkm .mka-kpis--five > :nth-child(4) { grid-column: 2 / span 2; }
.mkm .mka-kpis--five .mka-kpi { width: auto; padding: 10px 10px 11px; gap: 3px; }
.mkm .mka-kpis--five .mka-label { white-space: normal; font-size: 9.5px; letter-spacing: .06em; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.mkm .mka-kpis--five .mka-kpi__n { font-size: 26px; }
.mkm .mka-kpis--five .mka-kpi__d { font-size: 11px; line-height: 1.3; }
.mkm .mka-kpis--five .mka-sub { font-size: 10.5px; line-height: 1.3; }
/* Best video on each platform: each card on its side, picture first, so four fit on a screen or two. */
.mkm .mka-vid { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.mkm .mka-vid__img { aspect-ratio: auto; height: 100%; min-height: 168px; }
.mkm .mka-vid__body { padding: 10px 12px 12px; gap: 8px; }
.mkm .mka-vid__net { left: 6px; top: 6px; }

/* ---------- Plan: Clients on Marketing as stacked rows ---------- */
.mkm .mka-tiers { grid-template-columns: minmax(0, 1fr); }
.mkm .mka-trow--plan { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "tier act" "use use" "renew renew"; gap: 4px 12px; padding: 12px; border-radius: 14px; background: rgba(251, 247, 240, .75); }
.mkm .mka-trow--plan > :nth-child(1) { grid-area: name; }
.mkm .mka-trow--plan > :nth-child(2) { grid-area: tier; }
.mkm .mka-trow--plan > :nth-child(3) { grid-area: use; }
.mkm .mka-trow--plan > :nth-child(4) { grid-area: renew; }
.mkm .mka-trow--plan > :nth-child(5) { grid-area: act; align-self: center; }

/* ---------- Ideas, Activity, Back-post ---------- */
.mkm .mka-ideas, .mkm .mka-evergreen, .mkm .mka-posts, .mkm .mka-modes { grid-template-columns: minmax(0, 1fr); }
.mkm .mk-act-search { flex: 1 1 100%; max-width: none; height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .mkm-sheet, .mkm-scrim { transition: none; }
}

/* ---------- the owner's phone: the Account row, the Today card and New post in the + menu (phone-mk.js) ---------- */
.p-li--mk { gap: 12px; }
.p-mkico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--rust-600); color: var(--sand-50); }
.p-mkdot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--rust-600); }
.p-mkcard { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; }
.p-mkcard__eyebrow { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-600); }
.p-mkcard__rows { display: flex; flex-direction: column; }
.p-mkcard__row { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 14px; line-height: 1.35; }
.p-mkcard__row:first-child { border-top: 0; }
.p-mkcard__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-900); }
.p-mkcard__dot.is-ochre { background: var(--ochre, #c98a1e); }
.p-mkcard .p-btn { min-height: 44px; }
.p-fab__item.is-rust { background: var(--rust-600); color: var(--sand-50); }

/* ---------- Liquid Glass (any iPhone, Collin's and owners': html.mkm-glass, set by mk-phone.js show()) ----------
   The phone app's look (m/m.css): frosted buttons, the tab bar as a floating glass pill with New post as a
   rust glass circle in the middle, and floating frosted sheets. Android keeps the look above. */
html.mkm-glass .mkm-back, html.mkm-glass .mkm-chip, html.mkm-glass .mkm-x {
  background: rgba(251, 247, 240, .45); -webkit-backdrop-filter: blur(18px) saturate(1.9); backdrop-filter: blur(18px) saturate(1.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 6px 18px -8px rgba(31, 26, 22, .3); }
html.mkm-glass .mkm-bar { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); max-width: 488px; margin: 0 auto;
  height: 64px; padding: 4px; box-sizing: border-box; align-items: center; border: 0; border-radius: 999px;
  background: rgba(251, 247, 240, .42); -webkit-backdrop-filter: blur(20px) saturate(1.9); backdrop-filter: blur(20px) saturate(1.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 10px 30px -10px rgba(31, 26, 22, .35); }
html.mkm-glass .mkm-tab { height: 56px; padding: 0; border-radius: 999px; color: var(--ink-900); transition: background .2s; }
html.mkm-glass .mkm-tab[aria-current="page"] { background: rgba(31, 26, 22, .08); color: var(--rust-600); }
html.mkm-glass .mkm-tab__l { font-size: 11px; }
html.mkm-glass .mkm-tab--new .mkm-tab__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.mkm-glass .mkm-tab--new, html.mkm-glass .mkm-tab--new[aria-current="page"] { background: none; }
html.mkm-glass .mkm-tab--new .mkm-tab__ic { height: 48px; }
html.mkm-glass .mkm-new { width: 48px; height: 48px; border-radius: 50%;
  background: rgba(194, 70, 31, .82); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(194, 70, 31, .6); }
html.mkm-glass .mkm-badge { box-shadow: none; }
/* Content scrolls under the floating bar, with room to clear it at the end. */
html.mkm-glass .mkm-body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); }
html.mkm-glass .mkm.is-compose .mkm-body { padding-bottom: 0; }
html.mkm-glass .mkm-sheet { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width: 504px; margin: 0 auto; border-radius: 40px; padding-bottom: 22px;
  background: rgba(251, 247, 240, .82); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(255, 255, 255, .8), 0 -10px 40px -10px rgba(31, 26, 22, .3); }
html.mkm-glass .mkm-sheet--tall { height: calc(80dvh - 8px); }
/* Walkthroughs (tours.js) over the layer: a Marketing-only owner's tour points at Marketing itself. */
html.mkm-on .wt-spot { z-index: 95; }
html.mkm-on .wt-coach { z-index: 96; }