/*
 * maobapp-grid.css v0.11.0 — styles for maobapp-grid.js (auth.maobapp.com/shared/maobapp-grid.css). Owner: JH.
 * Uses ONLY the shell tokens (maobapp-shell.css) so light + dark follow <html data-theme>. Everything is
 * scoped under .mg / .mg-* (the panel and dialogs too) — never redefines a shell selector.
 */

.mg { --mg-panel-w: max(40%, 380px); --mg-row-h: 26px; display: block; color: var(--fg);
  height: calc(100dvh - var(--mh-height, 0px)); }
.mg-main { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 8px 14px 6px; }
.mg-has-panel .mg-main { margin-right: var(--mg-panel-w); }
.mg-hidden { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-table-wrap { position: relative; }  /* keeps screen-reader-only text inside the scrolling table, never widening the page */
.mg-small { font-size: 12px; }
.mg-err { color: var(--danger); }

/* top line: title + chips (Decisions | Rules) + version stamp */
.mg-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-title { font-size: 16px; font-weight: 600; margin: 0; }
.mg-tabs { margin: 4px 0; }
.mg-ver { margin-left: auto; font-size: 11px; }

.mg-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mg-pane[hidden] { display: none; }

/* toolbar */
.mg-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; }
.mg select, .mg input[type=search], .mg input[type=text], .mg input[type=number], .mg input[type=date], .mg textarea,
.mg-modal select, .mg-modal input[type=text], .mg-modal input[type=number], .mg-modal input[type=date], .mg-modal textarea {
  font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; }
.mg select:focus, .mg input:focus, .mg textarea:focus, .mg-modal input:focus, .mg-modal textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.mg-searchbox { flex: 0 1 260px; min-width: 160px; }
.mg-search { width: 100%; }
.mg-inl { display: inline-flex; align-items: center; gap: 4px; }
.mg-inl-l { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mg-view-sel { max-width: 220px; }
.mg-spacer { flex: 1; }
.mg .btn { padding: 4px 11px; }
.mg .btn:focus-visible, .mg-modal .btn:focus-visible, .mg-row:focus-visible, .mg-sort:focus-visible, .mg-gtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* columns popover */
.mg-popwrap { position: relative; }
.mg-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px 8px; min-width: 220px; max-height: 60vh; overflow: auto; }
.mg-pop[hidden] { display: none; }
.mg-pop-item { display: flex; align-items: center; gap: 6px; padding: 3px 2px; white-space: nowrap; cursor: pointer; }

/* filter bar (open by default on desktop, toggled on phone) */
.mg-filters-btn { display: none; }
.mg-filterbar { display: none; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.mg-filterbar.open { display: flex; }
.mg-f { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mg-f select { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; padding: 2px 6px; }
.mg-f.on select { border-color: var(--accent); background: var(--info-bg); }

/* bulk + undo bars */
.mg-bulk { margin: 0 0 6px; flex-wrap: wrap; }
.mg-bulk[hidden], .mg-undo[hidden] { display: none; }
.mg-undo { display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin: 0 0 6px; border-radius: var(--radius);
  background: var(--ok-bg); border: 1px solid var(--ok); color: var(--fg); }
.mg-undo-t { font-variant-numeric: tabular-nums; }
.mg-status { font-size: 12px; margin: 0 0 4px; }

/* the table: dense rows, sticky header, scrolls inside its own box */
.mg-table-wrap { flex: 1; min-height: 240px; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--panel); }
.mg-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; background: var(--panel); }
.mg-table th, .mg-table td { border: 0; border-bottom: 1px solid var(--border-cell); border-right: 1px solid var(--border-cell);
  padding: 3px 7px; height: var(--mg-row-h); white-space: nowrap; text-align: left; vertical-align: middle; }
.mg-table thead th { position: sticky; top: 0; z-index: 2; background: var(--head-bg); }
.mg-table th.sortable { padding: 0; }
.mg-sort { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 3px 7px; cursor: pointer; text-transform: uppercase;
  font-size: 11px; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.mg-sort:hover { background: var(--head-bg-hover); }
.mg-table .mg-t-money, .mg-table .mg-t-number, .mg-table .mg-t-percent, .mg-table .mg-t-delta { text-align: right; font-variant-numeric: tabular-nums; }
.mg-table th.mg-t-money .mg-sort, .mg-table th.mg-t-number .mg-sort, .mg-table th.mg-t-percent .mg-sort, .mg-table th.mg-t-delta .mg-sort { text-align: right; }
.mg-selcol { width: 30px; text-align: center !important; position: sticky; left: 0; z-index: 1; background: inherit; }
.mg-table thead .mg-selcol { z-index: 3; }
.mg-row { cursor: pointer; background: var(--panel); }
.mg-table tbody tr.mg-row:nth-child(even) { background: var(--row-alt); }
.mg-table tbody tr.mg-row:hover { background: var(--row-hover); }
.mg-table tbody tr.mg-row.mg-sel { background: var(--info-bg); }
.mg-table tbody tr.mg-row.mg-cur { box-shadow: inset 3px 0 0 var(--accent); }
.mg-table tbody tr.mg-row.mg-open { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--accent); }
.mg-row.mg-decided td:not(.mg-selcol) { opacity: .72; }
.mg-row:focus { outline: none; }
.mg-row:focus-visible { outline-offset: -2px; }
.mg-grouprow td { background: var(--muted-bg); padding: 0; position: sticky; left: 0; }
.mg-gtoggle { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.mg-empty { text-align: center !important; padding: 24px !important; color: var(--muted); }
.mg-null { color: var(--muted); }
.mg-delta { white-space: nowrap; }
.mg-arrow { color: var(--muted); }
.mg-pct { margin-left: 5px; font-size: 11px; color: var(--muted); }
.mg-good { color: var(--ok) !important; }
.mg-bad { color: var(--danger) !important; }
.mg-fresh { white-space: nowrap; }
.mg-fresh-why { font-size: 11px; }
.mg-link { text-decoration: underline; }

.mg-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 6px 0 0; font-size: 12px; }

