/* Meeting Tracker detail polish. Keep the established board and status palette. */
#page-mt #mt-meetings-body { --mn-placeholder:#7d8797; }
#page-mt .mt-shell { padding-bottom:6px; }
#page-mt .mt-controlbar { gap:6px; padding-block:10px; align-items:center; }
#page-mt .mt-add-btn { height:34px; padding:0 14px; font-weight:600; }
#page-mt .mt-new { border-radius:6px; }
#page-mt .mt-search-wrap { height:34px; border:1px solid var(--mn-line-2); background:#fff; border-radius:6px; }
#page-mt .mt-search-wrap .mt-search { width:170px; font-size:12px; }
#page-mt .mt-search-wrap:focus-within { border-color:var(--mn-primary); box-shadow:0 0 0 2px #0073ea18; }
#page-mt .mt-combo-input, #page-mt .mt-select-wrap select, #page-mt .mt-menu-btn { min-height:34px; }
/* Retired from the strip 2026-10-15 (see the note in index.html). !important
   because .mt-combobox and .mt-menu-btn set a display that beats [hidden]. */
#page-mt .mt-retired { display:none !important; }
/* .mt-ghost-bar sets display:flex, which beats [hidden] — so while hidden it
   still spent its 8px bottom margin above the board. */
#page-mt .mt-ghost-bar[hidden] { display:none; }
/* Desktop: ONE short row straight under the top bar. Its controls are now
   New meeting, search, Filters and Tools, then the count — the page header
   block at the end of this file sets their final size and look. */
@media (min-width:1100px) {
  #page-mt .mt-controlbar { flex-wrap:nowrap; padding-block:6px; gap:6px; }
  #page-mt .mt-add-btn, #page-mt .mt-search-wrap { height:30px; }
  #page-mt .mt-combo-input, #page-mt .mt-select-wrap select, #page-mt .mt-menu-btn { min-height:30px; height:30px; }
  #page-mt .mt-scope { padding:2px; }
  #page-mt .mt-scope button { padding:5px 9px; }
  #page-mt .mt-controlbar .mt-select-wrap { flex:0 1 160px; min-width:120px; }
  /* Only the search box and the two dropdowns give way on a narrow screen. */
  #page-mt .mt-controlbar .mt-new, #page-mt .mt-controlbar .mt-scope,
  #page-mt .mt-controlbar .mt-menu, #page-mt .mt-controlbar .mt-menu-btn,
  #page-mt .mt-controlbar .mt-controlbar-right { flex-shrink:0; }
  #page-mt .mt-search-wrap { flex:0 1 220px; min-width:130px; }
  #page-mt .mt-search-wrap .mt-search { width:100%; min-width:0; }
}
#page-mt .mt-scope { display:inline-flex; flex-shrink:0; padding:3px; background:#f4f6fa; border:1px solid var(--mn-line); border-radius:7px; }
#page-mt .mt-scope button { border:0; border-radius:4px; background:transparent; color:var(--mn-text-2); padding:6px 9px; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; }
#page-mt .mt-scope button[aria-pressed="true"] { background:#fff; color:#0060b9; box-shadow:0 1px 3px #10163518; }
#page-mt #mt-table :is(button,input,[tabindex]):focus-visible { outline-offset:-2px; }
#page-mt .mt-combo-drop { max-height:min(320px,45vh); overflow:auto; overscroll-behavior:contain; z-index:50; }
#page-mt .mt-combo-opt { min-height:32px; display:flex; align-items:center; }
#page-mt .mt-group-head { height:auto; min-height:36px; flex-wrap:wrap; padding-block:5px; }
#page-mt .mt-filter-summary { color:var(--mn-text-2); font-size:11px; margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65%; }
#page-mt .mt-board-group-name { font-size:13px; }
#page-mt .mt-controlbar-right { margin-left:auto; }
#page-mt .mt-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
#page-mt .mt-table-wrap { border:1px solid var(--mn-line); border-radius:6px; scrollbar-width:auto; scrollbar-color:#a8b4c7 #f5f7fa; }
#page-mt .mt-table-wrap::-webkit-scrollbar { width:13px; height:13px; }
#page-mt .mt-table-wrap::-webkit-scrollbar-thumb { border:3px solid #f5f7fa; background:#a8b4c7; }
#mt-table tbody tr[data-mt-row] { contain-intrinsic-size:auto 30px; }
#mt-table tr.mt-head-row th { font-weight:500; }
#mt-table tbody td[data-mt-cell="name"] { box-shadow:2px 0 0 #dce3ed,5px 0 8px -6px #64748b; }
#mt-table .mtx-cell { line-height:var(--mn-row-h); }
#mt-table .mt-status-button, .mt-pop .mt-label-choice { font-weight:600; }
#mt-table th[data-key="issue"],
#mt-table td[data-mt-cell="issue"] .mt-combo-cell { text-align:center; }
#page-mt .mt-board-footer { display:flex; align-items:center; gap:14px; min-height:36px; padding:4px 18px; color:var(--mn-text-2); font-size:11px; flex-shrink:0; }
#page-mt .mt-board-footer label { margin-left:auto; display:flex; align-items:center; gap:7px; }
#page-mt .mt-board-footer select, #page-mt .mt-board-footer button { border:1px solid var(--mn-line); border-radius:5px; background:#fff; padding:5px 8px; color:var(--mn-text-2); font:inherit; cursor:pointer; }
#page-mt .mt-empty { padding:44px 20px; position:sticky; left:0; max-width:calc(100vw - 80px); text-align:center; }
#page-mt .mt-empty strong { display:block; font-size:16px; color:var(--mn-text); }
#page-mt .mt-empty p { font-size:12px; margin:8px 0 16px; white-space:normal; }
#mt-detail-overlay .mt-detail-section { grid-column:1/-1; margin:12px 0 0; padding:12px 0 0; border-top:1px solid #e6e9ef; color:#46536a; font-size:13px; font-weight:650; }
#mt-detail-overlay .mt-detail-section:first-child { border:0; padding-top:0; margin-top:0; }
#mt-detail-overlay .mt-detail-body { overscroll-behavior:contain; }
#mt-detail-overlay :is(button,input,select,textarea,a):focus-visible { outline:2px solid #0073ea; outline-offset:2px; }
@media(min-width:600px) {
  #tab-staff-portal #page-mt.active { display:flex; flex-direction:column; min-height:300px; }
  #tab-staff-portal #page-mt.active .mt-shell { width:100%; max-width:none; height:100%; }
  #tab-staff-portal #page-mt.active #mt-content { overflow:visible; }
  #tab-staff-portal #page-mt.active .mt-table-wrap { flex:1; height:auto; min-height:120px; }
}
@media(max-width:1100px) and (min-width:600px) {
  #page-mt .mt-controlbar { gap:4px; }
  #page-mt .mt-controlbar .mt-combobox { flex-basis:140px; }
}
@media(max-width:599px) {
  /* Below 600px, #page-mt.active falls back to display:block;height:auto
     (staff-portal.css's own @media(max-width:900px) rule -- its attempt at
     this same fix for the 600-899px range, which the block above already
     wins for since it loads later; nothing did for <600px) and .mt-shell
     and .mt-table-wrap both resolve to height:auto right along with it --
     flex:1 on .mt-table-wrap is then inert (its parent isn't a flex
     container with real space to give), and "auto" means "grow to fit
     every row". Confirmed live: 60 meetings made the whole page 28,499px
     tall, because nothing here ever gave this box a real floor to stand on.
     Restoring the exact shape used above 600px, where it already works. */
  #tab-staff-portal #page-mt.active { display:flex; flex-direction:column; height:calc(100dvh - 100px); min-height:0; }
  #tab-staff-portal #page-mt.active .mt-shell { height:100%; }
  #tab-staff-portal #page-mt.active .mt-table-wrap { flex:1; height:auto; min-height:120px; overflow:auto; }
  #page-mt .mt-tab-bar { padding:8px 0; margin:0; gap:6px; }
  #page-mt .mt-tab { padding:8px; font-size:11px; min-height:34px; border-radius:5px; box-shadow:none; }
  #page-mt .mt-fy-tabs { padding:3px; gap:2px; }
  #page-mt .mt-fy-pill { padding:5px 8px; font-size:11px; }
  #page-mt .mt-controlbar { padding:8px 4px; gap:8px; }
  #page-mt .mt-search-wrap { flex:1; min-width:160px; }
  #page-mt .mt-search-wrap .mt-search { width:100%; }
  #page-mt .mt-controlbar .mt-combobox, #page-mt .mt-controlbar .mt-select-wrap { flex:1 1 calc(50% - 8px); min-width:0; }
  #page-mt .mt-group-head { margin:4px; }
  #page-mt .mt-filter-summary { max-width:100%; margin-left:0; flex-basis:100%; }
  #tab-staff-portal #page-mt .mt-table { min-width:0!important; table-layout:auto; }
  #tab-staff-portal #page-mt .mt-table colgroup { display:none; }
  /* #mt-table .mt-name-chat .mtx-cell further down has its own unconditional
     overflow:hidden;text-overflow:ellipsis -- needed on desktop, where every
     row is a fixed 30px tall and a long title has nowhere to go. Here rows
     already wrap (below), so the title should too, or it just clips with a
     "…" instead of showing the rest. */
  #tab-staff-portal #mt-table .mt-name-chat .mtx-cell { overflow:visible; text-overflow:clip; white-space:normal; }
  #tab-staff-portal #page-mt .mt-table tbody, #tab-staff-portal #page-mt .mt-table tbody tr[data-mt-row] { width:100%; min-width:0; }
  #tab-staff-portal #page-mt .mt-table tbody tr[data-mt-row] { height:auto!important; min-height:0; contain-intrinsic-size:auto 1350px; }
  #tab-staff-portal #page-mt .mt-table tbody tr[data-mt-row]>td { height:auto!important; overflow:visible; white-space:normal; }
  #tab-staff-portal #page-mt[data-mt-mobile-summary] .mt-table tbody tr[data-mt-row]>td[data-mt-cell]:not([data-mt-cell="name"]):not([data-mt-cell="client"]):not([data-mt-cell="member"]):not([data-mt-cell="issue"]):not([data-mt-cell="meetingStatus"]):not([data-mt-cell="meetingStart"]):not([data-mt-cell="jagAttendee"]):not([data-mt-cell="mp"]):not([data-mt-cell="docs"]) { display:none!important; }
  #tab-staff-portal #page-mt[data-mt-mobile-summary] .mt-table tbody tr[data-mt-row] { contain-intrinsic-size:auto 420px; }
  #page-mt #mt-table .mt-detail-btn { font-size:0; background:#f4f7fc; border:1px solid #dbe3ef; border-radius:5px; }
  #page-mt #mt-table .mt-detail-btn::after { content:'Open full details'; font-size:12px; color:#0060b9; }
  #page-mt[data-mt-mobile-summary] #mt-view-summary { font-size:0; }
  #page-mt[data-mt-mobile-summary] #mt-view-summary::after { content:'Essentials shown · All fields in full details'; font-size:11px; }
  #page-mt #mt-table .mtx-cell { min-height:32px; height:auto; line-height:1.5; padding:6px 0; white-space:normal; overflow-wrap:anywhere; }
  #page-mt .mt-board-footer { padding:8px 4px; flex-wrap:wrap; }
  #page-mt .mt-board-footer label { display:none; }
  #page-mt .mt-board-footer button { margin-left:auto; }
}

