/* self-contained safety: some host apps omit this scale step */
:root{--fs-15:15px}
/*
 * MOAA shared Manage styles — extracted from the Time app (definition-based:
 * every rule targeting a Manage-family class) so the shared window.MOAAManage
 * components render identically in every host app. Load AFTER the app's base
 * stylesheet. Keep in sync across apps like the other shared modules.
 */
.btn-group{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.btn-group .btn{border:none;border-radius:0;border-right:1px solid var(--border);background:transparent;height:28px}
.btn-group .btn:last-child{border-right:none}
.btn-group .btn.on{background:var(--text);color:var(--bg)}
.btn-sm{height:24px;padding:0 8px;font-size:var(--fs-12);border-radius:3px}
.wk-row .row-actions .btn-icon-mini{height:22px;width:22px;border:1px solid var(--border);background:var(--bg);
  border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-11);color:var(--muted)}
.wk-row .row-actions .btn-icon-mini:hover{color:var(--text);background:var(--surface)}
.wk-row .row-actions .btn-icon-mini.del:hover{color:#B91C1C;border-color:#FECACA;background:#FEF2F2}
.rp-groupby .btn-group{height:30px}
.rp-groupby .btn-group .btn{height:28px;font-size:var(--fs-12);padding:0 10px}
/* ── Manage view ─────────────────────────────────────────────── */
.mg-eyebrow{font-size:var(--fs-11);color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;font-weight:600}
.mg-h3{font-size:var(--fs-15);font-weight:600;letter-spacing:-0.2px;margin-top:2px}
.mg-help{font-size:var(--fs-12);color:var(--muted);margin-top:4px;max-width:540px;line-height:1.5}
.mg-subnav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px}
.mg-subnav-tab{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;border:none;background:transparent;font-size:var(--fs-13);font-weight:500;
  cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:inherit;
  position:relative;letter-spacing:-0.1px;white-space:nowrap}
.mg-subnav-tab:hover{color:var(--text)}
.mg-subnav-tab.on{color:var(--text)}
.mg-subnav-tab.on::after{content:'';position:absolute;bottom:-1px;left:6px;right:6px;height:2px;background:var(--text)}
.mg-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mg-search{height:30px;border:1px solid var(--border);border-radius:3px;padding:0 10px;font-size:var(--fs-13);
  background:var(--bg);font-family:inherit;color:var(--text);outline:none;width:280px}
.mg-search:focus{outline:1.5px solid var(--text);outline-offset:-1px;border-color:var(--text)}
.mg-toggle{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--muted);cursor:pointer;
  padding:0 4px;height:30px}
.mg-toggle input{accent-color:var(--text);width:13px;height:13px;cursor:pointer}
.mg-toggle:hover{color:var(--text)}
.mg-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  margin:18px 0 10px;flex-wrap:wrap}
/* Manage table — similar pattern to entry-list but column-flexible */
.mg-table{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg);margin-bottom:8px}
.mg-table-head{height:36px;background:var(--header-bg);border-bottom:1px solid var(--border);
  font-size:var(--fs-11);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;
  display:grid;align-items:center}
.mg-table-head > div{padding:0 14px;border-right:1px solid var(--border);height:100%;display:flex;align-items:center;overflow:hidden}
.mg-table-head > div:last-child{border-right:none}
.mg-table-row{min-height:49px;border-bottom:1px solid var(--border);font-size:var(--fs-13);cursor:pointer;
  transition:background 0.08s;display:grid;align-items:center}