/* right-side record panel: 40 % on desktop, full screen on phone */
.mg-panel { position: fixed; top: var(--mh-height, 0px); right: 0; bottom: 0; width: var(--mg-panel-w); z-index: 40;
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.mg-panel[hidden] { display: none; }
.mg-p-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid var(--border); }
.mg-p-titles { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mg-p-titles h2 { margin: 0; font-size: 15px; font-weight: 600; width: 100%; }
.mg-p-titles h2:focus { outline: none; }
.mg-p-sub { font-size: 12px; }
.mg-p-nav { display: flex; gap: 2px; flex: none; }
.mg-p-nav .mui-x { font-size: 16px; min-width: 30px; min-height: 30px; }
.mg-p-body { flex: 1; overflow: auto; padding: 8px 14px 14px; }
.mg-p-loading { padding: 20px; }
.mg-banner { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm); padding: 6px 10px; margin: 4px 0 8px; font-weight: 600; }
.mg-block { margin: 10px 0 14px; }
.mg-block h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.mg-ba, .mg-dp, .mg-plan { width: 100%; border-collapse: collapse; font-size: 12px; background: transparent; }
.mg-ba th, .mg-ba td, .mg-dp th, .mg-dp td, .mg-plan th, .mg-plan td { border: 0; border-bottom: 1px solid var(--border-cell); padding: 4px 6px; text-align: left; white-space: normal; vertical-align: top; }
.mg-ba thead th, .mg-dp thead th, .mg-plan thead th { position: static; background: transparent; font-size: 10px; }
.mg-ba tbody th, .mg-dp tbody th { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--fg); font-weight: 500; background: transparent; position: static; }
.mg-ba td { font-variant-numeric: tabular-nums; }
.mg-def { font-size: 11px; font-weight: 400; margin-top: 2px; }
.mg-dp { table-layout: fixed; }
.mg-dp th[scope=row] { width: 42%; }
.mg-dp-val { font-variant-numeric: tabular-nums; }
.mg-dp-src { font-size: 11px; margin-top: 1px; overflow-wrap: anywhere; }
.mg-dp-bad th { color: var(--warn) !important; }
.mg-why { margin: 0; padding-left: 18px; line-height: 1.5; }
p.mg-why { padding-left: 0; }
.mg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0; }
.mg-fields dt { font-size: 11px; color: var(--muted); }
.mg-fields dd { margin: 0; font-variant-numeric: tabular-nums; }
.mg-ai { margin: 0 0 8px; }
.mg-ai blockquote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--info-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; }
.mg-ai figcaption { font-size: 11px; margin-top: 3px; }
.mg-trace { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); }
.mg-trace li { position: relative; padding: 0 0 8px 8px; }
.mg-trace li::before { content: ''; position: absolute; left: -18px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mg-trace-d { color: var(--muted); font-size: 12px; }
.mg-verdicts { list-style: none; margin: 0; padding: 0; }
.mg-verdicts li { padding: 5px 0; border-bottom: 1px solid var(--border-cell); }
.mg-verdicts li .pill { margin-right: 4px; }
.mg-v-old { opacity: .6; }
.mg-lots { display: flex; flex-wrap: wrap; gap: 6px; }

/* verdict box (panel footer) */
.mg-verdict { border-top: 1px solid var(--border); padding: 8px 14px 10px; background: var(--head-bg); }
.mg-vbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-vf { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mg-vf .form-actions { margin-top: 2px; }
.mg-vf textarea { min-height: 44px; }
.mg-hint { font-size: 11px; }
.mg-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* dialogs */
.mg-modal-wide { width: 860px; }
.mg-confirm-sum { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 10px; }
.mg-c-rules-w { grid-column: 1 / -1; }
.mg-c-rules { display: flex; flex-wrap: wrap; gap: 4px; }
.mg-c-count, .mg-c-stake { font-size: 18px; font-weight: 700; }
.mg-imp-sum { font-weight: 600; margin: 0 0 8px; }
.mg-plan-wrap { max-height: 50vh; overflow: auto; }
.mg-plan tr.mg-flagged td { background: var(--bad-bg); }

/* rules tab */
.mg-rules-wrap { flex: none; min-height: 0; }
.mg-rules-t td { white-space: nowrap; vertical-align: top; }
.mg-rules-t td:first-child { white-space: normal; min-width: 220px; max-width: 320px; }

/* ---- phone ---- */
@media (max-width: 720px) {
  .mg { height: auto; }
  .mg-main { padding: 6px 10px; height: auto; }
  .mg-has-panel .mg-main { margin-right: 0; }
  .mg-table-wrap { flex: none; height: calc(100dvh - var(--mh-height, 0px) - 190px); min-height: 300px; }
  .mg-filters-btn { display: inline-block; }
  .mg-searchbox { flex: 1 1 100%; }
  .mg-spacer { display: none; }
  .mg-view-sel { max-width: 150px; }
  .mg-inl-l { display: none; }
  .mg-panel { top: 0; left: 0; width: 100%; z-index: 60; border-left: 0; }
  .mg-p-nav .mui-x { min-width: 40px; min-height: 40px; }
  .mg-verdict .btn { min-height: 40px; }
  .mg-fields { grid-template-columns: 1fr 1fr; }
  .mg-modal-wide { width: 100%; }
  html.mg-panel-open, html.mg-panel-open body { overflow: hidden; }
}

/* ---- v0.2.0: « + New » requests + live preview (also used by Correct) ---- */
.mg-newpop { left: auto; right: 0; min-width: 180px; padding: 4px; }
.mg-menuitem { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.mg-menuitem:hover, .mg-menuitem:focus-visible { background: var(--row-hover); outline: none; }
.mg-req-fields { margin: 4px 0 6px; }
.mg-req-fields input, .mg-req-fields select, .mg-req-fields textarea { width: 100%; }
.mg-preview { transition: opacity .15s; }
.mg-preview.mg-loading { opacity: .5; }
.mg-preview .mg-block { margin: 6px 0 10px; }
.mg-warnings { margin: 4px 0 8px; padding: 6px 10px 6px 26px; background: var(--bad-bg); color: var(--danger); border-radius: var(--radius-sm); font-weight: 600; }
.mg-warnings li { margin: 2px 0; }
.mg-blocked { margin: 4px 0 8px; padding: 8px 10px; background: var(--danger); color: #fff; border-radius: var(--radius-sm); }
.mg-req-foot { display: flex; flex-direction: column; gap: 6px; }
.mg-req-foot .form-actions { margin-top: 0; }
.mg-req-foot .field[hidden], .mg-vf .field[hidden] { display: none; }
.mg-correct-pv { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 6px 8px; max-height: 42vh; overflow: auto; }
.mg-verdict:has(.mg-correct-pv) { max-height: 70%; overflow: auto; }
@media (max-width: 720px) {
  .mg-req-fields { grid-template-columns: 1fr; }
  /* the full-screen panel keeps its action buttons at the bottom: toasts go to the top and never swallow a tap */
  html.mg-panel-open .mui-toast-host { top: 12px; bottom: auto; }
  html.mg-panel-open .mui-toast { pointer-events: none; }
}

/* ---- v0.3.0: help ⓘ popovers (bilingual), help drawer, two-level data points, rules by family, retired badge ---- */
.mg-help { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted);
  font: italic 700 10px/1 Georgia, serif; cursor: help; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.mg-help:hover, .mg-help[aria-expanded="true"] { border-color: var(--accent); color: #fff; background: var(--accent); }
.mg-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-help-missing { border-style: dashed; opacity: .55; }
.mg-tip { position: fixed; z-index: 1200; max-width: calc(100vw - 16px); padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.45; }
.mg-tip[hidden] { display: none; }
.mg-tip-t { display: block; margin-bottom: 3px; }
.mg-tip-b > div + div { margin-top: 4px; }
.mg-undoc { color: var(--muted); }
[lang="zh"], .mg-zh { font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; }
.mg-zh { color: var(--fg); opacity: .85; }
.mg-lang-missing { font-size: 10px; color: var(--muted); font-style: italic; opacity: .8; }
.mg-th { display: flex; align-items: center; gap: 2px; }
.mg-th .mg-sort { flex: 1; width: auto; }
.mg-th .mg-th-l { flex: 1; }
.mg-th .mg-help { margin-right: 5px; }
.mg-table thead th:not(.sortable) .mg-th { text-transform: uppercase; }
.mg-help-slot { display: inline-flex; }
.mg-vbtn { display: inline-flex; align-items: center; }
/* help drawer */
.mg-helppage .mg-para { margin: 0 0 6px; line-height: 1.5; }
.mg-helppage .mg-hp-sec > div + div, .mg-helppage .mg-hp-sec > ul + ul { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.mg-h-zh { text-transform: none; letter-spacing: 0; font-weight: 600; }
.mg-gl-search { width: 100%; margin-bottom: 4px; }
.mg-glossary { margin: 6px 0 0; }
.mg-glossary dt { font-weight: 600; margin-top: 8px; }
.mg-glossary dd { margin: 2px 0 0 0; }
/* two-level data points */
.mg-b-ri { background: var(--info-bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 6px 10px; }
.mg-ri { list-style: none; margin: 0; padding: 0; }
.mg-ri-item { padding: 5px 0; border-bottom: 1px solid var(--border-cell); }
.mg-ri-item:last-child { border-bottom: 0; }
.mg-ri-head { display: flex; align-items: center; gap: 4px; }
.mg-ri-l { font-weight: 600; }
.mg-ri-v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.mg-ri-how { font-size: 12px; margin-top: 1px; }
.mg-dp-all > summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 4px 0; }
.mg-dp-all[open] > summary { margin-bottom: 6px; }
/* rules tab */
.mg-rgroup { margin: 6px 0 12px; }
.mg-rgroup-h, .mg-rinactive > summary { font-size: 13px; margin: 4px 0 6px; }
.mg-rinactive > summary { cursor: pointer; padding: 6px 0; }
.mg-rfam { margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px 8px; background: var(--panel); }
.mg-rfam > summary { cursor: pointer; padding: 4px 0; }
.mg-fam-help { margin: 2px 0 6px; font-size: 12px; }
.mg-rule-name { white-space: normal !important; min-width: 240px; max-width: 360px; }
.mg-rule-help { font-size: 12px; margin-top: 2px; line-height: 1.4; }
.mg-rule-off { opacity: .75; }
.mg-outcome { white-space: nowrap; }
.mg-abs { display: inline; font-variant-numeric: tabular-nums; }
.mg-retired { text-transform: none; }

/* ---- v0.4.0: Docs tab (living manual), Q&A, anchors ---- */
.mg-docs { overflow: auto; }
.mg-docs-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0; }
.mg-docs-search { flex: 1 1 320px; max-width: 560px; }
.mg-docs-count { flex-basis: 100%; }
.mg-docs-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }
.mg-docs-toc { position: sticky; top: 52px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.mg-docs-toc a { padding: 4px 8px; border-radius: var(--radius-sm); color: var(--fg); }
.mg-docs-toc a:hover { background: var(--row-hover); }
.mg-docs-toc a[hidden] { display: none; }
.mg-docs-content { min-width: 0; max-width: 900px; }
.mg-docs-sec { margin: 0 0 22px; }
.mg-docs-sec[hidden], .mg-doc-group[hidden], .mg-doc-item[hidden] { display: none; }
.mg-docs-sec > h2 { font-size: 16px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--border); }
.mg-doc-group > h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 4px; }
.mg-doc-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 6px; scroll-margin-top: 60px; }
.mg-doc-item h3 { font-size: 14px; margin: 0 0 4px; }
.mg-doc-item .mg-zh { margin-top: 3px; }
.mg-doc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 3px; }
.mg-doc-help { font-size: 13px; line-height: 1.45; }
.mg-target { outline: 2px solid var(--accent); outline-offset: 2px; animation: mg-flash 1.6s ease-out; }
@keyframes mg-flash { from { background: var(--info-bg); } }
.mg-anchor { color: var(--muted); text-decoration: none; font-weight: 400; padding: 0 4px; border-radius: 4px; opacity: .55; }
.mg-anchor:hover, .mg-anchor:focus-visible { opacity: 1; background: var(--row-hover); color: var(--accent); }
.mg-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.mg-az a { min-width: 24px; text-align: center; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); }
.mg-az a:hover { background: var(--row-hover); }
.mg-gl-letter { scroll-margin-top: 60px; }
.mg-rule-card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 12px; margin: 6px 0; font-size: 13px; }
.mg-rule-card dt { color: var(--muted); font-weight: 600; font-size: 12px; }
.mg-rule-card dd { margin: 0; }
.mg-chg { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.mg-chg li { margin: 2px 0 6px; }
.mg-q { padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.mg-q:first-child { border-top: 0; }
.mg-q-answer { margin-top: 4px; padding: 4px 8px; background: var(--ok-bg); border-radius: var(--radius-sm); }
.mg-q-waiting { margin-top: 4px; }
.mg-b-questions .mg-ask, .mg-rule-doc .mg-ask { margin-top: 4px; }
.mg-rule-doc .mg-b-questions { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--border); }
.mg-p-ask { align-self: center; margin-right: 4px; }
.mg-rule-acts { display: flex; gap: 4px; }
@media (max-width: 720px) {
  .mg-docs-body { grid-template-columns: 1fr; }
  .mg-docs-toc { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .mg-docs-toc a { white-space: nowrap; border: 1px solid var(--border); }
  .mg-rule-card { grid-template-columns: 1fr; }
  .mg-docs-head { position: static; }
}
/* the grid's dialogs must sit above its own panel (full screen on phones, z 60) and below toasts (z 1000) */
.modal-bg.mg-modal-bg { z-index: 900; }

/* ---- v0.5.0: tones (one meaning everywhere), value badges, charts ---- */
/* green = better for our money, red = worse, amber = weak, grey = neutral. Text colours meet 4.5:1 on panel + row-alt (light & dark). */
:root { --mg-good: #15803d; --mg-bad: #b91c1c; --mg-weak: #a35200; --mg-neutral: #5b6472; }
:root[data-theme="dark"] { --mg-good: #4ade80; --mg-bad: #f87171; --mg-weak: #fbbf24; --mg-neutral: #9aa1ad; }
.mg-tone-good { color: var(--mg-good); }
.mg-tone-bad { color: var(--mg-bad); }
.mg-tone-weak { color: var(--mg-weak); }
.mg-tone-neutral { color: var(--mg-neutral); }
.mg-val { font-weight: 600; white-space: nowrap; }
.mg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: 1px; }
.mg-tone-weak .mg-dot { border-radius: 1px; transform: rotate(45deg); }   /* shape differs too: dot = good/bad, diamond = weak */
.mg-tone-bad .mg-dot { border-radius: 0; }
.mg-dlt { font-size: 11px; white-space: nowrap; font-weight: 600; }
.mg-arr { font-size: 9px; vertical-align: 1px; }
.mg-vbadges { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 5px; vertical-align: middle; }
.mg-vbadge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; line-height: 1.5; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mg-vbadge .mg-help { width: 13px; height: 13px; margin-left: 2px; font-size: 9px; }
.mg-table td .mg-vbadges { margin-left: 4px; }
/* charts */
.mg-ch-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mg-ch-top h3 { margin: 0; }
.mg-ch-periods { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.mg-ch-period { all: unset; cursor: pointer; padding: 2px 9px; font-size: 12px; color: var(--muted); }
.mg-ch-period + .mg-ch-period { border-left: 1px solid var(--border); }
.mg-ch-period.current { background: var(--accent); color: #fff; font-weight: 600; }
.mg-ch-period:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mg-ch-stage { position: relative; margin-top: 6px; }
.mg-ch { margin: 0 0 2px; }
.mg-ch-label { display: flex; align-items: baseline; gap: 4px; font-size: 12px; }
.mg-ch-last { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.mg-ch-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.mg-ch-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.mg-ch-grid { stroke: var(--border-cell); stroke-width: 1; }
.mg-ch-ylab, .mg-ch-xlab { fill: var(--muted); font-size: 10px; font-family: inherit; }
.mg-ch-mk { stroke-width: 1.2; stroke-dasharray: 3 3; }
.mg-ch-mk-price_change { stroke: #7c3aed; }
.mg-ch-mk-verdict { stroke: var(--mg-good); }
.mg-ch-mk-note { stroke: var(--muted); }
.mg-ch-cross { stroke: var(--fg); stroke-width: 1; opacity: .45; }
.mg-ch-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.mg-ch-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; max-width: 240px; padding: 6px 8px; font-size: 11px; line-height: 1.45;
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.mg-ch-tip[hidden] { display: none; }
.mg-ch-tip-date { font-weight: 700; margin-bottom: 2px; }
.mg-ch-tip-row { display: flex; justify-content: space-between; gap: 8px; }
.mg-ch-tip-mk { margin-top: 3px; font-weight: 600; }
.mg-ch-legend { display: flex; gap: 10px; margin-top: 4px; }
.mg-ch-leg::before { content: ''; display: inline-block; width: 12px; border-top: 2px dashed currentColor; margin-right: 4px; vertical-align: middle; }
.mg-ch-leg-price_change { color: #7c3aed; }
.mg-ch-leg-verdict { color: var(--mg-good); }
.mg-ch-leg-note { color: var(--muted); }
:root[data-theme="dark"] .mg-ch-mk-price_change, :root[data-theme="dark"] .mg-ch-leg-price_change { stroke: #a78bfa; color: #a78bfa; }
.mg-ch-more > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.mg-ch-empty { padding: 14px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 12px; }
.mg-ch-foot { margin-top: 4px; }
.mg-ch-foot .btn[hidden] { display: none; }
.mg-ch-table { max-height: 240px; overflow: auto; margin-top: 4px; }
.mg-ch-table[hidden] { display: none; }
.mg-ch-data { border-collapse: collapse; font-size: 11px; width: 100%; }
.mg-ch-data th, .mg-ch-data td { padding: 2px 6px; border-bottom: 1px solid var(--border-cell); text-align: right; white-space: nowrap; }
.mg-ch-data th:first-child, .mg-ch-data td:last-child { text-align: left; }
.mg-ch-data thead th { position: sticky; top: 0; background: var(--panel); }

/* v0.6.1 (Dav 14-10, « c'est truncated, sois bon »): a header label is NEVER cut. It wraps at spaces on as many lines as
   needed (usually 2–3); the column is at least as wide as its longest WORD (min-content) and otherwise follows its data. */
.mg-table thead th { white-space: normal; height: auto; vertical-align: bottom; line-height: 1.2; padding-top: 5px; padding-bottom: 5px; }
.mg-table thead th .mg-th { align-items: flex-end; }
.mg-table thead th .mg-th-l, .mg-table thead th .mg-sort { display: block; overflow: visible; white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none; min-width: min-content; max-width: 12em; text-align: inherit; }

/* v0.5.1: list cells stay on one line but never balloon — value capped with an ellipsis (full value in `title` when cut);
   value badges collapse into one compact marker (its ⓘ popover lists them in full). Panel badges are unchanged. */
.mg-cellv { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.mg-table td.mg-t-text .mg-cellv { max-width: 24ch; }
.mg-table td.mg-t-badge .mg-cellv, .mg-table td.mg-t-link .mg-cellv { max-width: 16ch; }
.mg-bmark { width: auto; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; font: 700 10px/1 system-ui, sans-serif; font-style: normal;
  margin-left: 4px; vertical-align: 1px; border-style: solid; }
.mg-bmark-bad { background: var(--mg-bad); border-color: var(--mg-bad); color: #fff; }
.mg-bmark-weak { background: var(--mg-weak); border-color: var(--mg-weak); color: #fff; }
.mg-bmark-good { background: var(--mg-good); border-color: var(--mg-good); color: #fff; }
.mg-bmark-neutral { background: var(--muted-bg); border-color: var(--border); color: var(--muted); }
:root[data-theme="dark"] .mg-bmark-bad, :root[data-theme="dark"] .mg-bmark-weak, :root[data-theme="dark"] .mg-bmark-good { color: #15171c; }
.mg-bmark:hover, .mg-bmark[aria-expanded="true"] { filter: brightness(1.1); box-shadow: 0 0 0 2px var(--accent); }
.mg-tip-badges { list-style: none; margin: 0; padding: 0; }
.mg-tip-badges li + li { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.mg-tip-badges .mg-vbadge { margin-bottom: 2px; }

/* ---- v0.6.0: readable panel charts, hover peek, header badges, checks ---- */
.mg-ch-ylab, .mg-ch-xlab { font-size: 12px; }
.mg-ch-line { stroke-width: 2.4; }
.mg-ch-endlab { fill: var(--fg); font-size: 12px; font-weight: 700; font-family: inherit; }
.mg-ch-enddot { fill: var(--accent); }
.mg-ch-label { font-size: 13px; margin-top: 6px; }
.mg-ch-tip { font-size: 12px; }
/* hover peek — mouse only, read-only, never over the hovered row */
.mg-peek { position: fixed; z-index: 800; width: min(600px, calc(100vw - 16px)); padding: 10px 14px 12px; pointer-events: none;
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(16,24,40,.22); }
.mg-peek[hidden] { display: none; }
.mg-peek-head { font-size: 14px; margin-bottom: 6px; }
.mg-peek-chart { min-height: 250px; }
.mg-pk-svg { display: block; width: 100%; height: auto; }
.mg-pk-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; }
.mg-pk-ylab, .mg-pk-xlab { font-size: 12px; font-family: inherit; fill: var(--muted); }
.mg-pk-s0 { stroke: var(--accent); color: var(--accent); }
.mg-pk-s1 { stroke: #0f766e; color: #0f766e; }
text.mg-pk-s0 { fill: var(--accent); stroke: none; }
text.mg-pk-s1 { fill: #0f766e; stroke: none; }
:root[data-theme="dark"] .mg-pk-s1 { stroke: #2dd4bf; color: #2dd4bf; }
:root[data-theme="dark"] text.mg-pk-s1 { fill: #2dd4bf; }
.mg-pk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-top: 4px; }
.mg-pk-leg::before { content: ''; display: inline-block; width: 14px; border-top: 3px solid currentColor; margin-right: 5px; vertical-align: middle; }
.mg-pk-leg strong { color: var(--fg); }
.mg-peek-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-items: start; gap: 8px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.mg-peek-fl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mg-peek-fv { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-peek-fv .mg-dlt { font-size: 12px; }
.mg-peek-toggle[aria-pressed="false"] { color: var(--muted); }
.mg-peek-toggle.on { border-color: var(--accent); }
/* a badge carried by every visible row is shown once, here, instead of in each cell */
.mg-hbadges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.mg-hbadge { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* 'checks' columns: ✓ / ✗ glyphs, labels in the ⓘ popover */
.mg-checks { width: auto; height: auto; border-radius: 6px; padding: 0 5px; gap: 3px; font: 700 13px/1.4 system-ui, sans-serif; font-style: normal; border-style: solid; margin-left: 0; }
.mg-checks .mg-chk { display: inline-block; min-width: 9px; text-align: center; }
.mg-tip-checks { list-style: none; margin: 0; padding: 0; }
.mg-tip-checks li { margin: 2px 0; }
.mg-chk-help { margin-top: 6px; }
.mg-checks:hover, .mg-checks[aria-expanded="true"] { background: var(--row-hover); color: var(--fg); border-color: var(--accent); }
.mg-peek-from { font-size: 12px; color: var(--muted); white-space: normal; line-height: 1.35; min-width: 0; }
.mg-peek-from .mg-val { font-weight: 500; }
.mg-peek-f { min-width: 0; }

/* ---- v0.7.0: execution status, plans ---- */
.mg-exec { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.6; border: 1px solid transparent; }
.mg-exec-good { color: var(--mg-good); background: var(--ok-bg); border-color: color-mix(in srgb, var(--mg-good) 35%, transparent); }
.mg-exec-bad { color: var(--mg-bad); background: var(--bad-bg); border-color: color-mix(in srgb, var(--mg-bad) 35%, transparent); }
.mg-exec-weak { color: var(--mg-weak); background: var(--warn-bg); }
.mg-exec-neutral { color: var(--mg-neutral); background: var(--muted-bg); }
.mg-exec-t { font-weight: 400; opacity: .85; font-variant-numeric: tabular-nums; }
.mg-ex { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.mg-ex-step { position: relative; padding: 2px 0 9px 8px; font-size: 12px; }
.mg-ex-step::before { content: ''; position: absolute; left: -20px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); }
.mg-ex-step[data-state="live"]::before { background: var(--mg-good); border-color: var(--mg-good); }
.mg-ex-step[data-state="failed"]::before, .mg-ex-step[data-state="not_adopted"]::before { background: var(--mg-bad); border-color: var(--mg-bad); }
.mg-ex-pending { opacity: .55; }
.mg-ex-pending::before { border-style: dashed; border-color: var(--muted); }
.mg-ex-detail { margin-top: 2px; }
.mg-ex-ref { font-size: 11px; background: var(--muted-bg); padding: 0 4px; border-radius: 4px; }
.mg-ex-rb { font-weight: 600; margin-top: 2px; }
.mg-b-exec h3 .mg-exec { margin-left: 6px; text-transform: none; letter-spacing: 0; }
.mg-rowtype { white-space: nowrap; font-weight: 600; font-size: 12px; }
.mg-rowtype-plan { color: #7c3aed; }
:root[data-theme="dark"] .mg-rowtype-plan { color: #a78bfa; }
.mg-emoji { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-weight: 400; }
.mg-cellv-plan { max-width: 56ch; }
.mg-plan-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-pl-dots { letter-spacing: 1px; color: var(--muted); font-size: 11px; }
.mg-pl-done { color: #7c3aed; }
:root[data-theme="dark"] .mg-pl-done { color: #a78bfa; }
.mg-pl-n { font-weight: 700; }
.mg-pl-state { text-transform: none; }
.mg-plan-cell .mg-checks { font-size: 12px; vertical-align: 0; }
.mg-b-plan { border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--border)); border-radius: var(--radius-sm); padding: 8px 10px; background: color-mix(in srgb, #7c3aed 5%, var(--panel)); }
.mg-b-plan h3 .pill { margin-left: 6px; text-transform: none; letter-spacing: 0; }
.mg-pl-head { margin-bottom: 6px; }
.mg-pl-goal { font-size: 13px; margin-top: 2px; }
.mg-pl-facts { margin: 6px 0 8px; }
.mg-pl-steps { list-style: none; margin: 0 0 8px; padding: 0; }
.mg-pl-step { padding: 5px 0; border-top: 1px dashed var(--border); font-size: 12px; }
.mg-pl-step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.mg-pl-effect { margin-top: 2px; }
.mg-pl-next { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--border); font-size: 12px; }
.mg-pl-next-rej { opacity: .7; }
.mg-pl-conds { list-style: none; margin: 4px 0 0; padding: 0; }
.mg-pl-conds li { margin: 2px 0; }
.mg-pl-conds .mg-chk { font-weight: 700; }
.mg-pl-stop { margin-top: 6px; }
.mg-peek-plan { font-size: 13px; margin: -2px 0 6px; }
.mg-ch-mk-plan_step { stroke: #c2410c; stroke-dasharray: none; stroke-width: 1.4; }
.mg-ch-leg-plan_step { color: #c2410c; }

/* ---- v0.8.0: Focus · Recent · Archive ---- */
.mg-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 6px; }
.mg-scopes[hidden] { display: none; }
.mg-scope-w { display: inline-flex; align-items: center; }
.mg-scope { all: unset; cursor: pointer; padding: 5px 14px; border: 1px solid var(--border); background: var(--panel); font-weight: 600; font-size: 13px; color: var(--fg); }
.mg-scope-w:first-child .mg-scope { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.mg-scope-w:nth-child(3) .mg-scope { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mg-scope-w + .mg-scope-w .mg-scope { margin-left: -1px; }
.mg-scope.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.mg-scope:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mg-scope-n { font-weight: 400; font-variant-numeric: tabular-nums; opacity: .85; }
.mg-scope-w .mg-help { margin: 0 6px 0 4px; }
.mg-scope-all { margin-left: 6px; text-transform: none; }
.mg-searchbox { display: flex; flex-direction: column; gap: 2px; }
.mg-search-all-l { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mg-search-all-l[hidden] { display: none; }
.mg-empty-focus { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 12px; white-space: normal; }
.mg-empty-focus p { margin: 0; max-width: 46ch; text-align: center; }
.mg-empty-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--mg-good); background: var(--ok-bg); }
.mg-empty-acts { display: flex; gap: 8px; margin-top: 4px; }
.mg-table tbody tr.mg-row.mg-archived td:not(.mg-selcol) { opacity: .8; }
.mg-archived-pill { text-transform: none; white-space: nowrap; }
.mg-verdict-archived { font-size: 12px; line-height: 1.45; }
.mg-v-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
@media (max-width: 720px) { .mg-scope { padding: 8px 12px; } }
.mg-emptybox { position: sticky; left: 0; width: 100%; }
.mg-emptybox[hidden] { display: none; }
.mg-emptybox .mg-empty { text-align: center; padding: 24px; margin: 0; color: var(--muted); }

/* ---- v0.9.0: one team column layout (picker, required + sticky column, header drag), chips, link bar, export menu, sync ---- */
/* required columns: the first one stays in view when the list scrolls sideways (left = the selection column's width) */
.mg-table .mg-stick { position: sticky; left: var(--mg-stick-left, 30px); z-index: 1; background: inherit; box-shadow: inset -1px 0 0 var(--border), 6px 0 6px -6px rgba(16,24,40,.28); }
.mg-table thead th.mg-stick { z-index: 3; background: var(--head-bg); }
.mg-row.mg-decided td.mg-stick, .mg-table tbody tr.mg-row.mg-archived td.mg-stick { opacity: 1; }
.mg-row.mg-decided td.mg-stick > *, .mg-table tbody tr.mg-row.mg-archived td.mg-stick > * { opacity: .75; }
/* header drag (mouse) */
.mg-table thead th.mg-th-drag { cursor: grab; }
.mg-dragging-col, .mg-dragging-col * { cursor: grabbing !important; user-select: none; }
.mg-table thead th.mg-th-dragging { opacity: .5; outline: 2px dashed var(--accent); outline-offset: -2px; }
.mg-table thead th.mg-drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.mg-table thead th.mg-drop-after { box-shadow: inset -3px 0 0 var(--accent); }
/* the picker */
.mg-pop.mg-colpick { width: min(440px, calc(100vw - 24px)); max-height: min(74vh, 660px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.mg-pop.mg-colpick[hidden] { display: none; }
.mg-cp-head { padding: 9px 12px 7px; border-bottom: 1px solid var(--border); }
.mg-cp-title { font-weight: 700; font-size: 13px; }
.mg-cp-by { font-size: 12px; margin-top: 1px; }
.mg-cp-link { margin-top: 4px; font-size: 12px; color: var(--warn); font-weight: 600; }
.mg .mg-cp-search { margin: 8px 12px 2px; width: auto; }
.mg-cp-list { flex: 1; min-height: 0; overflow: auto; padding: 0 6px 8px; }
.mg-cp-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 10px 6px 3px; }
.mg-cp-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.mg-cp-grph { font-size: 12px; font-weight: 600; margin: 8px 6px 2px; }
.mg-cp-grph[hidden] { display: none; }
.mg-cp-ul { list-style: none; margin: 0; padding: 0; }
.mg-cp-item { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: var(--radius-sm); min-height: 26px; }
.mg-cp-item:hover { background: var(--row-hover); }
.mg-cp-item[hidden] { display: none; }
.mg-cp-handle { flex: none; width: 16px; text-align: center; color: var(--muted); cursor: grab; touch-action: none; user-select: none; letter-spacing: -3px; font-weight: 700; }
.mg-cp-nohandle { cursor: default; letter-spacing: 0; font-size: 11px; font-weight: 400; }
.mg-cp-l { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; }
.mg-cp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-cp-req .mg-cp-l { cursor: default; }
.mg-cp-tag { font-size: 10px; text-transform: none; flex: none; }
.mg-cp-grp { font-size: 11px; white-space: nowrap; flex: none; }
.mg-cp-item .mg-help { margin-left: 0; }
.mg-cp-move { display: inline-flex; gap: 2px; flex: none; }
.mg-cp-mv { all: unset; box-sizing: border-box; width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; color: var(--fg); background: var(--panel); }
.mg-cp-mv:hover { border-color: var(--accent); }
.mg-cp-mv:disabled { opacity: .3; cursor: default; }
.mg-cp-mv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mg-cp-dragging { background: var(--info-bg) !important; box-shadow: 0 3px 10px rgba(16,24,40,.22); position: relative; z-index: 1; }
.mg-cp-none { margin: 10px 8px; }
.mg-cp-foot { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--head-bg); }
.mg-cp-foot-l, .mg-cp-foot-r { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-cp-foot-r { justify-content: flex-end; }
/* chips: active filters (always) and a sort on a hidden column */
.mg-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 6px; }
.mg-chips[hidden] { display: none; }
.mg-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px 1px 10px; min-height: 22px; border-radius: 12px; font-size: 12px; background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.mg-chip:not(:has(.mg-chip-x)) { padding-right: 10px; }
.mg-chip[data-chip="sort"] { background: var(--muted-bg); border-color: var(--border); }
.mg-chip-x { all: unset; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 11px; color: var(--muted); }
.mg-chip-x:hover, .mg-chip-x:focus-visible { background: var(--row-hover); color: var(--fg); box-shadow: 0 0 0 2px var(--accent); }
/* « Columns from a link » */
.mg-linkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; margin: 0 0 6px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); font-size: 13px; }
.mg-linkbar[hidden] { display: none; }
/* export menu */
.mg-exportpop { min-width: 230px; }
.mg-exportpop .mg-menuitem small { display: block; font-size: 11px; margin-top: 1px; }
.mg-req-pill { text-transform: none; }
/* sync: one compact summary in the list, a table in the popover and in the panel */
.mg-sync { width: auto; height: auto; border-radius: 6px; padding: 0 6px; font: 600 12px/1.5 system-ui, sans-serif; font-style: normal; border-style: solid; margin-left: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-sync:hover, .mg-sync[aria-expanded="true"] { background: var(--row-hover); color: var(--fg); border-color: var(--accent); }
.mg-sync-sep { color: var(--muted); font-weight: 400; }
.mg-sync-n[data-tone="muted"] { color: var(--muted); }
.mg-tip.mg-tip-wide { max-height: min(70vh, 560px); overflow: auto; }
.mg-tip-sum { margin-bottom: 4px; font-weight: 600; }
.mg-sync-t { border-collapse: collapse; width: 100%; font-size: 12px; background: transparent; }
.mg-sync-t th, .mg-sync-t td { padding: 3px 6px; border: 0; border-bottom: 1px solid var(--border-cell); text-align: left; vertical-align: top; white-space: nowrap; }
.mg-sync-t .mg-num { text-align: right; font-variant-numeric: tabular-nums; }
.mg-sync-t thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--panel); position: static; }
.mg-sync-t tbody th { font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; background: transparent; position: static; }
.mg-sync-t .mg-sync-g th { background: var(--muted-bg); font-size: 11px; font-weight: 700; padding-top: 4px; }
.mg-sync-t tr.mg-sync-hasw > * { border-bottom: 0; }
.mg-sync-t .mg-sync-why td { white-space: normal; color: var(--muted); font-size: 11px; padding-top: 0; padding-left: 14px; }
.mg-sync-st { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.mg-sync-st-good { color: var(--mg-good); background: var(--ok-bg); }
.mg-sync-st-bad { color: var(--mg-bad); background: var(--bad-bg); }
.mg-sync-st-weak { color: var(--mg-weak); background: var(--warn-bg); }
.mg-sync-st-neutral { color: var(--mg-neutral); background: var(--muted-bg); }
.mg-sync-st-muted { color: var(--muted); border: 1px dashed var(--border); }
.mg-b-sync h3 .mg-sync-sum { text-transform: none; letter-spacing: 0; font-size: 12px; margin-left: 4px; }
.mg-b-sync h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.mg-sync-wrap { max-height: 60vh; overflow: auto; }
html.mg-picker-open .mui-toast { pointer-events: none; }   /* while the picker is open a toast never swallows a click on its buttons */
@media (max-width: 720px) {
  html.mg-picker-open .mui-toast-host { top: 12px; bottom: auto; }
  .mg-pop.mg-colpick { position: fixed; left: 8px; right: 8px; top: 8px; bottom: 8px; width: auto; max-height: none; z-index: 70; }
  .mg-cp-item { padding: 6px; min-height: 40px; }
  .mg-cp-handle { width: 26px; font-size: 18px; }
  .mg-cp-mv { width: 34px; height: 34px; font-size: 15px; }
  .mg-cp-grp { display: none; }
  .mg-cp-foot .btn { min-height: 36px; }
  .mg-chip-x { width: 28px; height: 28px; }
  /* the popover is the screen's width: drop « Since » there (the panel keeps it) and let cells wrap */
  .mg-tip .mg-sync-t th:nth-child(5), .mg-tip .mg-sync-t td:nth-child(5), .mg-b-sync .mg-sync-t th:nth-child(5), .mg-b-sync .mg-sync-t td:nth-child(5) { display: none; }
  .mg-tip .mg-sync-t th, .mg-tip .mg-sync-t td, .mg-b-sync .mg-sync-t th, .mg-b-sync .mg-sync-t td { white-space: normal; padding: 3px 4px; }
  .mg-tip .mg-sync-t .mg-num, .mg-b-sync .mg-sync-t .mg-num { white-space: nowrap; }
  .mg-sync-st { white-space: normal; }
}

/* v0.9.0 fix (JH review): number / money columns never absorb the spare width — the list keeps every column at its content
   width and leaves the rest as empty space on the right (headers still wrap, never cut). */
.mg-table-wrap:not(.mg-rules-wrap) > .mg-table { width: max-content; }

/* ---- v0.10.0: text diff (words), safe HTML, counts + limits, translate, list text delta, execution timeline fix ---- */
.mg-tdiff { margin: 8px 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.mg-tdiff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; font-size: 13px; }
.mg-tdiff-head .mg-spacer { flex: 1; display: block; }
.mg-lang { text-transform: none; font-size: 10px; }
.mg-wd { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.mg-seg-b { all: unset; cursor: pointer; padding: 2px 10px; font-size: 12px; color: var(--muted); }
.mg-seg-b + .mg-seg-b { border-left: 1px solid var(--border); }
.mg-seg-b.current { background: var(--accent); color: #fff; font-weight: 600; }
.mg-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mg-tdiff-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; }
.mg-tdiff-body .mg-html { white-space: normal; }
.mg-html p { margin: 0 0 6px; } .mg-html ul, .mg-html ol { margin: 0 0 6px; padding-left: 20px; }
.mg-ins { color: var(--mg-good); background: color-mix(in srgb, var(--mg-good) 12%, transparent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.mg-del { color: var(--mg-bad); background: color-mix(in srgb, var(--mg-bad) 10%, transparent); text-decoration: line-through; }
.mg-tdiff-note { margin-top: 4px; white-space: normal; }
.mg-tplain { white-space: pre-wrap; overflow-wrap: anywhere; }
.mg-tdiff-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.mg-tcount strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.mg-tcount.mg-over, .mg-tcount.mg-over strong { color: var(--mg-bad); font-weight: 700; }
.mg-tr-btns { margin-left: auto; display: inline-flex; gap: 4px; }
.mg-tr-res { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--muted); background: var(--muted-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; }
.mg-tr-h { margin-bottom: 3px; font-style: italic; }
.mg-tdelta { white-space: nowrap; }
.mg-tdelta .mg-td-a { color: var(--muted); }
.mg-tdelta .mg-wd { margin-left: 4px; }
.mg-table td.mg-t-text .mg-cellv:has(.mg-tdelta) { max-width: 72ch; }
/* execution timeline: reached = filled dot (the current one bold), pending = hollow grey whatever its state will be */
.mg-ex-step:not(.mg-ex-pending):not([data-state="live"]):not([data-state="failed"]):not([data-state="not_adopted"])::before { background: var(--accent); }
.mg-ex-step.mg-ex-pending::before, .mg-ex-step.mg-ex-pending[data-state]::before { background: var(--panel); border: 2px dashed var(--muted); }
.mg-ex-current { font-weight: 700; }
.mg-ex-current::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.mg-exec-pending { color: var(--muted); background: transparent; border: 1px dashed var(--border); font-weight: 400; }
@media (max-width: 720px) { .mg-tr-btns { margin-left: 0; } .mg-seg-b { padding: 6px 12px; } }

/* v0.10.1: HTML diff drawn formatted (words marked inside paragraphs / bullets); « Source » = the raw tags, monospace */
.mg-tdiff-body .mg-html ins, .mg-tdiff-body .mg-html del { white-space: pre-wrap; }
.mg-tdiff-src { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* v0.10.2: translation pending / timed out */
.mg-tr-wait { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mg-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: mg-spin .8s linear infinite; flex: none; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-spin { animation-duration: 2.4s; } }
.mg-tr-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }

/* v0.10.4: rule changes are a distinct, muted kind of row; unknown types show as sent */
.mg-rowtype-rule_change { color: var(--mg-neutral); font-weight: 600; }
.mg-rowtype-rule_change .mg-emoji { filter: grayscale(1); }
.mg-rowtype-other { color: var(--muted); font-weight: 500; font-style: italic; }
.mg-p-rowtype .mg-rowtype { display: inline-block; padding: 0 7px; border-radius: 9px; background: var(--muted-bg); font-size: 11px; line-height: 1.6; }

/* v0.10.5: « ⏰ missed · since <date> » (Control's clock) */
.mg-missed-pill { white-space: nowrap; }
.mg-p-titles .mg-missed-pill { font-size: 11px; }

/* ---- v0.11.0: app tabs (a read-only grid or a sanitized HTML page) ---- */
.mg-apptab { overflow: hidden; }
.mg-apptab-head { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.mg-apptab-t { font-size: 14px; margin: 0; }
.mg-apptab-head .mg-spacer { display: block; flex: 1; }
.mg-apptab-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mg.mg-embedded { height: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mg-embedded > .mg-main { padding: 0; height: auto; flex: 1; min-height: 0; }
.mg-embedded .mg-top { display: none; }
.mg-readonly .mg-selcol { display: none; }
.mg-verdict-ro { padding: 8px 14px; }
.mg-apptab-page { overflow: auto; }
.mg-page-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 2px 20px; max-width: 1100px; }
.mg-page { font-size: 14px; line-height: 1.55; }
.mg-page h1, .mg-page h2, .mg-page h3 { margin: 14px 0 6px; line-height: 1.25; }
.mg-page h1 { font-size: 20px; } .mg-page h2 { font-size: 17px; } .mg-page h3 { font-size: 15px; }
.mg-page table { border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; width: auto; background: transparent; }
.mg-page th, .mg-page td { border: 1px solid var(--border-cell); padding: 4px 8px; text-align: left; vertical-align: top; }
.mg-page thead th { background: var(--head-bg); font-weight: 600; }
.mg-page code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--muted-bg); padding: 0 4px; border-radius: 4px; }
.mg-page pre { background: var(--muted-bg); padding: 8px; border-radius: var(--radius-sm); overflow: auto; }
.mg-page a[href] { text-decoration: underline; color: var(--accent); }
.mg-page a:not([href]) { color: inherit; text-decoration: none; }   /* an unsafe link loses its href: plain text */
.mg-page blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--border); color: var(--muted); }
@media (max-width: 720px) { .mg-apptab { overflow: visible; } .mg-page-body { overflow: visible; } }