#mt-new-overlay .mt-new-panel { border-radius:12px; }
#mt-new-overlay .mt-new-foot { position:sticky; bottom:0; background:#fafbfd; border-top:1px solid #e6e9ef; }
#mt-new-overlay :is(button,input,select,textarea):focus-visible { outline:2px solid #0073ea; outline-offset:2px; }
#page-mt #mt-attendance-btn[aria-pressed="true"] { background:var(--mn-selected); color:var(--mn-text); }
#mt-table .mt-group-header:focus-visible { outline:2px solid #0073ea; outline-offset:-2px; }
#page-mt :is(button,input,select,[tabindex]):focus-visible { outline:2px solid #0073ea; outline-offset:2px; }
@media(max-width:599px){ #page-mt .mt-hbar { display:none; } }

/* Frozen identity cells have their own solid paint layer, including row states. */
#mt-table tbody td[data-mt-cell="name"],
.mnb-board .mnb-tbl tbody td.mnb-c-name,
.mnb-board .mnb-tbl tbody td.mnb-c-chk {
  background-color:#fff; background-clip:border-box; opacity:1;
}
.mnb-board .mnb-tbl tbody td.mnb-c-name { z-index:3; isolation:isolate; }
.mnb-board .mnb-tbl thead th:is(.mnb-c-name,.mnb-c-chk,.mnb-c-bar) { z-index:6; background-color:#fff; }
.mnb-board .mnb-tbl tbody tr:hover td.mnb-c-name,
.mnb-board .mnb-tbl tbody tr:hover td.mnb-c-chk,
#mt-table tbody tr:hover td[data-mt-cell="name"] { background-color:#f5f6f8; }
#mt-table tbody tr.mt-row-selected td[data-mt-cell="name"] { background-color:#d7ebff; }
#mt-table tbody td[data-mt-cell="name"] { box-shadow:4px 0 7px -3px rgba(50,51,56,.22),1px 0 0 #e6e9ef; }
.mnb-board .mnb-name-wrap .mnb-name { flex:1 1 auto; }
.mnb-board .mnb-name-wrap .mnb-bubble { flex:0 0 auto; min-width:26px; min-height:26px; justify-content:center; }
#mt-table .mt-name-chat { display:flex; align-items:center; gap:4px; min-width:0; }
#mt-table .mt-name-chat .mtx-cell { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#mt-table .mt-name-chat .mtx-edit { flex:1; min-width:0; width:0; }
#mt-table .mt-chat-button { display:inline-flex; flex:0 0 26px; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:5px; background:transparent; color:#676879; cursor:pointer; }
#mt-table .mt-chat-button:hover { background:#e7f2ff; color:#0060b9; }
#mt-table .mt-chat-button:disabled { color:#aeb4c1; cursor:default; background:transparent; }
.mt-chat-dialog { width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); box-sizing:border-box; margin:auto; padding:0; border:1px solid #dce2eb; border-radius:12px; color:#323338; background:#fff; box-shadow:0 16px 60px #172b4d40; font:14px/1.45 Figtree,-apple-system,'Segoe UI',sans-serif; }
.mt-chat-dialog[open] { display:flex; flex-direction:column; }
.mt-chat-dialog::backdrop { background:#15274466; }
.mt-chat-dialog header { display:flex; gap:16px; justify-content:space-between; padding:18px 20px 12px; flex:none; }
.mt-chat-dialog h2 { margin:3px 0 0; font-size:18px; line-height:1.3; overflow-wrap:anywhere; }
.mt-chat-eyebrow { color:#676879; font-size:12px; }
/* Client · Issue · Meeting status · Meeting date, under the meeting name. It
   WRAPS rather than truncating — a client and an issue are both long enough
   to clip on a phone, and half an issue name is worse than a second line. */
.mt-chat-sum { display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; margin:5px 0 0; font-size:12.5px; color:#505565; }
.mt-chat-sum-i { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.mt-chat-sum-sep { color:#c3c8d4; }
.mt-chat-sum-v { overflow-wrap:anywhere; }
.mt-chat-sum-none { color:#aeb4c1; font-style:italic; }
.mt-chat-sum-chip { padding:1px 8px; border-radius:10px; font-size:11.5px; font-weight:600; line-height:1.5; }
.mt-chat-dialog button { cursor:pointer; font:inherit; }
.mt-chat-dialog button:disabled { opacity:.55; cursor:default; }
.mt-chat-close { align-self:flex-start; flex:none; width:32px; height:32px; border:0; border-radius:6px; background:#f5f6f8; font-size:22px!important; color:#676879; }
.mt-chat-team { margin:0 20px 12px; padding:7px 10px; border:1px solid #e6e9ef; border-radius:8px; background:#f5f6f8; color:#676879; font-size:12px; }
.mt-chat-team.is-empty { background:#fff4e4; border-color:#ffd9a8; color:#7a4b00; }
.mt-chat-messages { min-height:100px; height:320px; overflow-y:auto; overscroll-behavior:contain; margin:0 20px 4px; padding:14px; border:1px solid #dce2eb; border-radius:10px; background:#fafbfd; }
.mt-chat-messages:focus-visible { outline:2px solid #0073ea; outline-offset:2px; }
.mt-chat-empty { margin:24px 0; text-align:center; color:#676879; }
.mt-chat-message { margin-bottom:10px; padding:10px 12px; background:#fff; border:1px solid #dce2eb; border-radius:10px; box-shadow:0 1px 2px rgba(23,43,77,.04); }
.mt-chat-message.is-mine { background:#f3f8ff; border-color:#b9d8ff; }
.mt-chat-message:last-child { margin-bottom:0; }
.mt-chat-message>div { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.mt-chat-message time { font-size:11px; color:#676879; }
.mt-chat-message p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.mt-chat-older,.mt-chat-refresh { color:#0060b9; border:0; background:transparent; font-size:12px!important; padding:8px; }
.mt-chat-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 16px; border-top:1px solid #e6e9ef; }
.mt-chat-status { font-size:12px; color:#676879; }
.mt-chat-dialog form { margin:0 20px 18px; padding:12px; border:1px solid #dce2eb; border-radius:10px; background:#fff; flex:none; }
.mt-chat-dialog label { display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
.mt-chat-dialog textarea { display:block; box-sizing:border-box; width:100%; max-height:150px; min-height:70px; resize:vertical; padding:10px; border:1px solid #d0d4e4; border-radius:6px; font:inherit; background:#fff; color:#323338; }
.mt-chat-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.mt-chat-actions span { font-size:11px; color:#676879; }
.mt-chat-actions button { padding:8px 14px; border:0; border-radius:6px; background:#0073ea; color:#fff; font-weight:600; }
.mt-chat-dialog :is(button,textarea,[tabindex]):focus-visible { outline:2px solid #0073ea; outline-offset:2px; }
@media(max-width:599px) {
  #mt-table .mt-name-chat { width:100%; }
  #mt-table .mt-chat-button { flex-basis:34px; height:34px; }
  .mt-chat-actions span { display:none; }
  .mt-chat-actions button { margin-left:auto; }
}

/* Phone cards and editors keep the same delegated actions and full record. */
@media(max-width:599px) {
  #page-mt .mt-tab-bar { overflow-x:auto; flex-wrap:nowrap; }
  #page-mt :is(.mt-tab,.mt-fy-pill,.mt-add-btn,.mt-menu-btn,.mt-scope button,.mt-combo-input,.mt-select-wrap select) { min-height:44px; }
  #page-mt .mt-tab { flex-shrink:0; font-size:13px; }
  #page-mt .mt-search-wrap { height:44px; flex-basis:100%; }
  #page-mt .mt-controlbar .mt-combobox { flex-basis:100%; }
  #page-mt .mt-combo-opt { min-height:44px; }
  #tab-staff-portal #page-mt #mt-table :is(.mt-status-button,.mt-people-button,.mt-date-button,.mt-detail-btn,.mt-chat-button) { min-height:44px; height:auto; }
  #tab-staff-portal #page-mt #mt-table .mt-mp-btn { min-height:44px; min-width:56px; margin:0; }
  #page-mt #mt-table .mt-chat-button { min-width:44px; flex-basis:44px; }
  #tab-staff-portal #page-mt #mt-table td[data-mt-cell="name"],
  #tab-staff-portal #page-mt #mt-table td[data-mt-cell="client"],
  #tab-staff-portal #page-mt #mt-table td[data-mt-cell="issue"],
  #tab-staff-portal #page-mt #mt-table td[data-mt-cell="member"] { grid-column:1/-1; }
  #page-mt #mt-table .mtx-cell { font-size:15px; }
  #tab-staff-portal #page-mt #mt-table .mt-combo-cell { min-height:44px; height:auto; white-space:normal; overflow-wrap:anywhere; font-size:15px; line-height:1.5; padding:6px 0; }
  #tab-staff-portal #page-mt #mt-table tr.mt-vpad { display:none!important; }
  #page-mt #mt-table td[data-mt-cell="name"] .mtx-cell { font-size:17px; font-weight:600; }
  #page-mt #mt-table .mt-detail-btn::after { font-size:14px; }
  #tab-staff-portal .mt-detail-overlay { padding:0; align-items:stretch; }
  #tab-staff-portal .mt-detail-overlay .mt-detail-panel { width:100%; max-height:100%; min-height:0; border-radius:0; }
  #tab-staff-portal .mt-detail-overlay :is(.mt-new-body,.mt-detail-body) { min-height:0; overscroll-behavior:contain; padding:14px; }
  #tab-staff-portal .mt-detail-overlay :is(.mt-nm-fld-2,.mt-nm-fld-3,.mt-detail-grid) { grid-template-columns:minmax(0,1fr); }
  #tab-staff-portal .mt-detail-overlay .mt-new-foot { flex-wrap:wrap; gap:8px; padding-bottom:max(12px,env(safe-area-inset-bottom,0px)); }
  #tab-staff-portal .mt-detail-overlay button { min-height:44px; }
  #tab-staff-portal .mt-detail-overlay .mt-detail-close { min-width:44px; }
  #tab-staff-portal .mt-detail-overlay .mt-detail-head { padding-top:max(14px,env(safe-area-inset-top,0px)); }
  .mt-pop { max-width:calc(100vw - 16px); max-height:calc(var(--jag-phone-height,100dvh) - 16px); overflow-y:auto; box-sizing:border-box; }
  .mt-pop :is(.mt-label-choice,.mt-person-option) { min-height:44px; }
  .mt-chat-dialog { max-height:calc(var(--jag-phone-height,100dvh) - 16px); }
  .mt-chat-dialog .mt-chat-messages { min-height:64px; flex:1 1 auto; }
  .mt-chat-dialog :is(button,textarea) { min-height:44px; }
}

/* Discussion count badge: the grid button carries how many messages a
   meeting already has, so a live conversation is visible without opening
   it. Fed by ONE grouped count query for the whole board. */
#mt-table .mt-chat-button { position:relative; }
#mt-table .mt-chat-button.has-messages { color:#0060b9; }
#mt-table .mt-chat-count { position:absolute; top:-1px; right:-2px; min-width:13px; height:13px; padding:0 3px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:#0073ea; color:#fff;
  font:700 9px/1 Figtree,-apple-system,'Segoe UI',sans-serif; }

/* ═══════════════════════════════════════════════════════════════════════════
   UX sweep, 2026-09-12. Small, additive polish only — the layout, colours and
   information architecture are unchanged on purpose, so the board a person
   signed out of is the board they sign back in to.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Depth: say what is pinned ────────────────────────────────────────────
   The frozen header and frozen lead column look painted on until content
   actually slides under them. The shadows appear only once there IS content
   underneath (attributes set by mtWireScrollDepth), so a short, unscrolled
   board stays completely flat. */
#mt-table-wrap[data-scrolled-y] thead th { box-shadow: 0 4px 8px -6px rgba(23,43,77,.45); }
#mt-table-wrap[data-scrolled-x] tbody td[data-mt-cell="name"],
#mt-table-wrap[data-scrolled-x] tr.mt-head-row th[data-key="name"] {
  box-shadow: 6px 0 10px -6px rgba(23,43,77,.28), 1px 0 0 var(--mn-line);
}

/* ── Empty cells recede ───────────────────────────────────────────────────
   A 48-column grid is mostly empty by nature, and a page of hard "-" and "Set
   date" reads as clutter rather than as blanks. They fade back until the row
   is hovered or something in it has focus, so the eye lands on real values.
   Never display:none — an invisible affordance is an unusable one. */
#mt-table tbody .dash { color: #c3c8d4; }
#mt-table tbody .mt-date-button.is-empty { color: #c3c8d4; font-weight: 400; }
#mt-table tbody tr:hover .dash,
#mt-table tbody tr:focus-within .dash,
#mt-table tbody tr:hover .mt-date-button.is-empty,
#mt-table tbody tr:focus-within .mt-date-button.is-empty { color: #8792a8; }

/* ── A row you can follow across 48 columns ───────────────────────────── */
#mt-table tbody tr:hover > td { background: #f7f9fd; }
#mt-table tbody tr:hover td[data-mt-cell="name"] { background: #f2f6fd; }

/* ── Focus you can actually see ───────────────────────────────────────────
   Keyboard users get a real ring on every editor the grid opens, not just the
   browser default that a coloured cell background can swallow. :focus-visible
   so a mouse click never draws one. */
#tab-staff-portal #page-mt :is(button, select, input, textarea):not(:is(.mt-topbar,.mt-controlbar) *):focus-visible,   /* the header draws its own ring */
#mt-table tbody td[tabindex]:focus-visible {
  outline: 2px solid #0073ea;
  outline-offset: 1px;
  border-radius: 4px;
}
#mt-table tbody td[tabindex]:focus-visible { outline-offset: -2px; }
/* NOT the scroll container. #mt-table-wrap carries tabindex="0" so the board
   can be scrolled from the keyboard, and mtScrollToTop focuses it — so any
   blanket [tabindex] rule draws a 2px ring around the ENTIRE grid every time
   the filters are reset. It gets a quiet inset edge instead. */
#tab-staff-portal #mt-table-wrap:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #bfdcff; }

/* ── Scrollbars that match the surface ───────────────────────────────────
   Safe here: the global `scrollbar-width:thin` that disables ::-webkit rules
   applies outside #tab-staff-portal, and this grid is inside it. */
#tab-staff-portal #mt-table-wrap::-webkit-scrollbar,
#tab-staff-portal .mt-hbar::-webkit-scrollbar { width: 11px; height: 11px; }
#tab-staff-portal #mt-table-wrap::-webkit-scrollbar-thumb,
#tab-staff-portal .mt-hbar::-webkit-scrollbar-thumb {
  background: #c7cede; border: 3px solid #fff; border-radius: 8px;
}
#tab-staff-portal #mt-table-wrap::-webkit-scrollbar-thumb:hover,
#tab-staff-portal .mt-hbar::-webkit-scrollbar-thumb:hover { background: #a8b2c8; }
#tab-staff-portal #mt-table-wrap::-webkit-scrollbar-corner { background: transparent; }

/* ── Toolbar: one visual language ─────────────────────────────────────────
   The controls arrived from several eras — some pills, some bare selects, some
   plain text buttons. Same height, same radius, same hover, so the bar reads
   as one row of controls rather than several. */
#tab-staff-portal .mt-controlbar .mt-menu-btn,
#tab-staff-portal .mt-controlbar .mt-reset { transition: background .12s ease, border-color .12s ease; }
#tab-staff-portal .mt-controlbar .mt-menu-btn[aria-pressed="true"] {
  background: #eaf3ff; border-color: #9cc8ff; color: #0060b9;
}
#tab-staff-portal .mt-controlbar .mt-menu-btn[aria-pressed="true"]:hover { background: #ddebff; }

/* ── The count line is the honesty line ──────────────────────────────────
   "12 of 60" must never read like decoration; when a filter is hiding work it
   is the only thing telling you so. */
#tab-staff-portal .mt-count { font-variant-numeric: tabular-nums; }
#tab-staff-portal .mt-count.is-filtered { color: #0060b9; font-weight: 700; }

/* ── Respect a reduced-motion preference ─────────────────────────────────
   Owner rule: remote updates never flash. This extends the same courtesy to
   anyone who has asked their system for less movement. */
@media (prefers-reduced-motion: reduce) {
  #tab-staff-portal #page-mt *,
  .mt-chat-dialog * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Touch targets ───────────────────────────────────────────────────────
   On a phone the grid is read more than edited, but the editors still have to
   be hittable with a thumb. */
@media (pointer: coarse) {
  #tab-staff-portal .mt-combo-cell,
  #tab-staff-portal .mt-bigtext-cell,
  #tab-staff-portal .mt-note-button { min-height: 38px; }
}

/* An unset status fills its whole cell with a neutral grey, so a column of
   blanks reads as a solid band. The placeholder fades back until the row is
   hovered or focused — the same treatment every other empty cell gets, so
   "nothing here yet" looks the same wherever you meet it. */
#mt-table tbody .mt-status-button[title='No status selected'] { opacity:1; }
#mt-table tbody tr:hover .mt-status-button[title='No status selected'],
#mt-table tbody tr:focus-within .mt-status-button[title='No status selected'] { opacity:1; }

/* Calendar month/year jump. The nav row was [month label][‹][›] on a
   1fr auto auto grid; it is now [‹][month][year][›] so the two selects
   share the middle and the arrows stay where the hand expects them. */
#tab-staff-portal .mt-pop .mt-cal-nav { grid-template-columns:auto 1fr 1fr auto; gap:4px; }
#tab-staff-portal .mt-cal-jump { height:26px; min-width:0; width:100%; padding:0 4px; border:1px solid var(--mn-line-2);
  border-radius:4px; background:#fff; color:var(--mn-text); font:500 12px/1 inherit; cursor:pointer; }
#tab-staff-portal .mt-cal-jump:hover { border-color:var(--mn-primary); }
#tab-staff-portal .mt-cal-navbtn { font-size:16px; line-height:1; }

/* ── Frozen columns must be opaque on EVERY row ───────────────────────────
   Reported as "the space between meeting rows shows some of the other cells
   when scrolling left to right".

   The table is border-collapse:separate with border-spacing:0, so there is no
   geometric gap — the seam is each cell's own 1px border-bottom. Two things
   let scrolled content through it:

   1. `td.mt-c-check` has NO background of its own anywhere in the repo. It is
      sticky at left:6px and borrows white only from
      `#mt-table tbody tr[data-mt-row]>td{background:#fff}` — so any row that is
      not [data-mt-row], or any rule that out-ranks that one, leaves a 40px
      transparent frozen strip. (`#mt-table tbody tr:hover{background:#c6d5f5}`
      is a ROW-level background, and a row background can only ever be seen
      through a transparent cell — evidence this has bitten before.)
   2. Sticky cells composite as their own layer. At a fractional device-pixel
      ratio the layer's bottom edge snaps differently from the content beneath,
      exposing one device-pixel line at each row boundary.

   So: paint the three frozen cells explicitly for every row type, and carry
   their separator as an INSET shadow rather than a border, so the opaque box
   covers the full row height with nothing left to see past. */
#mt-table tbody td.mt-c-bar,
#mt-table tbody td.mt-c-check,
#mt-table tbody td[data-mt-cell="name"] {
  background-color: #fff;
  background-clip: border-box;
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 var(--mn-line);
}
/* The tone bar keeps its own colour; it is the row's status, not a surface. */
#mt-table tbody tr[data-mt-row] > td.mt-c-bar {
  background-color: var(--mt-row-bar, var(--mn-group));
}
/* Hover and selection have to repaint the frozen strip too, or the row appears
   to highlight everywhere except its first 40px. */
#mt-table tbody tr[data-mt-row]:hover > td.mt-c-check,
#mt-table tbody tr[data-mt-row]:hover > td[data-mt-cell="name"] { background-color: #f2f6fd; }
#mt-table tbody tr.mt-row-selected > td.mt-c-check,
#mt-table tbody tr.mt-row-selected > td[data-mt-cell="name"] { background-color: #d7ebff; }
#mt-table tbody tr.mt-row-selected:hover > td.mt-c-check,
#mt-table tbody tr.mt-row-selected:hover > td[data-mt-cell="name"] { background-color: #cce5ff; }
/* The frozen name cell keeps its right-hand edge and depth shadow; re-state
   them here because the inset separator above replaced its box-shadow. */
#mt-table tbody td[data-mt-cell="name"] {
  box-shadow: inset 0 -1px 0 var(--mn-line), 4px 0 7px -3px rgba(50,51,56,.22), 1px 0 0 #e6e9ef;
}
#mt-table-wrap[data-scrolled-x] tbody td[data-mt-cell="name"] {
  box-shadow: inset 0 -1px 0 var(--mn-line), 6px 0 10px -6px rgba(23,43,77,.28), 1px 0 0 var(--mn-line);
}

/* ── Fast scrolling: skeleton rows, never a white void ────────────────────
   The windowed body stands two spacer rows in for everything it has not
   painted. Those spacers are plain white, so outrunning the row buffer reads
   as "the page broke" rather than "rows are coming".

   This is a SEPARATE rule on purpose: test-mt-virtual-grid.mjs matches
   `#mt-table tbody tr.mt-vpad>td{background:#fff;border:0;padding:0}` as an
   exact string, so that declaration is left byte-for-byte alone and only a
   background-image is layered on top of it. The stripe pitch is two rows, so
   it reads as rows rather than as a texture. */
#mt-table tbody tr.mt-vpad > td {
  background-image: repeating-linear-gradient(
    to bottom,
    #fbfcfe 0, #fbfcfe calc(var(--mn-row-h) - 1px),
    #eef1f6 calc(var(--mn-row-h) - 1px), #eef1f6 var(--mn-row-h)
  );
}
@media (prefers-reduced-motion: reduce) {
  #mt-table tbody tr.mt-vpad > td { background-image: none; }
}

/* ── Discussion: documents and attachments ────────────────────────────────
   The paperwork a meeting already has, in the place the team is talking about
   it, plus the files they add to the conversation. */
.mt-chat-docs { margin:0 20px 12px; padding:8px 10px; border:1px solid #dce2eb; border-radius:10px; background:#fff; }
.mt-chat-docs > summary { cursor:pointer; font-size:12px; font-weight:600; color:#676879; list-style:none; }
.mt-chat-docs > summary::-webkit-details-marker { display:none; }
.mt-chat-docs > summary::before { content:'▸'; display:inline-block; width:12px; transition:transform .12s ease; }
.mt-chat-docs[open] > summary::before { transform:rotate(90deg); }
.mt-chat-doc { display:flex; align-items:baseline; gap:8px; padding:4px 0 0 12px; font-size:12.5px; }
.mt-chat-doc-k { flex:0 0 96px; color:#676879; }
.mt-chat-doc-v { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-chat-doc-v a { color:#0060b9; }
.mt-chat-doc-none { color:#aeb4c1; }
.mt-chat-doc-due { flex:none; color:#7a4b00; background:#fff4e4; border-radius:5px; padding:1px 6px; font-size:11px; }

.mt-chat-files { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mt-chat-file { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 9px; border:1px solid #dce2eb;
  border-radius:8px; background:#f5f7fb; color:#0060b9; font:inherit; font-size:12px; cursor:pointer; }
.mt-chat-file:hover { background:#eaf3ff; border-color:#9cc8ff; }
.mt-chat-file-n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.mt-chat-file-s { color:#676879; font-size:11px; flex:none; }

.mt-chat-pending { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mt-chat-pending-f { display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 8px; border:1px dashed #9cc8ff;
  border-radius:8px; background:#f3f8ff; font-size:12px; color:#323338; }
.mt-chat-pending-f button { border:0; background:transparent; color:#676879; font-size:15px; line-height:1; cursor:pointer; padding:0 3px; }
.mt-chat-pending-f button:hover { color:#e2445c; }

.mt-chat-actions { display:flex; align-items:center; gap:10px; }
.mt-chat-attach { flex:none; padding:5px 10px; border:1px solid #dce2eb; border-radius:8px; background:#fff;
  color:#0060b9; font-size:12px; font-weight:600; cursor:pointer; }
.mt-chat-attach:hover { background:#eaf3ff; border-color:#9cc8ff; }
.mt-chat-actions > span { margin-left:auto; }

/* ═══ Page header (redesigned 2026-10-18) ════════════════════════════════════
   Two rows that read as ONE header: row 1 says where you are (section ▾, fiscal
   year, view ▾), row 2 is what you do (New meeting, search, Filters ▾, Tools ▾).
   One visual language throughout — every control is 32px tall with an 8px
   radius, a 1px hairline and the same hover, press and focus ring — and one
   divider under the whole block rather than a line between the rows. Every
   rule is scoped to #page-mt and sits last in the file, so it settles the
   several eras of toolbar styling above it without editing them one by one. */
#page-mt .mt-shell {
  --mh-h:32px; --mh-r:8px;
  --mh-line:#dfe3ea; --mh-line-2:#cbd2dd;
  --mh-ink:#1b2333; --mh-ink-2:#536075; --mh-ink-3:#8a93a4;
  --mh-hover:#f2f4f7; --mh-press:#e8ecf2;
  --mh-accent:#0a64d6; --mh-accent-ink:#0753b3; --mh-accent-soft:#edf4ff; --mh-accent-line:#b4cff7;
  --mh-ring:0 0 0 3px rgba(10,100,214,.18);
  --mh-pop:0 18px 44px -14px rgba(16,24,40,.26),0 4px 10px -2px rgba(16,24,40,.08);
}

/* Row 1 */
#page-mt .mt-topbar { gap:14px; padding:12px 20px 6px; background:#fff; border-bottom:0; }
#page-mt[data-mt-section]:not([data-mt-section="meetings"]) .mt-topbar { padding-bottom:12px; border-bottom:1px solid var(--mh-line); }
#page-mt .mt-topbar-l { align-items:center; gap:12px; }
#page-mt .mt-headbar-eyebrow { display:none; }   /* repeated the FY pill beside it */
#page-mt .mt-section-title { margin:0; font:inherit; line-height:1; }
#page-mt .mt-section-btn { display:inline-flex; align-items:center; gap:6px; height:36px; margin-left:-8px; padding:0 8px; border:0; border-radius:var(--mh-r); background:transparent; color:var(--mh-ink); font-family:inherit; font-size:19px; font-weight:700; letter-spacing:-.3px; line-height:1; white-space:nowrap; cursor:pointer; transition:background .12s ease; }
#page-mt .mt-section-btn:hover, #page-mt .mt-section-menu.open .mt-section-btn { background:var(--mh-hover); }
#page-mt .mt-section-btn .mt-chev { width:17px; height:17px; color:var(--mh-ink-3); }
#page-mt .mt-chev { flex-shrink:0; transition:transform .15s ease; }
#page-mt .mt-menu.open > button .mt-chev, #page-mt .mt-menu.open .mt-section-btn .mt-chev { transform:rotate(180deg); }
#page-mt .mt-fy-tabs { height:var(--mh-h); box-sizing:border-box; align-items:stretch; padding:3px; gap:2px; background:#f1f3f6; border:1px solid var(--mh-line); border-radius:var(--mh-r); }
#page-mt .mt-fy-pill { height:auto; padding:0 12px; border-radius:6px; color:var(--mh-ink-2); font-size:12.5px; font-weight:600; letter-spacing:.01em; }
#page-mt .mt-fy-pill:hover { color:var(--mh-ink); }
#page-mt .mt-fy-pill.active { background:#fff; color:var(--mh-ink); box-shadow:0 1px 2px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.04); }
#page-mt .mt-topbar-r { gap:12px; }
#page-mt .mt-live-status, #page-mt .mt-headbar-meta { color:var(--mh-ink-3); font-size:12px; font-weight:500; }
#page-mt .mt-headbar-meta { display:none; }   /* the year total; row 2 already says "N of N meetings" */
#page-mt .mt-topbar-sep { height:20px; background:var(--mh-line); }
#page-mt .mt-menu[hidden] { display:none; }

/* Row 2 */
#page-mt .mt-controlbar { position:relative; gap:8px; padding:8px 20px 12px; background:#fff; border-bottom:1px solid var(--mh-line); }
#page-mt .mt-new { margin-right:2px; border-radius:var(--mh-r); box-shadow:0 1px 2px rgba(10,100,214,.28); }
#page-mt .mt-add-btn { display:inline-flex; align-items:center; gap:6px; height:var(--mh-h); padding:0 14px 0 11px; border-radius:var(--mh-r); background:var(--mh-accent); color:#fff; font-family:inherit; font-size:13px; font-weight:600; line-height:1; transition:background .12s ease; }
#page-mt .mt-add-btn:hover { background:var(--mh-accent-ink); }
#page-mt .mt-add-btn .mt-ico { width:15px; height:15px; }

/* The search bar: the widest thing on the row, because it is the most used. */
#page-mt .mt-search-wrap { flex:1 1 360px; min-width:200px; max-width:560px; height:var(--mh-h); box-sizing:border-box; gap:8px; padding:0 7px 0 11px; border:1px solid var(--mh-line-2); border-radius:var(--mh-r); background:#fff; box-shadow:inset 0 1px 1px rgba(16,24,40,.03); cursor:text; transition:border-color .12s ease,box-shadow .12s ease; }
#page-mt .mt-search-wrap:hover { background:#fff; border-color:#b2bccb; }
#page-mt .mt-search-wrap:focus-within { background:#fff; border-color:var(--mh-accent); box-shadow:var(--mh-ring); }
#page-mt .mt-search-ico { width:15px; height:15px; flex-shrink:0; color:var(--mh-ink-3); transition:color .12s ease; }
#page-mt .mt-search-wrap:focus-within .mt-search-ico { color:var(--mh-accent); }
#page-mt .mt-search-wrap .mt-search { flex:1 1 auto; width:auto; min-width:0; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; color:var(--mh-ink); font-family:inherit; font-size:13px; }
#page-mt .mt-search-wrap .mt-search::placeholder { color:var(--mh-ink-3); opacity:1; }
#page-mt .mt-search::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; display:none; }
#page-mt .mt-search-clear { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:22px; height:22px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--mh-ink-3); cursor:pointer; }
#page-mt .mt-search-clear:hover { background:var(--mh-hover); color:var(--mh-ink); }
#page-mt .mt-search-clear svg { width:14px; height:14px; }
#page-mt .mt-search-kbd { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; border:1px solid var(--mh-line-2); border-bottom-width:2px; border-radius:5px; background:#f8f9fb; color:var(--mh-ink-3); font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
#page-mt .mt-search-clear[hidden], #page-mt .mt-search-kbd[hidden] { display:none; }

/* Header buttons: View, Filters, Tools. */
#page-mt .mt-hdr-btn { display:inline-flex; align-items:center; gap:7px; height:var(--mh-h); min-height:var(--mh-h); padding:0 9px 0 11px; box-sizing:border-box; border:1px solid var(--mh-line-2); border-radius:var(--mh-r); background:#fff; color:var(--mh-ink); font-family:inherit; font-size:13px; font-weight:500; line-height:1; white-space:nowrap; box-shadow:0 1px 2px rgba(16,24,40,.05); cursor:pointer; transition:background .12s ease,border-color .12s ease; }
#page-mt .mt-hdr-btn:hover { background:var(--mh-hover); border-color:var(--mh-line-2); color:var(--mh-ink); }
#page-mt .mt-menu.open > .mt-hdr-btn { background:var(--mh-press); border-color:var(--mh-line-2); color:var(--mh-ink); }
#page-mt .mt-hdr-btn .mt-ico { width:15px; height:15px; flex-shrink:0; color:var(--mh-ink-2); }
#page-mt .mt-hdr-btn .mt-chev { width:14px; height:14px; margin-left:-1px; color:var(--mh-ink-3); }
#page-mt .mt-filters-btn.has-active { background:var(--mh-accent-soft); border-color:var(--mh-accent-line); color:var(--mh-accent-ink); }
#page-mt .mt-filters-btn.has-active .mt-ico, #page-mt .mt-filters-btn.has-active .mt-chev { color:var(--mh-accent); }
#page-mt .mt-filters-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:var(--mh-accent); color:#fff; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
#page-mt .mt-filters-badge[hidden] { display:none; }
#page-mt .mt-controlbar-right { margin-left:auto; gap:10px; }
#page-mt .mt-count { color:var(--mh-ink-2); font-size:12.5px; font-weight:500; }
#page-mt .mt-count.is-filtered { color:var(--mh-accent-ink); font-weight:600; }
/* #tab-staff-portal on the front: the page-wide focus outline further up is two
   ids strong. The header draws ONE ring — on the search BOX, not the input in it. */
#tab-staff-portal #page-mt :is(.mt-topbar,.mt-controlbar) :is(button,[tabindex]):focus-visible { outline:none; box-shadow:var(--mh-ring); }
#tab-staff-portal #page-mt .mt-search-wrap .mt-search:is(:focus,:focus-visible) { outline:none; box-shadow:none; }

/* Menus */
#page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-drop { top:calc(100% + 6px); min-width:236px; padding:6px; border:1px solid var(--mh-line); border-radius:12px; background:#fff; box-shadow:var(--mh-pop); }
#page-mt .mt-drop-right, #page-mt .mt-menu-drop.mt-drop-flip { left:auto; right:0; }
#page-mt .mt-menu-drop [hidden] { display:none !important; }
#page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-item { align-items:center; gap:10px; min-height:34px; padding:7px 10px; border-radius:8px; color:var(--mh-ink); font-size:13px; font-weight:500; text-align:left; }
#page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-item:hover { background:var(--mh-hover); }
#page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-item:focus-visible { background:var(--mh-hover); box-shadow:none; outline:2px solid var(--mh-accent); outline-offset:-2px; }
#page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-item.active { background:var(--mh-accent-soft); color:var(--mh-accent-ink); font-weight:600; }
#page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-item.active::after { color:var(--mh-accent); }
#page-mt .mt-mi-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
#page-mt .mt-mi-txt small { color:var(--mh-ink-3); font-size:11.5px; font-weight:400; }
#page-mt .mt-menu-item.active .mt-mi-txt small { color:#5b7fb3; }
#page-mt .mt-menu-hd { padding:8px 10px 4px; color:var(--mh-ink-3); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
#page-mt .mt-menu-sep { height:1px; margin:6px 4px; background:var(--mh-line); }
#page-mt .mt-section-drop { min-width:248px; }
#page-mt .mt-tools-drop { min-width:268px; }

/* Filters panel: Filters | Columns tabs, one section per question. */
#page-mt .mt-controlbar .mt-filters-drop { width:384px; max-width:calc(100vw - 32px); padding:0; overflow:hidden; }
#page-mt .mt-filters-drop:has(#mt-fp-columns:not([hidden])) { width:468px; }
#page-mt .mt-fp-tabs { display:flex; gap:2px; padding:4px 10px 0; border-bottom:1px solid var(--mh-line); }
#page-mt .mt-fp-tab { position:relative; display:inline-flex; align-items:center; gap:6px; padding:10px 8px 11px; border:0; background:none; color:var(--mh-ink-2); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; }
#page-mt .mt-fp-tab:hover { color:var(--mh-ink); }
#page-mt .mt-fp-tab.on { color:var(--mh-ink); font-weight:600; }
#page-mt .mt-fp-tab.on::after { content:''; position:absolute; left:6px; right:6px; bottom:-1px; height:2px; border-radius:2px; background:var(--mh-accent); }
#page-mt .mt-fp-tab-note { padding:2px 7px; border-radius:999px; background:#f1f3f6; color:var(--mh-ink-2); font-size:11px; font-weight:500; }
#page-mt .mt-fp-tab-note:empty { display:none; }
#page-mt .mt-fp-pane { max-height:min(460px,62vh); overflow:auto; overscroll-behavior:contain; padding:14px 16px 8px; }
#page-mt .mt-fp-sec + .mt-fp-sec { margin-top:18px; }
#page-mt .mt-fp-label { margin-bottom:8px; color:var(--mh-ink); font-size:12px; font-weight:600; }
#page-mt .mt-fp-sec .mt-scope { display:flex; width:100%; box-sizing:border-box; padding:3px; gap:2px; background:#f1f3f6; border:1px solid var(--mh-line); border-radius:var(--mh-r); }
#page-mt .mt-fp-sec .mt-scope button { flex:1; height:28px; padding:0 10px; border-radius:6px; color:var(--mh-ink-2); font-size:13px; font-weight:500; }
#page-mt .mt-fp-sec .mt-scope button[aria-pressed="true"] { background:#fff; color:var(--mh-ink); font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.04); }
#page-mt .mt-fp-chips { display:flex; flex-wrap:wrap; gap:6px; }
#page-mt .mt-fp-chip { height:28px; padding:0 11px; border:1px solid var(--mh-line-2); border-radius:999px; background:#fff; color:var(--mh-ink-2); font-family:inherit; font-size:12.5px; font-weight:500; white-space:nowrap; cursor:pointer; transition:background .12s ease,border-color .12s ease,color .12s ease; }
#page-mt .mt-fp-chip:hover { background:var(--mh-hover); color:var(--mh-ink); }
#page-mt .mt-fp-chip.on { background:var(--mh-accent-soft); border-color:var(--mh-accent-line); color:var(--mh-accent-ink); font-weight:600; }
#page-mt .mt-fp-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px 9px 16px; border-top:1px solid var(--mh-line); background:#fafbfc; }
#page-mt .mt-fp-summary { color:var(--mh-ink-3); font-size:12px; }
#page-mt .mt-fp-clear { height:28px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--mh-accent-ink); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
#page-mt .mt-fp-clear:hover:not(:disabled) { background:var(--mh-accent-soft); }
#page-mt .mt-fp-clear:disabled { color:var(--mh-ink-3); opacity:.55; cursor:default; }
/* The column chooser, at home inside the panel's Columns tab. */
#page-mt .mt-fp-pane .mt-cols-drop { min-width:0; max-height:none; overflow:visible; padding:0; }
#page-mt .mt-fp-pane .mt-cols-modes { gap:2px; margin:0 0 12px; padding:3px; background:#f1f3f6; border:1px solid var(--mh-line); border-radius:var(--mh-r); }
#page-mt .mt-fp-pane .mt-cols-mode { height:28px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--mh-ink-2); font-size:12.5px; font-weight:500; }
#page-mt .mt-fp-pane .mt-cols-mode.on { background:#fff; color:var(--mh-ink); font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.12); }
#page-mt .mt-fp-pane .mt-cols-chips { gap:6px; margin:0 0 6px; padding:0 0 12px; border-bottom:1px solid var(--mh-line); }
#page-mt .mt-fp-pane .mt-cols-chip { display:inline-flex; align-items:center; box-sizing:border-box; height:28px; padding:0 11px; border:1px solid var(--mh-line-2); background:#fff; color:var(--mh-ink-2); font-size:12.5px; font-weight:500; }
#page-mt .mt-fp-pane .mt-cols-chip:hover { background:var(--mh-hover); }
#page-mt .mt-fp-pane .mt-cols-chip.active { background:var(--mh-accent-soft); border-color:var(--mh-accent-line); color:var(--mh-accent-ink); font-weight:600; }
#page-mt .mt-fp-pane .mt-cols-list { columns:2; column-gap:14px; }
#page-mt .mt-fp-pane .mt-cols-group { break-inside:avoid; }
#page-mt .mt-fp-pane .mt-cols-group-label { padding:10px 6px 4px; color:var(--mh-ink-3); font-size:11px; font-weight:600; letter-spacing:.05em; }
#page-mt .mt-fp-pane .mt-cols-row { padding:5px 6px; color:var(--mh-ink); font-size:12.5px; font-weight:500; }
#page-mt .mt-fp-pane .mt-cols-row:hover { background:var(--mh-hover); }
#page-mt .mt-fp-pane .mt-cols-row input { accent-color:var(--mh-accent); }
#page-mt .mt-fp-pane .mt-cols-foot { position:sticky; bottom:-8px; margin:8px -16px 0; padding:6px 10px; background:#fafbfc; border-top:1px solid var(--mh-line); }
#page-mt .mt-fp-pane .mt-cols-reset { color:var(--mh-accent-ink); font-weight:600; }
#page-mt .mt-fp-pane .mt-cols-reset:hover { background:var(--mh-accent-soft); }

/* Dashboard totals sit under the header now, not between its two rows. */
#page-mt .mt-stats { margin:12px 20px 0; }

@media (max-width:1099px) {
  #page-mt .mt-topbar-r { margin-left:auto; }
}
/* Phones: search first and full width; the two menus open as a sheet across
   the bar rather than off the edge of the screen. */
@media (max-width:599px) {
  #page-mt .mt-topbar { gap:8px 10px; padding:10px 12px 4px; }
  #page-mt .mt-topbar-l { width:auto; flex:1 1 auto; }
  #page-mt .mt-topbar-r { width:100%; justify-content:space-between; }
  #page-mt .mt-section-btn { height:40px; font-size:18px; }
  #page-mt .mt-fy-tabs { height:40px; }
  #page-mt .mt-fy-tabs .mt-fy-pill { min-height:0; }
  #page-mt .mt-controlbar { gap:6px; padding:6px 12px 10px; }
  #page-mt .mt-search-wrap { order:-1; flex:1 1 100%; max-width:none; height:44px; }
  #page-mt .mt-search-kbd { display:none; }
  #page-mt .mt-add-btn, #page-mt .mt-hdr-btn { height:40px; min-height:40px; }
  #page-mt .mt-add-btn { padding:0 12px 0 9px; }
  #page-mt .mt-hdr-btn { gap:6px; padding:0 8px 0 9px; }
  #page-mt .mt-controlbar .mt-hdr-btn .mt-chev { display:none; }   /* room for the Filters badge on one line */
  #page-mt .mt-controlbar .mt-hdr-btn { padding:0 11px 0 10px; }
  /* The bar's two menus open as a bottom sheet: anchored to the screen, never
     clipped by the board below them, and every part reachable with a thumb. */
  #page-mt .mt-controlbar .mt-menu .mt-menu-drop, #page-mt .mt-controlbar .mt-filters-drop, #page-mt .mt-filters-drop:has(#mt-fp-columns:not([hidden])) { position:fixed; top:auto; left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom,0px)); width:auto; max-width:none; max-height:min(82dvh,640px); overflow:auto; overscroll-behavior:contain; border-radius:16px; z-index:1000; box-shadow:0 -12px 40px rgba(16,24,40,.24),0 0 0 100vmax rgba(16,24,40,.32); }
  #page-mt .mt-controlbar .mt-menu.open .mt-filters-drop { display:flex; flex-direction:column; overflow:hidden; }
  #page-mt .mt-filters-drop .mt-fp-pane { flex:1 1 auto; min-height:0; max-height:none; }
  #page-mt .mt-controlbar-right { width:auto; flex:1 1 auto; justify-content:flex-end; margin-left:auto; }
  #page-mt .mt-count { font-size:12px; }
  #page-mt .mt-fp-pane .mt-cols-list { columns:1; }
  #page-mt :is(.mt-fp-chip,.mt-fp-sec .mt-scope button,.mt-fp-pane .mt-cols-mode,.mt-fp-pane .mt-cols-chip) { height:38px; }
  #page-mt :is(.mt-topbar,.mt-controlbar) .mt-menu-item { min-height:44px; }
  #page-mt .mt-stats { margin:10px 12px 0; }
}