.mg-table-row:last-child{border-bottom:none}
.mg-table-row:hover{background:rgba(0,0,0,0.018)}
.mg-table-row.archived{opacity:0.55}
.mg-table-row.archived:hover{opacity:0.75}
.mg-table-row > div{padding:0 14px;border-right:1px solid var(--border);height:100%;display:flex;align-items:center;overflow:hidden;min-width:0}
.mg-table-row > div:last-child{border-right:none;justify-content:flex-end}
.mg-num{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--fs-12);font-weight:500;letter-spacing:0.3px}
.mg-strong{font-size:var(--fs-13);font-weight:500;letter-spacing:-0.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;min-width:0}
.mg-strong > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-muted{color:var(--muted);font-size:var(--fs-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.mg-tab-num{justify-content:flex-end;font-variant-numeric:tabular-nums;font-size:var(--fs-13);font-weight:600;letter-spacing:-0.2px;text-align:right}
.mg-pip{width:10px;height:24px;border-radius:2px;flex-shrink:0;display:inline-block}
.mg-arch-tag{font-size:var(--fs-10);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;
  padding:1px 6px;border:1px solid var(--border);border-radius:2px;background:var(--surface);flex-shrink:0}
.mg-yes{display:inline-flex;align-items:center;font-size:var(--fs-11);color:#15803D;font-weight:600;letter-spacing:0.2px}
.mg-rate-override{margin-left:5px;color:#B45309;font-size:var(--fs-11);line-height:1}
.mg-rate-cell-unit{font-size:var(--fs-10);color:var(--muted);font-weight:500;margin-left:1px;letter-spacing:0}
.mg-rate-cell{align-items:baseline}
.mg-row-actions{display:flex;gap:6px;justify-content:flex-end}
/* ── Team: personnel-file master–detail (HR Personnel File look) ────────
   People list down the left (240px, white rows, light-yellow selected),
   the selected person's file shown as white detail cards on the right. */
.mg-people-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start}
.mg-people-col{min-width:0}
/* Search spans the column so it's the same width as the list card below it.
   Light-grey border to match the HR app (the Time app has no base input
   border, so it must be set explicitly here). Fixed height so the first list
   row lines up with the details-card top in the panel. */
.mg-people-search{width:100%;box-sizing:border-box;height:34px;margin-bottom:10px;
  padding:6px 10px;font-size:var(--fs-13);border:1px solid var(--border);
  border-radius:4px;background:#fff;color:var(--text)}
.mg-people-search:focus{outline:none;border-color:#888;background:#FFFBEA}
.mg-people-list{border:1px solid var(--border);border-radius:6px;background:#fff;
  overflow-y:auto;overflow-x:hidden;max-height:60vh;
  /* Subtle auto-hiding scrollbar: invisible until hovered, no layout shift. */
  scrollbar-width:thin;scrollbar-color:transparent transparent}
.mg-people-list:hover{scrollbar-color:rgba(0,0,0,0.22) transparent}
.mg-people-list::-webkit-scrollbar{width:8px}
.mg-people-list::-webkit-scrollbar-track{background:transparent}
.mg-people-list::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;
  border:2px solid transparent;background-clip:padding-box}
.mg-people-list:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.22);background-clip:padding-box}
.mg-person-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 14px;border:none;border-bottom:1px solid var(--border);background:#fff;
  font:inherit;color:var(--text);cursor:pointer}
.mg-person-row:last-child{border-bottom:none}
.mg-person-row:hover{background:var(--surface)}
.mg-person-row.active{background:#FFFBEA}
.mg-person-row.archived{opacity:0.55}
.mg-person-row.archived:hover{opacity:0.8}
.mg-person-row-main{display:flex;flex-direction:column;min-width:0;gap:1px;flex:1}
.mg-person-row-name{font-size:var(--fs-13);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-person-row-sub{font-size:var(--fs-11);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-person-panel{min-width:0;display:flex;flex-direction:column}
.mg-person-empty{display:flex;align-items:center;justify-content:center;min-height:360px;
  padding:40px;color:var(--muted);font-size:var(--fs-13);text-align:center;
  border:1px solid var(--border);border-radius:6px;background:#fff}
/* Height + bottom margin match the search box in the left column, so the
   details-card top border lines up with the first team-member row. */
.mg-person-title{font-size:var(--fs-20);font-weight:600;letter-spacing:-0.3px;
  height:34px;line-height:34px;margin-bottom:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-past-banner{box-sizing:border-box;height:34px;padding:0 14px;margin-bottom:10px;
  display:flex;align-items:center;background:#FAF6EB;border:1px solid #E6D8AF;
  border-radius:3px;font-family:var(--font-mono,monospace);font-size:var(--fs-10);
  letter-spacing:0.08em;text-transform:uppercase;color:#7A6210}
/* White detail card, edit affordances top-right (mirrors HR cardStyle). */
.mg-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:6px;
  padding:16px 18px;margin:0 0 14px}
.mg-card-actions{position:absolute;top:10px;right:12px;display:flex;gap:6px;z-index:1}
.mg-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 24px}
.mg-card-lbl{font-size:var(--fs-11);color:var(--muted);margin-bottom:4px}
/* Detail-panel cards reuse MGField, whose label is uppercase/bold/dark. Inside
   a detail-panel fieldset, render those labels like the Team card's .mg-card-lbl
   instead: small, light grey, sentence case (as written in the JSX). */
.mg-detail-fieldset .mg-field-lbl{font-weight:400;color:var(--muted);
  text-transform:none;letter-spacing:0}
/* Match the Team personnel card's field metrics exactly so the label→value
   spacing reads the same: 4px label gap, 24px-tall fields, line-height 20 with
   2px top/bottom padding (vs the default 30px-tall boxed .mg-field). */
/* Stack the detail-panel fields with the same 14px vertical rhythm as the
   Team card's .mg-card-grid (row-gap 14px) — the fieldset is otherwise a
   plain block with 0 gap, which made the rows sit tighter than the Team card. */
.mg-detail-fieldset{display:flex;flex-direction:column;gap:14px}
.mg-detail-fieldset .mg-field{gap:3px}
.mg-detail-fieldset .mg-field input,.mg-detail-fieldset .mg-field select,
.mg-detail-fieldset .mg-field textarea{height:24px;line-height:20px;padding:2px 0}
.mg-detail-fieldset .mg-field textarea{height:auto}
/* Read value and edit input share identical box metrics (line-height 20px,
   2px top/bottom padding, no border, 24px tall) so the text sits in exactly
   the same spot whether or not you're editing — no jump on Edit. */
.mg-card-val{font-size:var(--fs-13);color:var(--text);line-height:20px;
  padding:2px 0;min-height:24px;box-sizing:border-box}
/* Details-card edit fields (only rendered in edit mode): no box, muted
   goldenrod text — matching the CV panel + the Submissions CV editor. */
.mg-card-grid input,.mg-card-grid select,.mg-card-grid textarea{
  width:100%;font-size:var(--fs-13);font-family:inherit;border:none;background:transparent;
  color:#B8860B;padding:2px 0;line-height:20px;box-sizing:border-box}
.mg-card-grid input,.mg-card-grid select{height:24px}
.mg-card-grid input::placeholder,.mg-card-grid textarea::placeholder{color:#D4B679}
.mg-card-hint{font-size:var(--fs-11);color:var(--muted);font-style:italic;margin-top:10px}
.mg-cv-fieldset{border:none;margin:0;padding:0;min-width:0}
/* Breathing room above each CV sub-section heading (Qualifications, etc.). */
.mg-cv-section{margin-top:26px}
/* CV sub-sections (qualifications / registrations / employment) laid out as
   clean single-row entries — column header labels, no per-entry boxes —
   matching the details card above. */
.mg-cv-head{display:grid;gap:8px;align-items:end;margin-top:4px;padding:0 2px 5px;
  border-bottom:1px solid var(--border);font-size:var(--fs-11);color:var(--muted)}
.mg-cv-row{display:grid;gap:8px;align-items:center;padding:6px 2px;
  border-bottom:1px solid rgba(0,0,0,0.06)}
.mg-cv-row:last-of-type{border-bottom:none}
/* Clients "People" rows — compact to match the consultants staff-table row
   rhythm (shorter inputs + tighter vertical padding). */
.mg-ppl-rows .mg-cv-row{padding:4px 2px}
.mg-ppl-rows .mg-cv-row input,.mg-ppl-rows .mg-cv-row select{height:24px}
.mg-cv-row input{width:100%;min-width:0;height:28px;box-sizing:border-box}
/* Match the compact staff-members table row rhythm (fs-12, 24px fields, 4px
   vertical padding) for the CV sub-tables — Qualifications / Registrations /
   Employment. Scoped to .mg-cv-fieldset so it beats the generic `.mg-field
   input` (fs-13) and base `.mg-cv-row` (6px padding / 28px input) rules. */
.mg-cv-fieldset .mg-cv-row{padding-top:4px;padding-bottom:4px}
.mg-cv-fieldset .mg-cv-row input,.mg-cv-fieldset .mg-cv-row select,.mg-cv-fieldset .mg-cv-row textarea{
  height:24px;font-size:var(--fs-12)}
.mg-cv-cert{display:flex;align-items:center;gap:6px;min-width:0}
.mg-cv-file{font-size:var(--fs-12);color:#1F4E79;text-decoration:underline;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mg-cv-nofile{font-size:var(--fs-12);color:var(--muted)}
.mg-cv-up{flex-shrink:0;margin-left:auto;padding:0 8px}
.mg-cv-rm{width:26px;height:26px;padding:0;line-height:1;justify-self:end;
  display:inline-flex;align-items:center;justify-content:center}
/* Hide the remove-× when the personnel-file fieldset is disabled — i.e. when
   not in edit mode. */
.mg-cv-fieldset:disabled .mg-cv-rm{display:none}
/* CV fields never show a box. In read mode (fieldset disabled) the text is
   plain black; in edit mode it turns muted goldenrod (#B8860B) — the same
   editable-text tint the Submissions CV editor uses. The light-grey row
   dividers separate entries in both modes.
   NOTE: the CV inputs sit inside <label class="mg-field">, and the generic
   `.mg-field input{border:1px solid …}
` rule (specificity 0,2,0) outweighs a
   plain `.mg-cv-fieldset input` (0,1,1) — so these selectors are written as
   `.mg-cv-fieldset .mg-field input` (0,3,0) to reliably win. */
.mg-cv-fieldset .mg-field input,.mg-cv-fieldset .mg-field select,.mg-cv-fieldset .mg-field textarea,
.mg-cv-fieldset .mg-cv-row input,.mg-cv-fieldset .mg-cv-row select,.mg-cv-fieldset .mg-cv-row textarea{
  border:none;background:transparent;padding-left:0;color:#B8860B}
.mg-cv-fieldset .mg-field input::placeholder,.mg-cv-fieldset .mg-field textarea::placeholder{color:#D4B679}
.mg-cv-fieldset:disabled .mg-field input,.mg-cv-fieldset:disabled .mg-field select,.mg-cv-fieldset:disabled .mg-field textarea,
.mg-cv-fieldset:disabled .mg-cv-row input,.mg-cv-fieldset:disabled .mg-cv-row select,.mg-cv-fieldset:disabled .mg-cv-row textarea{
  color:var(--text);opacity:1;-webkit-text-fill-color:var(--text);cursor:default}
.mg-cv-fieldset:disabled .mg-field input::-webkit-calendar-picker-indicator{display:none}
/* Read mode: hide the select dropdown arrow so it reads as plain text, not
   an editable control. The arrow returns once the fieldset is enabled. */
.mg-cv-fieldset:disabled .mg-field select,.mg-cv-fieldset:disabled .mg-cv-row select{background-image:none;padding-right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0}
/* Read mode has no Upload/Replace either — the row is just the record. */
.mg-cv-fieldset:disabled .mg-cv-up{display:none}
/* Photo Upload/Replace/Adjust/Remove buttons only show in edit mode; read
   mode shows just the portrait. !important because the button container carries
   an inline `display:flex`, which a plain rule can't override. */
.mg-cv-fieldset:disabled .mg-photo-actions{display:none !important}
base rule. */
.mg-cv-fieldset:disabled .mg-cv-add{display:none !important}
@media (max-width:900px){.mg-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .mg-people-layout{grid-template-columns:1fr}
}
.mg-readonly-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:14px;
  background:#FEF3C7;border:1px solid #FDE68A;border-radius:6px;font-size:var(--fs-13);line-height:1.45;color:#78350F}
.mg-readonly-icon{font-size:var(--fs-14);flex-shrink:0;opacity:0.8}
.mg-readonly-banner strong{font-weight:600;letter-spacing:-0.1px}
/* read-only: hide edit affordances, lock inputs */
.mg-readonly-mode .mg-toolbar .btn.prim{display:none}
/* visibility:hidden (not display:none) so the cell keeps occupying
   its grid slot — otherwise the remaining row cells slide left to
   fill the gap and misalign against the header. */
.mg-readonly-mode .mg-row-actions{visibility:hidden}
.mg-readonly-mode .mg-drawer-foot{display:none}
.mg-readonly-mode .mg-table-row{cursor:default}
.mg-readonly-mode .mg-drawer-body input,
.mg-readonly-mode .mg-drawer-body select,
.mg-readonly-mode .mg-drawer-body textarea{pointer-events:none;background:var(--surface) !important;color:var(--text)}
.mg-readonly-mode .mg-drawer-body button{pointer-events:none;opacity:0.55}
.mg-readonly-mode .mg-drawer-body .mg-phase-row{cursor:default}
.mg-readonly-mode .mg-row-order{visibility:hidden}
.mg-phase-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg);margin-top:4px}
.mg-phase-row{display:grid;grid-template-columns:28px 1fr 160px;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:var(--fs-13)}
.mg-phase-row:last-child{border-bottom:none}
.mg-phase-row.off{color:var(--muted);background:var(--surface)}
.mg-phase-row.on:hover{background:rgba(0,0,0,0.02)}
.mg-phase-row input[type="checkbox"]{margin:0;width:14px;height:14px;cursor:pointer;accent-color:var(--text)}
.mg-phase-row-head{font-size:var(--fs-11);color:var(--muted);cursor:default;padding:6px 12px;background:var(--bg);border-bottom:none}
.mg-phase-row-head:hover{background:var(--bg)}
.mg-phase-row-name{display:flex;align-items:center;gap:8px;min-width:0}
.mg-phase-row-pip{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.mg-phase-row-short{font-size:var(--fs-11);color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;font-weight:500;margin-left:auto;padding-left:8px}
.mg-phase-row-fee{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.mg-phase-fee-dollar{color:var(--muted);font-size:var(--fs-12)}
.mg-phase-row-fee input{width:120px;height:28px;text-align:right;border:1px solid var(--border);background:var(--bg);
  border-radius:3px;padding:0 8px;font-size:var(--fs-13);font-family:inherit;color:var(--text);outline:none;
  font-variant-numeric:tabular-nums}
.mg-phase-row-fee input:focus{border-color:var(--text)}
.mg-phase-row-fee input:disabled{background:transparent;color:var(--muted);cursor:not-allowed}
.mg-phase-row-total{background:var(--bg);cursor:default;font-weight:600;padding-top:10px;padding-bottom:10px;
  border-top:none}
.mg-phase-row-total:hover{background:var(--bg)}
.mg-phase-row-total .mg-phase-row-short{font-weight:500;font-size:var(--fs-11)}
.mg-phase-row-fee-total{font-size:var(--fs-14);font-variant-numeric:tabular-nums;letter-spacing:-0.2px;padding-right:8px}
.mg-row-actions .btn.ghost.danger{color:#B91C1C}
.mg-row-actions .btn.ghost.danger:hover:not(:disabled){background:#FEF2F2;border-color:#FECACA}
.mg-row-actions .btn:disabled{opacity:0.4;cursor:not-allowed}
.mg-row-order{display:flex;gap:2px}
.mg-row-order .btn-icon{height:22px;width:22px;font-size:var(--fs-11);padding:0;border:1px solid var(--border);background:var(--bg);color:var(--muted);border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mg-row-order .btn-icon:hover:not(:disabled){color:var(--text);background:var(--surface)}
.mg-row-order .btn-icon:disabled{opacity:0.3;cursor:not-allowed}
.mg-empty{padding:36px 16px;text-align:center;color:var(--muted);font-size:var(--fs-12)}
.mg-pos{color:#15803D}
.mg-neg{color:#B91C1C}
.mg-member-pile{display:flex;align-items:center}
.mg-member-pile .av{margin-left:-6px;border-color:var(--bg)}
.mg-member-pile .av:first-child{margin-left:0}
.mg-pile-more{font-size:var(--fs-11);color:var(--muted);margin-left:6px;font-weight:600;font-variant-numeric:tabular-nums}
/* Rates KPIs */
.mg-rate-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
.mg-rate-stat{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:14px 16px}
.mg-rate-stat-lbl{font-size:var(--fs-11);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px}
.mg-rate-stat-val{font-size:var(--fs-24);font-weight:600;letter-spacing:-0.7px;font-variant-numeric:tabular-nums;margin-top:4px;line-height:1.1}
.mg-rate-stat-unit{font-size:var(--fs-13);color:var(--muted);margin-left:3px;font-weight:500;letter-spacing:0}
.mg-rate-stat-sub{font-size:var(--fs-11);color:var(--muted);margin-top:3px}
/* Drawer */
.mg-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.18);z-index:120;
  display:flex;justify-content:flex-end;animation:mg-fade 0.14s ease-out}
/* Animated "working…" ellipsis for AI tool panels. Append .mg-dots (a span)
   after the text, or add .mg-loading to a container to auto-append dots. */
@keyframes mg-dots{0%,20%{content:''}40%{content:'.'}60%{content:'..'}80%,100%{content:'...'}}
.mg-dots::after,.mg-loading::after{content:'...';animation:mg-dots 1.4s steps(1,end) infinite;display:inline-block;width:1.2em;text-align:left}
.mg-drawer{width:440px;max-width:100vw;background:var(--bg);height:100vh;display:flex;flex-direction:column;
  box-shadow:-14px 0 40px rgba(0,0,0,0.16);animation:mg-slide 0.18s cubic-bezier(.2,.7,.2,1)}
.mg-drawer.wide{width:720px}
/* AI-function drawers — a burnt-orange inner glow (matching the AI buttons)
   plus a "· AI" flag on the eyebrow label, so it's clear the drawer is
   running a Claude-powered action. `ai-glow` is the glow only (used where the
   eyebrow already says AI). */
.mg-drawer.ai-glow, .mg-drawer.ai-drawer{position:relative;box-shadow:-14px 0 40px rgba(0,0,0,0.16)}
/* Glow is painted by a pointer-events-none overlay so it renders ON TOP of
   the whole drawer — including the footer close bar (an inset box-shadow on
   the drawer itself would sit behind the footer's background). Doubled blur. */
.mg-drawer.ai-glow::after, .mg-drawer.ai-drawer::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px rgba(217,119,87,0.6), inset 0 0 80px rgba(217,119,87,0.20)}
.mg-drawer.ai-drawer .mg-drawer-eyebrow::after{content:' · AI';color:#D97757;font-weight:700}
.mg-drawer-head{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.mg-drawer-head > div:first-child{flex:1;min-width:0}
.mg-drawer-head .btn-icon{height:30px;width:30px;font-size:var(--fs-18);color:var(--muted);flex-shrink:0}
.mg-drawer-eyebrow{font-size:var(--fs-11);color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;font-weight:600}
.mg-drawer-title{font-size:var(--fs-18);font-weight:600;letter-spacing:-0.4px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-drawer-body{flex:1;overflow-y:auto;padding:14px 22px;display:flex;flex-direction:column;gap:10px}
.mg-drawer-foot{display:flex;align-items:center;gap:8px;padding:12px 22px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.mg-drawer-foot .spacer{flex:1}
.mg-discard-note{display:flex;align-items:center;font-size:var(--fs-12);font-weight:600;color:#B91C1C;background:#FEF2F2;border:1px solid #FECACA;border-radius:4px;padding:6px 10px}
/* Staff-row expand editor — match the collapsed row's 12px field size. */
.mg-staff-edit input,.mg-staff-edit select,.mg-staff-edit textarea{font-size:var(--fs-12);height:28px}
.mg-field{display:flex;flex-direction:column;gap:3px}
.mg-field-lbl{font-size:var(--fs-11);font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;
  display:flex;align-items:baseline;gap:8px}
.mg-field-sub{font-size:var(--fs-11);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
/* provenance pills for site zone fields (BRANZ-sourced vs manually overridden) */
.zone-src{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;
  padding:1px 5px;border-radius:8px;text-transform:uppercase;vertical-align:middle}
.zone-src-branz{background:#DBEAFE;color:#1E40AF}
.zone-src-manual{background:#FEF3C7;color:#92400E}
.zone-src-ai{background:#EEEDFE;color:#3C3489}
/* Compact inline controls for the District plan table (Field / Value / Source). */
.dp-table input,.dp-table select,.dp-table textarea{
  height:28px;border:1px solid var(--border);border-radius:3px;padding:0 8px;font-size:var(--fs-12);
  background:var(--bg);font-family:inherit;color:var(--text);outline:none;width:100%;font-variant-numeric:tabular-nums}
.dp-table select{padding:0 4px}
.dp-table textarea{height:auto;padding:6px 8px;resize:vertical;line-height:1.35;font-variant-numeric:normal}
.dp-table a{font-size:var(--fs-12)}
.mg-field input,.mg-field select,.mg-field textarea{
  height:30px;border:1px solid var(--border);border-radius:3px;padding:0 10px;font-size:var(--fs-13);
  background:var(--bg);font-family:inherit;color:var(--text);outline:none;width:100%;
  font-variant-numeric:tabular-nums}
.mg-field textarea{height:auto;padding:6px 10px;resize:vertical;line-height:1.35;font-variant-numeric:normal}
/* selects inset their text more than inputs — trim to align */
.mg-field select{padding-left:6px}
.mg-field input:focus,.mg-field select:focus,.mg-field textarea:focus{
  outline:1.5px solid var(--text);outline-offset:-1px;border-color:var(--text)}
.mg-form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mg-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px;align-items:start}
@media (max-width:900px){.mg-grid4{grid-template-columns:1fr 1fr}}
.mg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-items:start}
@media (max-width:900px){.mg-grid2{grid-template-columns:1fr}}
.mg-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);cursor:pointer;color:var(--text)}
.mg-check input{accent-color:var(--text);width:15px;height:15px;cursor:pointer}
.mg-swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;width:100%}
.mg-swatch{width:100%;aspect-ratio:1;border:1.5px solid transparent;border-radius:3px;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-11);font-weight:700;
  transition:transform 0.08s,border-color 0.08s}
.mg-swatch:hover{transform:scale(1.06)}
.mg-swatch.on{border-color:var(--text);box-shadow:0 0 0 1.5px var(--bg) inset}
.mg-summary{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:4px;font-size:var(--fs-13);color:var(--muted);
  margin-top:6px}
.mg-summary strong{color:var(--text);font-size:var(--fs-14);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.2px}
@media (max-width: 900px) {
  .mg-rate-stats{grid-template-columns:repeat(1,minmax(0,1fr))}
  .mg-form-row{grid-template-columns:1fr}
  .mg-drawer{width:100vw}
  .mg-swatches{grid-template-columns:repeat(6,1fr)}
}
/* Register table (v2 — balanced) */
.inv-register .mg-table-row{cursor:pointer}
.inv-register-row.status-draft .mg-num{color:#92400E;font-weight:600}
.inv-register-row.status-overdue .mg-num{color:#991B1B;font-weight:600}
.btn-icon-sm{height:24px;width:24px;padding:0;border:1px solid var(--border);background:var(--bg);
  border-radius:3px;cursor:pointer;font-family:inherit;color:var(--muted);font-size:var(--fs-13);line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.btn-icon-sm:hover{background:var(--surface);color:var(--text)}
.btn-icon-sm.danger:hover{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
/* ── Xero settings panel ──────────────────── */
.xero-panel{display:flex;flex-direction:column;gap:18px;max-width:780px}
.xero-header{display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--bg);border:1px solid var(--border);border-radius:6px}
.xero-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(0,0,0,0.04)}
.xero-status-dot.on{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,0.12)}
.xero-status-dot.off{background:#A1A1AA;box-shadow:0 0 0 4px rgba(161,161,170,0.12)}
.xero-header-text{min-width:0}
.xero-title{font-size:var(--fs-15);font-weight:600;letter-spacing:-0.3px}
.xero-sub{font-size:var(--fs-12);color:var(--muted);margin-top:2px}
.xero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:900px){.xero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.xero-stat{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:12px 14px}
.xero-stat-lbl{font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted)}
.xero-stat-val{font-size:var(--fs-18);font-weight:600;letter-spacing:-0.4px;margin-top:4px;font-variant-numeric:tabular-nums}
.xero-stat-sub{font-size:var(--fs-11);color:var(--muted);margin-top:2px}
.xero-actions{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:6px}
.xero-actions .spacer{flex:1}
.xero-connect-btn{align-self:flex-start;font-size:var(--fs-13);padding:0 18px;height:36px}
.xero-notes{font-size:var(--fs-12);color:var(--muted);line-height:1.6}
.xero-notes ul,.xero-notes ol{margin:0;padding-left:18px}
.xero-notes li{margin-bottom:3px}
.xero-notes code{background:var(--surface);padding:1px 5px;border-radius:3px;font-size:var(--fs-11)}
/* ── Phase billing — extra cols in project drawer ─ */
/* Compact billing tables (projects + submissions): 13px checkbox column,
   8px gap, 4px vertical padding, 12px body font, small checkbox + pip. */
.mg-phase-row.with-billing{grid-template-columns:13px minmax(120px,1fr) 106px 106px 168px 124px;gap:8px;padding-top:4px;padding-bottom:4px;font-size:var(--fs-12)}
.mg-phase-row-head.with-billing{grid-template-columns:13px minmax(120px,1fr) 106px 106px 168px 124px;gap:8px;font-size:var(--fs-11)}
.mg-phase-row.with-billing .mg-phase-row-fee input{height:26px;font-size:var(--fs-12);width:auto;flex:1;min-width:0}
.mg-phase-row.with-billing .mg-phase-invoiced{font-size:var(--fs-12)}
.mg-phase-row.with-billing .mg-phase-row-fee-total{font-size:var(--fs-12)}
.mg-phase-row.with-billing input[type="checkbox"]{width:13px;height:13px}
.mg-phase-row.with-billing .mg-phase-row-pip{width:7px;height:7px}
/* Submission stage variant — drop the "% complete" column. */
.mg-phase-row.with-billing.sub-stage{grid-template-columns:13px minmax(160px,1fr) 110px 110px 90px}
.mg-phase-row-head.with-billing.sub-stage{grid-template-columns:13px minmax(160px,1fr) 110px 110px 90px}
.mg-phase-mode{display:inline-flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:var(--bg);height:26px}
.mg-phase-mode button{height:100%;padding:0 8px;border:none;background:transparent;font-family:inherit;font-size:var(--fs-11);
  color:var(--muted);cursor:pointer;letter-spacing:0;font-weight:500}
.mg-phase-mode button.on{background:var(--text);color:var(--bg)}
.mg-phase-mode button:disabled{opacity:0.4;cursor:not-allowed}
.mg-phase-pct{display:flex;align-items:center;gap:6px}
.mg-phase-pct input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:14px;background:transparent;cursor:pointer}
.mg-phase-pct input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--border);border-radius:2px}
.mg-phase-pct input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:var(--text)}
.mg-phase-pct input[type=range]::-moz-range-track{height:3px;background:var(--border);border-radius:2px}
.mg-phase-pct input[type=range]::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--text)}
.mg-phase-pct input[type=number]{width:50px;height:24px;text-align:right;padding:0 4px 0 6px;border:1px solid var(--border);
  border-radius:3px;background:var(--bg);font-size:var(--fs-12);font-family:inherit;color:var(--text);font-variant-numeric:tabular-nums}
.mg-phase-pct-suffix{font-size:var(--fs-11);color:var(--muted)}
.mg-phase-invoiced{font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;justify-self:flex-end}
.mg-phase-invoiced strong{color:var(--text);font-weight:500}
.mg-phase-billing-banner{background:var(--surface);border:1px dashed var(--border);border-radius:5px;
  padding:8px 12px;margin-top:8px;font-size:var(--fs-12);color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.mg-phase-billing-banner strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
/* ── Project variations — billing-style boxes ─────────────────────────
   Same column layout / fonts as the Phases · billing table, but each
   variation sits in its own bordered box (not a single joined table). */
.mg-var-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mg-var-grid{display:grid;grid-template-columns:44px minmax(120px,1fr) 106px 106px 168px 124px;gap:8px;align-items:center}
.mg-var-head{padding:6px 12px;font-size:var(--fs-11);color:var(--muted);margin-bottom:-8px}
.mg-var-head .r{text-align:right}
.mg-var-box{border:1px solid var(--border);border-left:3px solid var(--border);border-radius:5px;background:var(--bg)}
.mg-var-box.dup{border-color:#FECACA;border-left-color:#B91C1C;background:#FFF8F8}
/* Left/right padding chosen so the grid content lines up with the Phases table
   (12px inset) despite the box's 3px left + 1px right borders; 4px top/bottom
   matches the phases row height. */
.mg-var-row{padding:4px 11px 4px 9px;font-size:var(--fs-12);cursor:pointer}
.mg-var-num-text{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:var(--fs-12);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-var-num-text.err{color:#B91C1C}
.mg-var-name-text{font-size:var(--fs-12);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-var-name-text.empty{color:var(--muted);font-style:italic}
.mg-var-fee{display:flex;align-items:center;justify-content:flex-end;gap:3px}
.mg-var-fee .mg-var-dollar{color:var(--muted);font-size:var(--fs-12)}
.mg-var-fee input{width:auto;flex:1;min-width:0;height:26px;font-size:var(--fs-12);font-family:inherit;text-align:right;
  padding:0 6px;border:1px solid var(--border);background:var(--bg);border-radius:3px;color:var(--text)}
.mg-var-fee input:focus{border-color:var(--text);outline:none}
.mg-var-fee input:disabled{background:transparent;color:var(--muted);cursor:not-allowed}
.mg-var-dash{color:var(--muted);font-size:var(--fs-12);text-align:right;width:100%}
.mg-var-invoiced{font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.mg-var-invoiced strong{color:var(--text);font-weight:500}
.mg-var-caret{background:none;border:none;cursor:pointer;color:var(--muted);font-size:var(--fs-11);padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .12s}
.mg-var-caret.open{transform:rotate(90deg)}
.mg-var-detail{border-top:1px solid var(--border);padding:10px;background:var(--surface)}
.mg-var-empty{font-size:var(--fs-12);color:var(--muted);padding:8px 0}
.pin-link{background:transparent;border:none;padding:0;margin:0;cursor:pointer;
  font:inherit;font-size:var(--fs-12);color:#2563EB;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.pin-link:hover{color:#1D4ED8}
.pin-modal-backdrop{position:fixed;inset:0;background:rgba(20,18,14,0.45);
  backdrop-filter:blur(3px);z-index:120;display:flex;align-items:center;
  justify-content:center;padding:24px}
.pin-modal{width:min(880px,calc(100vw - 48px));height:min(640px,calc(100vh - 48px));
  background:var(--bg,#FAFAF8);border-radius:10px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.28);display:flex;flex-direction:column}
.pin-modal-head{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--border,#E2E0DB);font-size:var(--fs-14);font-weight:600;color:var(--text,#1A1A18)}
.pin-modal-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-modal-x{border:none;background:transparent;font-size:var(--fs-20);line-height:1;
  color:var(--muted,#8C897F);cursor:pointer;padding:0 4px}
.pin-modal-x:hover{color:var(--text,#1A1A18)}
.pin-modal-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;border-bottom:1px solid var(--border,#E2E0DB);background:var(--surface,#F2F1EE)}
.pin-hint{font-size:var(--fs-12);color:var(--muted,#8C897F)}
.pin-coord{font-family:'IBM Plex Mono',monospace;font-size:var(--fs-11);color:var(--muted,#8C897F)}
.pin-seg{display:inline-flex;border:1px solid var(--border,#E2E0DB);border-radius:6px;overflow:hidden}
.pin-seg button{border:none;background:#fff;color:var(--text,#1A1A18);
  font:inherit;font-size:var(--fs-12);padding:5px 12px;cursor:pointer}
.pin-seg button + button{border-left:1px solid var(--border,#E2E0DB)}
.pin-seg button.on{background:var(--text,#1A1A18);color:#fff}
.pin-modal-map{flex:1;min-height:0;width:100%}
.pin-modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 16px;border-top:1px solid var(--border,#E2E0DB)}