/* =============================================================================
   mh-dashcards.css - THE DASHBOARD CARDS (WIDGETS22, 4 Oct 2026, training note 88)
   One file for: the new cards' rows and the Teams card (drawn by Components/Shared/DashCardView.razor), the trend line's
   arrowhead, the extra accents of the top-row tiles, the + Widgets picker's top-row group and Keep-on-top tick, and the
   Keep-on-top dock (Components/Layout/CardDock.razor). Loaded after mh-frostedsage.css and mh-theme.css, whose card,
   chart and picker rules it builds on - nothing there is re-declared here except where a rule is replaced on purpose.
   Surfaces use the app's tokens (--mh-surface, --mh-line, --fg-1..3), so every theme and dark mode follow.
   ============================================================================= */

/* ---------- the top row: accents for the new tiles (the four originals keep sage / slate / terra / plum) ---------- */
.mh-app .mh-fs .kpi[data-accent="ocean"],  .mh-app .cg-kpi[data-accent="ocean"]  { --a: #3A6EA5; --a2: #26507C; }
.mh-app .mh-fs .kpi[data-accent="pine"],   .mh-app .cg-kpi[data-accent="pine"]   { --a: #3D543A; --a2: #26382A; }
.mh-app .mh-fs .kpi[data-accent="violet"], .mh-app .cg-kpi[data-accent="violet"] { --a: #6D5BD0; --a2: #4F3FA8; }
.mh-app .mh-fs .kpi[data-accent="amber"],  .mh-app .cg-kpi[data-accent="amber"]  { --a: #C0902F; --a2: #94691A; }
.mh-app .mh-fs .kpi[data-accent="rose"],   .mh-app .cg-kpi[data-accent="rose"]   { --a: #A65067; --a2: #7C3549; }
.mh-app .cg-kpi[data-accent="sage"]  { --a: #5E8157; --a2: #3D543A; }
.mh-app .cg-kpi[data-accent="slate"] { --a: #56646A; --a2: #2A3338; }
.mh-app .cg-kpi[data-accent="terra"] { --a: #C17A52; --a2: #9C5A36; }
.mh-app .cg-kpi[data-accent="plum"]  { --a: #8E6E89; --a2: #6B4F67; }
.mh-app .mh-fs .kpi-delta.is-down { background: var(--danger-bg); color: var(--danger-ink); border-color: transparent; box-shadow: none; }

/* ---------- a card's header tools: its link, its filter, and KEEP ON TOP ---------- */
.mh-app .mh-fs .dc-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.mh-app .mh-fs .panel-head .panel-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .dc-pin {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--mh-line); background: transparent; color: var(--fg-3);
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.mh-app .dc-pin svg { width: 15px; height: 15px; }
.mh-app .dc-pin:hover { color: var(--mh-green); border-color: color-mix(in srgb, var(--mh-green) 45%, transparent); transform: rotate(-12deg); }
.mh-app .dc-pin.on { background: var(--mh-green); border-color: var(--mh-green); color: #fff; }
.mh-app .dc-pin:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 2px; }

/* ---------- the body ---------- */
.mh-app .mh-fs .dc-body { min-width: 0; }
.mh-app .mh-fs .dc-empty { padding: 18px 8px; color: var(--fg-3); font-size: 13px; }
.mh-app .mh-fs .dc-empty--tight { padding: 10px 2px; }
.mh-app .mh-fs .dc-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--fg-3); margin: 0 0 8px; }
.mh-app .mh-fs .wh-body .dc-sub + .hb { margin-top: 6px; }
.mh-app .mh-fs .mini-event + .dc-sub, .mh-app .mh-fs .dc-empty + .dc-sub { margin-top: 12px; }

/* one row shape for every list card: who / what / when */
.mh-app .mh-fs .dc-list { display: flex; flex-direction: column; }
.mh-app .mh-fs .dc-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 12px; border-bottom: 1px solid var(--mh-line); cursor: pointer; transition: background .14s; }
.mh-app .mh-fs .dc-row:last-of-type { border-bottom: none; }
.mh-app .mh-fs .dc-row:hover { background: color-mix(in srgb, var(--mh-green) 7%, transparent); }
.mh-app .mh-fs .dc-row:focus-visible { outline: 2px solid var(--mh-green); outline-offset: -2px; }
.mh-app .mh-fs .dc-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.mh-app .mh-fs .dc-av--ic { border-radius: 11px; background: color-mix(in srgb, var(--t) 16%, transparent); color: var(--t); }
.mh-app .mh-fs .dc-av--ic svg { width: 17px; height: 17px; }
.mh-app .mh-fs .dc-main { flex: 1; min-width: 0; }
.mh-app .mh-fs .dc-t { font-size: 13.5px; font-weight: 700; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .dc-s { font-size: 12px; color: var(--fg-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .dc-m { flex: none; font-size: 11.5px; font-weight: 800; color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; }
.mh-app .mh-fs .dc-m.is-bad  { color: #A5352E; }
.mh-app .mh-fs .dc-m.is-warn { color: #8A6516; }
.mh-app .mh-fs .dc-m.is-good { color: #2E7D54; }
.mh-app .mh-fs .dc-row.is-new .dc-t { font-weight: 800; }
.mh-app .mh-fs .dc-row.is-new .dc-t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mh-green); margin-right: 7px; vertical-align: 1px; }
.mh-app .mh-fs .dc-meter { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--mh-ink) 8%, transparent); overflow: hidden; margin-top: 5px; }
.mh-app .mh-fs .dc-meter i { display: block; height: 100%; border-radius: 99px; background: #A65067; }
.mh-app .mh-fs .dc-foot { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mh-app .mh-fs .fc-alert.is-link { cursor: pointer; transition: filter .14s, transform .14s; }
.mh-app .mh-fs .fc-alert.is-link:hover { filter: brightness(.97); transform: translateX(2px); }
/* ROUND24 (measured in dark mode 4 Oct 2026: 3.2 to 3.8 : 1 on 11-12px text): the small grey lines of the new cards take the
   dark-mode grey the older cards already use (.act-time, 6 : 1). Above the tone rules so a red / amber / green line keeps its tone. */
body.dark .mh-app .mh-fs .dc-empty, body.dark .mh-app .mh-fs .dc-sub, body.dark .mh-app .mh-fs .dc-s, body.dark .mh-app .mh-fs .dc-m,
body.dark .mh-app .mh-fs .tc-find svg, body.dark .mh-app .mh-fs .tc-sec, body.dark .mh-app .mh-fs .tc-from,
body.dark .mh-app .mh-fs .tc-who span, body.dark .mh-app .mh-fs .tc-time { color: #8C9C9B; }
body.dark .mh-app .mh-fs .tc-count { color: #8FD3AC; }
body.dark .mh-app .mh-fs .dc-m.is-bad { color: #F0A49E; }
body.dark .mh-app .mh-fs .dc-m.is-warn { color: #E6C275; }
body.dark .mh-app .mh-fs .dc-m.is-good { color: #8FD3AC; }

/* ---------- THE TREND LINE'S ARROWHEAD (owner, 4 Oct 2026: "double arrow ... make it clean and connected with the line").
   ONE solid head whose tip is the line's last point. It is placed by its right-centre (the tip) and turned about that
   same point, so whatever the slope the tip stays on the end of the line. js/mh-dash.js sets the measured angle. ---------- */
.mh-app .mh-fs .ar-box { height: 88px; position: relative; margin-right: 2px; }
.mh-app .mh-fs .ar-head { position: absolute; right: -2px; width: 14px; height: 14px; display: block; transform-origin: 100% 50%; pointer-events: none; }
.mh-app .mh-fs .ar-head svg { width: 14px; height: 14px; display: block; }
.mh-app .mh-fs .delta.down { background: color-mix(in srgb, #C0473F 13%, transparent); color: #A5352E; }
body.dark .mh-app .mh-fs .delta.down { color: #F0A49E; }

/* ---------- THE TEAMS CARD: everyone, who is online, and the conversation inside the card ---------- */
.mh-app .mh-fs .tc-list, .mh-app .mh-fs .tc-thread { display: flex; flex-direction: column; min-height: 0; }
.mh-app .mh-fs .tc-find { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--mh-ink) 6%, transparent); border: 1px solid var(--mh-line); margin-bottom: 8px; }
.mh-app .mh-fs .tc-find svg { width: 15px; height: 15px; color: var(--fg-3); flex: none; }
.mh-app .mh-fs .tc-find input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--fg-1); box-shadow: none; padding: 0; }
.mh-app .mh-fs .tc-count { flex: none; font-size: 11.5px; font-weight: 800; color: #2E7D54; }
.mh-app .mh-fs .tc-people { max-height: 288px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.mh-app .mh-fs .tc-person { display: flex; align-items: center; gap: 11px; padding: 8px 6px; border-radius: 12px; cursor: pointer; transition: background .14s; }
.mh-app .mh-fs .tc-person:hover { background: color-mix(in srgb, var(--mh-green) 8%, transparent); }
.mh-app .mh-fs .tc-person:focus-visible { outline: 2px solid var(--mh-green); outline-offset: -2px; }
.mh-app .mh-fs .tc-av { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, #5E8157, #3D543A); color: #fff; }
.mh-app .mh-fs .tc-av i { font-style: normal; font-size: 12px; font-weight: 800; }
.mh-app .mh-fs .tc-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mh-app .mh-fs .tc-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--c, #9AA0A6); border: 2px solid var(--mh-surface); }
.mh-app .mh-fs .tc-dot.on { background: #3E9E6B; }
/* ROUND24: groups in the Teams card + the @ list */
.mh-app .mh-fs .tc-sec { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: 8px 6px 3px; }
.mh-app .mh-fs .tc-sec:first-child { padding-top: 2px; }
.mh-app .mh-fs .tc-av--grp svg { width: 17px; height: 17px; }
.mh-app .mh-fs .tc-from { font-size: 10.5px; font-weight: 700; color: var(--fg-3); padding: 0 4px 2px; }
.mh-app .mh-fs .tc-mention { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 0 0; }
.mh-app .mh-fs .tc-mopt { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mh-green) 40%, transparent); background: color-mix(in srgb, var(--mh-green) 10%, transparent); color: var(--fg-1); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mh-app .mh-fs .tc-mopt:hover, .mh-app .mh-fs .tc-mopt:focus-visible { background: color-mix(in srgb, var(--mh-green) 20%, transparent); outline: none; }
.mh-app .mh-fs .tc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mh-app .mh-fs .tc-who b { font-size: 13.5px; font-weight: 700; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .tc-who span { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .tc-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mh-green); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.mh-app .mh-fs .tc-top { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--mh-line); }
.mh-app .mh-fs .tc-back, .mh-app .mh-fs .tc-open { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 999px; border: 1px solid var(--mh-line); background: transparent; color: var(--fg-2); cursor: pointer; }
.mh-app .mh-fs .tc-back svg, .mh-app .mh-fs .tc-open svg { width: 15px; height: 15px; }
.mh-app .mh-fs .tc-back:hover, .mh-app .mh-fs .tc-open:hover { color: var(--mh-green); border-color: color-mix(in srgb, var(--mh-green) 45%, transparent); }
.mh-app .mh-fs .tc-msgs { height: 230px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; padding: 10px 2px; }
.mh-app .mh-fs .tc-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.mh-app .mh-fs .tc-msg.mine { align-self: flex-end; align-items: flex-end; }
.mh-app .mh-fs .tc-bub { padding: 8px 12px; border-radius: 16px 16px 16px 5px; background: color-mix(in srgb, var(--mh-ink) 7%, transparent); color: var(--fg-1); font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.mh-app .mh-fs .tc-msg.mine .tc-bub { border-radius: 16px 16px 5px 16px; background: var(--mh-green); color: #fff; }
.mh-app .mh-fs .tc-time { font-size: 10.5px; color: var(--fg-3); margin-top: 2px; padding: 0 4px; }
.mh-app .mh-fs .tc-compose { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--mh-line); }
.mh-app .mh-fs .tc-input { flex: 1; min-width: 0; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--mh-line); background: color-mix(in srgb, var(--mh-ink) 5%, transparent); color: var(--fg-1); font: inherit; font-size: 13px; outline: none; box-shadow: none; }
.mh-app .mh-fs .tc-input:focus { border-color: color-mix(in srgb, var(--mh-green) 55%, transparent); }
.mh-app .mh-fs .tc-send { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: none; background: var(--mh-green); color: #fff; cursor: pointer; transition: transform .14s, filter .14s; }
.mh-app .mh-fs .tc-send svg { width: 16px; height: 16px; }
.mh-app .mh-fs .tc-send:hover:not(:disabled) { transform: scale(1.06); filter: brightness(1.06); }
.mh-app .mh-fs .tc-send:disabled { opacity: .45; cursor: default; }

/* ---------- THE + WIDGETS PICKER ---------- */
.mh-app .wg-card--gallery { width: min(860px, calc(96 * var(--mh-vw))); }
/* the top row: its own group, same-size tiles, exactly four */
.mh-app .cg-krow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mh-app .cg-kcount { margin-left: auto; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: none; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--mh-green) 14%, transparent); color: var(--mh-green); }
.mh-app .cg-kcount.is-short { background: color-mix(in srgb, #C0473F 14%, transparent); color: #A5352E; animation: cgNudge .5s cubic-bezier(.3,1.6,.5,1); }
.mh-app .cg-kneed { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, #C0902F 14%, transparent); color: #8A6516; }
.mh-app .cg-kneed svg { width: 15px; height: 15px; flex: none; }
.mh-app .cg-kfam { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mh-muted); margin: 4px 0 -3px; }
.mh-app .cg-kgrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 10px; }   /* every tile the same size, in every row */
.mh-app .cg-kpi {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; min-height: 104px;
  padding: 12px; border-radius: 14px; background: var(--mh-cream-2); border: 1px solid var(--mh-line); cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.mh-app .cg-kpi:hover { border-color: color-mix(in srgb, var(--a) 55%, transparent); background: var(--mh-surface); box-shadow: var(--mh-shadow-sm); transform: translateY(-1px); }
.mh-app .cg-kpi.on { border-color: var(--a); background: color-mix(in srgb, var(--a) 11%, var(--mh-surface)); }
.mh-app .cg-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, var(--a), var(--a2)); color: #fff; }
.mh-app .cg-kpi-ic .mh-ico .duo { fill: currentColor; opacity: .22; }
.mh-app .cg-kpi-ic .mh-ico .ln { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mh-app .cg-kpi-t { font-size: 13px; font-weight: 800; color: var(--mh-ink); line-height: 1.2; }
.mh-app .cg-kpi-d { font-size: 11px; color: var(--mh-muted); line-height: 1.3; }
.mh-app .cg-kpi-n { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--mh-surface); border: 1px solid var(--mh-line); color: var(--mh-muted); }
.mh-app .cg-kpi-n svg { width: 13px; height: 13px; }
.mh-app .cg-kpi.on .cg-kpi-n { background: var(--a); border-color: var(--a); color: #fff; }
.mh-app .cg-kpi.is-full:not(.on) { opacity: .55; }
@keyframes cgNudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
/* a card's row: add / remove, and beside it the Keep-on-top tick */
.mh-app .cg-item { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.mh-app .cg-item .cg-card { flex: 1; min-width: 0; }
.mh-app .cg-top { flex: none; width: 40px; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 14px; border: 1px solid var(--mh-line); background: var(--mh-cream-2); color: var(--mh-muted); transition: border-color .16s, background .16s, color .16s; }
.mh-app .cg-top svg { width: 16px; height: 16px; }
.mh-app .cg-top:hover:not(:disabled) { color: var(--mh-green); border-color: color-mix(in srgb, var(--mh-green) 45%, transparent); background: var(--mh-surface); }
.mh-app .cg-top.on { background: var(--mh-green); border-color: var(--mh-green); color: #fff; }
.mh-app .cg-top:disabled { opacity: .4; cursor: not-allowed; }
/* DEFAULT - back to the Home everyone starts with; it asks once (the footer turns into the question) */
.mh-app .cg-default { flex: none; margin-right: 6px; }
.mh-app .cg-default svg { width: 15px; height: 15px; }
.mh-app .cg-defask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-right: auto; font-size: 13px; color: var(--mh-ink); }
.mh-app .cg-defask b { font-weight: 800; }
.mh-app .cg-legend { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--mh-muted); margin-right: auto; }
.mh-app .cg-legend svg { width: 15px; height: 15px; color: var(--mh-green); flex: none; }
.mh-app .cg-gh span { font-weight: 600; }
@media (max-width: 760px) { .mh-app .cg-kgrid { grid-template-columns: repeat(2, 1fr); } }
body.dark .mh-app .cg-kneed { color: #E6C275; }
body.dark .mh-app .cg-kcount.is-short { color: #F0A49E; }

/* ---------- KEEP ON TOP: THE DOCK ----------
   Tabs on the right edge of every screen (the layer just under Matthew House AI's bubble, so it floats over whatever
   is open - a record, a wizard - exactly as the bubble does); a click opens the compact card beside them. */
.mh-app .cdock { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 100090; display: flex; align-items: center; gap: 12px; pointer-events: none; }
/* many cards kept on top: the tabs never run off the screen - the column scrolls (no bar; the wheel and touch still work) */
.mh-app .cdock-tabs { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: auto;
  max-height: calc(100 * var(--mh-vh) - 200px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
  padding: 10px 0 10px 12px; }
.mh-app .cdock-tabs::-webkit-scrollbar { display: none; }
.mh-app .cdock-tab { flex: none; }
.mh-app .cdock-tab {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 5px; cursor: pointer; max-width: 196px;
  border: 1px solid var(--mh-line); border-right: none; border-radius: 999px 0 0 999px;
  background: var(--mh-surface); color: var(--mh-ink); font: inherit; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(20, 32, 28, .16);
  transform: translateX(0); transition: transform .18s cubic-bezier(.2,.7,.25,1), box-shadow .18s, background .18s;
}
.mh-app .cdock-tab:hover { transform: translateX(-4px); box-shadow: 0 12px 28px rgba(20, 32, 28, .22); }
.mh-app .cdock-tab:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 2px; }
.mh-app .cdock-tab.on { background: color-mix(in srgb, var(--t) 14%, var(--mh-surface)); border-color: color-mix(in srgb, var(--t) 55%, transparent); }
.mh-app .cdock-tab-ic { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--t); color: #fff; }
.mh-app .cdock-tab-ic svg { width: 15px; height: 15px; }
.mh-app .cdock-tab-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .cdock-panel {
  pointer-events: auto; width: min(380px, calc(100 * var(--mh-vw) - 230px)); max-height: min(560px, calc(100 * var(--mh-vh) - 150px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--mh-surface); color: var(--mh-ink); border: 1px solid var(--mh-line); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(20, 32, 28, .34), 0 4px 14px rgba(20, 32, 28, .12);
  animation: cdockIn .22s cubic-bezier(.2,.7,.25,1);
}
@keyframes cdockIn { from { opacity: 0; transform: translateX(14px) scale(.98); } to { opacity: 1; transform: none; } }
.mh-app .cdock-head { display: flex; align-items: center; gap: 9px; padding: 12px 12px 11px 14px; border-bottom: 1px solid var(--mh-line); flex: none; }
.mh-app .cdock-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.mh-app .cdock-ic svg { width: 16px; height: 16px; }
.mh-app .cdock-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .cdock-btn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--mh-muted); cursor: pointer; transition: background .14s, color .14s; }
.mh-app .cdock-btn svg { width: 15px; height: 15px; }
.mh-app .cdock-btn:hover { background: var(--mh-cream-2); color: var(--mh-ink); }
.mh-app .cdock-btn.is-on { color: var(--mh-green); }
.mh-app .cdock-btn:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 1px; }
.mh-app .cdock-body { padding: 13px 14px 14px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
/* the card inside the dock is the Home card, a size smaller */
.mh-app .cdock-panel.mh-fs .dn-wrap { width: 108px; height: 108px; }
.mh-app .cdock-panel.mh-fs .dn-row { gap: 16px; }
.mh-app .cdock-panel.mh-fs .ch-big { font-size: 27px; }
.mh-app .cdock-panel.mh-fs .tc-people { max-height: 330px; }
.mh-app .cdock-panel.mh-fs .tc-msgs { height: 270px; }
.mh-app .cdock-panel.mh-fs .fam-head { display: none; }
.mh-app .cdock-panel.mh-fs .fam-row .st, .mh-app .cdock-panel.mh-fs .fam-row .fam-date { display: none; }
/* while Matthew House AI is open the card moves left of it, so the two never sit on top of each other */
body:has(.fb-root.is-open) .mh-app .cdock-panel { margin-right: 300px; }
@media (max-width: 760px) {
  .mh-app .cdock { top: auto; bottom: 96px; transform: none; flex-direction: column-reverse; align-items: flex-end; }
  .mh-app .cdock-tab-t { display: none; }
  .mh-app .cdock-tab { padding: 0 5px; }
  .mh-app .cdock-panel { width: calc(100 * var(--mh-vw) - 24px); margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mh-app .cdock-panel, .mh-app .cg-kcount.is-short { animation: none; } .mh-app .cdock-tab { transition: none; } }
body.reduce-motion .mh-app .cdock-panel, body.reduce-motion .mh-app .cg-kcount.is-short { animation: none; }
@media print { .mh-app .cdock { display: none; } }