/* ============================================================================
   css/my-account.css — "My NegosyoPlans" buyer dashboard design system.
   Shared by portal/index.html (login), portal/verify.html, portal/dashboard.html.
   Self-contained: own tokens + components (does not depend on design-system.css /
   portal.css). Everything is scoped under body.macct-page. Mobile-first; primary
   device is a 380px phone.
   ============================================================================ */

:root {
  /* ── Surfaces (warm cream — the redesign default) ── */
  --ma-bg:         #F4EDE0;
  --ma-card:       #FCF8EE;
  --ma-paper:      #FFFDF6;
  --ma-line:       #E4D9C0;
  --ma-line-soft:  #EDE4CE;
  /* ── Ink ── */
  --ma-ink:        #2C2818;
  --ma-ink-soft:   #837863;
  --ma-muted:      #837863;
  --ma-on-navy:    #ECE4D3;
  /* ── Gold ── */
  --ma-gold:       #D9A93C;
  --ma-gold-deep:  #B3841F;
  --ma-gold-hi:    #F6D98A;
  --ma-gold-soft:  #F5E9C9;
  --ma-gold-ink:   #7A5A18;
  /* ── Navy scale (sidebar/hero — preserved across themes) ── */
  --ma-navy-975:   #070E1A;
  --ma-navy-950:   #0A1424;
  --ma-navy-800:   #17294B;
  --ma-navy-a:     #17294B;
  --ma-navy-b:     #0A1424;
  --ma-navy:       var(--ma-navy-800);  /* R8a fix: bare --ma-navy was referenced by ~25 selected-chip/card rules but never defined → transparent bg. = --ma-navy-800/--ma-navy-a (#17294B), the sidebar/hero gradient's top navy; theme-invariant like the rest of the scale. */
  /* ── Semantic (theme-aware tints) ── */
  --ma-green:        #2E7D54;
  --ma-success:      #2E7D54;
  --ma-success-tint: #E5F0E7;
  --ma-success-ink:  #1C6B47;
  --ma-danger:       #B5483A;
  --ma-danger-tint:  #F8E8E3;
  --ma-danger-ink:   #8A2A20;
  /* ── Category / chart accents (theme-invariant, like gold/navy) ── */
  /* chip triad — "purple" re-toned to a brand SLATE (was off-brand #5B3E9C); name kept to
     avoid churning the .ma-*chip rules that reference it. */
  --ma-cat-purple: #4C5A82; --ma-cat-purple-ink: #3A4767; --ma-cat-purple-tint: #E2E6EF;
  --ma-cat-amber:  #C9772B; --ma-cat-amber-ink:  #8A4B12; --ma-cat-amber-tint:  #FDE7D6;
  --ma-cat-blue:   #2A5FA8; --ma-cat-blue-ink:   #1C4E80; --ma-cat-blue-tint:   #DCEBFB;
  /* Expense-donut palette — SINGLE SOURCE for the donut + legend (my-account.js references
     var(--ma-cat-<category>)). Brand-aligned: golds/ambers/clay + navies/steel/teal + warm
     neutral; no off-brand purple. Text legend always accompanies (never colour-only). */
  --ma-cat-restock:   #D9A93C;  --ma-cat-supplies:  #E08A3C;  --ma-cat-paperwork: #A65A3C;
  --ma-cat-loan:      #7C5E4E;  --ma-cat-transport: #3E8E7E;  --ma-cat-utilities: #24406E;
  --ma-cat-labor:     #4A72A8;  --ma-cat-other:     #9C8F79;  --ma-cat-un:        #C0453A;
  /* ── Radius · ease · shadow · fonts ── */
  --ma-r-xl: 24px; --ma-r-lg: 18px; --ma-r-md: 14px; --ma-r-sm: 10px;
  --ma-ease-out:    cubic-bezier(.22,.9,.3,1);
  --ma-ease-spring: cubic-bezier(.34,1.45,.42,1);
  --ma-shadow:       0 1px 2px rgba(44,40,24,.05), 0 4px 14px rgba(44,40,24,.06);
  --ma-shadow-card:  0 1px 2px rgba(44,40,24,.05), 0 4px 14px rgba(44,40,24,.06);
  --ma-shadow-float: 0 2px 6px rgba(44,40,24,.08), 0 12px 32px rgba(44,40,24,.12);
  --ma-serif:      'Fraunces', Georgia, serif;
  --ma-sans:       'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ma-mono:       'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Design-token foundation (Slice 1) — spacing scale + navy-surface recipe.
     Spacing defined now; broad application lands in later per-page slices. ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  /* Navy-surface recipe — ONE readable text set for every navy island (hero, next-bar,
     day-panel, install-hint). Contrast on the sub-card fill over navy (worst case,
     over navy-a): ink 8.46:1 · muted 5.83:1 · pos 5.95:1 · neg 5.47:1 — all ≥4.5. */
  --ma-navy-ink:   #ECE4D3;                /* primary text on navy */
  --ma-navy-muted: rgba(236,228,211,.78);  /* labels/secondary on navy */
  --ma-navy-pos:   #7BD3A3;                /* ₱-in / positive on navy */
  --ma-navy-neg:   #F1A79C;                /* ₱-out / negative on navy */
  --ma-navy-card:  rgba(255,255,255,.10);  /* sub-card fill on navy */
  --ma-navy-line:  rgba(236,228,211,.18);  /* hairline on navy */
}

/* ── SVG icon system (Redesign slice 2a) ── */
.ma-ic { width: 1.15em; height: 1.15em; vertical-align: -0.18em; flex: none; }
body.macct-page .ma-bn-ic .ma-ic { width: 22px; height: 22px; vertical-align: 0; }
body.macct-page .ma-bn-emoji { width: 22px; height: 22px; display: block; }
body.macct-page .ma-mnode-dot .ma-ic { width: 16px; height: 16px; }
body.macct-page .ma-sheet-x .ma-ic, body.macct-page .ma-del .ma-ic { width: 16px; height: 16px; vertical-align: -0.15em; }
body.macct-page .ma-lock .ma-ic { width: 13px; height: 13px; vertical-align: -0.1em; }
body.macct-page .ma-collapse-chev .ma-ic { width: 16px; height: 16px; }
/* Slice 2b: tab + sidebar-nav label icons (inline before the text span) */
body.macct-page .ma-tab .ma-ic { width: 17px; height: 17px; vertical-align: -0.2em; margin-right: 6px; }
body.macct-page .ma-nav a .ma-ic, body.macct-page .ma-nav-logout .ma-ic { width: 17px; height: 17px; vertical-align: -0.22em; margin-right: 9px; }
body.macct-page .ma-nav-dot .ma-ic { width: 11px; height: 11px; vertical-align: 0; }
body.macct-page .ma-lifetime-pill .ma-ic { width: 13px; height: 13px; vertical-align: -0.15em; margin-right: 5px; }

body.macct-page {
  margin: 0;
  font-family: var(--ma-sans);
  color: var(--ma-ink);
  background: var(--ma-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body.macct-page * { box-sizing: border-box; }
body.macct-page a { color: var(--ma-gold-deep); text-decoration: none; }
body.macct-page a:hover { text-decoration: underline; }

/* ---- buttons ---- */
.ma-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--ma-sans); font-weight: 700; font-size: 14px;
  padding: 11px 18px; border-radius: 10px; border: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, opacity .15s ease;
  text-decoration: none; line-height: 1;
}
.ma-btn:hover { text-decoration: none; }
.ma-btn-primary {
  color: var(--ma-card); background: linear-gradient(135deg, var(--ma-gold), var(--ma-gold-deep));
  box-shadow: 0 4px 14px rgba(184,148,43,.28);
}
.ma-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(184,148,43,.38); }
.ma-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.ma-btn-secondary {
  color: var(--ma-ink); background: transparent; border: 1.5px solid var(--ma-line);
}
.ma-btn-secondary:hover { border-color: var(--ma-gold); color: var(--ma-gold-deep); }
.ma-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
.ma-btn--full { width: 100%; }

/* ---- chips ---- */
.ma-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; line-height: 1;
}
.ma-chip--ok      { color: var(--ma-green);     background: rgba(47,191,139,.12); }
.ma-chip--pending { color: var(--ma-gold-deep); background: rgba(212,175,55,.14); }
.ma-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ma-dot--ok   { background: var(--ma-green); }
.ma-dot--gold { background: var(--ma-gold); }

/* ---- cards ---- */
.ma-card {
  background: var(--ma-card); border: 1px solid var(--ma-line);
  border-radius: 14px; box-shadow: var(--ma-shadow); padding: 17px;
}

/* ============================================================================
   AUTH PAGES (login + verify) — centered card on the light bg
   ============================================================================ */
.ma-auth {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 28px 18px;
}
.ma-auth-card {
  width: 100%; max-width: 420px; background: var(--ma-card);
  border: 1px solid var(--ma-line); border-radius: 16px;
  box-shadow: var(--ma-shadow); padding: 30px 26px; text-align: center;
}
.ma-auth-logo { margin-bottom: 18px; font-family: var(--ma-serif); font-size: 22px; font-weight: 700; }
.ma-auth-logo .lg-n { color: var(--ma-ink); }
.ma-auth-logo .lg-p { color: var(--ma-gold-deep); }
.ma-auth-icon { font-size: 34px; display: block; margin-bottom: 10px; }
.ma-auth-title { font-family: var(--ma-serif); font-size: 26px; font-weight: 700; margin: 0 0 8px; line-height: 1.15; }
.ma-auth-sub { color: var(--ma-muted); font-size: 14px; margin: 0 0 20px; }
.ma-field { text-align: left; margin-bottom: 16px; }
.ma-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.ma-input {
  width: 100%; font-family: var(--ma-sans); font-size: 15px;
  padding: 12px 13px; border-radius: 10px; border: 1.5px solid var(--ma-line);
  color: var(--ma-ink); background: var(--ma-card);
}
.ma-input:focus { outline: none; border-color: var(--ma-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.ma-input[readonly] { background: var(--ma-paper); color: var(--ma-muted); }
.ma-hint { font-size: 12px; color: var(--ma-muted); margin: 6px 0 0; }
.ma-auth-trust { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; margin-top: 18px; font-size: 11.5px; color: var(--ma-muted); }
.ma-alert { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13px; padding: 11px 13px; border-radius: 10px; margin-top: 14px; }
.ma-alert[hidden] { display: none; }   /* Oct 9 — display:flex above beat the UA [hidden] rule (since 431f3789), so the login error / rate-limit / join error showed at rest */
/* Oct 9 (C4, contrast) — login + counter-join messages only; text colour only (backgrounds/layout unchanged).
   Error #B5483A → #A8432F (4.46 → 5.03:1 on its tint); rate-limit #B3841F → #7a5d12 dark gold (2.90 → 5.32:1). */
#login-error, #join-error { color: #A8432F; }
#login-rate-limit { color: #7a5d12; }
.ma-alert--error { background: var(--ma-danger-tint); color: var(--ma-danger); }
.ma-alert--warn  { background: rgba(212,175,55,.14); color: var(--ma-gold-deep); }
.ma-alert--ok    { background: rgba(47,191,139,.12); color: var(--ma-success-ink); }
.ma-textbtn { background: none; border: 0; padding: 0; color: var(--ma-gold-deep); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.ma-spinner {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 14px;
  border: 3px solid var(--ma-line); border-top-color: var(--ma-gold);
  animation: ma-spin .8s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }
.ma-btn-spinner {
  width: 15px; height: 15px; border-radius: 50%; display: none;
  border: 2px solid rgba(255,255,255,.5); border-top-color: var(--ma-card); animation: ma-spin .7s linear infinite;
}
.ma-btn.loading .ma-btn-spinner { display: inline-block; }
.ma-btn.loading .ma-btn-text { opacity: .7; }

/* ============================================================================
   DASHBOARD SHELL — sidebar + main
   ============================================================================ */
.ma-shell { min-height: 100vh; }

.ma-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: linear-gradient(175deg, var(--ma-navy-a), var(--ma-navy-b));
  color: var(--ma-on-navy); position: sticky; top: 0; z-index: 40;
}
.ma-burger {
  width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(220,230,245,.2);
  background: rgba(255,255,255,.06); color: var(--ma-on-navy); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ma-burger span { display: block; width: 17px; height: 2px; background: currentColor; position: relative; }
.ma-burger span::before, .ma-burger span::after { content: ''; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor; }
.ma-burger span::before { top: -5px; } .ma-burger span::after { top: 5px; }
.ma-topbar-word { font-family: var(--ma-serif); font-size: 18px; font-weight: 700; }
.ma-topbar-word .lg-n { color: var(--ma-on-navy); } .ma-topbar-word .lg-p { color: var(--ma-gold-soft); }

/* ---- Phone header: one button (.ma-hdr-btn) → drawer (.ma-hdr-drawer) ----------------------
   Replaces the old topbar "Tips off" pill + "?" on <768px. The drawer only CALLS the existing
   language / Tips / Q&A handlers (see my-account.js → setupHeaderDrawer). Hidden ≥768px, where
   the sidebar-footer row carries these controls unchanged. Tokens only (6-theme safe). */
.ma-hdr-btn {
  flex: 0 0 auto; height: 44px; min-width: 44px; padding: 0 11px; border-radius: 12px;
  border: 1px solid rgba(220,230,245,.2); background: rgba(255,255,255,.06); color: var(--ma-on-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  font-family: var(--ma-sans); font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap;
}
.ma-hdr-btn:hover { border-color: rgba(220,230,245,.4); }
.ma-hdr-btn .ma-hdr-btn-car { font-size: 11px; opacity: .85; }
.ma-hdr-btn[aria-expanded="true"] { background: var(--ma-gold-soft); color: var(--ma-navy-b); border-color: var(--ma-gold); }
.ma-hdr-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(13,27,46,.18);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s;
}
/* visibility 0s (not interpolated) on open so the target is focusable in the first frame; a
   .16s delay on close keeps the fade-out visible before the element is hidden. */
.ma-hdr-scrim.open { opacity: 1; visibility: visible; transition: opacity .16s ease, visibility 0s linear 0s; }
.ma-hdr-drawer {
  position: fixed; top: 62px; right: 12px; z-index: 56; width: 300px; max-width: calc(100vw - 24px);
  background: var(--ma-card); color: var(--ma-ink); border: 1px solid var(--ma-line); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(13,27,46,.22); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.ma-hdr-drawer.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s; }
.ma-hdr-drawer::before {
  content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
  background: var(--ma-card); border-left: 1px solid var(--ma-line); border-top: 1px solid var(--ma-line);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
}
.ma-hdr-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 0; background: transparent; border-radius: 12px; cursor: pointer; text-align: left; color: var(--ma-ink);
  font-family: var(--ma-sans);
}
.ma-hdr-row + .ma-hdr-row { margin-top: 2px; }
button.ma-hdr-row:hover { background: var(--ma-bg); }
.ma-hdr-ic { flex: 0 0 auto; width: 22px; text-align: center; font-size: 17px; line-height: 1; }
.ma-hdr-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma-hdr-lbl { font-size: 14px; font-weight: 700; color: var(--ma-ink); }
.ma-hdr-sub { font-size: 11.5px; font-weight: 500; color: var(--ma-muted); }
.ma-hdr-chev { flex: 0 0 auto; color: var(--ma-muted); font-size: 18px; font-weight: 700; }
.ma-hdr-setup { flex: 0 0 auto; color: var(--ma-gold-ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
/* Language segmented pill — own light-theme styling; data-lang-btn drives apply()'s .active sync. */
.ma-hdr-seg { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; background: var(--ma-bg); border-radius: 10px; padding: 2px; }
.ma-hdr-seg-btn {
  min-width: 34px; min-height: 30px; padding: 5px 9px; border: 0; background: transparent; border-radius: 8px;
  font-family: var(--ma-sans); font-size: 12px; font-weight: 800; color: var(--ma-muted); cursor: pointer;
}
.ma-hdr-seg-btn:hover { color: var(--ma-ink); }
.ma-hdr-seg-btn.active { color: var(--ma-navy-b); background: var(--ma-gold); }
/* Tips switch (knob white on all themes for contrast against line/gold track). */
.ma-hdr-switch { flex: 0 0 auto; width: 40px; height: 24px; border-radius: 999px; background: var(--ma-line); position: relative; transition: background .15s ease; }
.ma-hdr-switch-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(13,27,46,.3); transition: left .15s ease; }
#ma-hdr-tips[aria-pressed="true"] .ma-hdr-switch { background: var(--ma-gold); }
#ma-hdr-tips[aria-pressed="true"] .ma-hdr-switch-dot { left: 19px; }
@media (min-width: 768px) { .ma-hdr-drawer, .ma-hdr-scrim { display: none !important; } }

/* ═══════════ Counter Device (S2) — counter shell (tokens only, 6-theme safe) ═══════════ */
body.ma-counter .ma-shell { display: flex; flex-direction: column; min-height: 100vh; }
body.ma-counter .ma-ctr-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ma-ctr-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(175deg, var(--ma-navy-a), var(--ma-navy-b)); color: var(--ma-on-navy); position: sticky; top: 0; z-index: 30; }
.ma-ctr-head-l { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ma-ctr-biz { font-family: var(--ma-serif); font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-ctr-pill { align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--ma-gold-soft); border: 1px solid rgba(220,230,245,.2); }
.ma-ctr-menu { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(220,230,245,.2); background: rgba(255,255,255,.06); color: var(--ma-on-navy); font-size: 20px; line-height: 1; cursor: pointer; }
.ma-ctr-main { flex: 1 1 auto; padding: 16px; padding-bottom: 88px; }   /* room for the bottom nav <768 */
/* Nav — bottom bar <768, left sidebar ≥768 */
.ma-ctr-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: var(--ma-card); border-top: 1px solid var(--ma-line); }
.ma-ctr-navitem { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 0; background: transparent; color: var(--ma-muted); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; min-width: 0; }
.ma-ctr-navitem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ma-ctr-navic { width: 22px; height: 22px; opacity: .7; }
.ma-ctr-navitem.is-on { color: var(--ma-gold-ink); }
.ma-ctr-navitem.is-on .ma-ctr-navic { opacity: 1; }
/* POS */
.ma-ctr-posgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.ma-ctr-postile { position: relative; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--ma-line); background: var(--ma-card); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.ma-ctr-postile.has-q { border-color: var(--ma-gold); background: var(--ma-gold-soft); }
.ma-ctr-postile-n { font-size: 13px; font-weight: 700; color: var(--ma-ink); }
.ma-ctr-postile-p { font-size: 12px; color: var(--ma-ink-soft); }
.ma-ctr-postile-q { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--ma-gold); color: var(--ma-navy-b); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.ma-ctr-cart { border: 1px solid var(--ma-line); border-radius: 14px; background: var(--ma-card); padding: 12px; }
.ma-ctr-cartline { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ma-line); }
.ma-ctr-cartline > span:first-child { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ma-ink); }
.ma-ctr-qty { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.ma-ctr-qty button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ma-line); background: var(--ma-bg); color: var(--ma-ink); font-size: 16px; cursor: pointer; }
.ma-ctr-linetot { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
.ma-ctr-carttot { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 0 4px; font-size: 20px; font-weight: 800; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
.ma-ctr-pay { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ma-ctr-change { margin: 0; font-size: 14px; font-weight: 700; color: var(--ma-gold-ink); }
.ma-ctr-poscount { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--ma-muted); }
/* Light forms + today list */
.ma-ctr-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ma-ctr-form .ma-btn { margin-top: 8px; }
.ma-ctr-today-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-ink-soft); margin: 0 0 6px; }
.ma-ctr-trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-card); margin-bottom: 6px; font-size: 13px; color: var(--ma-ink); }
.ma-ctr-trow b { font-variant-numeric: tabular-nums; }
.ma-ctr-empty { font-size: 13px; color: var(--ma-muted); padding: 8px 2px; }
/* Drawer reuses .ma-hdr-drawer; anchor it under the header on the counter */
.ma-ctr-drawer { top: 60px; }
/* Leave confirm sheet */
.ma-ctr-confirmsheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; max-width: calc(100vw - 32px); background: var(--ma-card); color: var(--ma-ink); border: 1px solid var(--ma-line); border-radius: 16px; box-shadow: 0 12px 32px rgba(13,27,46,.22); padding: 18px; z-index: 57; }
/* the bottom-sheet base (body.macct-page .ma-sheet: translateY(100%), full width) out-ranked the centring above — the
   Leave confirm sat half off-screen with its Leave button hidden on phones */
body.macct-page .ma-sheet.ma-ctr-confirmsheet { width: 300px; transform: translate(-50%, -50%); border-radius: 16px; padding: 18px; max-height: calc(100dvh - 32px); overflow: auto; }
.ma-ctr-confirmtxt { margin: 0 0 14px; font-size: 14px; color: var(--ma-ink); }
.ma-ctr-confirmbtns { display: flex; gap: 10px; }
.ma-ctr-confirmbtns .ma-btn { flex: 1 1 0; }
/* Removed-device full card */
.ma-ctr-removed { max-width: 360px; margin: 15vh auto; text-align: center; padding: 28px 22px; }
.ma-ctr-removed-ic { font-size: 44px; }
.ma-ctr-removed h2 { font-family: var(--ma-serif); font-size: 22px; color: var(--ma-ink); margin: 12px 0 8px; }
.ma-ctr-removed p { font-size: 14px; color: var(--ma-ink-soft); margin: 0 0 20px; }
@media (min-width: 768px) {
  body.ma-counter .ma-shell { flex-direction: row; }
  .ma-ctr-nav { position: static; flex-direction: column; width: 200px; flex: 0 0 200px; border-top: 0; border-right: 1px solid var(--ma-line); padding-top: 12px; }
  .ma-ctr-navitem { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 18px; font-size: 14px; }
  .ma-ctr-navic { width: 20px; height: 20px; }
  .ma-ctr-main { padding-bottom: 16px; }
  .ma-ctr-posgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1120px) { .ma-ctr-posgrid { grid-template-columns: repeat(4, 1fr); } }

/* ═══════════ Counter Device (S3) — owner Devices & access pane + nudges (tokens, 6-theme) ═══════════ */
body.macct-page .ma-dev { display: block; }
body.macct-page .ma-dev-intro { font-size: 14px; color: var(--ma-ink); margin: 4px 0 16px; line-height: 1.55; }
body.macct-page .ma-dev-setup { border: 1px solid var(--ma-line); border-radius: 14px; background: var(--ma-card); padding: 14px 16px; margin-bottom: 18px; }
body.macct-page .ma-dev-howto { border: 0; background: transparent; color: var(--ma-gold-ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; padding: 0 0 8px; }
body.macct-page .ma-dev-ol { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-dev-ol li { font-size: 13.5px; color: var(--ma-ink); line-height: 1.5; }
body.macct-page .ma-dev-ol li::marker { color: #2F6DB5; font-weight: 800; }
body.macct-page .ma-dev-addrow { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-dev-addrow .ma-dev-add { margin-top: 8px; align-self: flex-start; }
body.macct-page .ma-dev-code { margin-top: 14px; padding: 16px; border: 1px dashed #2F6DB5; border-radius: 12px; background: #DCE6F3; text-align: center; }
:root:not([data-theme="light"]) body.macct-page .ma-dev-code,
body.macct-page.ma-theme-dark .ma-dev-code { background: rgba(47,109,181,.14); }
body.macct-page .ma-dev-code-h { margin: 0 0 8px; font-size: 12.5px; color: var(--ma-ink-soft); }
body.macct-page .ma-dev-code-big { font-size: 40px; font-weight: 800; letter-spacing: .12em; color: #12233F; font-variant-numeric: tabular-nums; }
body.macct-page .ma-dev-code-exp { margin: 8px 0 12px; font-size: 12.5px; color: var(--ma-ink-soft); }
body.macct-page .ma-dev-countdown { font-weight: 800; color: #2F6DB5; font-variant-numeric: tabular-nums; }
body.macct-page .ma-dev-list { margin-bottom: 16px; }
body.macct-page .ma-dev-list-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-ink-soft); margin: 0 0 8px; }
body.macct-page .ma-dev-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-card); margin-bottom: 8px; }
body.macct-page .ma-dev-rowname { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-dev-rowseen { flex: 0 0 auto; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-dev-remove { flex: 0 0 auto; color: #8E2E22; font-weight: 700; }
body.macct-page .ma-dev-empty { font-size: 13px; color: var(--ma-muted); padding: 6px 2px; }
body.macct-page .ma-dev-foot { font-size: 12.5px; color: var(--ma-ink-soft); line-height: 1.55; border-top: 1px solid var(--ma-line); padding-top: 12px; }
/* Preview nudge card */
body.macct-page .ma-dev-prev { border: 1px solid var(--ma-line); border-left: 3px solid #2F6DB5; border-radius: 12px; background: var(--ma-card); padding: 14px 16px; margin-top: 12px; }
body.macct-page .ma-dev-prev-t { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-dev-prev-b { margin: 0 0 12px; font-size: 13px; color: var(--ma-ink-soft); line-height: 1.5; }
body.macct-page .ma-dev-prev--active .ma-dev-prev-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-dev-prev-chev { color: #2F6DB5; }
/* POS hint bar — floats above the sheet in the backdrop */
.ma-pos-devhint { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #12233F; color: #ECF2FB; font-size: 12.5px; }
.ma-pos-devhint-txt { flex: 1 1 auto; min-width: 0; }
.ma-pos-devhint-go { flex: 0 0 auto; color: var(--ma-gold-soft); font-weight: 700; }
.ma-pos-devhint-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; background: transparent; color: #ECF2FB; cursor: pointer; }
.ma-pos-devhint-x svg { width: 16px; height: 16px; }
/* Home devices stat pill (neutral People-blue) */
body.ma-home-pane .ma-tile-pill--ok { background: rgba(47,109,181,.14); color: #2F6DB5; }

/* MATTHEW SYSTEM mark in the mobile top bar (≤768px only). Static, not in the i18n
   table. ≥900px the desktop top-right pill carries the mark, and the topbar only
   shows the mark ≤768px, so it never renders twice. */
.ma-topbar-matthew { display: none; }
@media (max-width: 768px) {
  .ma-topbar-word { display: none; }
  .ma-topbar-matthew { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  .ma-tb-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--ma-gold); box-shadow: 0 0 7px rgba(234,197,104,.9); }
  .ma-tb-mtext { font-size: 12.5px; letter-spacing: 2.4px; font-weight: 700; color: var(--ma-gold); line-height: 1; white-space: nowrap; }
}
/* Very narrow phones: shave letter-spacing (not font-size) so it never wraps / pushes the burger. */
@media (max-width: 360px) {
  .ma-tb-mtext { letter-spacing: 1.6px; }
}

.ma-sidebar {
  background: linear-gradient(175deg, var(--ma-navy-a), var(--ma-navy-b));
  color: var(--ma-on-navy); display: flex; flex-direction: column; padding: 24px 18px;
}
/* Sidebar gold-reduction: gold now marks ONLY true active/selected states + focus.
   Avatar frame, name, wordmark, badge, dots, SARILI tag → neutral cool tones on navy.
   Typography A: full sans (Figtree) — no serif in the sidebar. */
.ma-avatar {
  width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(220,230,245,.20);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ma-sans); font-size: 26px; font-weight: 700; color: var(--ma-on-navy);
  background: rgba(255,255,255,.06); margin-bottom: 12px;
}
.ma-side-name { font-family: var(--ma-sans); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ma-on-navy); line-height: 1.15; margin: 0; word-break: break-word; }
.ma-side-email { font-size: 12px; color: rgba(220,230,245,.62); margin: 3px 0 22px; word-break: break-word; }
.ma-nav { display: flex; flex-direction: column; gap: 3px; }
/* Prefixed with body.macct-page so the neutral inactive colour beats the global
   `body.macct-page a { color: gold-deep }` (which was tinting inactive nav gold).
   Active stays gold and wins via the extra .active class. */
body.macct-page .ma-nav a {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600;
  color: rgba(220,230,245,.82); padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
body.macct-page .ma-nav a:hover { background: rgba(255,255,255,.05); text-decoration: none; color: var(--ma-on-navy); }
body.macct-page .ma-nav a.active { background: rgba(212,175,55,.14); color: var(--ma-gold-soft); box-shadow: inset 3px 0 0 var(--ma-gold); }
.ma-side-foot { margin-top: auto; padding-top: 22px; }
/* D1: footer profile card — BASE scope (mobile drawer + desktop). 36px circle, name line, tier on its
   own 11px muted line (matches desktop H6). Desktop overrides the avatar to 30px in the ≥768 block. */
body.macct-page .ma-side-profile { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 12px 0 4px; }
body.macct-page .ma-side-profile:hover .ma-side-profile-name { color: var(--ma-gold); }
body.macct-page .ma-side-profile-av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: var(--ma-gold-soft); color: #0D1B2E; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--ma-sans); overflow: hidden; }
body.macct-page .ma-side-profile-av .ma-avatar-img { width: 100%; height: 100%; object-fit: cover; }
body.macct-page .ma-side-profile-name { display: block; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.2; }
body.macct-page .ma-side-profile-tier { display: block; margin-top: 1px; font-size: 11px; color: #8fa0ba; line-height: 1.2; }
/* D3: compact mobile drawer header (avatar 40px + name/email stacked in one row); ≤120px tall.
   .ma-side-id is desktop-hidden, so this is mobile-only. */
@media (max-width: 767px) {
  body.macct-page .ma-side-id { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin-bottom: 8px; }
  body.macct-page .ma-side-id .ma-avatar { grid-row: 1 / 3; width: 40px; height: 40px; font-size: 16px; margin-bottom: 0; }
  body.macct-page .ma-side-name { grid-column: 2; align-self: end; font-size: 15px; margin: 0; }
  body.macct-page .ma-side-email { grid-column: 2; align-self: start; margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* D2: pinned "Current" business at the top of MY BUSINESSES. */
body.macct-page .ma-cat--current { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(220,230,245,.10); }
body.macct-page .ma-cat-current-lbl { margin: 0 0 2px; padding: 0 12px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(220,230,245,.42); }
/* D4: two-line drawer row (store name + blueprint-title sub); one line each, ellipsis. */
body.macct-page .ma-biz-rowlabel { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow: hidden; }
body.macct-page .ma-biz-rowmain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.macct-page .ma-biz-rowsub { font-size: 11px; color: rgba(220,230,245,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.ma-side-word { font-family: var(--ma-sans); font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.ma-side-word .lg-n { color: var(--ma-on-navy); } .ma-side-word .lg-p { color: var(--ma-on-navy); }
.ma-lifetime-pill {
  display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1.35;
  padding: 6px 12px; border-radius: 10px; max-width: 100%;
  border: 1px solid rgba(220,230,245,.20); color: rgba(220,230,245,.66);
}
/* Longer copy wraps to (at most) two lines inside the pill — keep whole words, keep
   the star fixed at the left, stay within the ~202px sidebar without overflow. */
.ma-lifetime-pill .ma-ic { flex-shrink: 0; }
.ma-lifetime-pill > span:last-child { min-width: 0; }
/* Plan-label fix: both plan elements start hidden and show only once the entitlement payload names the plan. */
body.macct-page .ma-side-profile-tier[hidden], .ma-lifetime-pill[hidden] { display: none; }
.ma-side-logout {
  margin-top: 14px; background: none; border: 1px solid rgba(220,230,245,.2);
  color: rgba(220,230,245,.8); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 9px; cursor: pointer; width: 100%; text-align: left;
}
.ma-side-logout:hover { background: rgba(255,255,255,.05); color: var(--ma-on-navy); }

/* F5: flex column so a short page (day-zero Home) pins .ma-foot to the bottom,
   clear of the floating botnav, instead of floating mid-screen. */
.ma-main { padding: 14px 12px 24px; display: flex; flex-direction: column; min-height: 100dvh; }
body.macct-page .ma-foot { margin-top: auto; }
/* Portal pinch-zoom lock (dashboard only): allow panning, block gesture/double-tap
   zoom. Reinforces the viewport meta (which iOS Safari partially ignores). */
body.macct-page { touch-action: pan-x pan-y; }
.ma-greeting { font-family: var(--ma-serif); font-size: 30px; font-weight: 700; margin: 0 0 4px; line-height: 1.1; }
.ma-greeting .ma-name { color: var(--ma-gold); }
.ma-greeting-sub { color: var(--ma-muted); font-size: 14px; margin: 0 0 8px; }

.ma-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.ma-stat { flex: 1 1 150px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow); padding: 14px 16px; }
.ma-stat-label { font-size: 11.5px; font-weight: 600; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .04em; }
.ma-stat-value { font-family: var(--ma-serif); font-size: 24px; font-weight: 700; margin-top: 2px; }

.ma-section-title { font-family: var(--ma-serif); font-size: 22px; font-weight: 700; margin: 6px 0 4px; }
.ma-section-sub { color: var(--ma-muted); font-size: 13.5px; margin: 0 0 16px; }

/* ---- blueprint cards ---- */
.ma-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ma-bp-card { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; box-shadow: var(--ma-shadow); padding: 17px; }
.ma-bp-head { display: flex; align-items: flex-start; gap: 12px; }
.ma-bp-icon { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.ma-bp-name { font-family: var(--ma-serif); font-size: 20px; font-weight: 700; margin: 0; line-height: 1.15; }
.ma-bp-date { font-size: 12.5px; color: var(--ma-muted); margin: 3px 0 0; }
.ma-license {
  margin: 13px 0; padding: 9px 12px; border-radius: 9px;
  background: var(--ma-paper); border: 1px dashed var(--ma-line);
  font-family: var(--ma-mono);
  font-size: 13px; color: var(--ma-ink); letter-spacing: .02em; word-break: break-all;
}
.ma-license-label { font-family: var(--ma-sans); font-size: 10.5px; font-weight: 700; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 2px; }
.ma-perso { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 12px 0; }
.ma-perso--ok { color: var(--ma-success-ink); } .ma-perso--pending { color: var(--ma-gold-deep); }
.ma-bp-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.ma-bp-actions .ma-btn { flex: 1 1 auto; }
.ma-counts { font-size: 12px; color: var(--ma-muted); margin: 10px 0 0; }
.ma-bp-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--ma-line); font-size: 12.5px; }

/* bundle grouping */
.ma-bundle { border: 1px solid var(--ma-line); border-radius: 12px; overflow: hidden; box-shadow: var(--ma-shadow); }
.ma-bundle-head { background: linear-gradient(175deg, var(--ma-navy-a), var(--ma-navy-b)); color: var(--ma-gold-soft); font-family: var(--ma-serif); font-size: 15px; font-weight: 700; padding: 11px 16px; }
.ma-bundle-body { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; background: var(--ma-card); }
.ma-bundle-body .ma-bp-card { box-shadow: none; }

/* ---- access disclosure ---- */
.ma-disclosure { background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.4); border-radius: 14px; padding: 18px; margin-top: 26px; }
.ma-disclosure-title { font-family: var(--ma-serif); font-size: 19px; font-weight: 700; color: var(--ma-gold-deep); margin: 0 0 12px; }
.ma-disclosure-line { display: flex; gap: 9px; font-size: 13.5px; margin: 9px 0; line-height: 1.5; }
.ma-disclosure-line .ma-check { color: var(--ma-green); font-weight: 800; flex: 0 0 auto; }
.ma-disclosure-fine { font-size: 12.5px; color: var(--ma-muted); font-style: italic; margin: 13px 0 0; padding-top: 12px; border-top: 1px solid rgba(212,175,55,.25); }
.ma-transparency { font-size: 11.5px; color: var(--ma-muted); margin: 12px 2px 0; line-height: 1.5; }

/* ---- empty / skeleton ---- */
.ma-empty { text-align: center; padding: 30px 16px; color: var(--ma-muted); }
.ma-empty-icon { font-size: 34px; display: block; margin-bottom: 8px; }
.ma-empty-title { font-family: var(--ma-serif); font-size: 20px; font-weight: 700; color: var(--ma-ink); margin: 0 0 4px; }
.ma-skel { background: linear-gradient(90deg, var(--ma-line) 25%, var(--ma-paper) 37%, var(--ma-line) 63%); background-size: 400% 100%; animation: ma-shimmer 1.3s ease infinite; border-radius: 8px; }
@keyframes ma-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- orders table / account (reskinned, reused endpoints) ---- */
.ma-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ma-table th { text-align: left; color: var(--ma-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--ma-line); }
.ma-table td { padding: 11px 10px; border-bottom: 1px solid var(--ma-line); }
.ma-order-card { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow); padding: var(--sp-4); margin-bottom: 10px; }
.ma-order-card .nm { font-family: var(--ma-serif); font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.ma-order-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--ma-muted); align-items: center; }

/* ---- panels ---- */
.ma-panel { display: none; } .ma-panel.active { display: block; }

/* ---- footer ---- */
.ma-foot { text-align: center; font-size: 12px; color: var(--ma-muted); padding: 20px; }
.ma-foot a { color: var(--ma-muted); }
/* POWERED BY LINTEJAS — static credit sub-line under the © row, all widths (fixed
   brand mark, not in the i18n table). Muted footer tone at ~70% opacity, fainter. */
.ma-credit { display: block; text-align: center; margin-top: 6px; font-size: 9px; letter-spacing: 2.4px; font-weight: 600; color: var(--ma-muted); opacity: .7; }
/* On the business view (mobile), the fixed bottom nav overlays the viewport bottom —
   give the shared footer extra bottom clearance so the credit is never hidden behind it. */
@media (max-width: 767px) {
  body.macct-page #view-business.active ~ .ma-foot { padding-bottom: calc(20px + 76px + env(safe-area-inset-bottom)); }
}

/* ---- toast (reuses portal.js .portal-toast* classes) ---- */
#portal-toast-container { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 380px; }
.portal-toast { background: var(--ma-ink); color: var(--ma-card); font-size: 13px; padding: 12px 15px; border-radius: 10px; box-shadow: 0 8px 24px rgba(18,35,63,.25); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.portal-toast--in { opacity: 1; transform: none; }
.portal-toast--error { background: var(--ma-danger); }
.portal-toast--success { background: var(--ma-success-ink); }

/* ---- drawer overlay (mobile) ---- */
.ma-overlay { position: fixed; inset: 0; background: rgba(6,12,24,.5); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ma-overlay.open { opacity: 1; pointer-events: auto; }

/* ============================================================================
   RESPONSIVE — mobile-first drawer; ≥768px static sidebar
   ============================================================================ */
@media (max-width: 767px) {
  .ma-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 84vw;
    z-index: 50; transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto;
  }
  .ma-sidebar.open { transform: none; }
}
@media (min-width: 768px) {
  .ma-topbar { display: none; }
  .ma-overlay { display: none; }
  .ma-shell { display: grid; grid-template-columns: 238px 1fr; }
  /* Fixed-height flex column with 3 zones: header pinned top, nav scrolls, footer
     pinned bottom. min-height:0 on the nav is what lets a flex child scroll instead
     of overflowing the 100vh sidebar (the many-businesses "below the fold" bug). */
  .ma-sidebar { position: sticky; top: 0; height: 100vh; }
  .ma-sidebar .ma-side-id { flex-shrink: 0; }
  .ma-sidebar .ma-side-foot { flex-shrink: 0; }
  .ma-sidebar .ma-nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(220,230,245,.28) transparent;
    padding-right: 4px; margin-right: -4px; /* keep scrollbar off the label text */
  }
  .ma-sidebar .ma-nav::-webkit-scrollbar { width: 7px; }
  .ma-sidebar .ma-nav::-webkit-scrollbar-track { background: transparent; }
  .ma-sidebar .ma-nav::-webkit-scrollbar-thumb { background: rgba(220,230,245,.25); border-radius: 4px; }
  .ma-sidebar .ma-nav::-webkit-scrollbar-thumb:hover { background: rgba(220,230,245,.40); }
  /* Readable content cap, CENTERED within the track right of the sidebar so the
     surplus splits evenly left/right instead of piling up on the right (~30% gap
     at 1440px+). Cards stay 2-col — the column is not stretched full-width. */
  .ma-main { padding: 34px 40px 56px; width: 100%; max-width: 1180px; margin-inline: auto; }
  .ma-grid { grid-template-columns: repeat(2, 1fr); }
  .ma-bundle-body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .ma-main { padding: 12px 10px 20px; }
  .ma-greeting { font-size: 26px; }
  .ma-bp-actions .ma-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ma-sidebar, .ma-overlay, .ma-btn, .portal-toast { transition: none; }
  .ma-spinner, .ma-btn-spinner, .ma-skel { animation: none; }
}

/* ============================================================================
   EXECUTION JOURNEY — milestone path + weekly checklist + notes
   ============================================================================ */
.ma-journey-soon { font-size: 12.5px; color: var(--ma-muted); font-style: italic; margin: 12px 0 0; }
.ma-journey { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ma-line); }
.ma-journey-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ma-prog-bar { flex: 1 1 auto; height: 8px; border-radius: 99px; background: var(--ma-line); overflow: hidden; }
.ma-prog-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ma-gold), var(--ma-gold-deep)); border-radius: 99px; transition: width .3s ease; }
.ma-prog-label { font-size: 12px; font-weight: 700; color: var(--ma-gold-deep); flex: 0 0 auto; }

.ma-mpath { list-style: none; margin: 0; padding: 0; }
.ma-mnode { position: relative; }
.ma-mnode::before { content: ''; position: absolute; left: 15px; top: 38px; bottom: -2px; width: 2px; background: var(--ma-line); z-index: 0; }
.ma-mnode:last-child::before { display: none; }
.ma-mnode.done::before { background: var(--ma-gold); }
/* step-head: the whole clickable row (dot + title + chevron) */
.ma-mnode-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 0; background: transparent; border: none; font: inherit; color: var(--ma-ink); text-align: left; cursor: pointer; }
.ma-mnode-dot { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ma-serif); font-weight: 700; font-size: 15px; background: var(--ma-card); border: 2px solid var(--ma-line); color: var(--ma-muted); z-index: 1; }
.ma-mnode.done .ma-mnode-dot { background: var(--ma-gold); border-color: var(--ma-gold); color: var(--ma-card); }
.ma-mnode.current .ma-mnode-dot { border-color: var(--ma-gold); color: var(--ma-gold-deep); box-shadow: 0 0 0 4px rgba(212,175,55,.22); }
.ma-mnode-htitle { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.ma-mnode.current .ma-mnode-htitle { color: var(--ma-gold-deep); }
.ma-mnode-head:hover .ma-mnode-htitle { color: var(--ma-gold-deep); }
.ma-mnode-chev { flex: 0 0 auto; color: var(--ma-muted); display: inline-flex; transition: transform .25s var(--ma-ease-out); }
.ma-mnode.is-open .ma-mnode-chev { transform: rotate(180deg); }
.ma-mnode-chev .ma-ic { width: 18px; height: 18px; }
/* step-body: grid-rows collapse (0fr↔1fr) — natural height, never clips dynamic note/expense editors */
.ma-mnode-bodywrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ma-ease-out); }
.ma-mnode.is-open .ma-mnode-bodywrap { grid-template-rows: 1fr; }
.ma-mnode-body { overflow: hidden; min-height: 0; }
.ma-mnode-inner { padding: 2px 0 12px 44px; }
.ma-mnode-desc { font-size: 13px; color: var(--ma-muted); margin: 0 0 6px; line-height: 1.45; }
.ma-mnode-ref { font-size: 12px; color: var(--ma-gold-deep); margin: 0 0 6px; }
.ma-mark-btn { margin-top: 4px; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--ma-line); background: transparent; color: var(--ma-ink); cursor: pointer; }
.ma-mark-btn.is-done { border-color: var(--ma-green); color: var(--ma-green); background: rgba(47,191,139,.1); }
@media (prefers-reduced-motion: reduce) {
  .ma-mnode-bodywrap { transition: none; }
  .ma-mnode-chev { transition: none; }
}

.ma-weekly-title { font-family: var(--ma-serif); font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
.ma-weekly { list-style: none; margin: 0; padding: 0; }
.ma-witem { padding: 9px 0; border-top: 1px solid var(--ma-line); }
.ma-wcheck { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; position: relative; }
.ma-wcheck input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ma-wbox { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ma-line); margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.ma-wcheck input:checked + .ma-wbox { background: var(--ma-gold); border-color: var(--ma-gold); }
.ma-wcheck input:checked + .ma-wbox::after { content: '✓'; color: var(--ma-card); font-size: 13px; font-weight: 800; }
.ma-wtext { display: flex; flex-direction: column; min-width: 0; }
.ma-wtitle { font-weight: 600; font-size: 13.5px; }
.ma-witem.done .ma-wtitle { text-decoration: line-through; color: var(--ma-muted); }
.ma-wdesc { font-size: 12.5px; color: var(--ma-muted); }

.ma-note-slot { margin-top: 8px; }
/* Journey checklists (Planning + Weekly, shared .ma-witem card) — one aligned column: the checkbox sits fully
   inside the card, clear of the 5px green inset bar; title, description, "Open in your blueprint" and "Add note"
   share one left edge (box 20px + gap 10px); consistent right margin; the blueprint button fits its text and
   never stretches to the item width or touches the edge. Styling only. */
.ma-weekly > .ma-witem { padding: 10px 12px 10px 17px; }
.ma-weekly > .ma-witem > .ma-note-slot { margin-left: 30px; }
.ma-weekly .ma-wtext > .ma-bp-link { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; }
.ma-note-add { background: none; border: 0; padding: 0; color: var(--ma-gold-deep); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
/* Journey list tap targets: "Mark as done" (33px) and "Add note" (19px text link) get an invisible hit area of at
   least 44 × 44px, centred on the control — same look, same layout. */
.ma-mark-btn, .ma-note-add { position: relative; }
.ma-mark-btn::before, .ma-note-add::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.ma-note { border-left: 3px solid var(--ma-gold); background: var(--ma-card); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.ma-note-text { margin: 0; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.ma-note-meta { margin: 4px 0 0; font-size: 11px; color: var(--ma-muted); }
.ma-note-actions { display: flex; gap: 12px; margin-top: 6px; align-items: center; }
.ma-note-edit, .ma-note-clear { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--ma-muted); cursor: pointer; text-decoration: underline; }
.ma-note-ta { width: 100%; font-family: var(--ma-sans); font-size: 13px; padding: 9px 11px; border-radius: 8px; border: 1.5px solid var(--ma-line); resize: vertical; min-height: 64px; box-sizing: border-box; }
.ma-note-ta:focus { outline: none; border-color: var(--ma-gold); }
.ma-note-save { padding: 7px 14px; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MONEY LOGGERS (Slice 3) — Gastos + Benta panels inside the journey section
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-mlog {
  margin-top: 18px;
  padding: 16px;
  background: var(--ma-card);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  box-shadow: var(--ma-shadow);
}
body.macct-page .ma-mlog-title {
  margin: 0 0 4px;
  font-family: var(--ma-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ma-ink);
}
body.macct-page .ma-mlog-help {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--ma-muted);
}
/* collapsed resting state: the entry form is hidden until ＋ is tapped
   (grid display would otherwise beat the [hidden] attribute) */
body.macct-page .ma-mlog-form[hidden] { display: none; }
body.macct-page .ma-mlog-addbtn {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px dashed var(--ma-gold); border-radius: 10px; background: transparent;
  color: var(--ma-gold-deep); font-family: var(--ma-sans); font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
body.macct-page .ma-mlog-addbtn:hover { background: var(--ma-gold-soft); }
body.macct-page .ma-mlog-addbtn[hidden] { display: none; }
body.macct-page .ma-ops-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle; font-family: var(--ma-sans);
  font-size: 0.62rem; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
  background: var(--ma-danger); color: var(--ma-card); text-transform: uppercase;
}
body.macct-page .ma-mlog-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
body.macct-page .ma-field { display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-field > label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ma-muted);
  text-transform: uppercase;
}
body.macct-page .ma-mlog-form input[type="number"],
body.macct-page .ma-mlog-form input[type="text"],
body.macct-page .ma-mlog-form input[type="date"],
body.macct-page .ma-mlog-form select {
  width: 100%;
  min-height: 44px;               /* thumb-friendly */
  padding: 10px 12px;
  font-family: var(--ma-sans);
  font-size: 0.95rem;
  color: var(--ma-ink);
  background: var(--ma-card);
  border: 1.5px solid var(--ma-line);
  border-radius: 9px;
  -webkit-appearance: none;
  appearance: none;
}
body.macct-page .ma-mlog-form input:focus,
body.macct-page .ma-mlog-form select:focus {
  outline: none;
  border-color: var(--ma-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}
body.macct-page .ma-check-un {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ma-ink);
  cursor: pointer;
}
body.macct-page .ma-check-un input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--ma-danger); }
body.macct-page .ma-mlog-save { width: 100%; }

/* entry list */
body.macct-page .ma-mlog-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
body.macct-page .ma-mlog-empty { margin: 4px 0; font-size: 0.85rem; color: var(--ma-muted); font-style: italic; }
body.macct-page .ma-mrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'chip amt amt' 'desc desc desc' 'day day day';
  gap: 3px 8px;
  align-items: center;
  padding: 9px 11px;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 9px;
}
body.macct-page .ma-mrow--sale { grid-template-columns: 1fr auto; grid-template-areas: 'desc amt' 'day amt'; }
body.macct-page .ma-mchip {
  grid-area: chip;
  justify-self: start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ma-gold-soft);
  color: var(--ma-gold-ink);
}
body.macct-page .ma-mchip--restock   { background: var(--ma-cat-blue-tint); color: var(--ma-cat-blue-ink); }
body.macct-page .ma-mchip--utilities { background: var(--ma-cat-purple-tint); color: var(--ma-cat-purple-ink); }
body.macct-page .ma-mchip--transport { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-mchip--labor     { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-mrow-desc { grid-area: desc; font-size: 0.9rem; color: var(--ma-ink); word-break: break-word; }
body.macct-page .ma-mrow-muted { color: var(--ma-muted); }
body.macct-page .ma-mtag-un {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ma-danger-tint);
  color: var(--ma-danger);
  vertical-align: middle;
}
/* Ani ①b — cycle tag on a tagged gastos row */
body.macct-page .ma-mtag-cyc {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ma-success-tint);
  color: var(--ma-success-ink);
  vertical-align: middle;
}
body.macct-page .ma-mrow-day { grid-area: day; font-size: 0.74rem; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-mrow-amt {
  grid-area: amt;
  justify-self: end;
  font-family: var(--ma-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ma-ink);
  font-variant-numeric: tabular-nums;
}
body.macct-page .ma-mrow-amt--pos { color: var(--ma-green); }
/* RTS "Mark returned" moved under the amount (right-aligned small chip) — grid 'amt' column. */
body.macct-page .ma-mrow-amtcol { grid-area: amt; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; }
body.macct-page .ma-mrow-rts { font-size: 0.68rem; }
body.macct-page .ma-mrow-rts .ma-rts-btn { font-size: 0.68rem; font-weight: 600; }
body.macct-page .ma-mlog-more { margin-top: 2px; align-self: flex-start; }

/* totals */
body.macct-page .ma-mlog-totals { border-top: 1px dashed var(--ma-line); padding-top: 10px; }
body.macct-page .ma-mlog-total { margin: 0; font-size: 0.9rem; color: var(--ma-ink); }
body.macct-page .ma-mlog-total strong { font-family: var(--ma-serif); font-size: 1.1rem; }
body.macct-page .ma-mlog-saved { margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--ma-danger); }
/* Slice ③ — payment-mode split (display-only; sums unchanged) */
body.macct-page .ma-pm-split { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ma-muted); }
body.macct-page .ma-pm-split-lbl { font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-pm-part { white-space: nowrap; }
body.macct-page .ma-pm-part--utang { color: var(--ma-danger); font-weight: 600; }
body.macct-page .ma-pm-part--utang em { font-style: normal; font-weight: 400; opacity: 0.85; }
body.macct-page .ma-pm-part--untagged { opacity: 0.7; }
body.macct-page .ma-pm-chip { display: inline-block; margin-left: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; background: var(--ma-navy-card, rgba(0,0,0,.06)); color: var(--ma-muted); vertical-align: middle; }
body.macct-page .ma-pm-chip--gcash { background: rgba(0,116,255,.12); color: #0a5bd6; }
body.macct-page .ma-pm-chip--maya { background: rgba(0,178,137,.14); color: var(--ma-success-ink); }
body.macct-page .ma-pm-chip--utang { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-pm-chip--wholesale { background: rgba(90,62,148,.12); color: #5b3e94; }
body.macct-page .ma-pm-chip--ch { background: rgba(214,102,0,.12); color: #b35400; }   /* Ⓗa channel */
/* Ⓗb — returned/RTS sale: struck-through amount + muted row + red chip */
body.macct-page .ma-pm-chip--rts { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-mrow--rts { opacity: 0.72; }
body.macct-page .ma-rts-amt { text-decoration: line-through; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-rts-btn { color: var(--ma-danger); font-weight: 600; }
/* Ⓕc — retail/wholesale tier toggle in the benta catalog */
body.macct-page .ma-bc-tierrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
body.macct-page .ma-bc-tierrow[hidden] { display: none; }
body.macct-page .ma-bc-tier { font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 9px; border: 1.5px solid var(--ma-line); background: var(--ma-card); color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-bc-tier.is-on { background: var(--ma-gold); border-color: var(--ma-gold); color: var(--ma-gold-ink); }
/* Booking-open-but-no-services caution — self-contained amber box (own bg+text so it
   reads on every theme). Class display:flex must beat UA [hidden]{display:none}, so the
   hidden state is restated explicitly. */
body.macct-page .ma-bk-warn { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 9px 12px; background: #FBEFD6; border: 1px solid #E4B54A; border-radius: 10px; font-size: 0.82rem; line-height: 1.4; color: #7A5A12; }
body.macct-page .ma-bk-warn[hidden] { display: none; }
body.macct-page .ma-bk-warn-ic { flex: none; line-height: 1.4; }
body.macct-page .ma-bk-warn-txt { flex: 1 1 150px; min-width: 0; }
body.macct-page .ma-bk-warn-goto { flex: none; color: #8A5A12; font-weight: 700; white-space: nowrap; }
/* Clients pane sub-view pills — Bookings (default) / Customize Page; active = gold-filled */
body.macct-page .ma-bk-subtabs { display: flex; gap: 6px; margin-bottom: 12px; }
body.macct-page .ma-bk-subtab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-bk-subtab:hover { border-color: var(--ma-gold-soft); color: var(--ma-ink); }
body.macct-page .ma-bk-subtab.is-on { background: linear-gradient(135deg, var(--ma-gold), var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-bk-badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; border-radius: 999px; background: var(--ma-danger); color: #fff; }
body.macct-page .ma-bk-badge[hidden] { display: none; }
body.macct-page .ma-bk-subtab.is-on .ma-bk-badge { background: rgba(0,0,0,.24); color: #fff; }
body.macct-page .ma-bk-view[hidden] { display: none; }

/* tablet+ : two-column form for amount + category */
@media (min-width: 560px) {
  body.macct-page .ma-mlog-form { grid-template-columns: 1fr 1fr; align-items: end; }
  body.macct-page .ma-field--wide,
  body.macct-page .ma-check-un,
  body.macct-page .ma-mlog-save { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOURNEY / RESULTS TABS + RESULTS VIEW (Slice 3)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Segmented tab row: cream track holding pills; overflow scrolls horizontally
   (never squeezes) so 8+ module tabs stay tappable. Active = navy pill, gold icon. */
body.macct-page .ma-tabs {
  display: flex; gap: 4px; margin-bottom: 10px; padding: 4px;
  background: var(--ma-bg); border: 1px solid var(--ma-line); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.macct-page .ma-tabs::-webkit-scrollbar { display: none; }
body.macct-page .ma-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  font-family: var(--ma-sans);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ma-muted);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: color .18s var(--ma-ease-out), background .18s var(--ma-ease-out);
}
body.macct-page .ma-tab:hover { color: var(--ma-ink); }
body.macct-page .ma-tab.active {
  color: var(--ma-on-navy);
  background: linear-gradient(135deg, var(--ma-navy-a), var(--ma-navy-b));
  box-shadow: var(--ma-shadow);
}
body.macct-page .ma-tab.active .ma-ic { color: var(--ma-gold); }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-tab { transition: none; } }

/* segmented period control */
body.macct-page .ma-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 999px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.macct-page .ma-seg-btn {
  flex: 1 0 auto;
  min-height: 38px;
  padding: 7px 14px;
  font-family: var(--ma-sans);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ma-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
body.macct-page .ma-seg-btn.active {
  color: var(--ma-gold-ink);
  background: linear-gradient(135deg, var(--ma-gold-soft), var(--ma-gold));
  box-shadow: 0 1px 3px rgba(184, 148, 43, .35);
}

/* result cards */
/* Path A lapse notice at the top of Results (demoted from the old wholesale summary card). */
body.macct-page .ma-lapse-notice { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); }
body.macct-page .ma-lapse-notice-txt { margin: 0 0 10px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ma-gold-ink); }
body.macct-page .ma-lapse-notice-fig { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 12.5px; color: var(--ma-ink-soft); }
body.macct-page .ma-lapse-notice-fig strong { font-family: var(--ma-mono); font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-lapse-notice-fig strong.pos { color: var(--ma-success-ink); }
body.macct-page .ma-lapse-notice-fig strong.neg { color: var(--ma-danger); }
body.macct-page .ma-lapse-renew { width: 100%; }
body.macct-page .ma-rcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
body.macct-page .ma-rcard {
  padding: 13px 14px;
  background: var(--ma-card);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  box-shadow: var(--ma-shadow);
}
body.macct-page .ma-rcard-lbl { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ma-muted); }
body.macct-page .ma-rcard-val { display: block; margin-top: 4px; font-family: var(--ma-serif); font-size: 1.5rem; font-weight: 600; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
/* Slice ④ — best-sellers + realized-margin card (display-only) */
body.macct-page .ma-bs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body.macct-page .ma-bs-sort { display: inline-flex; gap: 4px; flex-shrink: 0; }
body.macct-page .ma-bs-sortbtn { font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-bs-sortbtn.is-on { background: var(--ma-gold); border-color: var(--ma-gold); color: var(--ma-gold-ink); }
body.macct-page .ma-bs-list { margin-top: 8px; }
body.macct-page .ma-bs-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ma-line); font-size: 0.85rem; }
body.macct-page .ma-bs-rank { flex-shrink: 0; width: 1.3em; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-bs-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-bs-units { flex-shrink: 0; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-bs-rev { flex-shrink: 0; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-bs-margin { flex-shrink: 0; min-width: 3em; text-align: right; font-weight: 700; color: var(--ma-success-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-bs-margin.neg { color: var(--ma-danger); }
body.macct-page .ma-bs-margin--none { color: var(--ma-muted); font-weight: 400; }
body.macct-page .ma-bs-foot { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ma-muted); }
body.macct-page .ma-rcard-val.pos { color: var(--ma-green); }
body.macct-page .ma-rcard-val.neg { color: var(--ma-danger); }
body.macct-page .ma-rcard-of { font-family: var(--ma-sans); font-size: 0.85rem; font-weight: 500; color: var(--ma-muted); }

/* bar chart */
body.macct-page .ma-chart {
  padding: var(--sp-4);
  margin-bottom: 16px;
  background: var(--ma-card);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  box-shadow: var(--ma-shadow);
}
body.macct-page .ma-chart-legend { display: flex; gap: 14px; margin-bottom: 10px; font-size: 0.74rem; color: var(--ma-muted); }
body.macct-page .ma-lg { display: inline-flex; align-items: center; gap: 5px; }
body.macct-page .ma-lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
body.macct-page .ma-lg--sales::before { background: var(--ma-gold); }
body.macct-page .ma-lg--exp::before { background: var(--ma-navy-a); }
body.macct-page .ma-chart-cols { display: flex; align-items: flex-end; gap: 4px; height: 164px; }
body.macct-page .ma-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
body.macct-page .ma-chart-net { font-size: 0.7rem; font-family: var(--ma-mono); font-weight: 800; line-height: 1; margin-bottom: 4px; white-space: nowrap; }
body.macct-page .ma-chart-net.pos { color: var(--ma-green); }
body.macct-page .ma-chart-net.neg { color: var(--ma-danger); }
body.macct-page .ma-chart-net--dash { color: var(--ma-line); }
body.macct-page .ma-chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
body.macct-page .ma-bar { width: 42%; max-width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
body.macct-page .ma-bar--sales { background: linear-gradient(180deg, var(--ma-gold), var(--ma-gold-deep)); }
body.macct-page .ma-bar--exp { background: linear-gradient(180deg, var(--ma-navy-800), var(--ma-navy-a)); }
body.macct-page .ma-bar-dash { align-self: flex-end; margin-bottom: 2px; color: var(--ma-line); font-weight: 700; }
body.macct-page .ma-chart-lbl { margin-top: 6px; font-size: 0.7rem; color: var(--ma-muted); white-space: nowrap; }

/* expense breakdown */
body.macct-page .ma-bd { margin-bottom: 14px; }
body.macct-page .ma-bd-title { margin: 0 0 10px; font-family: var(--ma-serif); font-size: 1.15rem; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-bd-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 11px; }
body.macct-page .ma-bd-lbl { font-size: 0.85rem; color: var(--ma-ink); }
body.macct-page .ma-bd-track { height: 9px; background: var(--ma-bg); border-radius: 999px; overflow: hidden; }
body.macct-page .ma-bd-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ma-gold), var(--ma-gold-deep)); border-radius: 999px; }
body.macct-page .ma-bd-fill--un { background: linear-gradient(90deg, var(--ma-danger), var(--ma-danger)); }
body.macct-page .ma-bd-amt { font-size: 0.82rem; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-bd-pct { color: var(--ma-ink); font-weight: 600; }
body.macct-page .ma-bd-row--un .ma-bd-lbl { color: var(--ma-danger); font-weight: 600; }

body.macct-page .ma-results-foot { margin: 6px 0 0; padding: 12px; font-size: 0.78rem; line-height: 1.5; color: var(--ma-muted); background: var(--ma-bg); border-radius: 10px; }
body.macct-page .ma-results-empty { text-align: center; }

/* wider viewports: 4 result cards in a row, breakdown rows inline */
@media (min-width: 560px) {
  body.macct-page .ma-rcards { grid-template-columns: repeat(4, 1fr); }
  /* Universal Slice 3 C3 — the 4 cards wrap instead of pushing past the screen when the column is too narrow for their
     amounts (820 px: the sidebar leaves ~490 px → 2 × 2). Equal widths when they fit (1024 / 1280: 4 in a row, as before).
     Layout only — fonts, padding and cards unchanged; the absolutely-placed ℹ️ is not a flex item. */
  body.macct-page .ma-rcards { display: flex; flex-wrap: wrap; }
  body.macct-page .ma-rcards > .ma-rcard { flex: 1 1 clamp(0px, calc((640px - 100%) * 999), calc(50% - 5px)); }   /* row < 640 px (4 can't fit: their amounts need ~616) → 2 × 2, never 3 + 1; a card still never shrinks below its amount (min-width stays auto) — it wraps instead */
  body.macct-page .ma-bd-row { grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE — prospect path (Slice 4, Part C)
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-auth-prospect {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ma-line);
  text-align: center;
}
body.macct-page .ma-auth-prospect p { margin: 0 0 6px; font-size: 0.88rem; color: var(--ma-muted); }
body.macct-page .ma-auth-browse { font-weight: 600; font-size: 0.92rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   PWA INSTALL HINT (Slice 4, Part D) — dashboard only, dismissible
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-pwa-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 14px 14px 16px;
  color: var(--ma-navy-ink);
  background: radial-gradient(120% 140% at 20% 0%, var(--ma-navy-a) 0%, var(--ma-navy-a) 60%, var(--ma-navy-b) 100%);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 14px;
  box-shadow: var(--ma-shadow);
}
body.macct-page .ma-pwa-hint-ico { font-size: 1.5rem; line-height: 1.2; flex-shrink: 0; }
body.macct-page .ma-pwa-hint-body { flex: 1; min-width: 0; }
body.macct-page .ma-pwa-hint-title { margin: 0 0 3px; font-family: var(--ma-serif); font-size: 1.15rem; font-weight: 600; color: var(--ma-gold-soft); }
body.macct-page .ma-pwa-hint-text { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ma-navy-muted); }
body.macct-page .ma-pwa-hint-text strong { color: var(--ma-gold-soft); }
body.macct-page .ma-pwa-hint-x {
  flex-shrink: 0;
  width: 30px; height: 30px;
  font-size: 0.9rem; line-height: 1;
  color: var(--ma-line); cursor: pointer;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
}
body.macct-page .ma-pwa-hint-x:hover { background: rgba(255, 255, 255, .16); color: var(--ma-card); }
/* Floating onboarding variant — view-independent (appended to <body>), sits above the
   floating bottom nav (z900) and below the Unang Araw guide overlay (z950). */
body.macct-page .ma-pwa-hint--float {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 940;
  max-width: 460px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.macct-page .ma-pwa-hint--float { left: auto; right: 24px; max-width: 380px; bottom: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISION SHELL (Slice 5) — sidebar sections, view router, portfolio + business
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-side-id { margin-bottom: 6px; }
body.macct-page .ma-nav-label {
  margin: 16px 0 6px; padding: 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(220,230,245,.42);
}
body.macct-page .ma-nav-label:first-child { margin-top: 4px; }
/* Slice 1: grouped module-nav for the active business — hidden in the mobile drawer (zero
   mobile change), shown only in the ≥768px static sidebar. Links reuse .ma-nav a styling. */
body.macct-page #ma-nav-modules { display: none; }
@media (min-width: 768px) { body.macct-page #ma-nav-modules { display: block; } }
/* Slice 2: Overview KPI cards on Home — DESKTOP ONLY (mobile Home unchanged). Reuses
   .ma-rcards / .ma-mlog card styling; this only controls the wrapper's visibility + spacing. */
/* Mobile parity: the Overview shows at ALL widths (was desktop-only). The full internal
   layout lives in the min-width:768 block; mobile (<768) layout is a mutually-exclusive
   max-width:767 block near the end of this file, so the two never conflict. */
body.macct-page .ma-ov { display: block; margin: 0 0 8px; }
/* When the Overview renders, its greeting carries identity → hide the duplicate legacy
   Home blocks (stats/hero/health) at ALL widths; the tile-grid nav is .ma-home-nav (kept). */
body.macct-page .ma-ov ~ .ma-home-legacy { display: none !important; }
/* SW v259 (Angie, Sep 23): the business header now also shows on Preview + Home (same single
   .ma-biz-head node) — the ma-ov-pane hide is retired. The Overview greeting + store-name card stay. */
body.macct-page .ma-home-nav { display: block; }             /* launcher tile grid — shown at ALL widths (the sidebar stays too; both are doors) */
/* Home health-score card — spacing between the KPI row and the quick-log pair; reserve the
   top-right for the mm.score ℹ️ so the caption never runs under it. */
body.macct-page .ma-ov-health { margin: 6px 0 14px; width: 100%; position: relative; }
/* v290 — Business health reparented to the top of Preview (above the TODAY label). 8px under the
   business header, 10px above TODAY; no dead band where it used to sit between the KPIs and quick-add. */
body.macct-page .ma-ov-health--top { margin: 8px 0 10px; }
/* v290 — Preview comparison lines under a KPI value ("Yesterday ₱X" / "Last month ₱X"). */
body.macct-page .ma-ovkpi-cmp { font-size: 11.5px; color: var(--ma-muted); margin-top: 6px; }
body.macct-page .ma-ovkpi-cmp b { color: var(--ma-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ov-health .ma-hs-txt { padding-right: 26px; }
body.macct-page .ma-hs-lockglyph { display: inline-flex; }
body.macct-page .ma-hs-lockglyph .ma-ic { width: 18px; height: 18px; color: var(--ma-muted); }
/* Fix 2: per-group color coding — accent dot on each group header + active-item highlight in
   the group's color. Colors are light pastels chosen for contrast on the navy sidebar. */
body.macct-page #ma-nav-modules [data-grp="money"]    { --grp: #D9A93C; }
body.macct-page #ma-nav-modules [data-grp="store"]    { --grp: #5FC7B8; }
body.macct-page #ma-nav-modules [data-grp="clients"]  { --grp: #E38FA0; }
body.macct-page #ma-nav-modules [data-grp="business"] { --grp: #A9A0E3; }
body.macct-page #ma-nav-modules [data-grp="ops"]      { --grp: #E3B85F; }
body.macct-page #ma-nav-modules [data-grp="gabay"]    { --grp: #7FB7E8; }
/* Slice 2: colourful Noto emoji icon in the sidebar module links (Overview keeps the grid stroke). */
body.macct-page #ma-nav-modules .ma-modemoji { width: 18px; height: 18px; flex: none; vertical-align: middle; object-fit: contain; }
body.macct-page #ma-nav-modules .ma-nav-label[data-grp]::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; background: var(--grp);
}
/* Active module link tinted in its group color; Overview (no data-grp) → neutral white. */
body.macct-page #ma-nav-modules .ma-modlink.active {
  background: rgba(255,255,255,.06); color: var(--grp, #fff); box-shadow: inset 3px 0 0 var(--grp, #fff);
}
/* Fix 1: collapsed active-business context card. Base styles global (harmless — the element
   is display:none until shown); the tree↔card SWAP is strictly ≥768 so mobile is untouched. */
body.macct-page #ma-biz-context { display: none; }
body.macct-page .ma-bizctx-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(220,230,245,.6); padding: 8px 12px; cursor: pointer; }
body.macct-page .ma-bizctx-back:hover { color: var(--ma-on-navy); text-decoration: none; }
body.macct-page .ma-bizctx-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 8px 8px; background: rgba(255,255,255,.05); border: 1px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-bizctx-ic { font-size: 20px; line-height: 1; flex: none; }
body.macct-page .ma-bizctx-meta { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-bizctx-name { font-size: 13.5px; font-weight: 700; color: var(--ma-on-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.macct-page .ma-bizctx-cat { font-size: 11px; color: rgba(220,230,245,.5); text-transform: capitalize; }
@media (min-width: 768px) {
  body.macct-page.ma-biz-active #ma-nav-biz,
  body.macct-page.ma-biz-active .ma-nav-label--biz { display: none; }
  body.macct-page.ma-biz-active #ma-biz-context { display: block; }
}
body.macct-page .ma-nav-dot { color: rgba(220,230,245,.42); font-size: 9px; }
body.macct-page .ma-nav-logout {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  margin-top: 2px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: rgba(220,230,245,.82); background: none; border: none; padding: 10px 12px; border-radius: 9px;
}
body.macct-page .ma-nav-logout:hover { background: rgba(181,72,58,.16); color: var(--ma-danger); box-shadow: inset 3px 0 0 var(--ma-danger); }

/* ─── Collapsible MY BUSINESSES tree ─── */
/* Root row: chevron button toggles the whole tree; the label navigates to #portfolio. */
body.macct-page .ma-biz-root { display: flex; align-items: center; gap: 2px; }
body.macct-page .ma-tree-root-link { flex: 1 1 auto; }
body.macct-page .ma-tree-chev, body.macct-page .ma-cat-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; color: rgba(220,230,245,.6);
}
body.macct-page .ma-tree-chev { background: none; border: 0; cursor: pointer; border-radius: 6px; }
body.macct-page .ma-tree-chev:hover { background: rgba(255,255,255,.06); color: var(--ma-card); }
body.macct-page .ma-tree-chev::before, body.macct-page .ma-cat-chev::before {
  content: '\25BE'; font-size: 10px; line-height: 1; transition: transform .2s ease;
}
body.macct-page .ma-tree-chev.is-collapsed::before, body.macct-page .ma-cat-chev.is-collapsed::before { transform: rotate(-90deg); }
/* The tree itself folds under the root chevron. */
body.macct-page .ma-tree { overflow: hidden; max-height: 4000px; transition: max-height .2s ease; }
body.macct-page .ma-tree.is-collapsed { max-height: 0; }
/* Category header row. */
body.macct-page .ma-cat-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(220,230,245,.55); background: none; border: 0; cursor: pointer;
  padding: 8px 12px; margin-top: 6px; border-radius: 9px;
}
body.macct-page .ma-cat-head:hover { background: rgba(255,255,255,.05); color: rgba(220,230,245,.85); }
body.macct-page .ma-cat-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.macct-page .ma-cat-count {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0; min-width: 18px; text-align: center;
  color: var(--ma-gold-soft); background: rgba(212,175,55,.16); padding: 1px 7px; border-radius: 999px;
}
/* Category body folds; blueprint links indented to show hierarchy. Long names wrap. */
body.macct-page .ma-cat-body { overflow: hidden; max-height: 2000px; transition: max-height .2s ease; }
body.macct-page .ma-cat-body.is-collapsed { max-height: 0; }
body.macct-page .ma-cat-body a { padding-left: 26px; }
body.macct-page .ma-cat-body a .ma-nav-dot { margin-left: -12px; }

/* views — one visible at a time */
body.macct-page .ma-view { display: none; }
body.macct-page .ma-view.active { display: block; }

/* ---- MATTHEW SYSTEM brand mark (V3) — portfolio view, desktop/tablet ≥900px ----
   Hidden by default (mobile: not rendered, no space reserved). Shown ≥900px only —
   below that the greeting could collide, so it stays hidden (also covers <768 mobile).
   Absolute top-right of #view-portfolio, which spans the content column, so it
   right-aligns to the (centered) column edge, never the viewport. */
body.macct-page .ma-matthew { display: none; }
@media (min-width: 900px) {
  body.macct-page #view-portfolio { position: relative; }
  body.macct-page .ma-matthew {
    display: inline-flex; align-items: center; gap: 8px;
    position: absolute; top: 4px; right: 0; z-index: 5;
    background: var(--ma-navy-b); border-radius: 16px; padding: 7px 14px;
    box-shadow: 0 2px 8px rgba(15, 30, 55, .2);
  }
  body.macct-page .ma-matthew-dot {
    width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ma-gold); box-shadow: 0 0 7px rgba(234, 197, 104, .9);
  }
  body.macct-page .ma-matthew-text {
    font-size: 10px; letter-spacing: 2.6px; font-weight: 700; color: var(--ma-gold); line-height: 1;
  }
}

body.macct-page .ma-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600; color: var(--ma-muted);
}
body.macct-page .ma-back:hover { color: var(--ma-ink); text-decoration: none; }

/* portfolio cards */
body.macct-page #ma-portfolio-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.macct-page .ma-pf-card {
  background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px;
  box-shadow: var(--ma-shadow); padding: var(--sp-4);
}
body.macct-page .ma-pf-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
body.macct-page .ma-pf-name { margin: 0; font-family: var(--ma-serif); font-size: 20px; font-weight: 700; color: var(--ma-ink); line-height: 1.2; }
body.macct-page .ma-pf-prog { display: flex; align-items: center; gap: 10px; }
body.macct-page .ma-pf-bar { flex: 1; height: 7px; background: var(--ma-bg); border-radius: 999px; overflow: hidden; }
body.macct-page .ma-pf-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ma-gold), var(--ma-gold-deep)); border-radius: 999px; }
body.macct-page .ma-pf-pct { font-family: var(--ma-serif); font-size: 16px; font-weight: 700; color: var(--ma-gold-deep); min-width: 40px; text-align: right; }
body.macct-page .ma-pf-meta { margin: 8px 0 2px; font-size: 13px; color: var(--ma-ink); }
body.macct-page .ma-pf-last { margin: 0 0 14px; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-pf-open { display: inline-block; color: var(--ma-ink); }

/* ═══ STANDALONE: SARILI tag + custom-business upsell (theme-tokened) ═══ */
.ma-sarili {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; vertical-align: middle;
  color: var(--ma-gold-deep); background: rgba(212,175,55,.15);
  border: 1px solid rgba(212,175,55,.42); white-space: nowrap;
}
body.macct-page .ma-pf-head .ma-sarili { margin-left: auto; }
/* sidebar tree is always dark navy → use the soft gold for contrast */
#ma-nav-biz .ma-sarili { color: rgba(220,230,245,.82); background: rgba(255,255,255,.08); border-color: rgba(220,230,245,.20); }
body.macct-page .ma-pf-card--custom { border-left: 3px solid var(--ma-gold); }

body.macct-page .ma-upsell {
  position: relative;
  background: var(--ma-card); border: 1px solid rgba(212,175,55,.42); border-radius: 12px;
  box-shadow: var(--ma-shadow); padding: var(--sp-5); text-align: center; margin: 4px 0 6px;
}
/* plain-dismiss X on the blueprint-guide card (top-right) */
body.macct-page .ma-upsell-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-upsell-x:hover { background: rgba(0,0,0,.06); color: var(--ma-ink); }
body.macct-page .ma-upsell-x .ma-ic { width: 15px; height: 15px; }
body.macct-page .ma-upsell-ic { font-size: 26px; line-height: 1; margin-bottom: 8px; }
body.macct-page .ma-upsell-title { margin: 0 0 6px; font-family: var(--ma-serif); font-size: 19px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-upsell-body { margin: 0 auto 14px; max-width: 46ch; font-size: 13.5px; color: var(--ma-muted); line-height: 1.5; }
body.macct-page .ma-upsell-cta { display: inline-block; }
/* Slice 4d fix — the CTA is a link, so `body.macct-page a { color: gold-deep }` won over the button and painted gold on the
   gold gradient (1:1). Same ink + weight as the gold "Accept Order" button (.ma-qa-neworder). */
body.macct-page a.ma-upsell-cta, body.macct-page a.ma-upsell-cta:hover { color: var(--ma-ink); font-weight: 800; text-decoration: none; }
body.macct-page .ma-upsell-more { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 0 14px; font-size: 13.5px; font-weight: 700; color: var(--ma-gold-ink); }   /* Slice 4d — "See all <Type> blueprints" (gold-ink: AA on the card; gold-deep was 3.2:1) */
body.macct-page .ma-upsell-note { margin: 12px 0 0; font-size: 11.5px; color: var(--ma-muted); font-style: italic; }

/* business view heading */
body.macct-page .ma-biz-head { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
body.macct-page .ma-biz-name { margin: 0; font-family: var(--ma-serif); font-size: 22px; font-weight: 700; color: var(--ma-ink); line-height: 1.1; }
body.macct-page .ma-biz-lic { margin: 4px 0 0; font-family: var(--ma-mono); font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-biz-lic .ma-license-label { display: inline; margin: 0; vertical-align: top; }   /* v263: LICENSE: NP-… on one line (label small-caps + colon, space gap, value monospace; top-aligned to the value) */
/* W2 — name-your-business header (purchased): blueprint-title subtitle + ✎ edit + inline name field. */
body.macct-page .ma-biz-sub { margin: 2px 0 0; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-biz-editname { margin-left: 8px; background: none; border: 0; padding: 2px; color: var(--ma-muted); cursor: pointer; vertical-align: middle; line-height: 0; }
body.macct-page .ma-biz-editname:hover { color: var(--ma-gold-deep); }
body.macct-page .ma-biz-editname .ma-ic { width: 16px; height: 16px; }
body.macct-page .ma-biz-nameform { display: flex; align-items: center; gap: 8px; }
body.macct-page .ma-biz-nameinput { flex: 1 1 auto; min-width: 0; max-width: 320px; font-family: var(--ma-serif); font-size: 20px; font-weight: 700; color: var(--ma-ink); padding: 4px 10px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-paper); }
body.macct-page .ma-biz-nameinput:focus { outline: none; border-color: var(--ma-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
body.macct-page .ma-biz-namesave { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--ma-gold), var(--ma-gold-deep)); color: #fff; border: 0; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
body.macct-page .ma-biz-namesave .ma-ic { width: 15px; height: 15px; }
body.macct-page .ma-biz-namesave:disabled { opacity: .6; cursor: default; }
@media (max-width: 767px) { body.macct-page .ma-biz-nameinput { max-width: none; font-size: 18px; } }
/* journey mount inside business view — the tabs/loggers/results render here as-is */
body.macct-page .ma-journey-mount .ma-journey,
body.macct-page .ma-journey-mount { width: 100%; }

/* wider portfolio grid on desktop */
@media (min-width: 720px) {
  body.macct-page #ma-portfolio-cards { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPERATIONS PANE (Slice 6) — issues, deliveries, waste
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-ops { margin-top: 14px; }
body.macct-page .ma-orow {
  padding: 11px 13px; margin-bottom: 8px;
  background: var(--ma-bg); border: 1px solid var(--ma-line); border-radius: 10px;
}
body.macct-page .ma-orow-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body.macct-page .ma-orow-title { font-size: 0.95rem; color: var(--ma-ink); word-break: break-word; }
body.macct-page .ma-orow-bold { font-weight: 700; }
body.macct-page .ma-orow-day { margin: 3px 0 0; font-size: 0.74rem; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-orow-note { margin: 5px 0 0; font-size: 0.82rem; font-style: italic; color: var(--ma-muted); }
body.macct-page .ma-orow-amt { flex-shrink: 0; font-family: var(--ma-serif); font-size: 1.05rem; font-weight: 700; color: var(--ma-danger); font-variant-numeric: tabular-nums; }

/* labelled lines (IMPACT / POTENTIAL ACTION / ACTION TAKEN / ARAL) */
body.macct-page .ma-oline { margin: 6px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--ma-ink); word-break: break-word; }
/* Ani ①c — per-cycle P&L payoff line */
body.macct-page .ma-cyc-pnl { font-weight: 600; color: var(--ma-success-ink); }
body.macct-page .ma-olabel { display: inline-block; margin-right: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
body.macct-page .ma-olabel--red   { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-olabel--gold  { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-olabel--green { background: var(--ma-success-tint); color: var(--ma-success-ink); }

/* status chips */
body.macct-page .ma-chip2 { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-chip2--open     { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-chip2--resolved { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-chip2--ok       { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-chip2--bad      { background: var(--ma-danger-tint); color: var(--ma-danger); }

body.macct-page .ma-issue-act { margin-top: 9px; }
body.macct-page .ma-issue-act .ma-note-ta { margin-bottom: 8px; }

/* waste reason chips — spec colors */
body.macct-page .ma-wchip { flex: 0 1 auto; font-size: 0.64rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-wchip--expired   { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-wchip--rotten    { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-wchip--trial     { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-wchip--overstock { background: var(--ma-cat-purple-tint); color: var(--ma-cat-purple); }
body.macct-page .ma-wchip--damaged   { background: var(--ma-cat-blue-tint); color: var(--ma-cat-blue-ink); }
body.macct-page .ma-wchip--other     { background: var(--ma-line); color: var(--ma-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   PEOPLE PANE (Slice 7) — labor, attendance, employee issues, rewards
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-lchip,
body.macct-page .ma-achip,
body.macct-page .ma-echip,
body.macct-page .ma-rwchip {
  flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
/* palette */
body.macct-page .ma-lchip--sahod,  body.macct-page .ma-achip--late,  body.macct-page .ma-echip--attendance, body.macct-page .ma-rwchip--effort { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-lchip--benefits, body.macct-page .ma-achip--present, body.macct-page .ma-rwchip--service { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-lchip--owner, body.macct-page .ma-achip--sl, body.macct-page .ma-echip--damage, body.macct-page .ma-rwchip--attendance { background: var(--ma-cat-blue-tint); color: var(--ma-cat-blue-ink); }
body.macct-page .ma-lchip--bonus, body.macct-page .ma-achip--vl, body.macct-page .ma-rwchip--sales { background: var(--ma-cat-purple-tint); color: var(--ma-cat-purple); }
body.macct-page .ma-achip--absent, body.macct-page .ma-echip--negligence { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-achip--el { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-echip--other { background: var(--ma-line); color: var(--ma-muted); }

body.macct-page .ma-orow-amt--dark { color: var(--ma-ink); }
body.macct-page .ma-orow-amt--pos  { color: var(--ma-green); }

/* ═══════════════════════════════════════════════════════════════════════════
   INVENTORY & PANINDA (retail/trading) — stock-out reason chips + balance pills
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-soutchip { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-soutchip--nabenta  { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-soutchip--nasira   { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-soutchip--nawala   { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-soutchip--personal { background: var(--ma-line); color: var(--ma-muted); }
body.macct-page .ma-soutchip--production { background: var(--ma-gold-tint, var(--ma-line)); color: var(--ma-gold-deep); }   /* Ⓕa S3 — ingredient consumed by a batch */

body.macct-page .ma-paninda-bal { flex-shrink: 0; font-family: var(--ma-serif); font-size: 1.05rem; font-weight: 700; color: var(--ma-green); font-variant-numeric: tabular-nums; }
body.macct-page .ma-paninda-bal--low { color: var(--ma-danger); font-size: 0.8rem; font-family: inherit; }
/* Slice D — armed low-stock "paubos" amber (distinct from the red "ubos" net≤0). */
body.macct-page .ma-paninda-bal--warn { color: var(--ma-cat-amber-ink, #8A4B12); font-size: 0.8rem; font-family: inherit; }

/* Paninda catalog (Tindahan slice A) — product definitions with tubo/pc */
body.macct-page .ma-cat-tubo { font-weight: 700; color: var(--ma-green); }
/* Starting stock is a creation-only seed — hidden once the form is in edit mode. */
body.macct-page .ma-cat-editing .ma-cat-startf { display: none; }
/* Restock action (slice C) — gold text button, distinct from the pencil edit. */
body.macct-page .ma-cat-restock { color: var(--ma-gold-ink); font-weight: 700; }
/* Ⓢa — quick-order (services) min-charge note + hidden qty for per-job/session */
body.macct-page .ma-qo-qtywrap[hidden] { display: none; }
body.macct-page .ma-qo-note { margin: 2px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--ma-gold-deep); }
body.macct-page .ma-qo-note:empty { display: none; }
body.macct-page .ma-qorder[hidden] { display: none; }
body.macct-page .ma-in-qtot { font-weight: 700; background: var(--ma-paper); }
/* Ⓢb — processing pipeline: stage chip + advance + ready count */
body.macct-page .ma-bk-ready { margin: 0 0 10px; font-size: 0.85rem; font-weight: 700; color: var(--ma-success-ink); }
body.macct-page .ma-bk-ready[hidden] { display: none; }
body.macct-page .ma-bk-stage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
body.macct-page .ma-stagechip { font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(0,116,255,.12); color: #0a5bd6; }
body.macct-page .ma-stagechip--ready { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-stagechip--claimed { background: rgba(0,0,0,.06); color: var(--ma-muted); }
body.macct-page .ma-bk-stage-adv { color: var(--ma-gold-ink); font-weight: 700; }
body.macct-page .ma-bk-stage-start { margin-top: 6px; color: var(--ma-muted); font-weight: 600; }
/* Slice ② — bundle→sell conversion row + list hint + restock live preview */
body.macct-page .ma-cat-bundle[hidden] { display: none; }
body.macct-page .ma-cat-bundle-row { display: flex; align-items: center; gap: 8px; }
body.macct-page .ma-cat-bundle-one, body.macct-page .ma-cat-bundle-eq { font-weight: 700; color: var(--ma-muted); flex-shrink: 0; }
body.macct-page .ma-cat-bundle-row .ma-in-cbuyunit, body.macct-page .ma-cat-bundle-row .ma-in-csellunit { flex: 1 1 0; min-width: 0; }
body.macct-page .ma-cat-bundle-row .ma-in-cfactor { width: 64px; flex-shrink: 0; text-align: center; }
body.macct-page .ma-cat-bundletag { color: var(--ma-gold-deep); font-weight: 600; }
body.macct-page .ma-cat-shelftag { color: var(--ma-muted); font-weight: 600; }
/* Ⓖa — food-service recipe editor + standard food-cost badge */
body.macct-page .ma-recipe-lbl { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ma-muted); text-transform: uppercase; margin-bottom: 6px; }
body.macct-page .ma-recipe-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
body.macct-page .ma-recipe-row .ma-rc-ref { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 9px; background: var(--ma-card); color: var(--ma-ink); -webkit-appearance: none; appearance: none; }
body.macct-page .ma-recipe-row .ma-rc-qty { width: 72px; flex-shrink: 0; min-height: 40px; text-align: center; }
body.macct-page .ma-rc-del { flex-shrink: 0; color: var(--ma-danger); font-size: 18px; padding: 0 4px; }
body.macct-page .ma-recipe-add { color: var(--ma-gold-ink); font-weight: 700; }
body.macct-page .ma-recipe-cost { margin: 6px 0 0; font-weight: 700; color: var(--ma-gold-deep); }
body.macct-page .ma-recipe-cost:empty { display: none; }
body.macct-page .ma-cat-foodcost { color: var(--ma-gold-deep); font-weight: 600; }
body.macct-page .ma-sheet-conv { margin: 6px 0 0; font-weight: 700; color: var(--ma-gold-ink); }
body.macct-page .ma-sheet-hint { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ma-muted); }

/* ── Ⓕa S2 — Produksyon RECIPE card + batch fields (catalog + sheet) ──────────── */
body.macct-page .ma-pb-ohrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
body.macct-page .ma-pb-ohrow .ma-pb-ohlabel { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 9px; background: var(--ma-card); color: var(--ma-ink); }
body.macct-page .ma-pb-ohrow .ma-pb-ohamt { width: 96px; flex-shrink: 0; min-height: 40px; text-align: center; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 9px; background: var(--ma-card); color: var(--ma-ink); }
body.macct-page .ma-pb-ohdel { flex-shrink: 0; color: var(--ma-danger); font-size: 18px; padding: 0 4px; }
body.macct-page .ma-pb-ohadd { color: var(--ma-gold-ink); font-weight: 700; }
body.macct-page .ma-pb-costline { margin: 8px 0 0; font-weight: 700; color: var(--ma-gold-deep); }
body.macct-page .ma-pb-costline:empty { display: none; }
body.macct-page .ma-rs-ingrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
body.macct-page .ma-rs-ingrow .ma-rs-ingref { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 9px; background: var(--ma-card); color: var(--ma-ink); -webkit-appearance: none; appearance: none; }
body.macct-page .ma-rs-ingrow .ma-rs-ingqty { width: 72px; flex-shrink: 0; min-height: 40px; text-align: center; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 9px; background: var(--ma-card); color: var(--ma-ink); }
body.macct-page .ma-rs-ingdel { flex-shrink: 0; color: var(--ma-danger); font-size: 18px; padding: 0 4px; }
body.macct-page .ma-rs-ingadd { color: var(--ma-gold-ink); font-weight: 700; }
body.macct-page .ma-rs-ingslbl { margin-top: 4px; }
body.macct-page .ma-rcard-meta { color: var(--ma-muted); font-weight: 600; }
body.macct-page .ma-rcard-ings { margin: 8px 0; border-top: 1px solid var(--ma-line); }
body.macct-page .ma-rcard-ing { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--ma-line); font-size: 13px; }
body.macct-page .ma-rcard-ingn { font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-rcard-ingq, body.macct-page .ma-rcard-ingu { color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-rcard-inge { font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; text-align: right; }
body.macct-page .ma-rcard-oh { color: var(--ma-muted); font-weight: 600; }
body.macct-page .ma-rcard-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 13px; }
body.macct-page .ma-rcard-nums > span { color: var(--ma-muted); }
body.macct-page .ma-rcard-nums strong { color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-rcard-margin strong { color: var(--ma-gold-deep); }
body.macct-page .ma-rcard-note { margin-top: 8px; }

/* ── Ⓕa S3 — I-log ang batch (preview + batch rows) ──────────────────────────── */
body.macct-page .ma-batch-preview { margin: 4px 0 2px; padding: 10px 12px; background: var(--ma-gold-tint, var(--ma-card)); border: 1px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-batch-preview:empty { display: none; }
body.macct-page .ma-batch-head { margin: 0 0 6px; font-weight: 700; color: var(--ma-ink); font-size: 13px; }
body.macct-page .ma-batch-yield { color: var(--ma-gold-deep); }
body.macct-page .ma-batch-tcost { color: var(--ma-ink); }
body.macct-page .ma-batch-chip { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
body.macct-page .ma-batch-chip--ok { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-batch-chip--mid { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-batch-chip--high { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-batch-will { margin: 2px 0 4px; font-size: 12px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-batch-willlist { margin: 0; padding-left: 16px; font-size: 13px; color: var(--ma-ink); line-height: 1.55; }
body.macct-page .ma-batch-willlist li { list-style: disc; }
body.macct-page .ma-batch-short { color: var(--ma-danger); font-size: 11px; font-weight: 700; }
body.macct-page .ma-batch-exp { color: var(--ma-muted); font-size: 12px; }

/* ── S3-follow-up — "Earlier records" (pre-S3 cycles + harvests), collapsed + read-only ── */
body.macct-page .ma-oldrecords { margin-top: 14px; border-top: 1px solid var(--ma-line); padding-top: 10px; }
body.macct-page .ma-oldrec-toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 8px 2px; min-height: 44px; font-weight: 700; color: var(--ma-muted); font-size: 13px; cursor: pointer; text-align: left; }
body.macct-page .ma-oldrec-caret { display: inline-block; transition: transform .15s ease; color: var(--ma-gold-ink); }
body.macct-page .ma-oldrec-toggle.is-open .ma-oldrec-caret { transform: rotate(90deg); }
body.macct-page .ma-oldrec-n { color: var(--ma-muted); font-weight: 600; }
body.macct-page .ma-oldrec-body { padding-top: 4px; }
body.macct-page .ma-oldrec-body .ma-mlog { margin-top: 0; }
/* read-only: hide every write affordance of the reused builders inside this section */
body.macct-page .ma-oldrecords .ma-mlog-form,
body.macct-page .ma-oldrecords .ma-mlog-title,
body.macct-page .ma-oldrecords .ma-mlog-help,
body.macct-page .ma-oldrecords .ma-mlog-addbtn,
body.macct-page .ma-oldrecords .ma-cycle-edit,
body.macct-page .ma-oldrecords .ma-cyc-feed,
body.macct-page .ma-oldrecords .ma-cyc-timbang,
body.macct-page .ma-oldrecords .ma-cyc-remind,
body.macct-page .ma-oldrecords .ma-del { display: none !important; }
body.macct-page .ma-oldrecords .ma-orow { opacity: .92; }

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENTS & BOOKINGS (services) — service status chips + suki badge
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-svcchip { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-svcchip--booked    { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-svcchip--tapos     { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-svcchip--cancelled { background: var(--ma-line); color: var(--ma-muted); }
body.macct-page .ma-svcchip--noshow    { background: var(--ma-danger-tint); color: var(--ma-danger); }

body.macct-page .ma-suki-badge { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; color: var(--ma-gold-ink); background: var(--ma-gold-soft); padding: 2px 8px; border-radius: 999px; }
body.macct-page .ma-client-edit { margin-top: 6px; font-size: 0.8rem; padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CYCLES & HARVEST (agriculture) — cycle status chips
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-cycchip { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-cycchip--tumatakbo { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-cycchip--harvested { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-cycchip--failed    { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-cycle-edit { margin-top: 6px; font-size: 0.8rem; padding: 0; }

/* Ani ①a — cycle sub-type (skin) picker.
   .ma-cyc-dyn uses display:contents so per-skin fields participate in the form grid. */
body.macct-page .ma-cyc-dyn { display: contents; }
body.macct-page .ma-cyc-skins {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
body.macct-page .ma-cyc-skin {
  flex: 1 1 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--ma-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ma-muted);
  background: var(--ma-card);
  border: 1.5px solid var(--ma-line);
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .12s, border-color .12s, color .12s;
}
body.macct-page .ma-cyc-skin:hover { border-color: var(--ma-gold); }
body.macct-page .ma-cyc-skin.is-on {
  background: var(--ma-gold);
  border-color: var(--ma-gold);
  color: var(--ma-gold-ink);
}
body.macct-page .ma-cycle .ma-orow-title { flex: 1 1 auto; }
body.macct-page .ma-cyc-skintag {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ma-navy-card, rgba(0,0,0,.05));
  color: var(--ma-muted);
  border: 1px solid var(--ma-line);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TENANTS & OCCUPANCY (property/rental) — unit status chips
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-unitchip { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-unitchip--okupado { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-unitchip--bakante { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-unit-edit { margin-top: 6px; font-size: 0.8rem; padding: 0; }

/* attendance month summary */
body.macct-page .ma-attend-summary { border-top: 1px dashed var(--ma-line); margin-top: 4px; padding-top: 10px; }
body.macct-page .ma-attend-line { margin: 0 0 4px; font-size: 0.84rem; color: var(--ma-ink); }

/* mandatory Labor-Code notice (employee issues) */
body.macct-page .ma-legal {
  margin-top: 12px; padding: 12px 14px;
  font-size: 0.8rem; line-height: 1.5; color: var(--ma-danger-ink);
  background: var(--ma-danger-tint); border: 1px solid var(--ma-danger-tint); border-left: 4px solid var(--ma-danger); border-radius: 10px;
}
body.macct-page .ma-legal strong { color: var(--ma-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE PILLS + CAPITAL TRACKER (Slice 8) — Journey tab phases; Planning view
   ═══════════════════════════════════════════════════════════════════════════ */
/* Journey phase segment control — mirrors the Money .ma-seg grammar (cream track,
   pills, gold-gradient active) so both section switchers read identically. */
body.macct-page .ma-phases {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  background: var(--ma-bg); border: 1px solid var(--ma-line); border-radius: 999px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
body.macct-page .ma-phase {
  flex: 1 0 auto; min-height: 38px; padding: 7px 14px; font-family: var(--ma-sans);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap; color: var(--ma-muted);
  background: transparent; border: none; border-radius: 999px; cursor: pointer;
}
body.macct-page .ma-phase.active {
  color: var(--ma-gold-ink); background: linear-gradient(135deg, var(--ma-gold-soft), var(--ma-gold));
  box-shadow: 0 1px 3px rgba(184,148,43,.35);
}
body.macct-page .ma-capital-prog { margin-top: 12px; }
body.macct-page .ma-capital-prog .ma-pf-bar { height: 9px; }
body.macct-page .ma-capital-line { margin: 6px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--ma-gold-deep); }

/* ═══════════════════════════════════════════════════════════════════════════
   TRIAL & TESTING (Slice 8) — batch verdict chips + taste score
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-vchip { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-vchip--pass    { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-vchip--fail    { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-vchip--testing { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-batch-ver { font-size: 0.72rem; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-score {
  flex-shrink: 0; display: inline-flex; align-items: baseline; justify-content: center;
  min-width: 44px; height: 30px; padding: 0 8px;
  font-family: var(--ma-serif); font-size: 1.15rem; font-weight: 700; color: var(--ma-gold-deep);
  background: var(--ma-gold-soft); border-radius: 999px;
}
body.macct-page .ma-score-max { font-size: 0.7rem; font-weight: 600; color: var(--ma-gold-ink); margin-left: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRY DELETE (Slice 8 polish) — ✕ soft-delete on every log row
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-hasdel { position: relative; padding-right: 36px; }
body.macct-page .ma-del {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; padding: 0;
  font-size: 0.78rem; line-height: 1; color: var(--ma-muted); cursor: pointer;
  background: rgba(122, 138, 165, .12); border: none; border-radius: 7px;
}
body.macct-page .ma-del:hover { background: var(--ma-danger-tint); color: var(--ma-danger); }
/* the save button's in-flight state reuses the .loading spinner already defined for .ma-btn */

/* ═══════════════════════════════════════════════════════════════════════════
   SLICE 10 — Business-view top: next-step hero + quick-add + bottom sheet
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-biz-top { margin-bottom: 8px; }

/* ---- Next-step hero ---- */
body.macct-page .ma-hero {
  background: linear-gradient(150deg, var(--ma-navy-a), var(--ma-navy-b));
  border-radius: 12px; padding: 20px 18px 18px; color: var(--ma-on-navy);
  box-shadow: var(--ma-shadow); position: relative; overflow: hidden;
}
body.macct-page .ma-hero-kicker {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ma-gold-soft);
}
body.macct-page .ma-hero-title {
  margin: 0 0 8px; font-family: var(--ma-serif); font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--ma-on-navy);
}
body.macct-page .ma-hero-desc { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ma-on-navy); opacity: 1; }   /* was .82 → 3.6:1 on the light Journey hero; full opacity ≈ 5.1:1 (AA) */
body.macct-page .ma-hero-ref { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; color: var(--ma-gold-soft); }
body.macct-page .ma-hero-done { width: 100%; min-height: 52px; font-size: 16px; background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); box-shadow: 0 6px 18px rgba(212,175,55,.32); }
body.macct-page .ma-hero-done:hover { filter: brightness(1.04); }
body.macct-page .ma-hero-step { margin: 12px 0 0; font-size: 11.5px; color: var(--ma-navy-muted); text-align: center; }
/* next-step hero now lives at the top of the Journey pane — space it off the phase pills */
body.macct-page .ma-pane > .ma-hero { margin-bottom: 10px; }
body.macct-page .ma-hero--done { text-align: center; }
body.macct-page .ma-hero--done .ma-hero-title { color: var(--ma-gold-soft); font-size: 27px; }

/* ---- Quick-add: two big friendly buttons ---- */
body.macct-page .ma-quickadd { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
/* W3: "⋯ More kinds…" — full-width secondary button under the ＋Sale/−Expense pair. */
body.macct-page .ma-qa-more { grid-column: 1 / -1; width: 100%; margin-top: 2px; background: transparent; border: 1px dashed var(--ma-line); color: var(--ma-ink-soft); font: inherit; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 10px; cursor: pointer; }
body.macct-page .ma-qa-more:hover { background: var(--ma-bg); border-color: var(--ma-gold); color: var(--ma-gold-deep); }
body.macct-page .ma-qa-btn {
  min-height: 56px; border-radius: 13px; border: 1.5px solid var(--ma-line); background: var(--ma-card);
  font-family: var(--ma-sans); font-weight: 700; font-size: 16px; color: var(--ma-ink); cursor: pointer;
  box-shadow: var(--ma-shadow); transition: transform .12s ease, border-color .15s ease;
}
body.macct-page .ma-qa-btn:hover { transform: translateY(-1px); }
body.macct-page .ma-qa-gastos { color: var(--ma-danger); border-color: var(--ma-danger-tint); }
body.macct-page .ma-qa-gastos:hover { border-color: var(--ma-danger); }
body.macct-page .ma-qa-benta { color: var(--ma-gold-deep); border-color: var(--ma-gold-soft); }
body.macct-page .ma-qa-benta:hover { border-color: var(--ma-gold); }
/* Preview primary action: New order → in ＋Sale's slot — gold fill + navy text (same .ma-qa-btn
   height/radius/font), flex-centered so its inline ℹ️ rides after the arrow. */
body.macct-page .ma-qa-neworder { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--ma-gold); color: #2C2818; border-color: var(--ma-gold); font-weight: 800; }
body.macct-page .ma-qa-neworder:hover { border-color: var(--ma-gold); filter: brightness(1.03); }

/* ---- Quick-add bottom sheet ---- */
body.macct-page .ma-sheet-back {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(12, 25, 48, 0); transition: background .22s ease;
}
body.macct-page .ma-sheet-back.open { background: rgba(7, 14, 26, .62); }
body.macct-page .ma-sheet {
  width: 100%; max-width: 460px; background: var(--ma-card);
  border-radius: var(--ma-r-xl) var(--ma-r-xl) 0 0; padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: var(--ma-shadow-float);
  transform: translateY(100%); transition: transform .28s var(--ma-ease-out);
}
body.macct-page .ma-sheet-back.open .ma-sheet { transform: translateY(0); }
body.macct-page .ma-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--ma-line); margin: 4px auto 12px; }
body.macct-page .ma-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
body.macct-page .ma-sheet-title { margin: 0; font-family: var(--ma-serif); font-size: 22px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-sheet-x {
  width: 40px; height: 40px; border: 0; background: rgba(122,138,165,.12); border-radius: 10px;
  font-size: 15px; color: var(--ma-muted); cursor: pointer; flex-shrink: 0;
}
body.macct-page .ma-sheet-form { display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-sheet-lbl { font-size: 13px; font-weight: 600; color: var(--ma-muted); margin-top: 10px; }
body.macct-page .ma-sheet-in {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; font-family: var(--ma-sans);
  color: var(--ma-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 11px;
}
body.macct-page .ma-sheet-in:focus { outline: none; border-color: var(--ma-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
body.macct-page .ma-sheet-un { margin-top: 12px; }
body.macct-page .ma-sheet-save {
  width: 100%; min-height: 54px; font-size: 16px; margin-top: 16px;
  background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep));
  border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); box-shadow: 0 6px 18px rgba(212,175,55,.32);
}
/* amount quick-chips (openQuickAdd sheet) — paper chips, gold-soft pressed flash */
body.macct-page .ma-amt-chips { display: flex; gap: 8px; margin-top: 8px; }
body.macct-page .ma-amt-chip {
  flex: 1; min-height: 40px; padding: 8px 6px; font-family: var(--ma-sans); font-size: 14px; font-weight: 700;
  color: var(--ma-gold-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 10px;
  cursor: pointer; transition: background .15s var(--ma-ease-out), border-color .15s var(--ma-ease-out);
}
body.macct-page .ma-amt-chip:hover { border-color: var(--ma-gold); }
body.macct-page .ma-amt-chip:active { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-amt-chip { transition: none; } }

/* Benta autocomplete (Tindahan slice B) — paninda picker: chips + dami stepper */
body.macct-page .ma-bc { margin-bottom: 4px; }
body.macct-page .ma-bc[hidden] { display: none; }
body.macct-page .ma-bc-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ma-muted); margin-bottom: 4px; }
body.macct-page .ma-bc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
body.macct-page .ma-bc-chip {
  min-height: 40px; padding: 8px 12px; font-family: var(--ma-sans); font-size: 14px; font-weight: 700;
  color: var(--ma-gold-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 10px;
  cursor: pointer; transition: background .15s var(--ma-ease-out), border-color .15s var(--ma-ease-out);
}
body.macct-page .ma-bc-chip:hover { border-color: var(--ma-gold); }
body.macct-page .ma-bc-chip:active { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); }
body.macct-page .ma-bc-qtyrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
body.macct-page .ma-bc-qlbl { font-size: 13px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-bc-step {
  width: 40px; min-height: 40px; font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--ma-gold-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 10px; cursor: pointer;
}
body.macct-page .ma-bc-step:active { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); }
body.macct-page .ma-in-pqty { width: 64px; text-align: center; }
body.macct-page .ma-mrow-tubo { margin-left: 8px; font-size: 0.8rem; font-weight: 700; color: var(--ma-green); }
/* Ani ①d — buyer-type picker + weigh-first nudge (agri-only; hidden for retail) */
body.macct-page .ma-bc-btyperow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
body.macct-page .ma-bc-btyperow[hidden] { display: none; }
body.macct-page .ma-bc-btlbl { font-size: 13px; font-weight: 600; color: var(--ma-muted); flex-shrink: 0; }
body.macct-page .ma-in-btype { flex: 1; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-card); color: var(--ma-ink); -webkit-appearance: none; appearance: none; }
body.macct-page .ma-bc-nudge {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--ma-gold-soft); color: var(--ma-gold-ink);
  font-size: 0.82rem; line-height: 1.35;
}
body.macct-page .ma-bc-nudge[hidden] { display: none; }
body.macct-page .ma-bc-nudge-txt { flex: 1; }
body.macct-page .ma-bc-nudge-x { flex-shrink: 0; border: 0; background: transparent; color: var(--ma-gold-ink); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
body.macct-page .ma-bt-cmp { font-weight: 600; }
body.macct-page .ma-bt-gap { color: var(--ma-gold-deep); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-bc-chip { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LAYER (Slice 7) — session splash + animated M + staggered pane rise.
   Pure garnish: JS never shows the splash under reduced-motion / repeat views,
   and every animation below is disabled in the reduced-motion block at the end.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-splash {
  position: fixed; inset: 0; z-index: 2000;
  background: radial-gradient(620px 420px at 50% 32%, #111F3A, var(--ma-navy-975) 72%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  transition: opacity .45s var(--ma-ease-out), visibility .45s;
}
body.macct-page .ma-splash[hidden] { display: none; }
body.macct-page .ma-splash--hide { opacity: 0; visibility: hidden; pointer-events: none; }
body.macct-page .ma-splash-m { width: 150px; height: auto; overflow: visible; }
body.macct-page .ma-splash-path {
  fill: none; stroke: url(#ma-mline); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(217,169,60,.5)); stroke-dasharray: 260; stroke-dashoffset: 260;
}
body.macct-page .ma-splash--play .ma-splash-path { animation: ma-mdraw 1.0s var(--ma-ease-out) .1s forwards; }
@keyframes ma-mdraw { to { stroke-dashoffset: 0; } }
body.macct-page .ma-splash-dot {
  fill: url(#ma-golddot); transform-box: fill-box; transform-origin: center; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(246,217,138,.8));
}
body.macct-page .ma-splash--play .ma-splash-dot { animation: ma-mpop .45s var(--ma-ease-spring) calc(.15s + var(--d)) forwards; }
@keyframes ma-mpop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
body.macct-page .ma-splash-word { font-family: var(--ma-sans); font-weight: 800; font-size: 16px; letter-spacing: .34em; color: var(--ma-gold-hi); opacity: 0; text-indent: .34em; }
body.macct-page .ma-splash-sub { font-family: var(--ma-sans); font-weight: 800; font-size: 9px; letter-spacing: .3em; color: #5E6C8C; opacity: 0; text-indent: .3em; }
body.macct-page .ma-splash--play .ma-splash-word { animation: ma-splash-rise .5s var(--ma-ease-out) .95s forwards; }
body.macct-page .ma-splash--play .ma-splash-sub { animation: ma-splash-rise .5s var(--ma-ease-out) 1.1s forwards; }
@keyframes ma-splash-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Pane-mount rise: staggered translateY+opacity on a tab pane's top-level cards.
   .ma-rise is added once per pane render in show() (capped ~6, 40ms stagger). */
@keyframes ma-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.macct-page .ma-rise { animation: ma-rise-in .34s var(--ma-ease-out) var(--rise-d, 0ms) both; }

@media (prefers-reduced-motion: reduce) {
  body.macct-page .ma-splash-path, body.macct-page .ma-splash-dot,
  body.macct-page .ma-splash-word, body.macct-page .ma-splash-sub,
  body.macct-page .ma-rise { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.macct-page .ma-sheet, body.macct-page .ma-sheet-back { transition: none; }
}

/* ---- Collapsible Operations panels (progressive disclosure) ---- */
body.macct-page .ma-collapsible { padding: 0; overflow: hidden; }
body.macct-page .ma-collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 52px; padding: 14px 16px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--ma-serif); font-size: 18px; font-weight: 700; color: var(--ma-ink); text-align: left;
}
body.macct-page .ma-collapse-title { flex: 1; }
body.macct-page .ma-collapse-chev { color: var(--ma-muted); font-size: 14px; transition: transform .18s ease; flex-shrink: 0; }
body.macct-page .ma-collapsible.open .ma-collapse-chev { transform: rotate(180deg); }
body.macct-page .ma-collapse-body { display: none; padding: 0 16px 16px; }
body.macct-page .ma-collapsible.open .ma-collapse-body { display: block; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-collapse-chev { transition: none; } }

/* ---- People gate card ---- */
body.macct-page .ma-people-gate { text-align: center; border: 1.5px dashed var(--ma-line); background: var(--ma-card); }
body.macct-page .ma-gate-q { margin: 4px 0 6px; font-family: var(--ma-serif); font-size: 20px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-gate-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--ma-muted); }
body.macct-page .ma-gate-yes { min-height: 48px; padding-left: 22px; padding-right: 22px; }   /* AA: navy text on the gold gradient (cream was 2.5:1) → ≥4.9:1 on its darkest stop */
body.macct-page .ma-btn-primary.ma-gate-yes { color: #1A1A2E; }

/* ---- Journey ring ---- */
/* Stat card: ring + weekly KPI strip in one cream card (mockup stat-card grammar). */
body.macct-page .ma-ring-wrap {
  display: flex; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 16px;
  background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-lg); box-shadow: var(--ma-shadow-card);
}
body.macct-page .ma-ring-col { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
body.macct-page .ma-kpis { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
body.macct-page .ma-kpi { display: flex; align-items: center; gap: 10px; }
body.macct-page .ma-kpi-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ma-gold-soft); color: var(--ma-gold-deep); }
body.macct-page .ma-kpi-ic--g { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-kpi-ic .ma-ic { width: 17px; height: 17px; }
body.macct-page .ma-kpi-txt { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-kpi-v { font-family: var(--ma-mono); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ma-ink); }
body.macct-page .ma-kpi-v.pos { color: var(--ma-success-ink); }
body.macct-page .ma-kpi-v.neg { color: var(--ma-danger); }
body.macct-page .ma-kpi-l { font-size: 11px; font-weight: 600; color: var(--ma-ink-soft); }
/* identity day line under the business name */
body.macct-page .ma-id-day { margin: 5px 0 0; font-family: var(--ma-mono); font-size: 12px; font-weight: 600; color: var(--ma-ink-soft); }
/* Oct-3 (Angie): the business-header day line is re-parented onto the Preview TODAY/NGAYON row (right).
   Hidden in the header on Preview ONLY — Preview is the one pane with ma-ov-pane but never ma-home-pane
   (Home gets both; every other pane gets neither), so all other panes keep their header day line. */
body.macct-page.ma-ov-pane:not(.ma-home-pane) .ma-id-day { display: none; }
body.macct-page .ma-ovlabel--withdate { display: flex; align-items: baseline; gap: 6px; }
body.macct-page .ma-ovlabel-date { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; color: var(--ma-muted); white-space: nowrap; }
/* Operations "Days logged" chip (weekly) */
body.macct-page .ma-dayschip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 14px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 999px; box-shadow: var(--ma-shadow-card); }
body.macct-page .ma-dayschip-ic { display: inline-flex; color: var(--ma-gold-deep); }
body.macct-page .ma-dayschip-ic .ma-ic { width: 16px; height: 16px; }
body.macct-page .ma-dayschip-v { font-family: var(--ma-mono); font-weight: 800; font-size: 14px; color: var(--ma-ink); }
body.macct-page .ma-dayschip-l { font-size: 12px; font-weight: 600; color: var(--ma-ink-soft); }
body.macct-page .ma-ring {
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
body.macct-page .ma-ring-hole {
  width: 96px; height: 96px; border-radius: 50%; background: var(--ma-card);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 3px rgba(18,35,63,.06);
}
body.macct-page .ma-ring-pct { font-family: var(--ma-serif); font-size: 30px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-ring-cap { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ma-gold-deep); text-align: center; }

/* ---- Mark-done celebration burst ---- */
body.macct-page .ma-celebrate {
  position: fixed; inset: 0; z-index: 1200; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
body.macct-page .ma-celebrate-mark {
  font-size: 96px; color: var(--ma-green); font-weight: 700;
  animation: ma-pop .95s cubic-bezier(.2,.9,.2,1) forwards;
  text-shadow: 0 6px 24px rgba(47,191,139,.4);
}
@keyframes ma-pop {
  0%   { transform: scale(.2); opacity: 0; }
  35%  { transform: scale(1.15); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
body.macct-page .ma-cfetti {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  background: var(--ma-gold); animation: ma-fall 1.7s ease-in forwards;
}
body.macct-page .ma-cfetti:nth-child(3n)   { background: var(--ma-green); }
body.macct-page .ma-cfetti:nth-child(3n+1) { background: var(--ma-gold-soft); }
body.macct-page .ma-cfetti:nth-child(4n)   { background: var(--ma-cat-blue); }
@keyframes ma-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(96vh) rotate(540deg); opacity: 0; }
}

/* ---- Hero all-done confetti-lite ---- */
body.macct-page .ma-hero-confetti-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body.macct-page .ma-hero-confetti {
  position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; background: var(--ma-gold-soft);
  animation: ma-fall 2.2s ease-in infinite;
}
body.macct-page .ma-hero-confetti:nth-child(3n)   { background: var(--ma-green); }
body.macct-page .ma-hero-confetti:nth-child(4n+2) { background: var(--ma-gold); }

/* ---- Portfolio momentum line ---- */
body.macct-page .ma-momentum {
  margin: 4px 0 2px; font-size: 14px; font-weight: 700; color: var(--ma-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  body.macct-page .ma-celebrate-mark, body.macct-page .ma-cfetti, body.macct-page .ma-hero-confetti { animation: none; }
  body.macct-page .ma-hero-confetti, body.macct-page .ma-cfetti { display: none; }
}

/* ---- Month glance (under the ring; links to Results) ---- */
body.macct-page .ma-glance {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 46px; margin: 0 auto 14px; padding: var(--sp-3) var(--sp-4);
  background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px;
  font-family: var(--ma-sans); font-size: 13.5px; color: var(--ma-ink); cursor: pointer; text-align: center;
}
body.macct-page .ma-glance:hover { border-color: var(--ma-gold); }
body.macct-page .ma-glance-net.pos { color: var(--ma-green); font-weight: 800; }
body.macct-page .ma-glance-net.neg { color: var(--ma-danger); font-weight: 800; }
body.macct-page .ma-glance-arrow { color: var(--ma-muted); font-size: 18px; flex-shrink: 0; }

/* ---- Expense donut + legend ---- */
body.macct-page .ma-bd-chart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
body.macct-page .ma-donut-wrap { flex: 0 0 auto; }
body.macct-page .ma-donut {
  width: 160px; height: 160px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
body.macct-page .ma-donut-hole {
  width: 96px; height: 96px; border-radius: 50%; background: var(--ma-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 3px rgba(18,35,63,.07);
}
body.macct-page .ma-donut-total { font-family: var(--ma-serif); font-size: 17px; font-weight: 700; color: var(--ma-ink); line-height: 1.1; }
body.macct-page .ma-donut-cap { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-muted); }
body.macct-page .ma-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; }
body.macct-page .ma-legend-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
body.macct-page .ma-legend-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
body.macct-page .ma-legend-lbl { flex: 1; color: var(--ma-ink); }
body.macct-page .ma-legend-amt { font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-legend-pct { color: var(--ma-muted); min-width: 34px; text-align: right; }
@media (max-width: 420px) { body.macct-page .ma-bd-chart { justify-content: center; } }

/* ═══ v292 — "Where the money went": full-width pie + by-category list + Losses (Angie Sep 24) ═══ */
/* Pie: full card width (max 330), ring ≈22% of radius, external % labels, serif centre total. */
body.macct-page .ma-pie-wrap { position: relative; width: 100%; max-width: 330px; margin: 6px auto 4px; }
body.macct-page .ma-pie-svg { display: block; width: 100%; height: auto; }
body.macct-page .ma-pie-svg circle { transition: none; }
body.macct-page .ma-pie-lbl { font-family: var(--ma-mono); font-size: 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
body.macct-page .ma-pie-total { font-family: var(--ma-serif); font-size: 24px; font-weight: 600; color: var(--ma-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
body.macct-page .ma-pie-cap { margin-top: 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-muted); }
/* Section label (11px uppercase gold + hairline) */
body.macct-page .ma-xsec { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--ma-line); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ma-gold-ink); }
/* By-category + losses rows (44px min, swatch · label · amount · %) */
body.macct-page .ma-xcat-list { display: flex; flex-direction: column; }
body.macct-page .ma-xcat-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--ma-line); font-size: 13.5px; }
body.macct-page .ma-xcat-row:last-child { border-bottom: 0; }
body.macct-page .ma-xcat-sw { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
body.macct-page .ma-xcat-lbl { flex: 1 1 auto; min-width: 0; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-xcat-amt { flex: 0 0 auto; font-family: var(--ma-mono); font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-xcat-pct { flex: 0 0 auto; min-width: 38px; text-align: right; font-size: 12px; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-xcat-total { border-top: 1.5px solid var(--ma-line); border-bottom: 0; font-weight: 700; }
body.macct-page .ma-xcat-total .ma-xcat-lbl, body.macct-page .ma-xcat-total .ma-xcat-amt { font-weight: 700; }
/* Losses section */
body.macct-page .ma-xloss-head .ma-xcat-lbl { font-weight: 700; }
body.macct-page .ma-xloss-sub { margin: 4px 0 2px; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-xloss-line { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 0; background: none; border: 0; border-bottom: 1px solid var(--ma-line); font-size: 13.5px; color: var(--ma-ink); text-align: left; cursor: pointer; }
body.macct-page .ma-xloss-line > span:first-child { flex: 1 1 auto; }
body.macct-page .ma-xchev { flex: 0 0 auto; color: var(--ma-muted); font-size: 18px; line-height: 1; }
body.macct-page .ma-xloss-unpriced { margin: 4px 0 0; font-size: 12px; color: var(--ma-gold-ink); }
body.macct-page .ma-xloss-foot { margin: 8px 0 0; font-size: 12px; color: var(--ma-muted); line-height: 1.4; }

/* ═══ v292 — Expense sheet: category chips + Necessary/Unnecessary segmented ═══ */
body.macct-page .ma-catchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
body.macct-page .ma-catchip { min-height: 36px; padding: 6px 12px; border: 1px solid var(--ma-line); border-radius: 999px; background: var(--ma-card); color: var(--ma-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
body.macct-page .ma-catchip.is-on { background: var(--ma-gold); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-catchip-hint { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ma-danger); }
body.macct-page .ma-needseg { display: flex; gap: 0; margin: 2px 0 8px; border: 1px solid var(--ma-line); border-radius: 10px; overflow: hidden; }
body.macct-page .ma-needbtn { flex: 1 1 0; min-height: 40px; padding: 8px 12px; background: var(--ma-card); border: 0; border-right: 1px solid var(--ma-line); color: var(--ma-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
body.macct-page .ma-needbtn:last-child { border-right: 0; }
body.macct-page .ma-needbtn.is-on { background: var(--ma-navy); color: var(--ma-on-navy); }

/* ═══ v292 — Money Matters: Consumables tile + sub-pane ═══ */
body.macct-page .ma-mm-tile--wide { grid-column: 1 / -1; }
/* Oct-3 — Consumables moved to Inventory: same odd-count full-width-last rule on the inventory grid. */
body.macct-page .ma-inv-tile--wide { grid-column: 1 / -1; }
body.macct-page .ma-cons-list { display: flex; flex-direction: column; margin-top: 2px; }
body.macct-page .ma-cons-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--ma-line); font-size: 13.5px; }
body.macct-page .ma-cons-row:last-child { border-bottom: 0; }
body.macct-page .ma-cons-desc { flex: 1 1 auto; min-width: 0; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-cons-day { flex: 0 0 auto; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-cons-amt { flex: 0 0 auto; font-family: var(--ma-mono); font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-cons-foot { display: flex; gap: 8px; margin-top: 12px; }
body.macct-page .ma-cons-foot .ma-btn { flex: 1 1 0; }

/* ---- EN | TL language switcher ---- */
body.macct-page .ma-lang { display: inline-flex; align-items: center; gap: 2px; }
body.macct-page .ma-lang-btn {
  min-width: 38px; min-height: 34px; padding: 6px 10px; border: 0; background: transparent;
  font-family: var(--ma-sans); font-size: 13px; font-weight: 700; color: var(--ma-muted); cursor: pointer; border-radius: 8px;
}
body.macct-page .ma-lang-btn:hover { color: var(--ma-ink); }
body.macct-page .ma-lang-btn.active { color: var(--ma-gold-deep); background: rgba(212,175,55,.14); }
body.macct-page .ma-lang-sep { color: var(--ma-line); font-size: 12px; }
/* login header row holds the wordmark + switcher */
body.macct-page .ma-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
/* sidebar footer: switcher sits above the wordmark */
body.macct-page .ma-side-foot .ma-lang { margin-bottom: 10px; }

/* ---- Mobile bottom nav (business-view context, <768px only) ---- */
/* IA v2: the per-business tab row is retired as visible nav (DOM/handlers kept). */
body.macct-page .ma-tabs { display: none; }
/* IA v2: the bottom nav is the primary per-business nav at ALL widths (floating card). */
body.macct-page .ma-botnav {
  display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 900;
  background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 18px; padding: 4px;
  box-shadow: var(--ma-shadow-float);
  /* Auto-hide on scroll: COMPOSITOR-ONLY (transform + opacity). The nav is position:fixed
     and its clearance is reserved via .ma-journey-mount padding-bottom, so hiding never
     reflows content. --ma-card is a solid/opaque colour in every theme, so no bleed-through. */
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
/* Hidden state — slides fully below the viewport (own height + bottom gap + safe area). */
body.macct-page .ma-botnav--hidden {
  transform: translateY(calc(100% + 10px + env(safe-area-inset-bottom)));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.macct-page .ma-botnav { transition: none; }
}
/* clear the fixed nav so it never overlaps the last content (all widths now) */
body.macct-page .ma-journey-mount { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  /* Slice 1: at desktop the grouped sidebar module-nav is the ONLY module nav — retire the
     floating botnav at ≥768 (its DOM/handlers stay intact for <768). Reclaim its clearance. */
  body.macct-page .ma-botnav { display: none; }
  body.macct-page .ma-journey-mount { padding-bottom: 0; }
}
body.macct-page .ma-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; border: 0; border-radius: 14px; background: transparent; cursor: pointer;
  font-family: var(--ma-sans); font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--ma-muted) 80%, var(--ma-ink));   /* Oct 8: ≥4.5:1 in every theme (was muted, 4.1 Classic / 3.9 Sepia) */
}
body.macct-page .ma-bn-ic { font-size: 19px; line-height: 1; }
body.macct-page .ma-bn-item.active { color: var(--ma-gold-deep); background: var(--ma-gold-soft); }
body.macct-page .ma-bn-item.active .ma-bn-ic { transform: translateY(-1px); }
body.macct-page .ma-bn-item.active .ma-bn-lbl { font-weight: 700; }
body.macct-page .ma-bn-pera .ma-bn-ic { color: var(--ma-gold-deep); font-weight: 800; font-size: 22px; }
/* Oct 8 — in-app Back (first nav item; never active). Nothing to go back to → dimmed, still ≥3:1 on the card. */
body.macct-page .ma-bn-back .ma-ic { width: 20px; height: 20px; }
body.macct-page .ma-bn-back:not([aria-disabled="true"]) { color: color-mix(in srgb, var(--ma-muted) 80%, var(--ma-ink)); }   /* enabled ≥4.5:1 in every theme (Classic 5.2, Sepia 4.8) — the shared muted is 4.1 */
body.macct-page .ma-bn-back[aria-disabled="true"] { color: color-mix(in srgb, var(--ma-muted) 88%, var(--ma-card)); cursor: default; }   /* 3.3:1 (enabled 4.1:1) */
body.macct-page .ma-botnav .ma-bn-item { min-width: 0; padding-left: 2px; padding-right: 2px; }   /* five equal widths down to 360px ("Operations" fits 61px) */
/* Same control at the top of the ≥768 sidebar — owner business only (the module nav is filled); hidden in the <768 drawer. */
body.macct-page .ma-side-back { display: none; }
@media (min-width: 768px) {
  body.macct-page.ma-biz-active .ma-sidebar:has(#ma-nav-modules:not(:empty)) .ma-side-back {
    display: flex; align-items: center; gap: 10px; width: calc(100% - 36px); min-height: 44px; margin: 0 18px 10px; padding: 0 12px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: transparent; color: #c5d0e0;
    font-family: var(--ma-sans); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  }
  body.macct-page .ma-side-back .ma-ic { width: 16px; height: 16px; flex: 0 0 auto; }
  body.macct-page .ma-side-back:hover:not([aria-disabled="true"]) { background: rgba(255,255,255,.05); color: #fff; }
  body.macct-page .ma-side-back[aria-disabled="true"] { color: #6f819c; border-color: rgba(255,255,255,.06); cursor: default; }
}
body.macct-page .ma-side-back:focus-visible, body.macct-page .ma-bn-back:focus-visible { outline: 2px solid var(--ma-gold); outline-offset: 2px; }
body.macct-page .ma-pera-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
body.macct-page .ma-sheet--chooser .ma-qa-btn { min-height: 64px; }
/* W3: More-kinds chooser rows (inside the reused ₱ sheet chrome). Compact row list — the ₱
   chooser's 2-big-button layout doesn't scale to 6 kinds; same sheet component. */
/* 2-column grid of CARDS (Oct-3, Angie): each kind is a centered cream card with a thin gold
   border, icon on top + label below. Equal height/width (grid-auto-rows:1fr + stretched items),
   ≥48px tap target, gentle pressed state. Same markup/handlers as before — layout only. Shared
   by the chooser SHEET + the Operations "More kinds" TAB. Tokens only (6-theme safe). */
body.macct-page .ma-morekinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: 1fr; margin-top: 8px; }
body.macct-page .ma-morekind {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 88px; padding: 16px 12px; text-align: center;
  border: 1px solid var(--ma-gold); border-radius: 13px; background: var(--ma-card); color: var(--ma-ink);
  box-shadow: var(--ma-shadow-card); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
body.macct-page .ma-morekind:hover { border-color: var(--ma-gold-deep); transform: translateY(-1px); }
body.macct-page .ma-morekind:active { transform: scale(.97); }
body.macct-page .ma-morekind .ma-ic { width: 26px; height: 26px; flex: none; color: var(--ma-gold-deep); }
body.macct-page .ma-morekind .ma-lbl { display: block; line-height: 1.25; overflow-wrap: anywhere; }
/* locked paid kinds (lapsed): card stays; taps route to plans; lock sub centers under the label */
body.macct-page .ma-morekind.is-locked { opacity: .85; }
body.macct-page .ma-morekind.is-locked .ma-ic { color: var(--ma-muted); }
body.macct-page .ma-morekind-sub { margin: 0; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--ma-gold-ink); }
/* Desktop ≥768: 3 across (6 kinds → two tidy rows). Phone stays 2 across. */
@media (min-width: 768px) { body.macct-page .ma-morekinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.macct-page .ma-lockbadge { font-size: 11px; }
body.macct-page .ma-dp-qabtn.is-locked { opacity: .72; }
/* W3: one-line past-day hint under the calendar. */
body.macct-page .ma-cal-pastnote { margin: 8px 2px 0; font-size: 12px; color: var(--ma-muted); font-style: italic; }
/* (botnav floating styles + mount padding moved to base — now all-width primary nav) */

/* ---- Logged-days calendar (Results · Month) ---- */
body.macct-page .ma-cal { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
body.macct-page .ma-cal-title { margin: 0 0 12px; font-family: var(--ma-serif); font-size: 18px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
body.macct-page .ma-cal-head { margin-bottom: 4px; }
body.macct-page .ma-cal-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ma-muted); padding: 2px 0; }
body.macct-page .ma-cal-cell {
  position: relative; aspect-ratio: 1 / 1; min-height: 38px; border: 0; background: transparent; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--ma-sans); color: var(--ma-ink); cursor: default;
}
body.macct-page .ma-cal-blank { visibility: hidden; }
body.macct-page .ma-cal-num { font-size: 13px; font-weight: 600; }
body.macct-page .ma-cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ma-gold); }
body.macct-page .ma-cal-logged { background: rgba(212,175,55,.08); cursor: pointer; }
body.macct-page .ma-cal-logged:hover { background: rgba(212,175,55,.18); }
body.macct-page .ma-cal-today { outline: 2px solid var(--ma-gold-deep); outline-offset: -2px; }
body.macct-page .ma-cal-sel { background: rgba(212,175,55,.28); }
body.macct-page .ma-cal-cap { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ma-gold-deep); text-align: center; }
body.macct-page .ma-cal-daylist { margin-top: 8px; border-top: 1px solid var(--ma-line); padding-top: 6px; }
body.macct-page .ma-cal-daytitle { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-cal-drow { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
body.macct-page .ma-cal-dtag { flex-shrink: 0; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
body.macct-page .ma-cal-dtag--benta { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-cal-dtag--gastos { background: var(--ma-line); color: var(--ma-navy-800); }
body.macct-page .ma-cal-ddesc { flex: 1; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-cal-damt { font-weight: 700; color: var(--ma-ink); flex-shrink: 0; }
body.macct-page .ma-cal-damt.pos { color: var(--ma-gold-deep); }
body.macct-page .ma-cal-damt.neg { color: var(--ma-danger); }
body.macct-page .ma-cal-damt--event { color: var(--ma-muted); font-weight: 600; font-size: 11px; }

/* ---- Money Calendar (Operations tab): month nav + summary + per-day IN/OUT ---- */
body.macct-page .ma-mcal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
body.macct-page .ma-mcal-title { margin: 0; flex: 1; text-align: center; }
body.macct-page .ma-mcal-navbtn {
  flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--ma-line); background: var(--ma-paper);
  border-radius: 999px; font-size: 20px; line-height: 1; color: var(--ma-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
body.macct-page .ma-mcal-navbtn:hover { background: var(--ma-gold-soft); border-color: var(--ma-gold); }
body.macct-page .ma-mcal-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
/* W5 slice 1: month totals collapsed to one line under the month title. Same values/classes. */
body.macct-page .ma-mcal-sumline { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-mcal-sumline .ma-mcal-sumlbl { color: var(--ma-ink); font-weight: 700; }
body.macct-page .ma-mcal-sumline .pos { color: var(--ma-success-ink); font-weight: 800; }
body.macct-page .ma-mcal-sumline .neg { color: var(--ma-danger); font-weight: 800; }
body.macct-page .ma-mcal-card {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ma-line);
  border-radius: 10px; background: var(--ma-card);
}
body.macct-page .ma-mcal-clbl { font-size: 10.5px; font-weight: 700; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .03em; }
body.macct-page .ma-mcal-cval { font-size: 15px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .ma-mcal-cval.pos { color: var(--ma-success-ink); }
body.macct-page .ma-mcal-cval.neg { color: var(--ma-danger); }
body.macct-page .ma-mcal-cell { min-width: 0; min-height: 54px; justify-content: flex-start; padding: 4px 1px 3px; gap: 1px; overflow: hidden; }
/* soft cream tiles for plain days only — logged (gold tint), selected, today (ring) keep their states */
body.macct-page .ma-mcal-cell:not(.ma-cal-logged):not(.ma-cal-sel):not(.ma-cal-blank):not(.ma-cal-range) { background: var(--ma-paper); }
/* range band (tap-A→tap-B): a mid gold tint, distinct from logged(.08) and selected(.28);
   the selected endpoint keeps its stronger sel fill, today keeps its ring. */
body.macct-page .ma-mcal-cell.ma-cal-range:not(.ma-cal-sel) { background: rgba(212,175,55,.17); }

/* ── range-select toggle chip + Sales Performance graph card (Pack slice 2) ── */
/* Oct-2 (Angie): Select-range + "X of 7 days logged" chip share one row inside the calendar card.
   Chip sits on the right; at 390 it wraps UNDER Select range (never truncated). The row owns the
   12px bottom margin the two children carried individually. */
body.macct-page .ma-mcal-rangerow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
body.macct-page .ma-mcal-rangerow .ma-range-toggle { margin-bottom: 0; }
body.macct-page .ma-mcal-rangerow .ma-dayschip { margin-bottom: 0; margin-left: auto; }
body.macct-page .ma-range-toggle { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ma-gold-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 999px; cursor: pointer; }
body.macct-page .ma-range-toggle .ma-ic { width: 15px; height: 15px; }
body.macct-page .ma-range-toggle:hover { border-color: var(--ma-gold); }
body.macct-page .ma-range-toggle.is-armed { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); }
body.macct-page .ma-graph-card { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow-card); padding: var(--sp-4); margin-bottom: 16px; }
body.macct-page .ma-graph-card[hidden] { display: none; }
body.macct-page .ma-graph-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.macct-page .ma-graph-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ma-serif); font-size: 17px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-graph-title .ma-ic { width: 18px; height: 18px; color: var(--ma-gold-deep); }
body.macct-page .ma-graph-x { width: 32px; height: 32px; flex: 0 0 auto; border: 0; background: rgba(122,138,165,.12); border-radius: 9px; color: var(--ma-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
body.macct-page .ma-graph-x .ma-ic { width: 15px; height: 15px; }
body.macct-page .ma-graph-range { margin: 4px 0 10px; font-family: var(--ma-mono); font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-graph-modes { display: flex; gap: 4px; padding: 4px; background: var(--ma-bg); border: 1px solid var(--ma-line); border-radius: 12px; margin-bottom: 12px; }
body.macct-page .ma-gmode { flex: 1; min-height: 32px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ma-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
body.macct-page .ma-gmode.is-on { color: var(--ma-on-navy); background: linear-gradient(135deg, var(--ma-navy-a), var(--ma-navy-b)); }
body.macct-page .ma-g-chart { width: 100%; height: auto; display: block; }
body.macct-page .ma-g-grid { stroke: var(--ma-line); stroke-width: 1; }
body.macct-page .ma-g-zero { stroke: var(--ma-muted); stroke-width: 1; stroke-dasharray: 2 2; }
body.macct-page .ma-g-ylbl, body.macct-page .ma-g-xlbl { font-family: var(--ma-mono); font-size: 9px; fill: var(--ma-muted); }
body.macct-page .ma-g-area { fill: rgba(212,175,55,.14); stroke: none; }
body.macct-page .ma-g-line { fill: none; stroke: var(--ma-gold-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 0; animation: ma-g-draw .9s var(--ma-ease-out); }
body.macct-page .ma-g-line--in { stroke: var(--ma-success-ink); }
body.macct-page .ma-g-line--out { stroke: var(--ma-danger); }
body.macct-page .ma-g-dot { fill: var(--ma-gold-deep); }
body.macct-page .ma-g-dot--in { fill: var(--ma-success-ink); }
body.macct-page .ma-g-dot--out { fill: var(--ma-danger); }
body.macct-page .ma-graph-legend { display: flex; gap: 14px; margin-top: 6px; }
body.macct-page .ma-g-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-g-lg::before { content: ''; width: 10px; height: 3px; border-radius: 2px; }
body.macct-page .ma-g-lg--in::before { background: var(--ma-success-ink); }
body.macct-page .ma-g-lg--out::before { background: var(--ma-danger); }
body.macct-page .ma-graph-empty { margin: 20px 0; text-align: center; font-size: 13px; color: var(--ma-muted); font-style: italic; }
body.macct-page .ma-graph-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
body.macct-page .ma-gsum { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-paper); }
body.macct-page .ma-gsum-l { font-size: 10px; font-weight: 700; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .03em; }
body.macct-page .ma-gsum-v { font-family: var(--ma-mono); font-weight: 800; font-size: 14px; color: var(--ma-ink); }
body.macct-page .ma-gsum-v.pos { color: var(--ma-success-ink); }
body.macct-page .ma-gsum-v.neg { color: var(--ma-danger); }
/* Money ▸ Today segment — read-only today's money rows */
body.macct-page .ma-money-body { margin-top: 4px; }
body.macct-page .ma-today-list { margin-top: 4px; }
body.macct-page .ma-today-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--ma-line-soft); }
body.macct-page .ma-today-row:last-child { border-bottom: 0; }
body.macct-page .ma-today-desc { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-today-amt { flex: 0 0 auto; font-family: var(--ma-mono); font-weight: 800; font-size: 14px; }
body.macct-page .ma-today-amt.pos { color: var(--ma-success-ink); }
body.macct-page .ma-today-amt.neg { color: var(--ma-danger); }
/* IA v2 Home view — crumb, teaser hero, module grid */
body.macct-page .ma-home-crumb { display: inline-flex; align-items: center; margin-bottom: 12px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ma-muted); background: transparent; border: 1px solid var(--ma-line); border-radius: 999px; cursor: pointer; }
body.macct-page .ma-home-crumb:hover { color: var(--ma-ink); border-color: var(--ma-gold); }
body.macct-page .ma-home-hero { background: linear-gradient(150deg, var(--ma-navy-a), var(--ma-navy-b)); border-radius: 12px; padding: var(--sp-4); color: var(--ma-on-navy); box-shadow: var(--ma-shadow); margin-bottom: 10px; }

/* Stats-first money hero (Home top, all themes). Net big + Kita/Gastos sub-tiles. */
body.macct-page .ma-stats { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: var(--sp-4); background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow-card); cursor: pointer; font: inherit; }
body.macct-page .ma-stats-net { display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-stats-net-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-muted); }
body.macct-page .ma-stats-net-val { font-family: var(--ma-serif); font-weight: 700; font-size: 30px; line-height: 1.05; }
body.macct-page .ma-stats-net-val.pos { color: var(--ma-success-ink); }
body.macct-page .ma-stats-net-val.neg { color: var(--ma-danger-ink); }
body.macct-page .ma-stats-sub { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ma-line-soft); }
body.macct-page .ma-stats-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-stats-tl-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-muted); }
body.macct-page .ma-stats-tl-val { font-size: 16px; font-weight: 800; }
body.macct-page .ma-stats-tl-val.pos { color: var(--ma-success-ink); }
body.macct-page .ma-stats-tl-val.neg { color: var(--ma-danger-ink); }
/* NET-card period selector — single row, never wraps, scrolls if narrow; active = gold-filled */
body.macct-page .ma-stats-wrap { margin-bottom: 10px; }
body.macct-page .ma-stats-wrap .ma-stats { margin-bottom: 0; }
body.macct-page .ma-stats-chips { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.macct-page .ma-stats-chips::-webkit-scrollbar { display: none; }
body.macct-page .ma-stats-chip { flex: 0 0 auto; white-space: nowrap; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-stats-chip:hover { border-color: var(--ma-gold-soft); color: var(--ma-ink); }
body.macct-page .ma-stats-chip.is-on { background: linear-gradient(135deg, var(--ma-gold), var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-hh-k { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-gold-soft); }
body.macct-page .ma-hh-title { margin: 0 0 6px; font-family: var(--ma-serif); font-weight: 700; font-size: 21px; line-height: 1.15; color: var(--ma-on-navy); }
body.macct-page .ma-hh-step { margin: 0 0 8px; font-size: 12px; color: var(--ma-on-navy); opacity: .72; }
body.macct-page .ma-hh-start { min-height: 44px; padding: 0 22px; background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
/* v2 compact — slim one-line next-step bar (replaces the multi-line .ma-home-hero card
   on Home; the .ma-home-hero / .ma-hh-* rules above are now dormant on Home but retained
   for a clean single-file revert of Commit B). Whole bar is the ≥44px tap target. */
body.macct-page .ma-home-nextbar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 56px; margin-bottom: 10px; padding: var(--sp-3) var(--sp-4); background: linear-gradient(150deg, var(--ma-navy-a), var(--ma-navy-b)); border: 1px solid var(--ma-navy-b); border-radius: 12px; box-shadow: var(--ma-shadow); color: var(--ma-on-navy); cursor: pointer; font: inherit; }
body.macct-page .ma-nb-ic { flex: 0 0 auto; font-size: 15px; font-weight: 800; line-height: 1; color: var(--ma-gold-soft); }
body.macct-page .ma-nb-txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
body.macct-page .ma-nb-k { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-gold-soft); }
body.macct-page .ma-nb-title { min-width: 0; font-family: var(--ma-serif); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ma-on-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-nb-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--ma-gold-soft); }
body.macct-page .ma-home-gridlabel { margin: 8px 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-ink-soft); }
body.macct-page .ma-home-growth { margin: 16px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--ma-ink-soft); }
/* Inventory FEFO expiry chips (Stock Watch) */
body.macct-page .ma-exp-chiprow { margin-top: 6px; }
body.macct-page .ma-exp-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
body.macct-page .ma-exp-chip--soon { background: var(--ma-gold-soft); color: var(--ma-gold-ink); border: 1px solid var(--ma-gold); }
body.macct-page .ma-exp-chip--past { background: var(--ma-danger-tint); color: var(--ma-danger-ink); border: 1px solid var(--ma-danger); }
/* Money Matters — Utang (loans): calendar due marker + loan cards */
body.macct-page .ma-cal-due { position: absolute; bottom: 2px; right: 3px; font-size: 8px; font-weight: 800; color: var(--ma-gold-deep); line-height: 1; }
body.macct-page .ma-cal-due--late { color: var(--ma-danger); }
body.macct-page .ma-cal-dtag--loan { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-mm-body { margin-top: 4px; }
body.macct-page .ma-loan-card { padding: var(--sp-3); border: 1px solid var(--ma-line); border-radius: 12px; margin-top: 10px; background: var(--ma-paper); }
body.macct-page .ma-loan-card.is-off { opacity: .72; }
body.macct-page .ma-loan-bal { font-family: var(--ma-mono); font-weight: 800; font-size: 15px; color: var(--ma-danger); }
body.macct-page .ma-loan-bal.is-off { color: var(--ma-success-ink); font-size: 12.5px; }
body.macct-page .ma-loan-inactive { font-size: 10px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-loan-pay { margin-top: 8px; min-height: 40px; font-size: 13px; }
body.macct-page .ma-loan-actions { display: flex; gap: 14px; margin-top: 8px; }
body.macct-page .ma-loan-del { color: var(--ma-danger); }
/* Ipon (savings) */
body.macct-page .ma-ipon-total { margin: 4px 0 2px; font-family: var(--ma-mono); font-weight: 800; font-size: 26px; color: var(--ma-gold-deep); }
body.macct-page .ma-cal-dtag--ipon { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-cal-dtag--collection { background: var(--ma-success-tint); color: var(--ma-success-ink); }   /* utang collection day tag (display-only) */
/* ⑤b — Pautang (receivables) ledger. Danger-toned total = money still OUT there (owed to you),
   deliberately distinct from ipon's gold "savings" total. */
body.macct-page .ma-pautang-total { margin: 4px 0 2px; font-family: var(--ma-mono); font-weight: 800; font-size: 26px; color: var(--ma-danger); }
body.macct-page .ma-pautang-row--done { opacity: 0.62; }
body.macct-page .ma-pautang-bal { flex-shrink: 0; font-family: var(--ma-mono); font-weight: 700; color: var(--ma-danger); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pautang-bal--done { color: var(--ma-success-ink); font-family: var(--ma-sans); font-weight: 700; }
body.macct-page .ma-pautang-collect { margin-top: 6px; color: var(--ma-gold-ink); font-weight: 700; }
/* Per-suki accordion (item — receivables ledger). Header = name·balance·Record payment (+chev);
   body = the ledger, hidden until the header is tapped. */
body.macct-page .ma-pautang-acc { padding: 0; overflow: hidden; }
body.macct-page .ma-pautang-head { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 13px 14px; cursor: pointer; }
body.macct-page .ma-pautang-head:focus-visible { outline: 2px solid var(--ma-gold-deep); outline-offset: -2px; }
body.macct-page .ma-pautang-headL { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-pautang-headtop { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
body.macct-page .ma-pautang-headR { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
body.macct-page .ma-pautang-headR .ma-pautang-collect { margin-top: 0; white-space: nowrap; }
body.macct-page .ma-pautang-chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ma-muted); transition: transform .18s ease; }
body.macct-page .ma-pautang-acc.is-open .ma-pautang-chev { transform: rotate(180deg); }
body.macct-page .ma-pautang-body { padding: 2px 14px 12px; border-top: 1px solid var(--ma-line); display: flex; flex-direction: column; gap: 8px; }
/* Sep 24 — rows collapsed by default: honour the `hidden` attribute the row builder already ships
   (the display:flex above otherwise overrode it, so rows rendered expanded). Chevron toggles it. */
body.macct-page .ma-pautang-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-pautang-chev { transition: none; } }
/* Row-footer Share (injected on expand — keeps the collapsed row DOM byte-identical). */
body.macct-page .ma-pautang-rowshare { align-self: flex-start; margin-top: 2px; color: var(--ma-gold-ink); font-weight: 700; }
/* One ledger line: items (+ chips) above, meta/amount/balance below on 390; one row ≥560. */
body.macct-page .ma-led-line { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px dashed var(--ma-line); }
body.macct-page .ma-led-line:last-child { border-bottom: 0; }
body.macct-page .ma-led-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
body.macct-page .ma-led-items { font-size: 13px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-led-chip { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-led-due { font-size: 10.5px; font-weight: 700; color: var(--ma-danger); }
body.macct-page .ma-led-side { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.macct-page .ma-led-meta { font-size: 11.5px; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-led-amt { font-family: var(--ma-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-led-amt--out { color: var(--ma-danger); }
body.macct-page .ma-led-amt--in { color: var(--ma-success-ink); }
body.macct-page .ma-led-bal { margin-left: auto; font-size: 11.5px; color: var(--ma-ink-soft); font-variant-numeric: tabular-nums; }
@media (min-width: 560px) {
  body.macct-page .ma-led-line { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; }
  body.macct-page .ma-led-main { flex: 1 1 auto; }
  body.macct-page .ma-led-side { flex: 0 0 auto; justify-content: flex-end; }
  body.macct-page .ma-led-bal { margin-left: 0; }
}
/* ⑤c — overdue flag + gabay nudge */
body.macct-page .ma-pautang-row--overdue { border-left: 3px solid var(--ma-danger); padding-left: 9px; }
body.macct-page .ma-pautang-od { display: inline-block; margin-left: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--ma-danger-tint); color: var(--ma-danger); vertical-align: middle; }
body.macct-page .ma-od-nudge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: var(--ma-danger-tint); color: var(--ma-danger); font-size: 0.82rem; line-height: 1.35; }
body.macct-page .ma-od-nudge-txt { flex: 1 1 auto; min-width: 0; }
body.macct-page .ma-od-nudge-go { flex-shrink: 0; font-weight: 700; font-size: 0.78rem; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--ma-danger); background: transparent; color: var(--ma-danger); cursor: pointer; }
body.macct-page .ma-od-nudge-x { flex-shrink: 0; border: 0; background: transparent; color: var(--ma-danger); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
/* Take-home split (Results) — display-only Net · Naipon · Take-home */
body.macct-page .ma-takehome { display: flex; gap: 8px; margin-bottom: 16px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow-card); padding: var(--sp-3); }
body.macct-page .ma-th-item { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: center; }
body.macct-page .ma-th-item--take { border-left: 1px solid var(--ma-line); }
body.macct-page .ma-th-lbl { font-size: 10px; font-weight: 700; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .03em; }
body.macct-page .ma-th-val { font-family: var(--ma-mono); font-weight: 800; font-size: 15px; color: var(--ma-ink); }
body.macct-page .ma-th-val.pos { color: var(--ma-success-ink); }
body.macct-page .ma-th-val.neg { color: var(--ma-danger); }
body.macct-page .ma-th-ipon { color: var(--ma-gold-deep); }
body.macct-page .ma-th-item--take .ma-th-val { font-size: 17px; }
/* Sobre (5-envelope plan) — display-only allocator */
body.macct-page .ma-sobre-net { margin: 2px 0 10px; font-size: 13px; color: var(--ma-ink-soft); }
body.macct-page .ma-sobre-list { display: flex; flex-direction: column; }
body.macct-page .ma-sobre-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ma-line-soft); }
body.macct-page .ma-sobre-row:last-child { border-bottom: 0; }
body.macct-page .ma-sobre-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ma-ink); }
body.macct-page .ma-sobre-pct { flex: 0 0 auto; font-family: var(--ma-mono); font-weight: 700; font-size: 12.5px; color: var(--ma-gold-deep); min-width: 42px; text-align: right; }
body.macct-page .ma-sobre-amt { flex: 0 0 auto; font-family: var(--ma-mono); font-weight: 800; font-size: 14px; color: var(--ma-ink); min-width: 70px; text-align: right; }
body.macct-page .ma-sobre-edit { margin-top: 10px; }
body.macct-page .ma-sobre-sum { margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--ma-ink-soft); }
body.macct-page .ma-sobre-sumv.ok { color: var(--ma-success-ink); }
body.macct-page .ma-sobre-sumv.bad { color: var(--ma-danger); }
/* PRO Health Score — Home card + Kalusugan segment */
body.macct-page .ma-hs-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-bottom: 10px; padding: var(--sp-3) var(--sp-4); background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow-card); cursor: pointer; font: inherit; }
body.macct-page .ma-hs-ring { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--ma-gold) var(--hs, 0deg), var(--ma-line) 0); }
body.macct-page .ma-hs-ring::before { content: ''; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: var(--ma-card); }
body.macct-page .ma-hs-ring { position: relative; }
body.macct-page .ma-hs-ring--good { background: conic-gradient(var(--ma-success-ink) var(--hs), var(--ma-line) 0); }
body.macct-page .ma-hs-ring--ok { background: conic-gradient(var(--ma-gold) var(--hs), var(--ma-line) 0); }
body.macct-page .ma-hs-ring--risk { background: conic-gradient(var(--ma-danger) var(--hs), var(--ma-line) 0); }
body.macct-page .ma-hs-ring--forming { background: var(--ma-line-soft); }
body.macct-page .ma-hs-num { position: relative; z-index: 1; font-family: var(--ma-mono); font-weight: 800; font-size: 17px; color: var(--ma-ink); }
body.macct-page .ma-hs-blur .ma-hs-num { filter: blur(5px); opacity: .6; }
body.macct-page .ma-hs-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
body.macct-page .ma-hs-title { font-family: var(--ma-serif); font-weight: 700; font-size: 15px; color: var(--ma-ink); display: inline-flex; align-items: center; gap: 6px; }
body.macct-page .ma-hs-title .ma-ic { width: 14px; height: 14px; }
body.macct-page .ma-hs-cap { font-size: 12px; color: var(--ma-ink-soft); }
body.macct-page .ma-hs-upsell { font-size: 12px; color: var(--ma-gold-deep); font-weight: 600; }
/* v2 compact — slim non-PRO health teaser row (~48px). PRO keeps the full .ma-hs-card
   ring card above. ≥44px tap target → PRO purchase. */
body.macct-page .ma-hs-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 48px; margin-bottom: 10px; padding: 8px 14px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-lg); box-shadow: var(--ma-shadow-card); cursor: pointer; font: inherit; }
body.macct-page .ma-hsr-ic { flex: 0 0 auto; display: inline-flex; color: var(--ma-gold-deep); }
body.macct-page .ma-hsr-ic .ma-ic { width: 16px; height: 16px; }
body.macct-page .ma-hsr-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-hsr-go { flex: 0 0 auto; font-size: 18px; font-weight: 700; line-height: 1; color: var(--ma-ink-soft); }
body.macct-page .ma-hs-go { flex: 0 0 auto; color: var(--ma-muted); font-size: 18px; }
body.macct-page .ma-hs-risk { border-color: var(--ma-danger); }
/* Kalusugan segment */
body.macct-page .ma-hs-big { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
body.macct-page .ma-hs-bignum { font-family: var(--ma-mono); font-weight: 800; font-size: 34px; color: var(--ma-ink); }
body.macct-page .ma-hs-good .ma-hs-bignum { color: var(--ma-success-ink); }
body.macct-page .ma-hs-ok .ma-hs-bignum { color: var(--ma-gold-deep); }
body.macct-page .ma-hs-risk .ma-hs-bignum { color: var(--ma-danger); }
body.macct-page .ma-hs-bigcap { font-size: 13px; color: var(--ma-ink-soft); }
body.macct-page .ma-hs-comp { padding: 10px 0; border-bottom: 1px solid var(--ma-line-soft); }
body.macct-page .ma-hs-comp:last-child { border-bottom: 0; }
body.macct-page .ma-hs-comp-top { display: flex; justify-content: space-between; align-items: center; }
body.macct-page .ma-hs-comp-name { font-size: 13.5px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-hs-comp-sub { font-family: var(--ma-mono); font-weight: 800; font-size: 14px; color: var(--ma-ink); }
body.macct-page .ma-hs-comp-na { font-size: 11.5px; color: var(--ma-muted); font-style: italic; }
body.macct-page .ma-hs-bar { height: 6px; border-radius: 99px; background: var(--ma-line); overflow: hidden; margin: 5px 0; }
body.macct-page .ma-hs-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ma-gold), var(--ma-gold-deep)); border-radius: 99px; }
body.macct-page .ma-hs-why { font-size: 11.5px; }
body.macct-page .ma-hs-whytext { margin: 4px 0 0; font-size: 12px; color: var(--ma-ink-soft); font-family: var(--ma-sans); }
/* PRO guardrail alarms — banners (MM + Results) + Kalusugan block */
body.macct-page .ma-alarms { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
body.macct-page .ma-alarm { display: flex; align-items: flex-start; gap: 9px; padding: var(--sp-3); border-radius: 12px; border: 1px solid var(--ma-line); font-size: 12.5px; line-height: 1.4; }
body.macct-page .ma-alarm--amber { background: var(--ma-gold-soft); border-color: var(--ma-gold); color: var(--ma-gold-ink); }
body.macct-page .ma-alarm--red { background: var(--ma-danger-tint); border-color: var(--ma-danger); color: var(--ma-danger-ink); }
body.macct-page .ma-alarm-ic { flex: 0 0 auto; }
body.macct-page .ma-alarm-ic .ma-ic { width: 16px; height: 16px; }
body.macct-page .ma-alarm-note { flex: 1 1 auto; min-width: 0; font-weight: 600; }
body.macct-page .ma-alarm-x { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
body.macct-page .ma-alarm-x .ma-ic { width: 14px; height: 14px; }
body.macct-page .ma-hs-alarmhdr { margin: 4px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ma-ink-soft); }
body.macct-page .ma-hs-alarms { margin: 8px 0 14px; }
/* Home score card alarm states */
body.macct-page .ma-hs-card.ma-hs-alarmed { border-color: var(--ma-danger); box-shadow: 0 0 0 1px var(--ma-danger) inset, var(--ma-shadow-card); }
body.macct-page .ma-hs-cap--red { color: var(--ma-danger); font-weight: 700; }
body.macct-page .ma-hs-tick { color: var(--ma-gold-deep); }
/* minmax(0,1fr) caps each track at its free-space share (1fr floors at min-content,
   which let a long nowrap mono hint stretch a column past the phone viewport). */
body.macct-page .ma-tilegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-rows: 1fr; align-items: stretch; }
body.macct-page .ma-tile { display: flex; align-items: center; gap: 11px; min-width: 0; text-align: left; padding: 9px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; box-shadow: var(--ma-shadow-card); cursor: pointer; font: inherit; }
body.macct-page .ma-tile:hover { border-color: var(--ma-gold); }
body.macct-page .ma-tile-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ma-gold-soft); color: var(--ma-gold-deep); }
body.macct-page .ma-tile-ic .ma-ic { width: 17px; height: 17px; }
/* Colorful Noto emoji artwork (Mock A: centered in the unchanged 34px gold-soft box). */
body.macct-page .ma-tile-emoji { width: 20px; height: 20px; display: block; }
body.macct-page .ma-tile-txt { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-tile-txt b { font-size: 14px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-tile-hint { font-size: 11.5px; color: var(--ma-ink-soft); font-family: var(--ma-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Journey lead card — navy per the mockup (it left the nav for the grid). */
body.macct-page .ma-tile--navy { background: linear-gradient(150deg, var(--ma-navy-a), var(--ma-navy-b)); border-color: var(--ma-navy-b); }
body.macct-page .ma-tile--navy .ma-tile-txt b { color: var(--ma-on-navy); }
body.macct-page .ma-tile--navy .ma-tile-hint { color: var(--ma-gold-soft); }
body.macct-page .ma-tile--navy .ma-tile-ic { background: rgba(212,175,55,.16); color: var(--ma-gold-soft); }
/* nav label safeguard (4-item row) — never let a label stretch/overflow an item */
body.macct-page .ma-bn-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { body.macct-page .ma-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Launcher grid on laptop: 4 columns (the mockup's visual map density). Scoped to the
   Home launcher (.ma-home-nav) so other tile grids keep their own layout. */
@media (min-width: 1024px) { body.macct-page .ma-tilegrid.ma-home-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ==========================================================================
   Home "YOUR BUSINESS" launcher — Mock B (Angie-approved): taller STACKED tiles
   (icon ABOVE text) on tablet + desktop. Scoped to .ma-tilegrid.ma-home-nav so
   every other tile grid (.ma-inv-grid / .ma-mm-grid) keeps its layout, and to
   ≥768px only so the phone (<768) stays byte-identical. Only size / spacing /
   icon position change; order, labels, hints, icons, ℹ️ and handlers untouched.
   ========================================================================== */
@media (min-width: 768px) {
  /* B layout: icon box first, text block stacked under it */
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* text block spans the tile so the hint can wrap (no single-line ellipsis).
     Up to 3 lines from 768–1279px (narrow 3-col/4-col columns need the room so the two
     longest hints never truncate); tightened to 2 lines ≥1280px where columns are wide. */
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-txt { width: 100%; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-txt b { font-weight: 600; line-height: 1.2; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-hint {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: clip; line-height: 1.4;
  }
  /* icon glyph scales with the larger box (keeps the ~59% box:glyph ratio) */
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-emoji { width: 28px; height: 28px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-ic--emoji { font-size: 28px; line-height: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.macct-page .ma-tilegrid.ma-home-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile { min-height: 140px; padding: 18px 16px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-ic { width: 48px; height: 48px; border-radius: 14px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-txt b { font-size: 17px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-hint { font-size: 13.5px; }
}
@media (min-width: 1024px) {
  body.macct-page .ma-tilegrid.ma-home-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile { min-height: 150px; padding: 20px 18px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-ic { width: 52px; height: 52px; border-radius: 14px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-txt b { font-size: 18px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-hint { font-size: 14px; }
}
/* Wide desktop: columns are roomy, so the two longest hints fit in 2 lines — tighten the clamp. */
@media (min-width: 1280px) {
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-hint { -webkit-line-clamp: 2; }
}
@media (min-width: 1440px) {
  body.macct-page .ma-tilegrid.ma-home-nav { gap: 18px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile { min-height: 160px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-ic { width: 56px; height: 56px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-emoji { width: 32px; height: 32px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-ic--emoji { font-size: 32px; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-txt b { font-size: 19px; }
}
@keyframes ma-g-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-g-line { animation: none; } }
body.macct-page .ma-mcal-cell .ma-cal-num { font-size: 12px; }
body.macct-page .ma-mcal-in, body.macct-page .ma-mcal-out { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; font-size: 9.5px; font-weight: 800; line-height: 1.1; }
body.macct-page .ma-mcal-in { color: var(--ma-success-ink); }
body.macct-page .ma-mcal-out { color: var(--ma-danger); }
body.macct-page .ma-mcal-cell .ma-cal-dot { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; }
body.macct-page .ma-cal-dayempty { margin: 4px 0 2px; font-size: 13px; color: var(--ma-muted); font-style: italic; }
/* drill-down source-tag palette */
body.macct-page .ma-cal-dtag--journey { background: var(--ma-navy, var(--ma-navy-800)); color: var(--ma-on-navy); }
body.macct-page .ma-cal-dtag--restock { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-cal-dtag--inv     { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-cal-dtag--book    { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-cal-dtag--cyc     { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-cal-dtag--ten     { background: var(--ma-cat-purple-tint); color: var(--ma-cat-purple-ink); }
body.macct-page .ma-cal-dtag--by      { background: var(--ma-line); color: var(--ma-navy-800); }
body.macct-page .ma-cal-dtag--waste   { background: var(--ma-danger-tint); color: var(--ma-danger); }
body.macct-page .ma-cal-dtag--ppl     { background: var(--ma-line); color: var(--ma-cat-blue); }
body.macct-page .ma-cal-dtag--trial   { background: var(--ma-cat-purple-tint); color: var(--ma-cat-purple); }
body.macct-page .ma-cal-dtag--ops     { background: var(--ma-line); color: var(--ma-muted); }

/* ---- Money Calendar v2: two-column (grid left / navy day panel right) ---- */
/* Two-card grammar: the outer .ma-mcal wrapper drops its own card chrome so the
   grid column and the navy day panel read as two side-by-side cards. */
body.macct-page .ma-cal.ma-mcal { background: transparent; border: 0; padding: 0; box-shadow: none; }
body.macct-page .ma-mcal-cols { display: flex; gap: 16px; align-items: stretch; }
body.macct-page .ma-mcal-left {
  flex: 0 0 44%; min-width: 288px;
  background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px;
  padding: var(--sp-4); box-shadow: var(--ma-shadow-card); align-self: flex-start;
}
/* flex:1 sizes the panel's WIDTH; align-self:flex-start stops it stretching to
   the calendar column's height so it hugs its own content (min-height ~3 rows). */
body.macct-page .ma-mcal-panel { flex: 1 1 0; min-width: 0; padding: var(--sp-4); align-self: flex-start; }
/* month summary strip sits inside the (narrower) left column */
body.macct-page .ma-mcal-left .ma-mcal-sum { gap: 6px; }
body.macct-page .ma-mcal-left .ma-mcal-card { padding: 6px 8px; }
body.macct-page .ma-mcal-left .ma-mcal-cval { font-size: 13.5px; }
/* red late corner-tick on a day cell */
body.macct-page .ma-cal-latetick { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent var(--ma-danger) transparent transparent; }
body.macct-page .ma-cal-latetick--legend { position: static; display: inline-block; border-width: 0 9px 9px 0; }
body.macct-page .ma-mcal-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
body.macct-page .ma-mcal-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-mcal-lg .ma-cal-dot { position: static; width: 7px; height: 7px; }

/* right: navy day panel (reuses .ma-hero gradient via ma-hero class) */
body.macct-page .ma-mcal-panel.ma-hero { border-radius: 14px; }
body.macct-page .ma-dp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
body.macct-page .ma-dp-date { margin: 0; font-family: var(--ma-serif); font-size: 17px; font-weight: 700; color: var(--ma-on-navy); flex: 1; }
body.macct-page .ma-dp-now { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--ma-gold); color: #4A3509; }   /* AA: was --ma-gold-ink 2.9:1 on gold → ≈5.4:1 */
body.macct-page .ma-dp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
/* Navy-surface recipe applied to the money In/Out/Net cards — was dark-on-navy
   (label #837863 = 2.46:1, pos/neg dark green/red ~2:1, all failing). Now readable. */
body.macct-page .ma-dp-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--ma-navy-card); border: 1px solid var(--ma-navy-line); }
body.macct-page .ma-dp-clbl { font-size: 10px; font-weight: 700; color: var(--ma-navy-muted); text-transform: uppercase; letter-spacing: .03em; }
body.macct-page .ma-dp-cval { font-size: 14px; font-weight: 800; color: var(--ma-navy-ink); }
body.macct-page .ma-dp-cval.pos { color: var(--ma-navy-pos); }
body.macct-page .ma-dp-cval.neg { color: var(--ma-navy-neg); }
body.macct-page .ma-dp-scroll { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.macct-page .ma-dp-grp { margin-bottom: 12px; }
body.macct-page .ma-dp-ghdr { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--ma-gold-soft); }
body.macct-page .ma-dp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); margin-bottom: 5px; border-left: 3px solid transparent; }
body.macct-page .ma-dp-desc { flex: 1; min-width: 0; color: var(--ma-on-navy); opacity: .82; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-dp .ma-cal-damt, body.macct-page .ma-mcal-panel .ma-cal-damt { flex-shrink: 0; color: var(--ma-on-navy); }
body.macct-page .ma-mcal-panel .ma-cal-damt.pos { color: var(--ma-success); }
body.macct-page .ma-mcal-panel .ma-cal-damt.neg { color: var(--ma-danger); }
body.macct-page .ma-mcal-panel .ma-cal-damt--event { color: var(--ma-muted); font-weight: 600; font-size: 11px; }
/* inline chips + tags inside a day-panel row */
body.macct-page .ma-dp-chip { flex-shrink: 0; margin-left: 6px; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
body.macct-page .ma-dp-chip--ok { background: var(--ma-success-ink); color: var(--ma-success-tint); }
body.macct-page .ma-dp-chip--bad { background: var(--ma-danger-ink); color: var(--ma-danger-tint); }
body.macct-page .ma-dp-chip--warn { background: var(--ma-gold-ink); color: var(--ma-gold-soft); }
body.macct-page .ma-dp-chip--neu { background: rgba(255,255,255,.14); color: var(--ma-on-navy); }
body.macct-page .ma-dp-chip--utang { background: rgba(212,175,55,.18); color: var(--ma-gold-deep); }   /* "Utang · suki" tag on a credit sale's day row */
body.macct-page .ma-dp-steptag { flex-shrink: 0; margin-left: 6px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-dp-late { flex-shrink: 0; margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; }
body.macct-page .ma-dp-late--late { background: var(--ma-danger); color: var(--ma-card); }
body.macct-page .ma-dp-late--edited { background: var(--ma-cat-amber); color: var(--ma-card); }
body.macct-page .ma-dp-row--late { border-left-color: var(--ma-danger); background: rgba(192,57,43,.16); }
body.macct-page .ma-dp-row--edited { border-left-color: var(--ma-cat-amber); background: rgba(201,119,43,.15); }
body.macct-page .ma-dp-empty { margin: 6px 0; font-size: 13px; color: var(--ma-navy-muted); font-style: italic; }
/* quick-adds at the bottom of the panel */
body.macct-page .ma-dp-qa { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-dp-qabtn { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--ma-on-navy); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
body.macct-page .ma-dp-qabtn:hover { background: rgba(212,175,55,.22); border-color: var(--ma-gold); }
body.macct-page .ma-dp-qanote { flex-basis: 100%; margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--ma-navy-muted); }
/* form-modal wrapper (reused ops panels) */
body.macct-page .ma-sheet--form { max-height: 88vh; overflow-y: auto; }
body.macct-page .ma-sheet-body { padding: 4px 2px 8px; }
/* stack to one column on narrow screens. The panel takes its NATURAL height in
   flow (flex:0 0 auto — not 1 1 0, which in a column collapses the panel and lets
   .ma-hero's overflow:hidden clip the date line/TODAY chip). Only the log list
   scrolls internally. The grid is compacted so grid+strip sit in ~half a phone
   screen and the panel is visible without scrolling past empty cells. */
@media (max-width: 680px) {
  body.macct-page .ma-mcal-cols { flex-direction: column; }
  /* Full-width when stacked: the base align-self:flex-start + flex:0 0 auto sized this
     card to its content and left-aligned it, leaving an uneven right gap. width:100%
     makes it fill the column evenly (matching the panel + the quick-add row above). */
  body.macct-page .ma-mcal-left { flex: 0 0 auto; min-width: 0; width: 100%; }
  body.macct-page .ma-mcal-panel { flex: 0 0 auto; width: 100%; overflow: visible; }
  body.macct-page .ma-dp-scroll { max-height: 300px; }
  /* compact grid: shorter cells (day # + one IN + one OUT), tighter gaps */
  body.macct-page .ma-mcal-cell { min-height: 32px; padding: 3px 1px 2px; }
  body.macct-page .ma-mcal-cell .ma-cal-num { font-size: 11px; }
  body.macct-page .ma-mcal-in, body.macct-page .ma-mcal-out { font-size: 9px; }
  body.macct-page .ma-mcal-cell .ma-cal-dot { top: 3px; right: 3px; width: 4px; height: 4px; }
  body.macct-page .ma-cal-latetick { border-width: 0 8px 8px 0; }
  body.macct-page .ma-mcal .ma-cal-grid { gap: 3px; }
  /* smaller month-strip cards */
  body.macct-page .ma-mcal-left .ma-mcal-sum { gap: 5px; margin-bottom: 8px; }
  body.macct-page .ma-mcal-left .ma-mcal-card { padding: 5px 7px; }
  body.macct-page .ma-mcal-left .ma-mcal-cval { font-size: 12.5px; }
  body.macct-page .ma-mcal-clbl { font-size: 9.5px; }
  body.macct-page .ma-mcal-nav { margin-bottom: 8px; }
  body.macct-page .ma-mcal-title { font-size: 15px; }
}
/* Tablets with the sidebar (768–1279): side by side the calendar card got only 254–374px, so Thu–Sun
   collapsed and the cells overlapped, and the day panel was cut. Stack them like phones — layout only,
   none of the phone compaction above (sizes unchanged). The panel keeps its natural height (flex:0 0 auto). */
@media (min-width: 768px) and (max-width: 1279px) {
  body.macct-page .ma-mcal-cols { flex-direction: column; }
  body.macct-page .ma-mcal-panel { flex: 0 0 auto; width: 100%; overflow: visible; }
}

/* ---- Step-expense affordance (hero + milestone nodes) ---- */
body.macct-page .ma-stepexp { margin-top: 8px; }
body.macct-page .ma-stepexp-toggle {
  border: 1px dashed var(--ma-gold); background: transparent; color: var(--ma-gold-deep);
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
body.macct-page .ma-stepexp-toggle:hover { background: var(--ma-gold-soft); }
body.macct-page .ma-stepexp-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
body.macct-page .ma-stepexp-desc, body.macct-page .ma-stepexp-amt {
  width: 100%; padding: 7px 9px; border: 1px solid var(--ma-line); border-radius: 8px;
  font-family: var(--ma-sans); font-size: 13px; color: var(--ma-ink); background: var(--ma-card);
}
body.macct-page .ma-stepexp-row { display: flex; gap: 6px; align-items: center; }
body.macct-page .ma-stepexp-row .ma-stepexp-amt { flex: 1; }
body.macct-page .ma-stepexp-save { flex-shrink: 0; padding: 7px 14px; font-size: 13px; }
body.macct-page .ma-stepexp-cancel { flex-shrink: 0; border: 0; background: transparent; color: var(--ma-muted); font-size: 12px; cursor: pointer; }
body.macct-page .ma-stepexp-done { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ma-success-ink); }
/* on the dark navy hero, lift the affordance colors for contrast */
body.macct-page .ma-hero .ma-stepexp-toggle { border-color: var(--ma-gold); color: var(--ma-gold-soft); }
body.macct-page .ma-hero .ma-stepexp-toggle:hover { background: rgba(212,175,55,.18); }
body.macct-page .ma-hero .ma-stepexp-done { color: var(--ma-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   MY PROFILE — display name, avatar, theme  (Slice: My Profile)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar avatar is now a button (opens the file picker); render an <img> when set. */
body.macct-page .ma-avatar { padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; overflow: hidden; line-height: 0; }
body.macct-page .ma-avatar:hover { border-color: rgba(220,230,245,.38); }
body.macct-page .ma-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

body.macct-page .ma-prof-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
body.macct-page .ma-prof-card { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; box-shadow: var(--ma-shadow); padding: 18px; }
body.macct-page .ma-prof-h { font-family: var(--ma-serif); font-size: 18px; font-weight: 700; color: var(--ma-ink); margin: 0 0 12px; }
body.macct-page .ma-prof-avatar {
  width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--ma-gold);
  background: rgba(212,175,55,.12); overflow: hidden; margin: 0 0 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ma-serif); font-size: 48px; font-weight: 700; color: var(--ma-gold-deep); line-height: 0;
}
body.macct-page .ma-prof-avatar .ma-avatar-img { width: 100%; height: 100%; }
body.macct-page .ma-prof-photo-actions { display: flex; flex-wrap: wrap; gap: 9px; }
body.macct-page .ma-prof-photo-actions .ma-btn { flex: 1 1 auto; min-height: 44px; }
body.macct-page .ma-prof-urlrow { display: flex; gap: 8px; margin-top: 10px; }
body.macct-page .ma-prof-urlrow .ma-input { flex: 1; }
body.macct-page .ma-prof-urlrow .ma-btn { flex: 0 0 auto; }
body.macct-page .ma-prof-remove { display: inline-block; margin-top: 12px; color: var(--ma-danger); }
body.macct-page .ma-prof-card .ma-btn-primary#ma-prof-save { margin-top: 12px; min-height: 46px; }
body.macct-page .ma-prof-ro { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ma-line); }
body.macct-page .ma-prof-ro-val { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--ma-ink); word-break: break-word; }

/* Theme swatches */
body.macct-page .ma-theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.macct-page .ma-theme-sw {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; cursor: pointer; text-align: left;
  background: var(--ma-card); border: 2px solid var(--ma-line); border-radius: 12px; font-family: var(--ma-sans);
}
body.macct-page .ma-theme-sw.active { border-color: var(--ma-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
body.macct-page .ma-theme-chip { display: block; height: 46px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
body.macct-page .ma-theme-chip--classic  { background: linear-gradient(135deg, var(--ma-navy-a) 0 42%, var(--ma-bg) 42%); }
body.macct-page .ma-theme-chip--midnight { background: linear-gradient(135deg, var(--ma-navy-a) 0 42%, var(--ma-navy-a) 42%); }
body.macct-page .ma-theme-chip--sepia    { background: linear-gradient(135deg, var(--ma-navy-a) 0 42%, var(--ma-card) 42%); }
body.macct-page .ma-theme-chip--gabi     { background: linear-gradient(135deg, #101A3E 0 55%, #C6F259 55%); }
body.macct-page .ma-theme-chip--ube      { background: linear-gradient(135deg, #6F68A0 0 55%, #ECE9FB 55%); }
body.macct-page .ma-theme-chip--gubat    { background: linear-gradient(135deg, #1F4D3A 0 55%, #EDF2E4 55%); }
body.macct-page .ma-theme-name { font-size: 13px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-theme-desc { font-size: 11px; color: var(--ma-muted); }

@media (min-width: 720px) {
  body.macct-page .ma-prof-grid { grid-template-columns: 1fr 1fr; }
  body.macct-page .ma-prof-theme { grid-column: 1 / -1; }
}

/* ═══ THEMES — full token overrides on <html>[data-theme]; navy/gold/category accents preserved ═══ */
:root[data-theme="midnight"] {
  --ma-bg: #0A1424; --ma-card: #122036; --ma-paper: #0E1B30; --ma-line: #26344B; --ma-line-soft: #1E2C46;
  --ma-ink: #E7EDF6; --ma-ink-soft: #94A3BE; --ma-muted: #94A3BE; --ma-on-navy: #E7EDF6;
  --ma-success-tint: #143024; --ma-success-ink: #7FE3B8;
  --ma-danger-tint: #3A1712; --ma-danger-ink: #FF9B8F;
  --ma-shadow: 0 6px 22px rgba(0,0,0,.42);
  --ma-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4);
  --ma-shadow-float: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="sepia"] {
  --ma-bg: #F1E7D3; --ma-card: #FBF4E6; --ma-paper: #FBF7EC; --ma-line: #E6D8BF; --ma-line-soft: #EFE4CE;
  --ma-ink: #3B2E1E; --ma-ink-soft: #8A785E; --ma-muted: #8A785E; --ma-on-navy: #F1E7D3;
  --ma-shadow: 0 6px 22px rgba(90,70,40,.14);
  --ma-shadow-card: 0 1px 2px rgba(90,70,40,.06), 0 4px 14px rgba(90,70,40,.1);
  --ma-shadow-float: 0 2px 6px rgba(90,70,40,.12), 0 12px 32px rgba(90,70,40,.16);
}
/* GABI — dark navy + neon-lime money theme. Gold/navy/cat accents inherited; on-navy LIGHT. */
:root[data-theme="gabi"] {
  --ma-bg: #101A3E; --ma-card: #1C2857; --ma-paper: #172248; --ma-line: #2C3A6E; --ma-line-soft: #223057;
  --ma-ink: #F2F6FF; --ma-ink-soft: #93A0C7; --ma-muted: #93A0C7; --ma-on-navy: #F2F6FF;
  --ma-success: #C6F259; --ma-success-ink: #D3F87A; --ma-success-tint: #263A2A;
  --ma-danger: #FF6B5E; --ma-danger-ink: #FF9C92; --ma-danger-tint: #3A1B22;
  --ma-shadow: 0 6px 22px rgba(4,8,20,.6);
  --ma-shadow-card: 0 1px 2px rgba(4,8,20,.5), 0 4px 14px rgba(4,8,20,.55);
  --ma-shadow-float: 0 2px 6px rgba(4,8,20,.55), 0 12px 32px rgba(4,8,20,.7);
}
/* UBE — lavender light theme. Money greens/reds KEPT from Klasiko (semantics stay honest). */
:root[data-theme="ube"] {
  --ma-bg: #ECE9FB; --ma-card: #F8F6FE; --ma-paper: #FCFBFF; --ma-line: #D9D3F2; --ma-line-soft: #E5E0F7;
  --ma-ink: #2B2550; --ma-ink-soft: #6F68A0; --ma-muted: #6F68A0; --ma-on-navy: #ECE9FB;
  --ma-shadow: 0 6px 22px rgba(70,55,120,.13);
  --ma-shadow-card: 0 1px 2px rgba(70,55,120,.06), 0 4px 14px rgba(70,55,120,.1);
  --ma-shadow-float: 0 2px 6px rgba(70,55,120,.1), 0 12px 32px rgba(70,55,120,.15);
}
/* GUBAT — forest-green calm light theme (booking gubat family). Danger reds kept from Klasiko. */
:root[data-theme="gubat"] {
  --ma-bg: #EDF2E4; --ma-card: #F7FAF0; --ma-paper: #FBFDF6; --ma-line: #D6E0C4; --ma-line-soft: #E3EAD5;
  --ma-ink: #1F3326; --ma-ink-soft: #5E7561; --ma-muted: #5E7561; --ma-on-navy: #EDF2E4;
  --ma-success: #2E7D54; --ma-success-ink: #1F5E3A; --ma-success-tint: #DCEBDD;
  --ma-shadow: 0 6px 22px rgba(40,70,40,.12);
  --ma-shadow-card: 0 1px 2px rgba(40,70,40,.06), 0 4px 14px rgba(40,70,40,.1);
  --ma-shadow-float: 0 2px 6px rgba(40,70,40,.1), 0 12px 32px rgba(40,70,40,.14);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Matthew System (subscription tier) surfaces — inert until the flag is on.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .mt-mount { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
/* dismissible trial box: X collapses banner + disclosure together into the red pill */
body.macct-page .mt-mount--dismissible { position: relative; padding-right: 30px; }
body.macct-page .mt-mount-x { position: absolute; top: 0; right: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ma-muted); font-size: 13px; line-height: 1; cursor: pointer; }
body.macct-page .mt-mount-x:hover { background: rgba(0,0,0,.06); color: var(--ma-ink); }
/* collapsed reminder — slim red pill (own bg+text, theme-independent), full-row, tappable */
body.macct-page .mt-pill { display: flex; align-items: center; width: 100%; gap: 6px; margin-bottom: 16px; padding: 8px 14px; border: 1px solid #E4B4AE; border-radius: 999px; background: #FBE9E7; color: #8A2A20; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; }
body.macct-page .mt-pill:hover { background: #F7DED9; }
/* H3: preview-ended notice pill — text button (tap → See Advanced) + × (snooze 7 days). */
body.macct-page .mt-pill-main { flex: 1 1 auto; min-width: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
body.macct-page .mt-pill-x { flex: 0 0 auto; background: none; border: 0; color: inherit; opacity: .7; font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; }
body.macct-page .mt-pill-x:hover { opacity: 1; }
body.macct-page .mt-pill-txt { flex: 1; min-width: 0; }
/* quiet gold line (≤14d) — calm, no timer */
body.macct-page .mt-goldline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border: 1px solid var(--ma-gold); background: var(--ma-gold-soft); border-radius: 10px; }
body.macct-page .mt-goldline-txt { flex: 1; font-size: 13px; font-weight: 600; color: var(--ma-gold-deep); }
body.macct-page .mt-goldline-cta { flex-shrink: 0; border: 1px solid var(--ma-gold-deep); background: transparent; color: var(--ma-gold-deep); font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
body.macct-page .mt-goldline-cta:hover { background: var(--ma-gold); color: var(--ma-gold-ink); }
/* 4c polish — the free-days chip on Preview / Home is a phone line (the bell carries it on wider screens). */
body.macct-page .ma-freechip { margin: 0 0 12px; }
@media (min-width: 768px) { body.macct-page .ma-freechip { display: none; } }
/* banner (≤7d / grace / lapsed) */
body.macct-page .mt-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ma-line); background: var(--ma-card); }
body.macct-page .mt-banner-txt { flex: 1; min-width: 200px; }
body.macct-page .mt-banner-title { margin: 0 0 3px; font-family: var(--ma-serif); font-size: 15px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .mt-banner-body { margin: 0; font-size: 13px; color: var(--ma-muted); }
body.macct-page .mt-banner-note { margin: 6px 0 0; font-size: 12px; color: var(--ma-muted); font-style: italic; }
body.macct-page .mt-banner-cta { flex-shrink: 0; border: 0; background: linear-gradient(135deg, var(--ma-gold), var(--ma-gold-deep)); color: var(--ma-gold-ink); font-size: 13px; font-weight: 800; padding: 9px 18px; border-radius: 9px; cursor: pointer; }
body.macct-page .mt-banner--warn { border-left: 4px solid var(--ma-gold); }
body.macct-page .mt-banner--grace { border-left: 4px solid var(--ma-cat-amber); background: rgba(201,119,43,.08); }
body.macct-page .mt-banner--lapsed { border-left: 4px solid var(--ma-danger); background: rgba(192,57,43,.07); }
/* Preview-ended = informational NOTICE (amber, not red) — W1 slice 1. */
body.macct-page .mt-banner--notice { border-left: 4px solid var(--ma-cat-amber); background: rgba(201,119,43,.06); }
/* Slice 2: preview-ended collapsed pill = amber notice tone (matches the notice banner; grace/lapsed pills stay red). */
body.macct-page .mt-pill--notice { border-color: var(--ma-cat-amber); background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .mt-pill--notice:hover { background: #FBDCC2; }
body.macct-page .mt-clarity { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ma-muted); background: var(--ma-card); border: 1px dashed var(--ma-line); border-radius: 9px; padding: 8px 12px; }
/* dismissible variant: reserve room for the × and anchor a 44px tap target (POS-hint × style) */
body.macct-page .mt-clarity--dismissible { position: relative; padding-right: 44px; }
body.macct-page .mt-clarity-x { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--ma-muted); font-size: 14px; line-height: 1; cursor: pointer; }
body.macct-page .mt-clarity-x:hover { color: var(--ma-ink); }
/* lapse read-only summary (paid tabs collapse to this) */
body.macct-page .mt-summary { display: flex; flex-direction: column; gap: 14px; }
body.macct-page .mt-summary-lock { background: rgba(192,57,43,.06); border: 1px solid rgba(192,57,43,.25); border-radius: 12px; padding: 14px 16px; }
body.macct-page .mt-summary-title { margin: 0 0 4px; font-family: var(--ma-serif); font-size: 16px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .mt-summary-body { margin: 0 0 4px; font-size: 13px; color: var(--ma-ink); }
body.macct-page .mt-summary-note { margin: 0; font-size: 12px; color: var(--ma-muted); font-style: italic; }
body.macct-page .mt-summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.macct-page .mt-scard { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--ma-line); border-radius: 12px; background: var(--ma-card); }
body.macct-page .mt-scard-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ma-muted); }
body.macct-page .mt-scard-val { font-size: 18px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .mt-scard-val.pos { color: var(--ma-success-ink); }
body.macct-page .mt-scard-val.neg { color: var(--ma-danger); }
body.macct-page .mt-summary-cta { align-self: flex-start; }
/* subscribe / renew modal */
body.macct-page .mt-modal-back { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,15,25,.55); opacity: 0; transition: opacity .2s; overflow-y: auto; }
body.macct-page .mt-modal-back.open { opacity: 1; }
body.macct-page .mt-modal { width: 100%; max-width: 440px; background: var(--ma-card); border-radius: 16px; padding: 22px; box-shadow: var(--ma-shadow); max-height: 92vh; overflow-y: auto; }
body.macct-page .mt-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
body.macct-page .mt-modal-head h3 { margin: 0; font-family: var(--ma-serif); font-size: 19px; color: var(--ma-ink); }
body.macct-page .mt-modal-x { border: 0; background: transparent; font-size: 18px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .mt-modal-intro { margin: 0 0 14px; font-size: 13px; color: var(--ma-muted); }
body.macct-page .mt-passes { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .mt-pass { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--ma-line); border-radius: 11px; cursor: pointer; }
body.macct-page .mt-pass input { accent-color: var(--ma-gold-deep); }
body.macct-page .mt-pass--sel { border-color: var(--ma-gold); background: var(--ma-gold-soft); }
body.macct-page .mt-pass-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .mt-pass-price { font-size: 15px; font-weight: 800; color: var(--ma-gold-deep); }
body.macct-page .mt-extend-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ma-muted); font-style: italic; }
body.macct-page .mt-qr { text-align: center; margin: 14px 0 10px; }
body.macct-page .mt-qr-img { width: 180px; height: 180px; border-radius: 12px; border: 1px solid var(--ma-line); }
body.macct-page .mt-qr-note { margin: 8px 0 0; font-size: 12px; color: var(--ma-muted); }
body.macct-page .mt-refform { display: flex; gap: 8px; margin-top: 6px; }
body.macct-page .mt-ref { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--ma-line); border-radius: 9px; font-family: var(--ma-sans); font-size: 14px; color: var(--ma-ink); background: var(--ma-card); }
body.macct-page .mt-ref-submit { flex-shrink: 0; }
body.macct-page .mt-modal-clarity { margin-top: 14px; }

/* ── Matthew PRO (slice 5b): gold CTA + subscribe-modal section + purchase surface ── */
body.macct-page .ma-btn-gold { background: var(--ma-gold-deep); color: #fff; border: 0; }
body.macct-page .ma-btn-gold:hover { filter: brightness(1.05); }

body.macct-page .mt-prosec { margin-top: 16px; padding: 14px; border: 1.5px solid var(--ma-gold); border-radius: 12px; background: var(--ma-gold-soft); }
body.macct-page .mt-prosec-title { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .mt-prosec-line { margin: 0 0 10px; font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .mt-prosec-cta { width: 100%; }
body.macct-page .mt-prosec--active { display: flex; align-items: center; justify-content: center; }
body.macct-page .mt-prosec-badge { font-size: 13px; font-weight: 800; color: var(--ma-gold-ink); }

body.macct-page .mt-pro-pricepill { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); font-size: 14px; font-weight: 800; }
body.macct-page .mt-pro-bullets { margin: 0 0 12px; padding-left: 18px; }
body.macct-page .mt-pro-bullets li { font-size: 13px; line-height: 1.5; color: var(--ma-ink); margin-bottom: 6px; }
body.macct-page .mt-pro-req { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ma-gold-deep); }
body.macct-page .mt-pro-freenote { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ma-muted); font-style: italic; }
body.macct-page .mt-pro-note { padding: 16px; border-radius: 12px; text-align: center; }
body.macct-page .mt-pro-note--ok { background: var(--ma-success-tint); border: 1px solid var(--ma-success-ink); }
body.macct-page .mt-pro-note--wait { background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); }
body.macct-page .mt-pro-note-title { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .mt-pro-note-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ma-muted); }

body.macct-page .ma-hs-upcta { margin-top: 12px; }

/* ── Mga Supplier pane (Supplier Marketplace 1c) ── */
body.macct-page .ma-sup-h { display: flex; align-items: center; gap: 8px; font-family: var(--ma-serif); font-size: 20px; color: var(--ma-ink); margin: 0 0 4px; }
body.macct-page .ma-sup-h svg { width: 22px; height: 22px; }
body.macct-page .ma-sup-sub { margin: 0 0 12px; font-size: 13px; color: var(--ma-muted); }
body.macct-page .ma-sup-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
body.macct-page .ma-sup-chip { border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-sup-chip.sel { border-color: var(--ma-gold); background: var(--ma-gold-soft); color: var(--ma-gold-ink); font-weight: 700; }
body.macct-page .ma-sup-search { width: 100%; padding: 10px 12px; border: 1px solid var(--ma-line); border-radius: 9px; font-family: var(--ma-sans); font-size: 14px; color: var(--ma-ink); background: var(--ma-card); margin-bottom: 12px; }
body.macct-page .ma-sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
body.macct-page .ma-sup-card { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 14px; min-width: 0; }
body.macct-page .ma-sup-card.ma-sup-feat { border: 2px solid var(--ma-gold); box-shadow: 0 3px 14px rgba(200,150,62,.16); }
body.macct-page .ma-sup-top { display: flex; align-items: center; gap: 10px; }
body.macct-page .ma-sup-logo { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 1px solid var(--ma-line); flex-shrink: 0; }
body.macct-page .ma-sup-name { font-weight: 800; color: var(--ma-ink); font-size: 15.5px; line-height: 1.2; min-width: 0; }
body.macct-page .ma-sup-badge { color: var(--ma-gold-deep); }
body.macct-page .ma-sup-tags { margin: 8px 0 0; }
body.macct-page .ma-sup-tag { display: inline-block; background: var(--ma-gold-soft); color: var(--ma-gold-ink); font-size: 11px; border-radius: 6px; padding: 2px 8px; margin: 2px 3px 0 0; }
body.macct-page .ma-sup-photos { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; }
body.macct-page .ma-sup-photos img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--ma-line); }
body.macct-page .ma-sup-line { font-size: 13px; color: var(--ma-ink); margin: 3px 0; }
body.macct-page .ma-sup-desc { font-size: 13px; color: var(--ma-muted); margin: 6px 0; }
body.macct-page .ma-sup-dti { display: inline-block; background: var(--ma-card); border: 1px solid var(--ma-line); color: var(--ma-muted); font-size: 11px; border-radius: 6px; padding: 2px 8px; }
body.macct-page .ma-sup-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
body.macct-page .ma-sup-btn { text-decoration: none; font-size: 12.5px; font-weight: 700; border: 1px solid var(--ma-line); border-radius: 8px; padding: 7px 11px; color: var(--ma-ink); }
body.macct-page .ma-sup-btn.ma-sup-maps { background: var(--ma-gold-soft); border-color: var(--ma-gold); color: var(--ma-gold-ink); }
body.macct-page .ma-sup-empty { grid-column: 1 / -1; text-align: center; color: var(--ma-muted); padding: 28px 0; }
body.macct-page .ma-sup-foot { margin: 14px 0 0; font-size: 12px; color: var(--ma-muted); text-align: center; }
/* Honesty line above the cards — parity with the /suppliers page .notice (quiet/muted). */
body.macct-page .ma-sup-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ma-muted); background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 10px; padding: 10px 12px; }
/* GABAY v1 — collapsed system-guidance block at the bottom of a pane (Inventory first). */
body.macct-page .ma-gabay { margin: 16px 0 0; border-top: 1px solid var(--ma-line); padding-top: 10px; }
body.macct-page .ma-gabay-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; }
body.macct-page .ma-gabay-h { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ma-gold-deep); }
body.macct-page .ma-gabay-topic { font-size: 12px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-gabay-chev { margin-left: auto; color: var(--ma-muted); display: inline-flex; transition: transform .2s ease; }
body.macct-page .ma-gabay-chev .ma-ic { width: 18px; height: 18px; }
body.macct-page .ma-gabay.is-open .ma-gabay-chev { transform: rotate(180deg); }
body.macct-page .ma-gabay-prov { flex: 1 1 100%; font-size: 11.5px; line-height: 1.4; color: var(--ma-muted); }
body.macct-page .ma-gabay-list { list-style: none; margin: 8px 0 0; padding: 0; display: none; }
body.macct-page .ma-gabay.is-open .ma-gabay-list { display: block; }
body.macct-page .ma-gabay-tip { border: 1px solid var(--ma-line); border-radius: 10px; margin: 0 0 6px; background: var(--ma-card); overflow: hidden; }
body.macct-page .ma-gabay-tbtn { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: 9px 12px; cursor: pointer; font: inherit; }
body.macct-page .ma-gabay-num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--ma-gold-soft); color: var(--ma-gold-deep); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
body.macct-page .ma-gabay-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ma-ink); }
body.macct-page .ma-gabay-body { display: none; margin: 0; padding: 0 12px 12px 41px; font-size: 13px; line-height: 1.6; color: var(--ma-ink-soft); }
body.macct-page .ma-gabay-tip.is-open .ma-gabay-body { display: block; }
/* Offline Level 2 — staleness banner (one quiet amber row at the top of the content column). */
body.macct-page .ma-offline-banner { display: none; margin: 0 0 12px; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: var(--ma-ink); background: var(--ma-cat-amber-tint, #FBF4E6); border: 1px solid var(--ma-cat-amber, #E4C77A); border-radius: 10px; }
/* Unang Araw guide (Slice 1) — dim overlay (above the fixed bottom-nav z900, below the
   quick-add sheet z1000) with a spotlit +Benta/+Gastos CTA; theme-agnostic dim. */
body.macct-page .ma-guide { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,12,24,.62); }
body.macct-page .ma-guide-card { width: 100%; max-width: 340px; text-align: center; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 16px; padding: 22px; box-shadow: var(--ma-shadow-float); }
body.macct-page .ma-guide-line { margin: 0 0 16px; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-guide-cta { width: 100%; min-height: 48px; }
body.macct-page .ma-guide-skip { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--ma-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
body.macct-page .ma-guide-reveal { margin: 0 0 12px; padding: 12px 14px; text-align: center; background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); border-radius: 12px; }
body.macct-page .guide-spot { position: relative; z-index: 951; box-shadow: 0 0 0 0 rgba(212,175,55,.55); animation: ma-guide-pulse 1.5s ease-out infinite; }
@keyframes ma-guide-pulse { to { box-shadow: 0 0 0 14px rgba(212,175,55,0); } }
@media (prefers-reduced-motion: reduce) { body.macct-page .guide-spot { animation: none; box-shadow: 0 0 0 3px rgba(212,175,55,.55); } }
/* Tanong helper (Slice 3) — ? topbar button + Q&A bottom sheet (reuses .ma-sheet). */
.ma-help-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(220,230,245,.25); background: rgba(255,255,255,.06); color: var(--ma-on-navy); font-size: 17px; font-weight: 800; cursor: pointer; }
body.macct-page .ma-tanong-sheet { max-height: 82vh; display: flex; flex-direction: column; }
body.macct-page .ma-tanong-list { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 4px; }
body.macct-page .ma-tanong-item { border-bottom: 1px solid var(--ma-line-soft); }
body.macct-page .ma-tanong-q { width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: 12px 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-tanong-a { padding: 0 4px 12px; font-size: 13.5px; line-height: 1.6; color: var(--ma-ink-soft); }
body.macct-page .ma-tanong-a p { margin: 0 0 10px; }
body.macct-page .ma-tanong-go { min-height: 40px; background: var(--ma-gold-soft); color: var(--ma-gold-deep); border: 1px solid var(--ma-gold); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
body.macct-page .ma-tanong-seam { margin-top: 10px; padding: 12px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--ma-muted); background: var(--ma-line-soft); border-radius: 10px; }
/* SLICE A — Suggestion Box row (replaces the disabled seam) */
body.macct-page .ma-tanong-sugg { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ma-line-soft); }
body.macct-page .ma-tanong-suggq { width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ma-gold, #B78A24); cursor: pointer; }
body.macct-page .ma-tanong-suggbody { padding: 4px 4px 8px; }
body.macct-page .ma-tanong-suggta { width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--ma-line-soft); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ma-ink); background: #fff; box-sizing: border-box; }
body.macct-page .ma-tanong-suggsend { margin-top: 8px; padding: 10px 20px; border: 0; border-radius: 10px; font: inherit; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #C8963E, #A87230); cursor: pointer; }
body.macct-page .ma-tanong-suggsend:disabled { opacity: .5; cursor: default; }
body.macct-page .ma-tanong-suggmsg { margin-top: 10px; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.4; }
body.macct-page .ma-tanong-suggmsg.is-ok { background: #EAF5EC; color: #26663A; }
body.macct-page .ma-tanong-suggmsg.is-err { background: #FBEAEA; color: #8A2A2A; }

/* ════ CONTEXTUAL HELP (Slice Ⓘa) — vibrant ℹ️ per card/tab + expandable sheet ════
   The ℹ️ is a stop-propagation span injected by addHelp(); it never disturbs the
   host card's own recipe (only adds position context + a corner mark). Distinct
   from the app-wide "?" Tanong button (.ma-help-btn), which is untouched. */
/* Help-icon toggle: one class hides every ℹ️ anchor (no DOM removal, no re-render). */
body.macct-page.ma-help-off .ma-help-i { display: none !important; }
/* Top-bar toggle pill + the same control as a row inside the Ask-Help sheet. */
body.macct-page .ma-help-toggle { flex: 0 0 auto; margin-right: 8px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink-soft); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
body.macct-page .ma-help-toggle:hover { border-color: var(--ma-gold); color: var(--ma-gold-ink); }
body.macct-page.ma-help-off .ma-help-toggle { background: var(--ma-bg); color: var(--ma-muted); }
body.macct-page .ma-help-toggle-row { display: block; width: 100%; text-align: left; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); font: inherit; font-size: 13px; font-weight: 700; padding: 12px 14px; border-radius: 12px; cursor: pointer; margin-bottom: 12px; }
body.macct-page .ma-help-toggle-row:hover { border-color: var(--ma-gold); }
/* Footer utility row: [EN | TL] on the left; the Tips on/off toggle + Ask/Help "?" pushed
   right. The two utils are desktop-only (≥768) — the mobile top bar carries them <768, and
   #ma-tanong-side lives in the hidden #ma-acct-group ≥768, so this is their only reachable
   home on tablet/laptop. They ride the EN|TL row (the one footer row proven visible). */
body.macct-page .ma-side-langrow { display: flex; align-items: center; gap: 8px; }
body.macct-page .ma-help-toggle--side, body.macct-page .ma-help-btn--side { display: none; }   /* <768: top bar owns them */
@media (min-width: 768px) {
  body.macct-page .ma-help-toggle--side {
    display: inline-flex; align-items: center; margin-left: auto; margin-right: 0; white-space: nowrap;
    border-color: rgba(220,230,245,.20); background: rgba(255,255,255,.06); color: rgba(220,230,245,.82);
  }
  body.macct-page .ma-help-toggle--side:hover { border-color: var(--ma-gold); color: var(--ma-gold-soft); }
  body.macct-page.ma-help-off .ma-help-toggle--side { background: rgba(255,255,255,.03); color: rgba(220,230,245,.5); }
  body.macct-page .ma-help-btn--side { display: inline-flex; width: 34px; height: 34px; font-size: 15px; flex: 0 0 auto; }
}
body.macct-page .ma-help-host { position: relative; }
/* Store-name card at the bottom of Home. The ℹ️ (ov.name) sits in the title row (card
   host, top-right) — never beside Save. */
body.macct-page .ma-ov-namecard { position: relative; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 16px; margin-top: 16px; }
body.macct-page .ma-ov-namecard-head { margin-bottom: 10px; padding-right: 30px; }
body.macct-page .ma-ov-namecard-title { margin: 0; font-family: var(--ma-serif); font-size: 15px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-ov-namecard .ma-biz-nameform { display: flex; gap: 8px; }
body.macct-page .ma-ov-namecard-name { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--ma-serif); font-size: 18px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-ov-nameedit { flex: 0 0 auto; background: none; border: 0; padding: 2px; cursor: pointer; color: var(--ma-gold-deep); display: inline-flex; }
body.macct-page .ma-ov-nameedit .ma-ic { width: 16px; height: 16px; }
body.macct-page .ma-ov-namecard-sub { margin: 6px 0 0; font-size: 11px; color: var(--ma-muted); }
body.macct-page .ma-help-i {
  position: absolute; top: var(--sp-1); right: var(--sp-1); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 3px; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(44,40,24,.18));
}
body.macct-page .ma-help-i svg { width: 20px; height: 20px; display: block; }
body.macct-page .ma-help-i svg > circle:first-child { fill: var(--ma-gold); }
body.macct-page .ma-help-i .ma-help-i-dot { fill: #fff; }
body.macct-page .ma-help-i:hover svg > circle:first-child { fill: var(--ma-gold-deep); }
body.macct-page .ma-help-i:focus-visible { outline: 2px solid var(--ma-gold-deep); outline-offset: 2px; }
/* Inline variant (chips / text-buttons / labelled rows): a normal flex/inline child, 6px
   after the text — never absolute over the label. The host grows to fit; never clips (rule c/d). */
body.macct-page .ma-help-i--inline {
  position: static; width: 22px; height: 22px; padding: 0; margin-left: 6px;
  flex: 0 0 auto; vertical-align: middle; filter: none;
}
body.macct-page .ma-help-i--inline svg { width: 18px; height: 18px; }
/* New-order button: center [label · ℹ️] as one flex row so the ℹ️ rides inline after the arrow. */
body.macct-page .ma-qa-pos { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Page-level help header strip (prepended by show(name)) */
body.macct-page .ma-pane-head {
  position: relative; display: flex; align-items: center; min-height: 30px;
  margin: 0 0 var(--sp-2); padding: var(--sp-1) 32px var(--sp-1) 2px;
}
body.macct-page .ma-pane-head-ttl {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ma-gold-ink);
}
body.macct-page .ma-pane-head .ma-help-i { top: 50%; transform: translateY(-50%); right: 0; }

/* Help sheet — reuses .ma-sheet / .ma-sheet-back chrome */
body.macct-page .ma-help-sheet { max-height: 84vh; display: flex; flex-direction: column; }
body.macct-page .ma-help-body { overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 2px; }
body.macct-page .ma-help-short { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ma-ink); }
/* v293 — help summary parsed into What/How/Why rows (label + text), hairline below the block. */
body.macct-page .ma-help-short--rows { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-help-srow { display: flex; flex-direction: column; gap: 1px; }
body.macct-page .ma-help-slbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-gold-ink); }
body.macct-page .ma-help-stxt { font-size: 15px; line-height: 1.5; color: var(--ma-ink); }
body.macct-page .ma-help-short--rows + .ma-help-more { margin-top: 10px; }
/* v293 — lock-in-place notice above a paid form on lapse (Money Matters). */
body.macct-page .ma-mm-lockrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 10px 12px; background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); border-radius: 10px; }
body.macct-page .ma-mm-lockglyph { flex: 0 0 auto; display: inline-flex; color: var(--ma-gold-deep); }
body.macct-page .ma-mm-locktxt { flex: 1 1 160px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ma-gold-ink); line-height: 1.4; }
body.macct-page .ma-mm-lockrenew { flex: 0 0 auto; width: auto; min-height: 36px; padding: 6px 16px; margin: 0; background: var(--ma-gold); color: #10223f; }   /* Oct 8: navy on gold 7.3:1 (was white on gold-deep 3.4:1); same in every theme */
body.macct-page .ma-mlog-form input:disabled, body.macct-page .ma-mlog-form button:disabled, body.macct-page .ma-mlog-form select:disabled { opacity: .55; cursor: not-allowed; }
/* Tiers 1/3 — lock-in-place: disabled action buttons/fields dim; contact <a> can't take
   :disabled, so lockPaneInPlace() tags them .ma-locked-ctl (pointer-events off + dimmed). */
body.macct-page .ma-btn:disabled { opacity: .55; cursor: not-allowed; }
body.macct-page .ma-locked-ctl { pointer-events: none; opacity: .55; cursor: not-allowed; }
body.macct-page .ma-help-more {
  margin-top: var(--sp-3); min-height: 44px; width: 100%;
  background: var(--ma-gold-soft); color: var(--ma-gold-ink);   /* Oct 18: gold-ink 5.26:1 on gold-soft (was gold-deep 2.79:1); 44px target (was 40) */
  border: 1px solid var(--ma-gold-deep); border-radius: 10px; padding: 9px 14px;   /* Oct 18: border ≥3:1 on the sheet (gold was ~2:1) */
  font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
}
body.macct-page .ma-help-full { margin-top: var(--sp-3); }
body.macct-page .ma-help-sect { margin-bottom: var(--sp-3); }
body.macct-page .ma-help-sect p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ma-ink); color: color-mix(in srgb, var(--ma-ink) 40%, var(--ma-ink-soft)); }   /* Oct 18: ≥4.5:1 (ink-soft alone was 4.10:1); plain ink where color-mix is unsupported */
body.macct-page .ma-help-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-gold-ink);
}
body.macct-page .ma-help-wired { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
body.macct-page .ma-help-chip {
  font-size: 12px; font-weight: 700; color: var(--ma-gold-ink);   /* Oct 18: gold-ink 5.26:1 on gold-soft (was gold-deep 2.79:1) */
  background: var(--ma-gold-soft); border: 1px solid var(--ma-gold-deep);   /* Oct 18: border ≥3:1 on the sheet (gold was ~2:1) */
  border-radius: 999px; padding: 3px 10px;
}
/* Oct 18 — the shared ℹ️ sheet's close ✕: 44×44 target (was 40×40) and a ≥4.5:1 glyph (muted alone was 4.10:1). Help sheet only. */
body.macct-page .ma-help-sheet .ma-sheet-x { width: 44px; height: 44px; color: var(--ma-ink); color: color-mix(in srgb, var(--ma-ink) 40%, var(--ma-muted)); }
/* SLICE B — Methodology intro + Daily Checklist pane */
body.macct-page .ma-meth-intro { font-size: 14px; line-height: 1.5; color: var(--ma-muted); margin: 4px 2px 14px; }
body.macct-page .ma-dc-sec { margin-bottom: 18px; }
body.macct-page .ma-dc-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ma-gold, #B78A24); margin: 0 0 8px; }
body.macct-page .ma-dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-dc-item { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 6px; border-bottom: 1px solid var(--ma-line-soft); }
body.macct-page .ma-dc-box { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--ma-line, #D8D0BE); border-radius: 7px; background: #fff; cursor: pointer; position: relative; padding: 0; }
body.macct-page .ma-dc-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 7px; height: 12px; border: solid #26663A; border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
body.macct-page .ma-dc-item.is-done .ma-dc-box { background: #EAF5EC; border-color: #26663A; }
body.macct-page .ma-dc-item.is-done .ma-dc-box::after { opacity: 1; }
body.macct-page .ma-dc-item.is-done .ma-dc-txt { color: var(--ma-muted); text-decoration: line-through; }
body.macct-page .ma-dc-txt { flex: 1; font-size: 14px; line-height: 1.4; color: var(--ma-ink); }
body.macct-page .ma-dc-go { flex: none; align-self: center; background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ma-gold, #B78A24); cursor: pointer; white-space: nowrap; }
body.macct-page .ma-dc-note { font-size: 12px; line-height: 1.4; color: var(--ma-muted); margin: 6px 2px 0; padding: 10px 12px; background: var(--ma-line-soft); border-radius: 10px; }

/* ── MPIN app-lock (Slice 1) — full-screen brand lock (theme-independent) ── */
.mpin-lock { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(120% 120% at 50% 0%, #17294B 0%, #0B1626 70%); color: #FAF7F2;
  -webkit-user-select: none; user-select: none; }
.mpin-lock.open { display: flex; }
.mpin-card { width: 100%; max-width: 340px; text-align: center; }
.mpin-brand { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #D9A93C; margin-bottom: 22px; }
.mpin-brand span { color: #F6D98A; }
.mpin-title { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.mpin-sub { font-size: 13.5px; color: #B9C0CF; margin: 0 0 22px; line-height: 1.5; }
.mpin-dots { display: flex; gap: 16px; justify-content: center; margin: 0 0 14px; }
.mpin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #7C8AA5; background: transparent; transition: background .12s, border-color .12s; }
.mpin-dots span.on { background: #D9A93C; border-color: #D9A93C; }
.mpin-msg { min-height: 18px; font-size: 12.5px; color: #F0B4B4; margin: 0 0 14px; }
.mpin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 280px; margin: 0 auto; }
.mpin-key { height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #fff; font-size: 24px; font-weight: 600; cursor: pointer; transition: background .12s, transform .06s; -webkit-tap-highlight-color: transparent; }
.mpin-key:active { background: rgba(217,169,60,.28); transform: scale(.96); }
.mpin-key--blank { background: transparent; border: 0; cursor: default; }
.mpin-key--del { font-size: 22px; color: #B9C0CF; }
.mpin-forgot { display: inline-block; margin-top: 22px; background: none; border: 0; color: #D9A93C; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .mpin-key, .mpin-dots span { transition: none; } }

/* Profile MPIN settings row */
body.macct-page .ma-mpin-optrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ma-ink); font-weight: 600; margin: 4px 0 2px; }
body.macct-page .ma-mpin-optrow input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ma-gold-deep); flex-shrink: 0; }

@media (max-width: 680px) {
  body.macct-page .mt-summary-cards { grid-template-columns: 1fr; }
  body.macct-page .mt-refform { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Agenda tab — To-Do · Reminders · Communications (+ calendar AGENDA-group tags)
   ═══════════════════════════════════════════════════════════════════════════ */
/* day-panel source-tag colors for agenda events */
body.macct-page .ma-cal-dtag--todo   { background: var(--ma-line); color: var(--ma-cat-blue); }
body.macct-page .ma-cal-dtag--remind { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-cal-dtag--comm   { background: var(--ma-success-tint); color: var(--ma-success-ink); }
/* neutral (non-red) count badge for the To-Do header */
body.macct-page .ma-ops-badge.ma-badge-neutral { background: var(--ma-gold-deep); color: var(--ma-card); }
/* To-Do rows */
body.macct-page .ma-todo { display: flex; align-items: center; gap: 10px; }
body.macct-page .ma-todo-main { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; }
body.macct-page .ma-todo-check { width: 18px; height: 18px; accent-color: var(--ma-gold-deep); flex-shrink: 0; }
body.macct-page .ma-todo-label { font-size: 14px; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-todo.is-done .ma-todo-label { text-decoration: line-through; color: var(--ma-muted); }
body.macct-page .ma-todo-due { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ma-muted); background: var(--ma-bg, rgba(0,0,0,.04)); border: 1px solid var(--ma-line); border-radius: 999px; padding: 2px 9px; }
body.macct-page .ma-todo-due.ma-todo-overdue { color: var(--ma-danger); border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.08); }
/* Reminder rows */
body.macct-page .ma-remind { display: flex; align-items: center; gap: 10px; }
body.macct-page .ma-remind-chip { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: var(--ma-gold-ink); background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); border-radius: 999px; padding: 3px 10px; }
body.macct-page .ma-remind-label { flex: 1; min-width: 0; font-size: 14px; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-remind.is-past { opacity: .5; }
body.macct-page .ma-remind.is-past .ma-remind-chip { background: transparent; color: var(--ma-muted); border-color: var(--ma-line); }
/* Communication rows reuse .ma-orow; channel chip */
body.macct-page .ma-comm-chip { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: var(--ma-success-ink); background: var(--ma-success-tint); border-radius: 999px; padding: 2px 9px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Timestamps · Global search · Filters (this slice)
   ═══════════════════════════════════════════════════════════════════════════ */
/* write-time meta in day-panel rows + results drill */
body.macct-page .ma-dp-time { flex-shrink: 0; margin-left: 6px; font-size: 10.5px; color: var(--ma-navy-muted); font-weight: 600; }
body.macct-page .ma-cal-ddesc .ma-dp-time { color: var(--ma-muted); } /* cream calendar list — keep dark muted */
/* gold row pulse for search focus (brief, not persistent) */
@keyframes ma-pulse { 0% { background: rgba(212,175,55,.42); } 100% { background: transparent; } }
body.macct-page .ma-row-pulse { animation: ma-pulse 1.6s ease-out 1; border-radius: 8px; }
body.macct-page .ma-mcal-cell.ma-row-pulse { animation: ma-pulse 1.6s ease-out 1; }

/* sidebar search */
body.macct-page .ma-side-search { padding: 10px 14px 4px; position: relative; }
body.macct-page .ma-search-input {
  width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--ma-line);
  border-radius: 9px; font-family: var(--ma-sans); font-size: 13px; color: var(--ma-ink); background: var(--ma-card);
}
body.macct-page .ma-search-input:focus { outline: none; border-color: var(--ma-gold); }
body.macct-page .ma-search-results {
  margin-top: 6px; max-height: 46vh; overflow-y: auto; border: 1px solid var(--ma-line);
  border-radius: 10px; background: var(--ma-card); box-shadow: var(--ma-shadow); padding: 4px;
}
body.macct-page .ma-sr-head { margin: 6px 8px 3px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-muted); }
body.macct-page .ma-sr-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ma-ink); }
body.macct-page .ma-sr-item:hover { background: var(--ma-gold-soft); }
body.macct-page .ma-sr-ic { flex-shrink: 0; }
body.macct-page .ma-sr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-sr-day { flex-shrink: 0; font-size: 11px; color: var(--ma-muted); }
body.macct-page .ma-sr-none { margin: 8px; font-size: 13px; color: var(--ma-muted); font-style: italic; }

/* filter chip rows (panels + day panel + calendar) */
body.macct-page .ma-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
body.macct-page .ma-filter-lbl { font-size: 11px; font-weight: 700; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
body.macct-page .ma-fchip {
  font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-muted);
}
body.macct-page .ma-fchip:hover { border-color: var(--ma-gold); }
body.macct-page .ma-fchip.is-on { background: var(--ma-gold); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-fchip--huli.is-on { background: var(--ma-danger); border-color: var(--ma-danger); color: var(--ma-card); }
/* day-panel filter chips sit on the navy panel */
body.macct-page .ma-dp-filter { margin: 0 0 10px; }
body.macct-page .ma-dp-filter .ma-fchip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--ma-on-navy); }
body.macct-page .ma-dp-filter .ma-fchip.is-on { background: var(--ma-gold); border-color: var(--ma-gold); color: var(--ma-gold-ink); }
body.macct-page .ma-dp-filter .ma-fchip--huli.is-on { background: var(--ma-danger); border-color: var(--ma-danger); color: var(--ma-card); }
/* calendar highlight ring for "show days with kind X" */
body.macct-page .ma-cal-hl { box-shadow: inset 0 0 0 2px var(--ma-gold-deep); border-radius: 9px; }
@media (max-width: 680px) {
  body.macct-page .ma-search-results { max-height: 40vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Record immutability lock + Period report (print-clean)
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🔒 on closed-day RECORD rows (edit-locked; ✕ delete stays) */
body.macct-page .ma-lock { flex-shrink: 0; margin-left: 6px; font-size: 11px; opacity: .75; cursor: help; }
body.macct-page .ma-orow.ma-locked, body.macct-page .ma-mrow.ma-locked { }

/* Report action button in Results */
body.macct-page .ma-report-open { margin: 4px 0 12px; }

/* Report overlay + modal */
body.macct-page .ma-report-back { position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-start; justify-content: center; padding: 18px; background: rgba(10,15,25,.6); overflow-y: auto; opacity: 0; transition: opacity .2s; }
body.macct-page .ma-report-back.open { opacity: 1; }
body.macct-page .ma-report-modal { width: 100%; max-width: 640px; background: var(--ma-card); border-radius: 14px; box-shadow: var(--ma-shadow); overflow: hidden; }
body.macct-page .ma-report-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ma-line); flex-wrap: wrap; }
body.macct-page .ma-report-htitle { margin: 0; font-family: var(--ma-serif); font-size: 18px; color: var(--ma-ink); }
body.macct-page .ma-report-actions { display: flex; align-items: center; gap: 8px; }
body.macct-page .ma-report-x { border: 0; background: transparent; font-size: 17px; color: var(--ma-muted); cursor: pointer; }

/* The print-clean sheet — always a light document (readable + clean when printed) */
body.macct-page .ma-report-sheet { background: var(--ma-card); color: var(--ma-navy-a); padding: 26px 28px; font-family: var(--ma-sans); }
body.macct-page .ma-report-head { border-bottom: 2px solid var(--ma-navy-a); padding-bottom: 10px; margin-bottom: 16px; }
body.macct-page .ma-report-biz { margin: 0; font-family: var(--ma-serif); font-size: 22px; font-weight: 700; color: var(--ma-navy-a); }
body.macct-page .ma-report-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-report-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
body.macct-page .ma-report-card { border: 1px solid var(--ma-line); border-radius: 12px; padding: var(--sp-3); display: flex; flex-direction: column; gap: 3px; }
body.macct-page .ma-report-clbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ma-muted); }
body.macct-page .ma-report-cval { font-size: 19px; font-weight: 800; color: var(--ma-navy-a); }
body.macct-page .ma-report-cval.pos { color: var(--ma-success-ink); }
body.macct-page .ma-report-cval.neg { color: var(--ma-danger); }
body.macct-page .ma-report-sec { margin-bottom: 16px; }
body.macct-page .ma-report-sec h4 { margin: 0 0 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ma-muted); }
body.macct-page .ma-report-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
body.macct-page .ma-report-tbl td { padding: 5px 0; border-bottom: 1px solid var(--ma-line); color: var(--ma-navy-a); }
body.macct-page .ma-report-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.macct-page .ma-report-un { margin: 8px 0 0; font-size: 12px; color: var(--ma-danger); }
body.macct-page .ma-report-dash, body.macct-page .ma-report-empty { margin: 6px 0; font-size: 13.5px; color: var(--ma-muted); font-style: italic; }
body.macct-page .ma-report-integrity { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ma-line); font-size: 12px; color: var(--ma-muted); }

/* Portal print — reveal ONLY the report sheet (NEVER the viewer/slide print CSS) */
@media print {
  body.macct-page.ma-printing-report * { visibility: hidden !important; }
  body.macct-page.ma-printing-report .ma-report-back,
  body.macct-page.ma-printing-report .ma-report-back * { visibility: visible !important; }
  body.macct-page.ma-printing-report .ma-report-back { position: absolute; inset: 0; padding: 0; background: var(--ma-card); overflow: visible; display: block; }
  body.macct-page.ma-printing-report .ma-report-modal { max-width: none; box-shadow: none; border-radius: 0; }
  body.macct-page.ma-printing-report .ma-report-bar { display: none !important; }
  body.macct-page.ma-printing-report .ma-report-sheet { padding: 0; }
}
@media (max-width: 680px) {
  body.macct-page .ma-report-cards { grid-template-columns: 1fr; }
  body.macct-page .ma-report-actions { width: 100%; }
}

/* v279 — KPI/alert card is tappable → opens its detail. BASE scope (all widths, since the
   cards render on Home + Preview at every width). Whole card is the 44px+ hit area; a muted
   "›" sits top-right to signal it's a link. The card's numbers/labels/layout are untouched. */
body.macct-page .ma-kpi-link { position: relative; cursor: pointer; }
/* right-edge, vertically centred — reads as a "tap → detail" chevron and clears the top-right ℹ️
   help icon that these cards already carry (top-right would sit under it). */
body.macct-page .ma-kpi-link::after { content: '\203A'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 18px; line-height: 1; color: var(--ma-muted); opacity: .7; pointer-events: none; }
body.macct-page .ma-kpi-link:hover { border-color: var(--ma-gold); }
body.macct-page .ma-kpi-link:focus-visible { outline: 2px solid var(--ma-gold); outline-offset: 2px; }
/* v279 — Stock-watch filter chips (reuses .ma-crew-periodsw pill look). */
body.macct-page .ma-watch-filter { margin-bottom: 10px; }

/* ============================================================================
   DESKTOP OVERVIEW MOCKUP RECONCILIATION (≥768px only — mobile <768 zero diff)
   Source of truth: _design/matthew-desktop-overview-mock.html (Angie 2026-09-20).
   COLOR NOTE: text/surface colors use the dashboard's theme TOKENS (var(--ma-*)),
   NOT the mockup's hardcoded light hex — so the 6 dashboard themes (Classic/Midnight/
   Sepia/Gabi/Ube/Gubat) all stay legible. In the default Classic theme these tokens
   render within a shade of the mockup (gold #D9A93C is identical). Theme-INVARIANT
   accents (group dots, gold avatar gradient, navy CTA island) keep the mockup's exact
   hex, matching how the sidebar navy/gold are already theme-invariant.
   ============================================================================ */
@media (min-width: 768px) {
  /* ── shell + sidebar chrome ── */
  body.macct-page .ma-shell { grid-template-columns: 250px 1fr; }
  body.macct-page .ma-sidebar { background: #0D1B2E; padding: 18px 0; }
  body.macct-page .ma-sidebar .ma-nav { padding: 0 10px; }
  /* Not in the mockup at desktop — hidden (kept for the <768 drawer). */
  body.macct-page .ma-side-id,
  body.macct-page .ma-side-search,
  body.macct-page #ma-acct-group,
  body.macct-page .ma-side-foot .ma-lifetime-pill,
  body.macct-page .ma-side-foot .ma-side-word { display: none; }

  /* ── collapsed business card (biz-context) → mockup .biz-switch ── */
  body.macct-page.ma-biz-active #ma-biz-context { padding: 0 18px 16px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
  body.macct-page .ma-bizctx-card { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; background: rgba(255,255,255,.05); border: 0; border-radius: 10px; cursor: default; }
  body.macct-page .ma-bizctx-avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#E5BE5F,#C99328); color: #0D1B2E; font-family: var(--ma-serif); font-weight: 700; font-size: 14px; }
  body.macct-page .ma-bizctx-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; }
  body.macct-page .ma-bizctx-cat { font-size: 10.5px; color: #8fa0ba; }
  body.macct-page .ma-bizctx-caret { margin-left: auto; color: #8fa0ba; font-size: 11px; flex: 0 0 auto; }
  body.macct-page .ma-bizctx-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 0 0 2px; font-size: 11px; font-weight: 500; color: #8fa0ba; }
  body.macct-page .ma-bizctx-back:hover { color: var(--ma-gold); }

  /* ── module nav → mockup .nav-group / .nav-item ── */
  body.macct-page #ma-nav-modules { padding: 0; margin-bottom: 6px; }
  body.macct-page #ma-nav-modules .ma-nav-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 14px 10px 6px; margin: 0; display: flex; align-items: center; }
  body.macct-page #ma-nav-modules .ma-modlink { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #c5d0e0; font-size: 13px; font-weight: 500; cursor: pointer; }
  body.macct-page #ma-nav-modules .ma-modlink:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
  /* Sub-line variant (methodology): label + muted 2nd line, so the Home tile's
     "Marketing · pagpapatakbo" sub-text survives on desktop where the tile grid is hidden. */
  body.macct-page #ma-nav-modules .ma-modlink--sub { align-items: flex-start; }
  body.macct-page #ma-nav-modules .ma-modlabel { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  body.macct-page #ma-nav-modules .ma-modsub { font-size: 10.5px; font-weight: 500; color: #8fa0ba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.macct-page #ma-nav-modules .ma-modlink .ma-ic { width: 16px; height: 16px; margin-right: 0; opacity: .85; vertical-align: -0.15em; }
  body.macct-page #ma-nav-modules .ma-modlink.active .ma-ic { opacity: 1; }
  /* Overview (no data-grp) — bright white active, per mockup */
  body.macct-page #ma-nav-modules .ma-modlink[data-mod="home"].active { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
  body.macct-page #ma-nav-modules .ma-modlink.active { font-weight: 700; }
  /* inventory alert badge */
  body.macct-page .ma-modbadge { margin-left: auto; font-size: 10px; background: var(--ma-danger); color: #fff; padding: 1px 6px; border-radius: 999px; font-weight: 700; line-height: 1.5; }

  /* ── pinned profile card (bottom) → mockup .sidebar-foot ── */
  body.macct-page .ma-side-foot { padding: 14px 18px 0; border-top: 1px solid rgba(255,255,255,.08); }
  /* D1: desktop keeps a 30px avatar; the shared profile-card styling now lives at BASE scope (below)
     so the mobile drawer footer inherits it too — root cause of the full-width avatar + concatenated
     tier was that these rules were trapped inside this ≥768 block. */
  body.macct-page .ma-side-profile-av { width: 30px; height: 30px; font-size: 12px; }
  body.macct-page .ma-side-profile-name { font-size: 12.5px; }
  body.macct-page .ma-side-foot .ma-lang { margin-top: 6px; }

  /* ── Overview main body → mockup .main ── */
  body.macct-page .ma-ov { margin: 0; }
  body.macct-page .ma-ovtop { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; gap: 16px; }   /* Preview header trim: top-align the date row with 🔔/👤 (greeting removed → no vertical dead band above the date) */
  body.macct-page .ma-ovgreet { font-family: var(--ma-serif); font-weight: 600; font-size: 26px; color: var(--ma-ink); margin: 0; line-height: 1.1; }
  body.macct-page .ma-ovdate { font-size: 13px; color: var(--ma-muted); margin: 4px 0 0; }
  body.macct-page .ma-ovacts { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  body.macct-page .ma-oviconbtn { width: 36px; height: 36px; border-radius: 10px; background: var(--ma-card); border: 1px solid var(--ma-line); display: flex; align-items: center; justify-content: center; color: var(--ma-muted); cursor: pointer; position: relative; }
  body.macct-page .ma-oviconbtn:hover { color: var(--ma-ink); border-color: var(--ma-gold); }
  body.macct-page .ma-oviconbtn .ma-ic { width: 17px; height: 17px; }
  body.macct-page .ma-oviconbtn .ma-ov-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ma-danger); }
  body.macct-page .ma-ovlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ma-muted); font-weight: 700; margin: 26px 0 12px; }
  body.macct-page .ma-ovlabel:first-child { margin-top: 0; }

  body.macct-page .ma-ovkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  body.macct-page .ma-ovkpi--wide { grid-column: 1 / -1; }   /* v290 — Steps full-width when the 5th (Lent out) card is present; no dead band */
  body.macct-page .ma-ovkpi { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 18px; }
  body.macct-page .ma-ovkpi-l { font-size: 11px; color: var(--ma-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  body.macct-page .ma-ovkpi-v { font-family: var(--ma-mono); font-weight: 600; font-size: 24px; color: var(--ma-ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
  body.macct-page .ma-ovkpi-s { font-size: 11.5px; color: var(--ma-muted); margin-top: 6px; }
  body.macct-page .ma-ovkpi-s.pos { color: var(--ma-success); font-weight: 600; }
  body.macct-page .ma-ovkpi-s.neg { color: var(--ma-danger); font-weight: 600; }
  body.macct-page .ma-ovkpi-s.muted { color: var(--ma-gold-deep); font-weight: 600; cursor: pointer; }   /* H2: zero-day "log a sale" prompt */

  body.macct-page .ma-ovrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
  body.macct-page .ma-ovrow--single { grid-template-columns: 1fr; }
  body.macct-page .ma-ovcard { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 18px; }
  body.macct-page .ma-ovcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
  body.macct-page .ma-ovcard-title { font-family: var(--ma-serif); font-weight: 600; font-size: 15px; color: var(--ma-ink); margin: 0; }
  body.macct-page .ma-ovcard-link { font-size: 12px; color: var(--ma-gold-deep); font-weight: 700; cursor: pointer; background: none; border: 0; padding: 0; }
  body.macct-page .ma-ovcard-link:hover { text-decoration: underline; }
  body.macct-page .ma-ovlist-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--ma-line); font-size: 13px; gap: 12px; }
  body.macct-page .ma-ovlist-row:first-of-type { border-top: none; }
  body.macct-page .ma-ovrank { display: flex; align-items: center; gap: 10px; min-width: 0; }
  body.macct-page .ma-ovrank-num { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; background: var(--ma-bg); color: var(--ma-muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  body.macct-page .ma-ovrank-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.macct-page .ma-ovval { font-family: var(--ma-mono); font-weight: 600; color: var(--ma-ink); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  body.macct-page .ma-ovnext-body { font-size: 13px; color: var(--ma-muted); line-height: 1.6; }
  body.macct-page .ma-ovnext-title { color: var(--ma-ink); font-weight: 700; }
  body.macct-page .ma-ovnext-btn { margin-top: 14px; display: inline-block; background: #0D1B2E; color: var(--ma-gold); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; }
  body.macct-page .ma-ovnext-btn:hover { background: #13253d; }

  body.macct-page .ma-ovalerts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 16px; }
  body.macct-page .ma-ovalert { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 16px; }
  body.macct-page .ma-ovalert-l { font-size: 12px; color: var(--ma-muted); font-weight: 600; }
  body.macct-page .ma-ovalert-n { font-family: var(--ma-mono); font-weight: 700; font-size: 26px; margin-top: 6px; font-variant-numeric: tabular-nums; }
  body.macct-page .ma-ovalert.ok .ma-ovalert-n { color: var(--ma-success); }
  body.macct-page .ma-ovalert.warn .ma-ovalert-n { color: var(--ma-gold-deep); }
  body.macct-page .ma-ovalert.danger .ma-ovalert-n { color: var(--ma-danger); }
  body.macct-page .ma-ovcta { margin-top: 22px; background: linear-gradient(160deg,#0D1B2E,#0a1524); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; }
  body.macct-page .ma-ovcta-text { font-family: var(--ma-serif); font-weight: 600; font-size: 15px; }
  body.macct-page .ma-ovcta-sub { font-size: 12px; color: #9fb0c9; margin-top: 4px; }
  body.macct-page .ma-ovcta-btn { flex: 0 0 auto; background: var(--ma-gold); color: #0D1B2E; font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; }
  body.macct-page .ma-ovcta-btn:hover { filter: brightness(1.05); }
  /* H1: Home quick-log pair — reuses .ma-quickadd/.ma-qa-btn; just spacing under the KPI row. */
  body.macct-page .ma-quickadd--home { margin-top: 14px; margin-bottom: 2px; }
  /* H5: first-run "Start here" card (above Next Step). */
  body.macct-page .ma-ovstart { background: var(--ma-card); border: 1px solid var(--ma-gold); border-radius: 12px; padding: 16px; margin-top: 16px; }
  body.macct-page .ma-ovstart-title { font-family: var(--ma-serif); font-weight: 600; font-size: 15px; color: var(--ma-ink); margin: 0 0 10px; }
  body.macct-page .ma-ovstart-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--ma-line); padding: 11px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ma-ink); cursor: pointer; }
  body.macct-page .ma-ovstart-row:first-of-type { border-top: 0; }
  body.macct-page .ma-ovstart-row.is-done { color: var(--ma-muted); cursor: default; }
  body.macct-page .ma-ovstart-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--ma-bg); color: var(--ma-success); }
  body.macct-page .ma-ovstart-row.is-done .ma-ovstart-check { background: var(--ma-success-tint); }
  body.macct-page .ma-ovstart-check .ma-ic { width: 15px; height: 15px; }
  /* H8: collapsed "stock is fine" line (when no alerts). */
  body.macct-page .ma-ovstockok { display: block; width: 100%; text-align: left; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ma-success-ink); cursor: pointer; }
  body.macct-page .ma-ovstockok:hover { border-color: var(--ma-gold); }

  /* Overview replaces the old desktop Home body — hide (not delete) legacy blocks;
     they remain the mobile <768 Home (zero diff). Also hide the biz-head only while
     the Overview/Home pane is active (its greeting carries the identity). */
  body.macct-page .ma-home-legacy { display: none !important; }
  /* SW v259: biz-head shows on Preview/Home too (ma-ov-pane hide retired — see base rule above). */

  /* Profile view — desktop-only account links (Blueprints/Tanong/Support/Log out live
     in the sidebar drawer on mobile; on desktop the sidebar hides them, so surface them
     here where the bottom profile card lands). */
  body.macct-page .ma-prof-acct { display: flex; flex-wrap: wrap; gap: 10px; }
}
/* Preview KPI row at 768–900 (sidebar just appeared): 4 columns didn't fit beside it, so "Cash loans" and
   "Steps" ran 19 px past the screen edge. Two equal columns there; the full-width Steps card still spans both. */
@media (min-width: 768px) and (max-width: 900px) {
  body.macct-page .ma-ovkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktop-only account-links block is hidden on mobile (drawer already has them). */
body.macct-page .ma-prof-acct-card { display: none; }
@media (min-width: 768px) { body.macct-page .ma-prof-acct-card { display: block; } }

/* ════════════════════════════════════════════════════════════════════════
   WALK-IN POS "Benta" v1 — tile order → cash/sukli → one-row save.
   Full-screen sheet on mobile; centred 480px card on desktop. All colors via
   tokens, so the 6 themes + dark mode adapt automatically.
   ════════════════════════════════════════════════════════════════════════ */
/* entry button (Operations quick-add row + full-width on Home) */
body.macct-page .ma-qa-pos {
  grid-column: 1 / -1; width: 100%; margin-top: 8px; min-height: 52px; border: none; border-radius: 13px;
  background: var(--ma-gold); color: #2C2818; font-family: var(--ma-sans); font-weight: 800; font-size: 16px;
  cursor: pointer; box-shadow: var(--ma-shadow-float); transition: transform .12s ease, filter .15s ease;
}
body.macct-page .ma-qa-pos:hover { transform: translateY(-1px); filter: brightness(1.03); }
body.macct-page .ma-qa-pos--home { margin-top: 10px; }

/* overlay + sheet */
body.macct-page .ma-pos-back { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: stretch; justify-content: center; background: rgba(7,14,26,0); transition: background .22s ease; }
body.macct-page .ma-pos-back.open { background: rgba(7,14,26,.62); }
body.macct-page .ma-pos { width: 100%; height: 100%; background: var(--ma-bg); display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform .28s var(--ma-ease-out); }
body.macct-page .ma-pos-back.open .ma-pos { transform: translateY(0); }
@media (min-width: 768px) {
  body.macct-page .ma-pos-back { align-items: center; }
  body.macct-page .ma-pos { max-width: 480px; height: min(92vh, 860px); border-radius: var(--ma-r-xl); box-shadow: var(--ma-shadow-float); transform: translateY(24px) scale(.98); opacity: 0; transition: transform .26s var(--ma-ease-out), opacity .2s ease; }
  body.macct-page .ma-pos-back.open .ma-pos { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-pos { transition: none; } }

/* v267 — POS Services row (Float/Loans) after the product grid; gold-outlined tiles, NOT products.
   The service/opener/help sheets append to <body> AFTER .ma-pos-back; the sibling rule lifts them
   above the POS (.ma-pos-back z-index 1100) so they are never hidden behind it. */
body.macct-page .ma-pos-back ~ .ma-sheet-back { z-index: 1200; }
body.macct-page .ma-pos-svcsec { margin: 14px 0 4px; }
body.macct-page .ma-pos-svclbl { position: relative; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-muted); }
body.macct-page .ma-pos-svcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-pos-svc { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; text-align: left; background: var(--ma-card); border: 1.5px solid var(--ma-gold); border-radius: 12px; box-shadow: var(--ma-shadow-card); cursor: pointer; font: inherit; }
body.macct-page .ma-pos-svc:hover { border-color: var(--ma-gold-deep); }
body.macct-page .ma-pos-svc-ic { flex: 0 0 auto; font-size: 22px; line-height: 1; }
body.macct-page .ma-pos-svc-tx { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-pos-svc-tx b { font-size: 14px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-pos-svc-hint { font-size: 11.5px; color: var(--ma-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* service sheet rows */
body.macct-page .ma-pos-svcx { margin: 0 0 10px; }
body.macct-page .ma-pos-svcrows { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-pos-svcrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; text-align: left; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; cursor: pointer; font: inherit; }
body.macct-page .ma-pos-svcrow:hover { border-color: var(--ma-gold); }
body.macct-page .ma-pos-svcrow-t { font-size: 14px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-pos-svcrow-sub { font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-pos-svcrow--open { border-style: dashed; color: var(--ma-gold-deep); font-weight: 700; justify-content: flex-start; }
body.macct-page .ma-pos-svcrow--ro { cursor: default; }
body.macct-page .ma-pos-svcrow--ro:hover { border-color: var(--ma-line); }

/* header */
body.macct-page .ma-pos-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; background: var(--ma-card); border-bottom: 1px solid var(--ma-line); flex: none; }
body.macct-page .ma-pos-title { margin: 0; font-family: var(--ma-serif); font-size: 19px; font-weight: 700; color: var(--ma-ink); line-height: 1.15; }
body.macct-page .ma-pos-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-pos-sub strong { color: var(--ma-gold-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-headr { display: flex; align-items: center; gap: 8px; flex: none; }
body.macct-page .ma-pos-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
body.macct-page .ma-pos-pill--on { color: var(--ma-green); background: rgba(46,125,84,.14); }
body.macct-page .ma-pos-pill--off { color: var(--ma-danger); background: var(--ma-danger-tint); }
body.macct-page .ma-pos-x { width: 34px; height: 34px; border: none; background: var(--ma-bg); border-radius: 10px; cursor: pointer; color: var(--ma-ink); display: inline-flex; align-items: center; justify-content: center; }

/* scroll body */
body.macct-page .ma-pos-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px; }
body.macct-page .ma-pos-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ma-muted); margin-bottom: 10px; }
body.macct-page .ma-pos-editlink { border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-gold-ink); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; flex: none; }

/* tile grid */
body.macct-page .ma-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.macct-page .ma-pos-tile { position: relative; min-height: 78px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 14px; padding: 12px 12px 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; transition: transform .1s ease, border-color .15s ease; }
body.macct-page .ma-pos-tile:active { transform: scale(.97); }
body.macct-page .ma-pos-tile:hover:not(.ma-pos-tile--out) { border-color: var(--ma-gold-soft); }
body.macct-page .ma-pos-tname { font-weight: 700; font-size: 14px; color: var(--ma-ink); line-height: 1.2; }
body.macct-page .ma-pos-tprice { font-size: 13px; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--ma-gold); color: #2C2818; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
body.macct-page .ma-pos-minus { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 999px; background: var(--ma-bg); border: 1px solid var(--ma-line); color: var(--ma-ink); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
body.macct-page .ma-pos-tile--out { opacity: .55; cursor: not-allowed; }
body.macct-page .ma-pos-outband { position: absolute; inset: auto 0 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ma-danger); background: rgba(0,0,0,.05); padding: 2px 0; border-radius: 0 0 12px 12px; }
body.macct-page .ma-pos-empty { color: var(--ma-muted); text-align: center; padding: 34px 12px; font-size: 13.5px; }

/* sticky bottom bar (shared by order + pay) */
body.macct-page .ma-pos-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ma-card); border-top: 1px solid var(--ma-line); flex: none; }
body.macct-page .ma-pos-barcount { flex: 1; text-align: center; font-size: 13px; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-barcount strong { font-size: 16px; }
body.macct-page .ma-pos-undo { flex: none; border: 1px solid var(--ma-line); background: var(--ma-bg); color: var(--ma-ink); font: inherit; font-weight: 700; font-size: 13px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
body.macct-page .ma-pos-undo:disabled { opacity: .4; cursor: default; }
body.macct-page .ma-pos-pay, body.macct-page .ma-pos-paid { flex: none; border: none; background: var(--ma-gold); color: #2C2818; font: inherit; font-weight: 800; font-size: 15px; padding: 11px 18px; border-radius: 11px; cursor: pointer; }
body.macct-page .ma-pos-pay:disabled, body.macct-page .ma-pos-paid:disabled { opacity: .45; cursor: default; }
body.macct-page .ma-pos-paid { flex: 1; }
body.macct-page .ma-pos-payback { flex: none; border: 1px solid var(--ma-line); background: var(--ma-bg); color: var(--ma-ink); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 10px; cursor: pointer; }
/* Lista → shortcut on the order bar (secondary; Bayad stays the gold primary). */
body.macct-page .ma-pos-lista { flex: none; min-height: 44px; border: 1.5px solid var(--ma-gold-soft); background: var(--ma-card); color: var(--ma-gold-ink); font: inherit; font-weight: 800; font-size: 14px; padding: 9px 13px; border-radius: 11px; cursor: pointer; white-space: nowrap; }
body.macct-page .ma-pos-lista:disabled { opacity: .45; cursor: default; }
/* Order bar with 4 elements: count shrinks (left, ellipsis); all three buttons ≥44px tap. */
body.macct-page .ma-pos-bar--order { gap: 8px; }
body.macct-page .ma-pos-bar--order .ma-pos-barcount { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-pos-bar--order .ma-pos-undo, body.macct-page .ma-pos-bar--order .ma-pos-pay { min-height: 44px; }
@media (max-width: 400px) {
  body.macct-page .ma-pos-bar--order { gap: 6px; padding-left: 12px; padding-right: 12px; }
  body.macct-page .ma-pos-bar--order .ma-pos-undo { padding: 9px 11px; }
  body.macct-page .ma-pos-bar--order .ma-pos-undo-lbl { display: none; }   /* glyph-only Bawi → room for the full total */
  body.macct-page .ma-pos-bar--order .ma-pos-lista, body.macct-page .ma-pos-bar--order .ma-pos-pay { padding-left: 12px; padding-right: 12px; }
}

/* pay screen */
body.macct-page .ma-pos-paytot { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 2px 14px; border-bottom: 1px solid var(--ma-line); margin-bottom: 14px; }
body.macct-page .ma-pos-paytot-l { font-size: 14px; color: var(--ma-muted); font-weight: 700; }
body.macct-page .ma-pos-paytot-v { font-family: var(--ma-serif); font-size: 34px; font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }   /* 4 methods (cash/gcash/maya/utang) → 2×2 */
body.macct-page .ma-pos-method { border: 1.5px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); font: inherit; font-weight: 700; font-size: 14px; padding: 11px 0; border-radius: 11px; cursor: pointer; }
body.macct-page .ma-pos-method.is-on { border-color: var(--ma-gold); background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-pos-cashgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.macct-page .ma-pos-cash { border: 1.5px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); font: inherit; font-weight: 700; font-size: 15px; padding: 13px 0; border-radius: 11px; cursor: pointer; font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-cash:active { transform: scale(.96); }
body.macct-page .ma-pos-cashacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
body.macct-page .ma-pos-exact, body.macct-page .ma-pos-clear { border: 1px dashed var(--ma-line); background: transparent; color: var(--ma-ink-soft); font: inherit; font-weight: 700; font-size: 13px; padding: 10px 0; border-radius: 10px; cursor: pointer; }
body.macct-page .ma-pos-tender { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13.5px; color: var(--ma-muted); }
body.macct-page .ma-pos-tender-l { flex: 0 0 auto; }
body.macct-page .ma-pos-tender-v { font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
/* Tap-to-edit "Cash given" — same input family as the ₱ chooser (.ma-sheet-in). */
body.macct-page .ma-pos-tender-field { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 160px; min-width: 0; padding: 8px 12px; background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 11px; }
body.macct-page .ma-pos-tender-field:focus-within { border-color: var(--ma-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
body.macct-page .ma-pos-tender-sym { flex: 0 0 auto; font-weight: 700; font-size: 18px; color: var(--ma-muted); }
body.macct-page .ma-pos-tender-in { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; padding: 0; font-family: var(--ma-mono); font-weight: 600; font-size: 20px; color: var(--ma-ink); text-align: right; font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-tender-in:focus { outline: none; }
body.macct-page .ma-pos-sukli { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding: 12px 14px; background: rgba(46,125,84,.1); border-radius: 12px; }
body.macct-page .ma-pos-sukli span:first-child { font-size: 14px; font-weight: 700; color: var(--ma-green); }
body.macct-page .ma-pos-sukli-v { font-family: var(--ma-serif); font-size: 26px; font-weight: 700; color: var(--ma-green); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-short { margin-top: 8px; padding: 12px 14px; background: var(--ma-danger-tint); color: var(--ma-danger); border-radius: 12px; font-weight: 800; font-size: 15px; text-align: center; }
body.macct-page .ma-pos-methodnote { margin: 8px 0 0; padding: 14px; background: var(--ma-card); border: 1px dashed var(--ma-line); border-radius: 12px; text-align: center; color: var(--ma-muted); font-size: 13.5px; }
/* Ⓤ POS Utang / Lista block — customer name (required) + optional due date. */
body.macct-page .ma-pos-utang { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
body.macct-page .ma-pos-utang-lbl { font-size: 12px; font-weight: 700; color: var(--ma-ink-soft); }
body.macct-page .ma-pos-suki-in, body.macct-page .ma-pos-due-in, body.macct-page .ma-pos-picked-in { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid var(--ma-line); border-radius: 11px; font: inherit; font-size: 15px; background: var(--ma-paper); color: var(--ma-ink); }
body.macct-page .ma-pos-suki-in:focus, body.macct-page .ma-pos-due-in:focus, body.macct-page .ma-pos-picked-in:focus { outline: none; border-color: var(--ma-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }

/* menu editor rows (inside the standard .ma-sheet) */
body.macct-page .ma-pos-mhint { margin: 2px 0 12px; padding: 10px 12px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); border-radius: 10px; font-size: 12.5px; font-weight: 600; }
body.macct-page .ma-pos-mcosthint { margin: 8px 2px 2px; font-size: 11.5px; color: var(--ma-muted); }   /* "add cost later in Inventory for margins" */

/* Offline write queue — pending row marker (⏳) + "N naka-save" counter */
body.macct-page .ma-pend { font-size: 12px; opacity: .8; }
body.macct-page .ma-qa-pending { grid-column: 1 / -1; width: 100%; text-align: center; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--ma-gold-ink); }
body.macct-page .ma-quickadd--home + .ma-qa-pending, body.macct-page .ma-qa-pos--home ~ .ma-qa-pending { display: block; }
body.macct-page .ma-pos-mrows { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
body.macct-page .ma-pos-mrow { display: grid; grid-template-columns: 1fr 92px auto auto; gap: 8px; align-items: center; }
body.macct-page .ma-pos-mrow .ma-sheet-in { margin: 0; }
body.macct-page .ma-pos-mout { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ma-muted); white-space: nowrap; }
body.macct-page .ma-pos-mdel { border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px; }
body.macct-page .ma-pos-mactions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
body.macct-page .ma-pos-madd, body.macct-page .ma-pos-mreset { border: 1px dashed var(--ma-line); background: transparent; color: var(--ma-gold-ink); font: inherit; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; cursor: pointer; }
body.macct-page .ma-pos-msave { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 16px; }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE PARITY (<768) — Overview layout. The min-width:768 block above styles
   the desktop Overview; this mutually-exclusive block gives the SAME Overview a
   single-column mobile layout so ＋Sale/POS, KPIs, name field, Start-here and the
   preview pill all render on the phone. No forked markup — same buildOverviewKPIs.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.macct-page .ma-ov { margin: 0 0 4px; }
  body.macct-page .ma-ovtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
  body.macct-page .ma-ovgreet { font-family: var(--ma-serif); font-weight: 600; font-size: 22px; color: var(--ma-ink); margin: 0; line-height: 1.12; }
  body.macct-page .ma-ovdate { font-size: 12.5px; color: var(--ma-muted); margin: 4px 0 0; }
  body.macct-page .ma-ovacts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  body.macct-page .ma-oviconbtn { width: 36px; height: 36px; border-radius: 10px; background: var(--ma-card); border: 1px solid var(--ma-line); display: flex; align-items: center; justify-content: center; color: var(--ma-muted); cursor: pointer; position: relative; }
  body.macct-page .ma-oviconbtn .ma-ic { width: 17px; height: 17px; }
  body.macct-page .ma-oviconbtn .ma-ov-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ma-danger); }
  body.macct-page .ma-ovlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ma-muted); font-weight: 700; margin: 22px 0 10px; }
  body.macct-page .ma-ovlabel:first-child { margin-top: 0; }
  body.macct-page .ma-ovkpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.macct-page .ma-ovkpi--wide { grid-column: 1 / -1; }   /* v290 — Steps full-width when the 5th (Lent out) card is present */
  body.macct-page .ma-ovkpi--fillrow { grid-column: 1 / -1; }   /* 4c polish — custom business: a lone last card fills its row (phone 2-col grid only) */
  body.macct-page .ma-ovkpi { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 14px; }
  body.macct-page .ma-ovkpi-l { font-size: 11px; color: var(--ma-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  body.macct-page .ma-ovkpi-v { font-family: var(--ma-mono); font-weight: 600; font-size: 20px; color: var(--ma-ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
  body.macct-page .ma-ovkpi-s { font-size: 11px; color: var(--ma-muted); margin-top: 5px; }
  body.macct-page .ma-ovkpi-s.pos { color: var(--ma-success); font-weight: 600; }
  body.macct-page .ma-ovkpi-s.neg { color: var(--ma-danger); font-weight: 600; }
  body.macct-page .ma-ovkpi-s.muted { color: var(--ma-gold-deep); font-weight: 600; cursor: pointer; }
  body.macct-page .ma-ovrow { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  body.macct-page .ma-ovcard { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 16px; }
  body.macct-page .ma-ovcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
  body.macct-page .ma-ovcard-title { font-family: var(--ma-serif); font-weight: 600; font-size: 15px; color: var(--ma-ink); margin: 0; }
  body.macct-page .ma-ovcard-link { font-size: 12px; color: var(--ma-gold-deep); font-weight: 700; cursor: pointer; background: none; border: 0; padding: 0; }
  body.macct-page .ma-ovlist-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--ma-line); font-size: 13px; gap: 12px; }
  body.macct-page .ma-ovlist-row:first-of-type { border-top: none; }
  body.macct-page .ma-ovrank { display: flex; align-items: center; gap: 10px; min-width: 0; }
  body.macct-page .ma-ovrank-num { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; background: var(--ma-bg); color: var(--ma-muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  body.macct-page .ma-ovrank-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.macct-page .ma-ovval { font-family: var(--ma-mono); font-weight: 600; color: var(--ma-ink); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  body.macct-page .ma-ovnext-body { font-size: 13px; color: var(--ma-muted); line-height: 1.6; }
  body.macct-page .ma-ovnext-title { color: var(--ma-ink); font-weight: 700; }
  body.macct-page .ma-ovnext-btn { margin-top: 12px; display: inline-block; background: #0D1B2E; color: var(--ma-gold); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; }
  body.macct-page .ma-ovalerts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
  body.macct-page .ma-ovalert { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 13px; }
  body.macct-page .ma-ovalert-l { font-size: 11.5px; color: var(--ma-muted); font-weight: 600; }
  body.macct-page .ma-ovalert-n { font-family: var(--ma-mono); font-weight: 700; font-size: 22px; margin-top: 5px; font-variant-numeric: tabular-nums; }
  body.macct-page .ma-ovalert.ok .ma-ovalert-n { color: var(--ma-success); }
  body.macct-page .ma-ovalert.warn .ma-ovalert-n { color: var(--ma-gold-deep); }
  body.macct-page .ma-ovalert.danger .ma-ovalert-n { color: var(--ma-danger); }
  body.macct-page .ma-ovcta { margin-top: 18px; background: linear-gradient(160deg,#0D1B2E,#0a1524); border-radius: 12px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff; }
  body.macct-page .ma-ovcta-text { font-family: var(--ma-serif); font-weight: 600; font-size: 15px; }
  body.macct-page .ma-ovcta-sub { font-size: 12px; color: #9fb0c9; margin-top: 4px; }
  body.macct-page .ma-ovcta-btn { flex: 0 0 auto; background: var(--ma-gold); color: #0D1B2E; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 10px; border: 0; cursor: pointer; }
  body.macct-page .ma-quickadd--home { margin-top: 12px; margin-bottom: 2px; }
  body.macct-page .ma-ovstart { background: var(--ma-card); border: 1px solid var(--ma-gold); border-radius: 12px; padding: 16px; margin-top: 14px; }
  body.macct-page .ma-ovstart-title { font-family: var(--ma-serif); font-weight: 600; font-size: 15px; color: var(--ma-ink); margin: 0 0 8px; }
  body.macct-page .ma-ovstart-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--ma-line); padding: 11px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ma-ink); cursor: pointer; }
  body.macct-page .ma-ovstart-row:first-of-type { border-top: 0; }
  body.macct-page .ma-ovstart-row.is-done { color: var(--ma-muted); cursor: default; }
  body.macct-page .ma-ovstart-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--ma-bg); color: var(--ma-success); }
  body.macct-page .ma-ovstart-row.is-done .ma-ovstart-check { background: var(--ma-success-tint); }
  body.macct-page .ma-ovstart-check .ma-ic { width: 15px; height: 15px; }
  body.macct-page .ma-ovstockok { display: block; width: 100%; text-align: left; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ma-success-ink); cursor: pointer; }
  /* Home name field (H4, unnamed) reuses the biz-name form — keep it comfortable on mobile. */
  body.macct-page .ma-ov .ma-biz-nameform { display: flex; gap: 8px; margin-top: 10px; }
}

/* Item 97 — execution-step deep link into the blueprint viewer */
body.macct-page .ma-bp-link { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 8px 12px; border: 1px solid var(--ma-gold-soft); border-radius: 10px; background: var(--ma-card); color: var(--ma-gold-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: left; }
body.macct-page .ma-bp-link:hover { border-color: var(--ma-gold); background: var(--ma-bg); }
/* Item 97B — supplier step's second link-row to the Mga Supplier directory. */
body.macct-page .ma-bp-suplink { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px 8px; padding: 8px 12px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-card); color: var(--ma-ink-soft); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-bp-suplink:hover { border-color: var(--ma-gold); color: var(--ma-gold-ink); }
/* Marketing set (Methods pane): 📖 blueprint link-row above the tip list. */
body.macct-page .ma-gabay-bplink { padding: 8px 14px 2px; }
/* In-app blueprint viewer overlay (same-origin iframe of /viewer) */
body.macct-page .ma-bpview-back { position: fixed; inset: 0; z-index: 1200; background: rgba(7,14,26,0); transition: background .2s ease; display: flex; }
body.macct-page .ma-bpview-back.open { background: rgba(7,14,26,.72); }
body.macct-page .ma-bpview { position: relative; margin: auto; width: 100%; height: 100%; max-width: 900px; background: var(--ma-bg); display: flex; flex-direction: column; opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .22s var(--ma-ease-out); }
body.macct-page .ma-bpview-back.open .ma-bpview { opacity: 1; transform: none; }
body.macct-page .ma-bpview-bar { flex: none; display: flex; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--ma-card); border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-bpview-close { border: 1px solid var(--ma-line); background: var(--ma-bg); color: var(--ma-ink); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
body.macct-page .ma-bpview-close { min-height: 44px; }   /* '‹ Back' over the in-app viewer: 38 → 44px tap target, same look */
body.macct-page .ma-bpview-frame { flex: 1; width: 100%; border: 0; background: #fff; }
@media (min-width: 768px) { body.macct-page .ma-bpview { height: min(94vh, 1000px); border-radius: var(--ma-r-xl); overflow: hidden; box-shadow: var(--ma-shadow-float); } }

/* Journey-pane legacy Sales/Expense logs — one closed accordion at the bottom */
body.macct-page .ma-jr-logs { position: relative; margin-top: 18px; border: 1px solid var(--ma-line); border-radius: 12px; background: var(--ma-card); overflow: hidden; }
body.macct-page .ma-jr-logs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 14px 40px 14px 16px; background: none; border: 0; font: inherit; cursor: pointer; }
body.macct-page .ma-jr-logs-title { font-family: var(--ma-serif); font-size: 14px; font-weight: 600; color: var(--ma-ink-soft); }
body.macct-page .ma-jr-logs-chev { flex: 0 0 auto; color: var(--ma-muted); display: inline-flex; transition: transform .25s var(--ma-ease-out); }
body.macct-page .ma-jr-logs.open .ma-jr-logs-chev { transform: rotate(180deg); }
body.macct-page .ma-jr-logs-body { display: none; padding: 0 14px 14px; }
body.macct-page .ma-jr-logs.open .ma-jr-logs-body { display: block; }
body.macct-page .ma-jr-logs-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 12px; background: var(--ma-gold-soft); border-radius: 10px; }
body.macct-page .ma-jr-logs-hinttxt { font-size: 12px; font-weight: 600; color: var(--ma-gold-ink); }
body.macct-page .ma-jr-logs-go { flex: 0 0 auto; border: 1px solid var(--ma-gold); background: var(--ma-card); color: var(--ma-gold-ink); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
body.macct-page .ma-jr-logs-go:hover { background: var(--ma-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   R3a — TRABAHO / JOBS pane (list + summary + new-quote sheet). Pane styles only.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-job-summary .ma-job-sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
body.macct-page .ma-job-sumcell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 12px; }
body.macct-page .ma-job-sumlbl { font-size: 12px; color: var(--ma-muted); line-height: 1.25; }
body.macct-page .ma-job-sumval { font-size: 18px; font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-job-new { width: 100%; min-height: 46px; margin: 4px 0 10px; }
body.macct-page .ma-job-filters { display: flex; gap: 6px; margin-bottom: 10px; }
body.macct-page .ma-job-filter { flex: 1; min-height: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-muted); border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.macct-page .ma-job-filter.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-job-cards { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-jobrow { cursor: pointer; }
body.macct-page .ma-job-amt { font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.macct-page .ma-job-progwrap { margin: 6px 0; }
body.macct-page .ma-job-prog { height: 6px; background: var(--ma-line); border-radius: 999px; overflow: hidden; }
body.macct-page .ma-job-progbar { display: block; height: 100%; background: var(--ma-gold); border-radius: 999px; }
body.macct-page .ma-job-metarow { display: flex; align-items: center; gap: 8px; }
body.macct-page .ma-job-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
body.macct-page .ma-job-chip--ok { background: rgba(46,158,91,.14); color: #1f7a45; }
body.macct-page .ma-job-chip--neu { background: rgba(122,138,165,.16); color: var(--ma-muted); }
body.macct-page .ma-job-chip--bad { background: rgba(200,60,60,.14); color: #b03636; }
body.macct-page .ma-job-type { font-size: 12px; color: var(--ma-muted); }
/* new-quote sheet */
body.macct-page .ma-sheet--job { max-height: 88vh; overflow-y: auto; }
body.macct-page .ma-job-tychips, body.macct-page .ma-job-dnchips, body.macct-page .ma-job-vchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; position: relative; }
body.macct-page .ma-job-tychip, body.macct-page .ma-job-dnchip, body.macct-page .ma-job-vchip { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
body.macct-page .ma-job-tychip.is-on, body.macct-page .ma-job-dnchip.is-on, body.macct-page .ma-job-vchip.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-job-items { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
body.macct-page .ma-job-item { display: grid; grid-template-columns: 1fr 64px 84px 40px; gap: 6px; align-items: center; }
body.macct-page .ma-job-item input { min-height: 44px; padding: 8px 10px; font-size: 15px; color: var(--ma-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 9px; width: 100%; }
body.macct-page .ma-job-itemdel { min-height: 44px; width: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }
body.macct-page .ma-job-itemdel svg { width: 16px; height: 16px; }
body.macct-page .ma-job-total, body.macct-page .ma-job-dnamt { font-size: 15px; font-weight: 700; color: var(--ma-ink); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-job-additem { align-self: flex-start; margin: 2px 0; }
body.macct-page .ma-job-actions { display: flex; gap: 8px; margin-top: 14px; }
body.macct-page .ma-job-actions .ma-btn { flex: 1; min-height: 48px; }
body.macct-page .ma-job-detail { padding: 8px 4px 4px; }
@media (min-width: 560px) { body.macct-page .ma-job-summary .ma-job-sumgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  body.macct-page .ma-sheet-back--job { align-items: stretch; justify-content: flex-end; }
  body.macct-page .ma-sheet--job { height: 100%; max-height: none; max-width: 480px; border-radius: 0; transform: translateX(100%); }
  body.macct-page .ma-sheet-back--job.open .ma-sheet--job { transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Receivables (Sep 24) — Who-owes / Settled view switch + tap-for-detail sheet.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-recv-seg { margin: 2px 0 12px; }
body.macct-page .ma-recv-chip { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; font-family: var(--ma-sans, inherit); }
body.macct-page .ma-recv-chip--owes { background: rgba(200,60,60,.14); color: #b03636; }
body.macct-page .ma-recv-chip--done { background: rgba(46,158,91,.16); color: var(--ma-success); }
body.macct-page .ma-recv-sec { margin: 14px 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ma-muted); }
body.macct-page .ma-recv-sec:first-child { margin-top: 2px; }
body.macct-page .ma-recv-block { border: 1px solid var(--ma-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
body.macct-page .ma-recv-blockhead { font-size: 12.5px; color: var(--ma-muted); margin-bottom: 6px; }
body.macct-page .ma-recv-served { color: var(--ma-ink); }
body.macct-page .ma-recv-items { width: 100%; border-collapse: collapse; font-size: 14px; }
body.macct-page .ma-recv-items td { padding: 3px 0; color: var(--ma-ink); }
body.macct-page .ma-recv-in { width: auto; }
body.macct-page .ma-recv-iq { width: 44px; text-align: right; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-recv-ip { width: 74px; text-align: right; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-recv-it { width: 84px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-recv-manual { margin: 2px 0; color: var(--ma-ink); font-size: 14px; }
body.macct-page .ma-recv-blocktot { text-align: right; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ma-line); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-recv-pay { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ma-line); font-size: 14px; }
body.macct-page .ma-recv-payl { color: var(--ma-muted); }
body.macct-page .ma-recv-paya { font-weight: 700; color: var(--ma-success); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.macct-page .ma-recv-change { font-size: 12.5px; color: var(--ma-muted); padding: 2px 0 8px; border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-recv-changelive { margin: 6px 0 0; font-weight: 700; color: var(--ma-gold-ink); }
body.macct-page .ma-recv-totals { margin-top: 14px; border-top: 2px solid var(--ma-line); padding-top: 10px; }
body.macct-page .ma-recv-totrow { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 15px; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-recv-totrow--bal, body.macct-page .ma-recv-totrow--done { font-weight: 700; font-size: 16px; margin-top: 2px; }
body.macct-page .ma-recv-totrow--done span:last-child { color: var(--ma-success); }
body.macct-page .ma-recv-overpaid { margin-top: 6px; font-size: 12.5px; color: var(--ma-muted); text-align: right; }
body.macct-page .ma-recv-actions { display: flex; gap: 8px; margin-top: 16px; }
body.macct-page .ma-recv-actions .ma-btn { flex: 1; min-height: 48px; }
@media (min-width: 768px) {
  body.macct-page .ma-sheet-back--recv { align-items: stretch; justify-content: flex-end; }
  body.macct-page .ma-sheet--recv { height: 100%; max-height: none; max-width: 460px; border-radius: 0; transform: translateX(100%); }
  body.macct-page .ma-sheet-back--recv.open .ma-sheet--recv { transform: translateX(0); }
}
/* Receivables document actions (Sep 24) — Share / Print statement / Print agreement. */
body.macct-page .ma-recv-docacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.macct-page .ma-recv-docacts .ma-btn { flex: 1 1 auto; min-height: 44px; }
body.macct-page .ma-btn-ghost { background: transparent; border: 1.5px solid var(--ma-line); color: var(--ma-ink); font-weight: 700; }
body.macct-page .ma-btn-ghost:hover { border-color: var(--ma-gold); }
body.macct-page .ma-recv-blankag { display: inline-block; margin: 4px 0 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT DOCUMENTS (Sep 24) — statement + Kasunduan sa Pautang. A hidden #ma-print
   container is filled then window.print()'d; @media print (guarded by .ma-printing)
   shows ONLY #ma-print. The viewer's own print CSS is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
#ma-print { display: none; }
/* on-screen colours (print emulation inherits these; print itself is B/W-friendly) */
body.macct-page #ma-print, #ma-print { color: #111; background: #fff; }
#ma-print .ma-print-page { box-sizing: border-box; }
#ma-print .r { text-align: right; } #ma-print .c { text-align: center; }
/* Statement */
#ma-print .ma-ps { font-family: Georgia, 'Times New Roman', serif; font-size: 12px; color: #111; }
#ma-print .ma-ps-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px; }
#ma-print .ma-ps-biz { font-size: 18px; font-weight: 700; }
#ma-print .ma-ps-lic { font-size: 11px; color: #444; }
#ma-print .ma-ps-title { text-align: right; font-size: 15px; font-weight: 700; }
#ma-print .ma-ps-date { font-size: 11px; color: #444; font-weight: 400; }
#ma-print .ma-ps-suki { margin: 6px 0 10px; font-size: 13px; }
#ma-print .ma-ps-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
#ma-print .ma-ps-tbl { width: 100%; border-collapse: collapse; }
#ma-print .ma-ps-tbl th, #ma-print .ma-ps-tbl td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
#ma-print .ma-ps-tbl th { background: #eee; font-size: 10.5px; text-transform: uppercase; }
#ma-print .ma-ps-totals { margin-top: 12px; font-size: 14px; font-weight: 700; text-align: right; }
#ma-print .ma-ps-recv { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; width: 260px; }
#ma-print .ma-ps-recvline { border-bottom: 1px solid #111; height: 22px; }
#ma-print .ma-ps-foot { margin-top: 22px; padding-top: 6px; border-top: 1px solid #ccc; font-size: 10px; color: #666; text-align: center; }
/* Agreement (bilingual) */
#ma-print .ma-ag-page { font-family: Georgia, 'Times New Roman', serif; font-size: 11.5px; color: #111; line-height: 1.4; }
#ma-print .ma-ag-page2 { page-break-before: always; }
#ma-print .ma-ag-title { font-size: 20px; font-weight: 700; text-align: center; margin: 0; }
#ma-print .ma-ag-sub { text-align: center; margin: 2px 0 8px; }
#ma-print .ma-ag-head { border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 8px; }
#ma-print .ma-ag-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; }
#ma-print .ma-ag-sec { margin: 10px 0; }
#ma-print .ma-ag-h { font-size: 13px; font-weight: 700; margin: 0 0 4px; border-bottom: 1px solid #bbb; }
#ma-print .ma-ag-h3 { font-size: 12px; font-weight: 700; margin: 4px 0; }
#ma-print .ma-ag-en { display: block; }
#ma-print .ma-ag-tl { display: block; font-style: italic; color: #555; font-size: 10.5px; }
#ma-print .ma-ag-clause { margin: 5px 0; }
#ma-print .ma-ag-cols { display: flex; gap: 18px; }
#ma-print .ma-ag-col { flex: 1; }
#ma-print .ma-ag-fl { display: flex; align-items: baseline; gap: 6px; margin: 4px 0; }
#ma-print .ma-ag-fllbl { flex: 0 0 auto; font-size: 11px; }
#ma-print .ma-ag-fill { font-weight: 700; }
#ma-print .ma-ag-blank { flex: 1 1 auto; min-width: 90px; border-bottom: 1px solid #111; display: inline-block; height: 15px; }
#ma-print .ma-ag-blank--wide { min-width: 160px; }
#ma-print .ma-ag-ticks { display: flex; gap: 28px; margin: 4px 0; }
#ma-print .ma-ag-tick { display: flex; align-items: center; gap: 6px; }
#ma-print .ma-ag-box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #111; text-align: center; line-height: 12px; font-weight: 700; }
#ma-print .ma-ag-terms { width: 100%; border-collapse: collapse; margin: 4px 0; }
#ma-print .ma-ag-terms td { border: 1px solid #999; padding: 4px 6px; vertical-align: top; }
#ma-print .ma-ag-tl-cell { width: 46%; }
#ma-print .ma-ag-signs { display: flex; gap: 18px; margin-top: 10px; }
#ma-print .ma-ag-sign { flex: 1; display: flex; flex-direction: column; }
#ma-print .ma-ag-signline { border-bottom: 1px solid #111; height: 34px; }
#ma-print .ma-ag-signrole { font-weight: 700; font-size: 11px; margin-top: 2px; }
#ma-print .ma-ag-signsub { font-size: 9.5px; color: #666; }
#ma-print .ma-ag-signmeta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 11px; }
#ma-print .ma-ag-disc { margin-top: 10px; font-size: 10px; }
#ma-print .ma-ag-foot { margin-top: 16px; padding-top: 6px; border-top: 1px solid #ccc; font-size: 9.5px; color: #666; display: flex; justify-content: space-between; }
@media print {
  body.macct-page.ma-printing > *:not(#ma-print) { display: none !important; }
  body.macct-page.ma-printing #ma-print { display: block !important; }
  @page { size: A4 portrait; margin: 14mm; }
  #ma-print .ma-print-page, #ma-print .ma-ag-page { page-break-after: always; }
  #ma-print .ma-print-page:last-child, #ma-print .ma-ag-page:last-child { page-break-after: auto; }
  #ma-print .ma-ps-tbl, #ma-print .ma-ag-terms, #ma-print .ma-ag-signs, #ma-print .ma-recv-block, #ma-print .ma-ag-clause { page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R3b — Jobs split view (list-left / detail-right ≥768) + detail timeline.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-jobs-split { display: block; }
body.macct-page .ma-jobs-detailcol:empty { display: none; }
body.macct-page .ma-jobs-split.has-detail .ma-jobs-listcol { display: none; }   /* phone: detail replaces list */
body.macct-page .ma-job-detailcard { }
body.macct-page .ma-job-back { display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 6px; font-weight: 700; }
body.macct-page .ma-job-dhead { margin-bottom: 10px; }
body.macct-page .ma-job-dtitle { margin-bottom: 2px; }
body.macct-page .ma-job-step { padding: 12px 0; border-top: 1px solid var(--ma-line); }
body.macct-page .ma-job-steptop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
body.macct-page .ma-job-stepn { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ma-navy); color: var(--ma-on-navy, #fff); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
body.macct-page .ma-job-steplbl { font-weight: 700; color: var(--ma-ink); flex: 1; }
body.macct-page .ma-job-stepmeta { font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-job-ro { margin: 4px 0 0; }
body.macct-page .ma-job-word { color: var(--ma-muted); margin: 2px 0 6px; }
body.macct-page .ma-job-a { width: 100%; min-height: 46px; margin-top: 4px; }
body.macct-page .ma-job-mats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
body.macct-page .ma-job-matrow { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--ma-ink); }
body.macct-page .ma-job-matday { color: var(--ma-muted); font-size: 12px; white-space: nowrap; }
body.macct-page .ma-job-pgchips { display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-job-pgchip { min-height: 44px; min-width: 52px; padding: 0 10px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-job-pgchip.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-job-margin { margin-top: 12px; padding: 12px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 12px; position: relative; }
body.macct-page .ma-job-mtitle { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-job-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
body.macct-page .ma-job-mgrid > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
body.macct-page .ma-job-mgrid span { color: var(--ma-muted); }
body.macct-page .ma-job-mgrid b { color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-job-mgrid b.pos { color: #1f7a45; } body.macct-page .ma-job-mgrid b.neg { color: #b03636; }
body.macct-page .ma-job-dactions { display: flex; gap: 8px; margin-top: 14px; }
body.macct-page .ma-job-dactions .ma-btn { flex: 1; min-height: 46px; }
body.macct-page .ma-jobbal-list { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-jobbal { cursor: pointer; }
@media (min-width: 768px) {
  body.macct-page .ma-jobs-split { display: flex; gap: 16px; align-items: flex-start; }
  body.macct-page .ma-jobs-listcol { flex: 1 1 340px; min-width: 0; max-width: 460px; }
  body.macct-page .ma-jobs-detailcol { flex: 1 1 480px; min-width: 480px; }
  body.macct-page .ma-jobs-split.has-detail .ma-jobs-listcol { display: block; }   /* laptop: both shown */
  body.macct-page .ma-job-back { display: none; }                                   /* laptop: list already visible */
}

/* ═══════════════════════════════════════════════════════════════════════════
   R4a — VARIANTS (sukat · kulay · model). Parent card + matrix (stacked <768,
   table ≥768) + the add/edit-with-variants sheet (bottom sheet <768, right
   panel ≥768). 44px tap targets; the grid scrolls horizontally inside itself.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-cat-vaddbtn { margin: 4px 0 10px; }
body.macct-page .ma-vparent .ma-oline { color: var(--ma-muted); }
body.macct-page .ma-vchiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
body.macct-page .ma-vchip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
body.macct-page .ma-vchip--low { color: #7a5b00; background: rgba(212,175,55,.18); }
body.macct-page .ma-vchip--out { color: #8a1c1c; background: rgba(176,42,42,.12); }
body.macct-page .ma-vtoggle { display: inline-block; margin: 6px 0 2px; font-weight: 700; }
body.macct-page .ma-vmatrix { margin: 6px 0 2px; }
/* stacked matrix (phone) */
body.macct-page .ma-vmatrix-stack { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-vrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-vrow-lbl { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; color: var(--ma-ink); }
body.macct-page .ma-vrow-stock { font-weight: 700; min-width: 30px; text-align: right; }
body.macct-page .ma-vrow-stock.is-out { color: #b02a2a; }
body.macct-page .ma-vrow-stock.is-low { color: #7a5b00; }
body.macct-page .ma-vrow-btns { display: flex; gap: 6px; flex-shrink: 0; }
body.macct-page .ma-vminus, body.macct-page .ma-vplus {
  width: 44px; height: 44px; min-width: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-card);
  border-radius: 10px; font-size: 20px; font-weight: 700; color: var(--ma-ink); cursor: pointer; line-height: 1;
}
body.macct-page .ma-vplus { color: var(--ma-gold-ink); border-color: var(--ma-gold); }
body.macct-page .ma-vminus:active, body.macct-page .ma-vplus:active { background: var(--ma-gold-soft); }
/* table matrix (laptop) */
body.macct-page .ma-vmatrix-tablewrap { display: none; }
body.macct-page .ma-vseg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
body.macct-page .ma-vseg-b { min-height: 36px; padding: 6px 12px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-vseg-b.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-vgrid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.macct-page .ma-vgrid { border-collapse: collapse; width: 100%; }
body.macct-page .ma-vgrid th, body.macct-page .ma-vgrid td { border: 1px solid var(--ma-line); padding: 6px 8px; text-align: center; font-size: 13px; }
body.macct-page .ma-vgrid th { background: var(--ma-paper); font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-vgrid-rh { text-align: left; }
body.macct-page .ma-vcell { }
body.macct-page .ma-vcell.is-out { background: rgba(176,42,42,.10); }
body.macct-page .ma-vcell.is-low { background: rgba(212,175,55,.14); }
body.macct-page .ma-vcell.is-empty { color: var(--ma-muted); }
body.macct-page .ma-vcell-n { display: block; font-weight: 700; margin-bottom: 4px; }
body.macct-page .ma-vcell-btns { display: inline-flex; gap: 4px; }
body.macct-page .ma-vcell-btns .ma-vminus, body.macct-page .ma-vcell-btns .ma-vplus { width: 30px; height: 30px; min-width: 30px; font-size: 15px; border-radius: 8px; }
body.macct-page .ma-vcell-tot { font-weight: 700; background: var(--ma-paper); }
/* variant sheet extras */
body.macct-page .ma-vrow2 { display: flex; gap: 10px; }
body.macct-page .ma-vrow2 > div { flex: 1 1 0; min-width: 0; }
body.macct-page .ma-vaxis { margin: 10px 0 0; padding: 10px; border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-paper); }
body.macct-page .ma-vaxis-top { display: flex; gap: 8px; align-items: center; }
body.macct-page .ma-vaxis-top .ma-in-axlabel { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; font-size: 15px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-card); color: var(--ma-ink); }
body.macct-page .ma-vchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
body.macct-page .ma-vvalchip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 4px 6px 4px 10px; background: var(--ma-gold-soft); border-radius: 999px; color: var(--ma-gold-ink); }
body.macct-page .ma-vvalchip-x { border: 0; background: transparent; font-size: 15px; cursor: pointer; color: inherit; line-height: 1; }
body.macct-page .ma-vaddval { display: flex; gap: 8px; }
body.macct-page .ma-vaddval .ma-in-axval { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; font-size: 15px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-card); color: var(--ma-ink); }
body.macct-page .ma-vaddval-btn { min-width: 44px; min-height: 44px; }
body.macct-page .ma-vcount { margin: 12px 0 4px; font-size: 15px; }
body.macct-page .ma-vover40 { color: #b02a2a; font-weight: 700; }
body.macct-page .ma-vgrid-host { margin: 4px 0; }
body.macct-page .ma-vgrid-host .ma-in-gqty, body.macct-page .ma-vgrid-host .ma-in-gprice { width: 100%; min-height: 40px; padding: 6px 8px; font-size: 15px; border: 1.5px solid var(--ma-line); border-radius: 8px; background: var(--ma-card); color: var(--ma-ink); text-align: center; }
body.macct-page .ma-vgrid-host .ma-in-gprice { margin-top: 4px; }
body.macct-page .ma-vover-chk { margin-top: 12px; }
/* laptop: matrix becomes a table, sheet becomes a right panel */
@media (min-width: 768px) {
  body.macct-page .ma-vmatrix-stack { display: none; }
  body.macct-page .ma-vmatrix-tablewrap { display: block; }
  body.macct-page .ma-vsheet-back { align-items: stretch; justify-content: flex-end; }
  body.macct-page .ma-vsheet {
    max-width: 540px; height: 100%; max-height: 100%; overflow-y: auto;
    border-radius: var(--ma-r-xl) 0 0 var(--ma-r-xl);
    transform: translateX(100%);
  }
  body.macct-page .ma-vsheet-back.open .ma-vsheet { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.macct-page .ma-vsheet { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R4b — VARIANTS in the POS (parent tile + variant picker), hidden-child chip,
   best-sellers per-variant expander, and the stock-panel parent guard. Picker =
   bottom sheet <768, centred panel ≥768; chips ≥44px.
   ═══════════════════════════════════════════════════════════════════════════ */
/* parent tile "N var" badge */
body.macct-page .ma-pos-varflag { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-pos-tile--var { position: relative; }
/* variant picker */
body.macct-page .ma-vpick-back { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; background: rgba(12,25,48,0); transition: background .22s ease; }
body.macct-page .ma-vpick-back.open { background: rgba(7,14,26,.62); }
body.macct-page .ma-vpick { width: 100%; max-width: 460px; background: var(--ma-card); border-radius: var(--ma-r-xl) var(--ma-r-xl) 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--ma-shadow-float); transform: translateY(100%); transition: transform .28s var(--ma-ease-out); }
body.macct-page .ma-vpick-back.open .ma-vpick { transform: translateY(0); }
body.macct-page .ma-vpick-body { margin: 4px 0 8px; }
body.macct-page .ma-vpick-axis { margin: 10px 0; }
body.macct-page .ma-vpick-axlbl { display: block; font-size: 13px; font-weight: 700; color: var(--ma-muted); margin-bottom: 6px; }
body.macct-page .ma-vpick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.macct-page .ma-vpick-chip { min-height: 44px; min-width: 44px; padding: 8px 16px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-vpick-chip.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-vpick-chip.is-out { opacity: .55; text-decoration: line-through; }
body.macct-page .ma-vpick-chip.is-gone { opacity: .3; pointer-events: none; }
body.macct-page .ma-vpick-sel { margin: 10px 0 2px; padding: 10px 12px; background: var(--ma-paper); border-radius: 12px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.macct-page .ma-vpick-sel--none { color: var(--ma-muted); }
body.macct-page .ma-vpick-selname { font-weight: 700; }
body.macct-page .ma-vpick-selprice { margin-left: auto; font-weight: 800; color: var(--ma-gold-ink); }
body.macct-page .ma-vpick-acts { display: flex; gap: 10px; margin-top: 8px; }
body.macct-page .ma-vpick-acts .ma-btn { flex: 1 1 0; min-height: 50px; }
body.macct-page .ma-vpick-add { background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-vpick-add:disabled { opacity: .5; }
/* hidden-child (nakatago) chip + row/cell + unhide */
body.macct-page .ma-vhidechip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(122,138,165,.18); color: var(--ma-muted); }
body.macct-page .ma-vrow.is-hidden, body.macct-page .ma-vcell.is-hidden { opacity: .6; }
body.macct-page .ma-vunhide { font-weight: 700; }
/* best-sellers per-variant expander */
body.macct-page .ma-bs-varexp { display: inline-block; margin: 2px 0 2px 30px; font-weight: 700; font-size: 13px; }
body.macct-page .ma-bs-varlist { margin: 0 0 6px 30px; display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-bs-varrow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ma-muted); }
body.macct-page .ma-bs-varname { flex: 1 1 auto; min-width: 0; }
body.macct-page .ma-bs-varrev { font-weight: 700; color: var(--ma-ink); }
/* stock-panel parent guard hint + menu-editor var note */
body.macct-page .ma-var-guard { margin: 8px 0 0; padding: 10px 12px; background: rgba(176,42,42,.08); border-radius: 10px; font-size: 13px; color: var(--ma-ink); }
body.macct-page .ma-var-guard-link { font-weight: 700; margin-left: 4px; }
body.macct-page .ma-pos-mvarnote { font-size: 11px; font-weight: 700; color: var(--ma-gold-ink); background: var(--ma-gold-soft); padding: 2px 7px; border-radius: 999px; align-self: center; }
@media (min-width: 768px) {
  body.macct-page .ma-vpick-back { align-items: center; }
  body.macct-page .ma-vpick { max-width: 440px; border-radius: var(--ma-r-xl); transform: translateY(16px) scale(.98); }
  body.macct-page .ma-vpick-back.open .ma-vpick { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-vpick { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   R5a — LISTAHAN / ROSTER (recurring dues). Member list + status chips + Buod +
   add-member sheet (bottom sheet <768, right panel ≥768; chips ≥44px).
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-roster-new { width: 100%; margin: 4px 0 10px; }
body.macct-page .ma-roster-filters { display: flex; gap: 8px; margin-bottom: 10px; }
body.macct-page .ma-roster-filter { min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-roster-filter.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-roster-cards { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-roster-row { cursor: pointer; }
body.macct-page .ma-roster-amt { font-weight: 800; color: var(--ma-gold-ink); }
body.macct-page .ma-roster-metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
body.macct-page .ma-roster-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(122,138,165,.14); color: var(--ma-muted); }
body.macct-page .ma-roster-chip--late { color: #8a1c1c; background: rgba(176,42,42,.12); }
body.macct-page .ma-roster-chip--due { color: #7a5b00; background: rgba(212,175,55,.18); }
body.macct-page .ma-roster-chip--paid { color: #1f6b3b; background: rgba(31,107,59,.12); }
body.macct-page .ma-roster-bayad { margin-left: auto; font-weight: 700; }
body.macct-page .ma-roster-bayad:disabled { opacity: .5; cursor: not-allowed; }
body.macct-page .ma-roster-sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
body.macct-page .ma-roster-scell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--ma-paper); border-radius: 12px; }
body.macct-page .ma-roster-scell span { font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-roster-scell b { font-size: 16px; }
body.macct-page .ma-roster-scell b.pos { color: #1f6b3b; }
body.macct-page .ma-roster-scell b.neg { color: #b02a2a; }
body.macct-page .ma-roster-paalala { width: 100%; }
body.macct-page .ma-roster-paalala:disabled { opacity: .5; cursor: not-allowed; }
body.macct-page .ma-roster-r5b { color: var(--ma-muted); font-style: italic; }
/* add-member sheet chips */
body.macct-page .ma-mem-tychips, body.macct-page .ma-mem-pchips, body.macct-page .ma-mem-wdchips, body.macct-page .ma-mem-gchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
body.macct-page .ma-mem-tychip, body.macct-page .ma-mem-pchip, body.macct-page .ma-mem-wdchip, body.macct-page .ma-mem-gchip {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper);
  border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ma-ink); cursor: pointer;
}
body.macct-page .ma-mem-tychip.is-on, body.macct-page .ma-mem-pchip.is-on, body.macct-page .ma-mem-wdchip.is-on, body.macct-page .ma-mem-gchip.is-on {
  background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink);
}
body.macct-page .ma-mem-duewrap { margin-top: 4px; }
body.macct-page .ma-mem-firstpay { margin-top: 12px; opacity: .6; }
body.macct-page .ma-mem-r5b { font-style: italic; color: var(--ma-muted); font-size: 12px; }
/* laptop: the add-member sheet becomes a right panel (mirrors the variant sheet) */
@media (min-width: 768px) {
  body.macct-page .ma-mem-back { align-items: stretch; justify-content: flex-end; }
  body.macct-page .ma-mem { max-width: 540px; height: 100%; max-height: 100%; overflow-y: auto; border-radius: var(--ma-r-xl) 0 0 var(--ma-r-xl); transform: translateX(100%); }
  body.macct-page .ma-mem-back.open .ma-mem { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-mem { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   R5b — Roster member detail (reuses the ma-jobs-split layout: list-left/detail-
   right ≥768, detail replaces list <768 with a ← back row) + late-dues section.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-roster-detailcard .ma-roster-dhead { margin-bottom: 10px; }
body.macct-page .ma-roster-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
body.macct-page .ma-roster-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--ma-paper); border-radius: 12px; }
body.macct-page .ma-roster-stat span { font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-roster-stat b { font-size: 16px; }
body.macct-page .ma-roster-stat b.pos { color: #1f6b3b; }
body.macct-page .ma-roster-stat b.neg { color: #b02a2a; }
body.macct-page .ma-roster-dactions { display: flex; gap: 10px; margin: 4px 0 14px; }
body.macct-page .ma-roster-dactions .ma-btn { flex: 1 1 0; min-height: 48px; }
body.macct-page .ma-roster-dbayad { background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-roster-dbayad:disabled { opacity: .5; }
body.macct-page .ma-roster-payments { margin: 10px 0; padding: 12px; background: var(--ma-paper); border-radius: 12px; }
body.macct-page .ma-roster-payttl { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
body.macct-page .ma-roster-payrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ma-line); font-size: 13.5px; }
body.macct-page .ma-roster-payday { color: var(--ma-muted); min-width: 56px; }
body.macct-page .ma-roster-paydesc { flex: 1 1 auto; min-width: 0; }
body.macct-page .ma-roster-payamt { font-weight: 800; color: #1f6b3b; }
body.macct-page .ma-roster-dbottom { display: flex; gap: 10px; margin-top: 6px; }
body.macct-page .ma-roster-dbottom .ma-btn { flex: 1 1 0; min-height: 46px; }
body.macct-page .ma-roster-expire:disabled { opacity: .5; }
/* late-dues (Receivables additive section) */
body.macct-page .ma-latedue-list { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-latedue-bayad { margin-left: 8px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   R6a — MGA UNIT / ASSETS (metered). Floor grid (3-across <768, 4-across ≥768),
   tiles with computed clock, and start/session/checkout/editor sheets (bottom
   <768, right panel ≥768). Tiles ≥84px; 44px hit areas.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-asset-tabs { display: flex; gap: 8px; margin: 0 0 10px; }
body.macct-page .ma-asset-tab { min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-asset-tab.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-asset-sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 2px; }
body.macct-page .ma-asset-scell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--ma-paper); border-radius: 12px; }
body.macct-page .ma-asset-scell span { font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-asset-scell b { font-size: 16px; }
body.macct-page .ma-asset-scell b.pos { color: #1f6b3b; }
body.macct-page .ma-asset-floorhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
body.macct-page .ma-asset-flooracts { display: flex; gap: 12px; }
body.macct-page .ma-asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
body.macct-page .ma-asset-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--ma-line); border-radius: 14px; background: var(--ma-card); cursor: pointer; text-align: left; }
body.macct-page .ma-asset-tile--available { border-color: rgba(31,107,59,.4); background: rgba(31,107,59,.07); }
body.macct-page .ma-asset-tile--inuse { border-color: var(--ma-gold-deep); background: var(--ma-gold-soft); }
body.macct-page .ma-asset-tile--maintenance { border-style: dashed; opacity: .55; cursor: not-allowed; }
body.macct-page .ma-asset-tile--out { opacity: .4; }
body.macct-page .ma-asset-tname { font-weight: 800; font-size: 14px; color: var(--ma-ink); }
body.macct-page .ma-asset-tfree { font-weight: 800; font-size: 13px; color: #1f6b3b; }
body.macct-page .ma-asset-trate { font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-asset-tclock { font-weight: 800; font-size: 18px; color: var(--ma-gold-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-asset-tclock.is-over, body.macct-page .ma-asset-bigclock.is-over { color: #b02a2a; }
body.macct-page .ma-asset-trun { font-size: 12.5px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-asset-tstate { font-size: 12px; color: var(--ma-muted); }
/* sheets */
body.macct-page .ma-as-rates, body.macct-page .ma-as-pays, body.macct-page .ma-as-pms, body.macct-page .ma-ae-rounds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 4px; }
body.macct-page .ma-as-rate, body.macct-page .ma-as-pay, body.macct-page .ma-as-pm, body.macct-page .ma-ae-round { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-as-rate.is-on, body.macct-page .ma-as-pay.is-on, body.macct-page .ma-as-pm.is-on, body.macct-page .ma-ae-round.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-asset-clockwrap { text-align: center; margin: 8px 0 12px; }
body.macct-page .ma-asset-bigclock { display: block; font-size: 48px; font-weight: 800; color: var(--ma-gold-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
body.macct-page .ma-asset-games { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0; }
body.macct-page .ma-asset-gminus, body.macct-page .ma-asset-gplus { width: 44px; height: 44px; min-width: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 10px; font-size: 20px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-asset-gcount { font-weight: 700; }
body.macct-page .ma-asset-lines { margin: 8px 0; padding: 10px 12px; background: var(--ma-paper); border-radius: 12px; }
body.macct-page .ma-asset-exrow { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 13.5px; }
body.macct-page .ma-asset-timerow { border-bottom: 1px solid var(--ma-line); font-weight: 700; }
body.macct-page .ma-asset-extras { margin-top: 8px; font-weight: 700; }
body.macct-page .ma-asset-run { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 15px; }
body.macct-page .ma-asset-run b { font-size: 20px; color: var(--ma-gold-ink); }
body.macct-page .ma-asset-sactions { display: flex; gap: 10px; margin: 4px 0 8px; }
body.macct-page .ma-asset-sactions .ma-btn { flex: 1 1 0; min-height: 50px; }
body.macct-page .ma-asset-tapos { background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep)); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-asset-void { display: block; width: 100%; text-align: center; color: #b02a2a; font-weight: 700; }
body.macct-page .ma-asset-pay { width: 100%; min-height: 54px; margin-top: 10px; }
body.macct-page .ma-pos-collect { flex: 1 1 auto; min-height: 46px; border-radius: 12px; font-weight: 800; background: linear-gradient(135deg, var(--ma-gold-hi), var(--ma-gold) 55%, var(--ma-gold-deep)); border: 1.5px solid var(--ma-gold-deep); color: var(--ma-gold-ink); cursor: pointer; }
/* register editor */
body.macct-page .ma-ae-maint { margin-top: 12px; }
body.macct-page .ma-ae-del { display: block; width: 100%; text-align: center; color: #b02a2a; font-weight: 700; margin-top: 8px; }
body.macct-page .ma-ae-reglist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
body.macct-page .ma-ae-regrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--ma-paper); border-radius: 10px; }
body.macct-page .ma-ae-regname { flex: 1 1 auto; font-weight: 700; }
body.macct-page .ma-ae-regrate { font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-ae-regbtns { display: flex; gap: 4px; }
body.macct-page .ma-ae-up, body.macct-page .ma-ae-down, body.macct-page .ma-ae-edit { width: 40px; height: 40px; min-width: 40px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 8px; cursor: pointer; }
@media (min-width: 768px) {
  body.macct-page .ma-asset-grid { grid-template-columns: repeat(4, 1fr); }
  body.macct-page .ma-asset-back { align-items: stretch; justify-content: flex-end; }
  body.macct-page .ma-asset-sheet { max-width: 480px; height: 100%; max-height: 100%; overflow-y: auto; border-radius: var(--ma-r-xl) 0 0 var(--ma-r-xl); transform: translateX(100%); }
  body.macct-page .ma-asset-back.open .ma-asset-sheet { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-asset-sheet { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   R6b — RENTAL mode (Ilabas/Ibalik) + condition checklist + presets editor.
   Reuses the ma-jobs-split layout (list-left/detail-right ≥768) + sheet patterns.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-rental-notincome { font-size: 11px; font-weight: 700; font-style: italic; color: var(--ma-muted); }
body.macct-page .ma-rental-filter { min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-rental-filter.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-rental-cards { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-rental-row { cursor: pointer; }
body.macct-page .ma-rental-dep { font-weight: 700; font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-rental-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(122,138,165,.14); color: var(--ma-muted); }
body.macct-page .ma-rental-chip--out { color: var(--ma-gold-ink); background: var(--ma-gold-soft); }
body.macct-page .ma-rental-chip--due { color: #7a5b00; background: rgba(212,175,55,.18); }
body.macct-page .ma-rental-chip--late { color: #8a1c1c; background: rgba(176,42,42,.12); }
body.macct-page .ma-rental-ibalik { margin-left: auto; font-weight: 700; }
body.macct-page .ma-rental-conds { margin-top: 6px; }
body.macct-page .ma-rental-condrow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
/* condition checklist */
body.macct-page .ma-cond-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
body.macct-page .ma-cond-row { display: flex; gap: 8px; align-items: center; }
body.macct-page .ma-cond-row .ma-in-condlabel { flex: 1 1 auto; min-height: 44px; }
body.macct-page .ma-cond-ok { width: 44px; height: 44px; min-width: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 10px; font-size: 18px; font-weight: 800; color: #b02a2a; cursor: pointer; }
body.macct-page .ma-cond-ok.is-ok { color: #1f6b3b; border-color: rgba(31,107,59,.5); background: rgba(31,107,59,.08); }
/* ilabas / ibalik chips (reuse asset chip look) */
body.macct-page .ma-ri-pay, body.macct-page .ma-rib-pm, body.macct-page .ma-rib-dep { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-ri-pay.is-on, body.macct-page .ma-rib-pm.is-on, body.macct-page .ma-rib-dep.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-rib-deps { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
body.macct-page .ma-rib-inline { width: 110px; min-height: 40px; text-align: right; }
body.macct-page .ma-rib-settle { width: 100%; min-height: 54px; margin-top: 10px; }
/* presets editor (Rates ✎) */
body.macct-page .ma-ae-cfg { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ma-line); }
body.macct-page .ma-ae-cfgttl { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
body.macct-page .ma-ae-presets { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-ae-presetrow { display: flex; gap: 6px; align-items: center; }
body.macct-page .ma-ae-presetrow .ma-in-plabel { flex: 2 1 0; min-height: 40px; }
body.macct-page .ma-ae-presetrow .ma-in-pmin, body.macct-page .ma-ae-presetrow .ma-in-pcent { flex: 1 1 0; min-width: 0; min-height: 40px; }
body.macct-page .ma-ae-presetadd { margin: 6px 0; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   R7a — KONSINASYON / CONSIGNMENT (producer side). Accounts split (list-left/
   detail-right ≥768), delivery + settlement sheets with a per-item qty grid that
   scrolls inside its own container at 390. Reuses ma-jobs-split + sheet patterns.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-inv-consignchip { margin: 0 0 10px; }
body.macct-page .ma-consign-toggle { min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-consign-toggle.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-consign-filter { min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-consign-filter.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-consign-cards { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-consign-row { cursor: pointer; }
body.macct-page .ma-consign-bal { font-weight: 800; color: var(--ma-gold-ink); }
body.macct-page .ma-consign-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(122,138,165,.14); color: var(--ma-muted); }
body.macct-page .ma-consign-chip--active { color: #1f6b3b; background: rgba(31,107,59,.10); }
body.macct-page .ma-consign-chip--due { color: #7a5b00; background: rgba(212,175,55,.18); }
body.macct-page .ma-consign-chip--late { color: #8a1c1c; background: rgba(176,42,42,.12); }
body.macct-page .ma-consign-settle { margin-left: auto; font-weight: 700; }
body.macct-page .ma-consign-dbottom { display: flex; gap: 12px; margin-top: 8px; }
body.macct-page .ma-consign-detailcard .ma-asset-sactions { margin-top: 6px; }
/* delivery / settlement item grid */
body.macct-page .ma-cd-gridscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0; }
body.macct-page .ma-cd-grid, body.macct-page .ma-cs-grid { display: flex; flex-direction: column; gap: 6px; min-width: 300px; }
body.macct-page .ma-cd-itemrow { display: grid; grid-template-columns: minmax(90px, 1fr) auto 64px 84px; gap: 8px; align-items: center; }
body.macct-page .ma-cs-itemrow { grid-template-columns: minmax(80px, 1fr) auto 64px 64px auto; }
body.macct-page .ma-cd-iname { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-cd-ishelf { font-size: 11.5px; color: var(--ma-muted); white-space: nowrap; }
body.macct-page .ma-cd-itemrow .ma-in-cdqty, body.macct-page .ma-cd-itemrow .ma-in-cdsrp, body.macct-page .ma-cs-itemrow .ma-in-cssold, body.macct-page .ma-cs-itemrow .ma-in-csret { min-height: 40px; padding: 6px 8px; text-align: center; }
body.macct-page .ma-cs-akin { font-weight: 800; color: #1f6b3b; white-space: nowrap; font-size: 13px; }
body.macct-page .ma-cd-foot { margin: 8px 0; font-size: 13px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-cd-terms { margin: 4px 0; }
body.macct-page .ma-cd-splitin { width: 56px; min-height: 40px; text-align: center; display: inline-block; }
body.macct-page .ma-cd-cads { display: flex; gap: 8px; margin: 4px 0; }
body.macct-page .ma-cd-cad { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-cd-cad.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-cs-pm { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-cs-pm.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-cs-settle { width: 100%; min-height: 54px; margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   R7b — Konsinasyon retailer side + wholesale delivery column + receivables.
   ═══════════════════════════════════════════════════════════════════════════ */
/* terms-mode chips + wholesale column (delivery) */
body.macct-page .ma-cd-termsmode { display: flex; gap: 8px; margin: 4px 0; }
body.macct-page .ma-cd-tmode { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-cd-tmode.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); color: var(--ma-gold-ink); }
body.macct-page .ma-cd-form:not(.ma-cd-wholesale) .ma-in-cdwp { display: none; }
body.macct-page .ma-cd-form.ma-cd-wholesale .ma-cd-splitwrap { display: none; }
body.macct-page .ma-cd-form.ma-cd-wholesale .ma-cd-itemrow { grid-template-columns: minmax(70px, 1fr) auto 52px 64px 64px; }
body.macct-page .ma-cd-itemrow .ma-in-cdwp { min-height: 40px; padding: 6px 8px; text-align: center; }
/* receive grid (retailer): name · qty · cost (+ new-product rows add name·qty·cost·srp) */
body.macct-page .ma-cr-grid { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
body.macct-page .ma-cr-itemrow { display: grid; grid-template-columns: minmax(100px, 1fr) 64px 84px; gap: 8px; align-items: center; }
body.macct-page .ma-cr-newrow { grid-template-columns: minmax(90px, 1fr) 56px 72px 72px; }
body.macct-page .ma-cr-itemrow .ma-in-crqty, body.macct-page .ma-cr-itemrow .ma-in-crcost, body.macct-page .ma-cr-itemrow .ma-in-crsrp, body.macct-page .ma-cr-itemrow .ma-in-crname { min-height: 40px; padding: 6px 8px; }
body.macct-page .ma-cr-newprod { margin: 8px 0; font-weight: 700; }
/* pay grid reuses ma-cs-itemrow; single sold column + akin */
body.macct-page .ma-cs-itemrow .ma-in-cpsold { min-height: 40px; padding: 6px 8px; text-align: center; }
/* consignment receivables section */
body.macct-page .ma-consignbal-list { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-consignbal-settle { margin-left: 8px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   R8a — KOMISYON / crew commission. Chip picker (on the 3 sale write points +
   POS pay screen), the Crew tab (Buod + list/detail split), roster editor +
   Bayaran sheets, enable toggle, and the "Utang ko sa crew" payable section.
   44px tap targets; sheets bottom<768 / right≥768 reuse ma-asset-sheet; no
   horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Chip picker (shared) */
body.macct-page .ma-crew-pick { margin: 10px 0 2px; }
body.macct-page .ma-crew-pick-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--ma-muted); margin-bottom: 6px; }
body.macct-page .ma-crew-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-crew-chip { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-crew-chip.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-crew-readout { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--ma-gold-deep, var(--ma-ink)); }
body.macct-page .ma-pos-crew { margin: 12px 0; }
/* Enable toggle */
body.macct-page .ma-crew-prefchip { margin: 0 0 10px; }
body.macct-page .ma-crew-toggle { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
body.macct-page .ma-crew-toggle.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); }
/* Tab */
body.macct-page .ma-crew-tab { position: relative; }
body.macct-page .ma-crew-tabhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
body.macct-page .ma-crew-tabtitle { margin: 0; font-size: 16px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .ma-crew-buod { padding: 12px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 12px; margin-bottom: 12px; }
body.macct-page .ma-crew-periodsw { display: inline-flex; gap: 4px; padding: 3px; background: var(--ma-line); border-radius: 10px; margin-bottom: 12px; }
body.macct-page .ma-crew-pbtn { min-height: 44px; padding: 0 16px; border: none; background: transparent; color: var(--ma-muted); border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }   /* R8a fix: 40 → 44 tap target */
body.macct-page .ma-crew-pbtn.is-on { background: var(--ma-paper); color: var(--ma-ink); }
body.macct-page .ma-crew-stats, body.macct-page .ma-crew-dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.macct-page .ma-crew-stat, body.macct-page .ma-crew-dstat { display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-crew-statv, body.macct-page .ma-crew-dstatv { font-size: 18px; font-weight: 800; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-crew-statl, body.macct-page .ma-crew-dstatl { font-size: 11px; font-weight: 700; color: var(--ma-muted); text-transform: uppercase; letter-spacing: .02em; }
body.macct-page .ma-crew-listcol { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-crew-card { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 12px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 12px; cursor: pointer; font: inherit; }
body.macct-page .ma-crew-card.is-sel { border-color: var(--ma-navy); box-shadow: 0 0 0 1px var(--ma-navy); }
body.macct-page .ma-crew-card.is-inactive { opacity: .6; }
body.macct-page .ma-crew-cname { font-weight: 800; color: var(--ma-ink); }
body.macct-page .ma-crew-crate { font-size: 13px; color: var(--ma-muted); }
body.macct-page .ma-crew-cowed { font-size: 14px; font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-crew-inact { font-size: 11px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-crew-empty, body.macct-page .ma-crew-detail-empty, body.macct-page .ma-crew-hempty { color: var(--ma-muted); padding: 16px 4px; }
body.macct-page .ma-crew-dhead { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
body.macct-page .ma-crew-dname { font-size: 18px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .ma-crew-drate { font-size: 13px; color: var(--ma-muted); }
body.macct-page .ma-crew-dlast { margin: 10px 0 0; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-crew-dacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body.macct-page .ma-crew-dacts .ma-btn { flex: 1; min-width: 96px; min-height: 46px; }
body.macct-page .ma-crew-hist { margin-top: 16px; }
body.macct-page .ma-crew-histh { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-crew-hrow { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ma-line); }
body.macct-page .ma-crew-hday { flex: none; width: 54px; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-crew-hdesc { flex: 1; font-size: 13px; color: var(--ma-ink); }
body.macct-page .ma-crew-hamt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-crew-hrow--earn .ma-crew-hamt { color: #1f7a45; }
body.macct-page .ma-crew-hrow--pay .ma-crew-hamt { color: #b03636; }
/* Editor sheet rows */
body.macct-page .ma-crew-ehint { color: var(--ma-muted); font-size: 13px; margin: 0 0 10px; }
body.macct-page .ma-crew-erows { display: flex; flex-direction: column; gap: 12px; }
body.macct-page .ma-crew-erow { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-crew-erate { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto minmax(72px, 1fr); gap: 6px; align-items: center; }
body.macct-page .ma-crew-el { font-size: 12px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-crew-eact { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
body.macct-page .ma-crew-eactions { margin: 10px 0; }
body.macct-page .ma-crew-esave { display: flex; gap: 8px; margin-top: 8px; }
body.macct-page .ma-crew-esave .ma-btn { flex: 1; min-height: 46px; }
/* Bayaran sheet */
body.macct-page .ma-crew-payowed { color: var(--ma-muted); margin: 0 0 10px; }
body.macct-page .ma-crew-paymodes { display: flex; gap: 6px; }
body.macct-page .ma-crew-pmchip { min-height: 44px; flex: 1; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
body.macct-page .ma-crew-pmchip.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
/* Payable section */
body.macct-page .ma-crewbal-list { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-crewbal-pay { margin-left: 8px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }   /* R8a fix: 19.3 → ≥44 tap area, matches R5b/R7 settle-button language */
body.macct-page .ma-crew-editbtn { min-height: 44px; display: inline-flex; align-items: center; }   /* R8a fix: 24 → ≥44 tap area (visual size kept via underline text) */
/* Phone: detail replaces list (reuses ma-jobs-split.has-detail); detail hidden until a pick */
body.macct-page .ma-crew-detailcol { display: none; }
body.macct-page .ma-crew-split.has-detail .ma-crew-detailcol { display: block; }
@media (min-width: 768px) {
  body.macct-page .ma-crew-detailcol { display: block; }
  body.macct-page .ma-crew-split.has-detail .ma-crew-listcol { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R8b — TIMBANG / per-kilo. Catalogue unit picker + pack field, restock sako
   switch, weighed POS tile, weighed-line list, and the "ilang kilo?" weigh sheet
   (keypad + Kilo/Piso + quick chips). 44px tap targets; bottom sheet <768 / right
   panel ≥768 (reuses ma-asset-sheet). No horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Catalogue unit picker */
body.macct-page .ma-cat-units { display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-cat-unit { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-cat-unit.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-cat-priceunit, body.macct-page .ma-cat-costunit { color: var(--ma-muted); font-weight: 600; }
body.macct-page .ma-cat-tingihint { margin: 8px 0 0; font-size: 12px; color: var(--ma-muted); }
/* Restock sako switch */
body.macct-page .ma-rs-modesw { display: inline-flex; gap: 4px; padding: 3px; background: var(--ma-line); border-radius: 10px; margin-bottom: 10px; }
body.macct-page .ma-rs-mode { min-height: 40px; padding: 0 16px; border: none; background: transparent; color: var(--ma-muted); border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
body.macct-page .ma-rs-mode.is-on { background: var(--ma-paper); color: var(--ma-ink); }
/* Weighed POS tile + weighed-line list */
body.macct-page .ma-pos-tile--weigh .ma-pos-tprice { font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-worder { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
body.macct-page .ma-pos-wrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-pos-wname { font-weight: 700; color: var(--ma-ink); flex: 1; min-width: 0; }
body.macct-page .ma-pos-wqty { color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-wamt { font-weight: 700; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-pos-wdel { width: 44px; height: 44px; flex: none; border: 0; background: rgba(122,138,165,.12); border-radius: 10px; color: var(--ma-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Weigh sheet */
body.macct-page .ma-weigh-modesw { display: flex; gap: 6px; margin: 6px 0 12px; }
body.macct-page .ma-weigh-mode { flex: 1; min-height: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
body.macct-page .ma-weigh-mode.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-weigh-readout { font-size: 26px; font-weight: 800; color: var(--ma-ink); text-align: center; padding: 12px 0; font-variant-numeric: tabular-nums; }
body.macct-page .ma-weigh-stock { text-align: center; font-size: 13px; color: var(--ma-muted); margin-bottom: 10px; }
body.macct-page .ma-weigh-chips { display: flex; gap: 6px; margin-bottom: 10px; }
body.macct-page .ma-weigh-chip { flex: 1; min-height: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
body.macct-page .ma-weigh-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.macct-page .ma-weigh-key { min-height: 54px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 12px; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-weigh-key:active { background: var(--ma-gold-soft); }
body.macct-page .ma-weigh-acts { display: flex; gap: 8px; margin-top: 14px; }
body.macct-page .ma-weigh-acts .ma-btn { flex: 1; min-height: 48px; }

/* ═══════════════════════════════════════════════════════════════════════════
   R8c — BYAHE units + settlement. Fleet toggle, editor scheme/fuel/status chips,
   Units tab (reuses ma-crew-* Buod + list/detail split), unit cards + status
   chips, history tint. 44px tap targets; sheets bottom<768 / right≥768 (reuses
   ma-asset-sheet). No horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-fleet-prefchip { margin: 0 0 10px; }
body.macct-page .ma-fleet-toggle { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
body.macct-page .ma-fleet-toggle.is-on { background: var(--ma-gold-soft); border-color: var(--ma-gold-deep); }
/* editor chip rows */
body.macct-page .ma-by-schemes, body.macct-page .ma-by-fuelby, body.macct-page .ma-by-statuses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
body.macct-page .ma-by-scheme, body.macct-page .ma-by-fuel, body.macct-page .ma-by-status { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-by-scheme.is-on, body.macct-page .ma-by-fuel.is-on, body.macct-page .ma-by-status.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-by-schemehelp { font-size: 12px; color: var(--ma-muted); margin: 0 0 8px; }
/* Buod: allow up to 5 stat tiles to wrap cleanly (reuses ma-crew-stats grid) */
body.macct-page .ma-by-buod { padding: 12px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 12px; margin-bottom: 12px; }
body.macct-page .ma-by-buod .ma-crew-stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { body.macct-page .ma-by-buod .ma-crew-stats { grid-template-columns: repeat(3, 1fr); } }
/* unit card extras */
body.macct-page .ma-by-drv { font-weight: 600; color: var(--ma-muted); font-size: 13px; }
body.macct-page .ma-by-cardfig { font-weight: 800; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-by-chip { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ma-line); color: var(--ma-ink); }
body.macct-page .ma-by-chip--ok { background: #d8ecd8; color: #1f7a45; }
body.macct-page .ma-by-chip--wait { background: #f6e6c8; color: #8a5a12; }
body.macct-page .ma-by-chip--short { background: #f3d6d6; color: #b03636; }
body.macct-page .ma-by-chip--idle { background: var(--ma-line); color: var(--ma-muted); }
body.macct-page .ma-by-dstats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { body.macct-page .ma-by-dstats { grid-template-columns: repeat(3, 1fr); } }
body.macct-page .ma-by-hrow--log { opacity: .62; }
body.macct-page .ma-by-hrow--in .ma-crew-hdesc { color: #1f7a45; }
body.macct-page .ma-by-hrow--out .ma-crew-hdesc { color: #b03636; }

/* ═══════════════════════════════════════════════════════════════════════════
   R9a — EXPIRY/FEFO + SERIAL/WARRANTY. Catalogue expiry chip, expiring-alerts,
   serial picker + units sheet + Hanapin, POS amber dot. 44px targets; sheets
   bottom<768 / right≥768 (reuse ma-asset-sheet). No horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-exp-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ma-line); color: var(--ma-ink); white-space: nowrap; }
body.macct-page .ma-exp-chip--ok { background: #d8ecd8; color: #1f7a45; }
body.macct-page .ma-exp-chip--soon { background: #f6e6c8; color: #8a5a12; }
body.macct-page .ma-exp-chip--expired { background: #f3d6d6; color: #b03636; }
body.macct-page .ma-exp-alertlist { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-exp-stockout, body.macct-page .ma-exp-share { font-weight: 700; margin-top: 6px; }
body.macct-page .ma-cat-units { font-weight: 700; margin-left: 8px; }
/* Inventory header search */
body.macct-page .ma-inv-hanapin { margin: 0 0 10px; }
body.macct-page .ma-in-hanapin { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-paper); color: var(--ma-ink); font: inherit; box-sizing: border-box; }
body.macct-page .ma-hanapin-result { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
body.macct-page .ma-hanapin-card { }
body.macct-page .ma-hanapin-expired, body.macct-page .ma-warranty-past { color: #b03636; font-weight: 700; }
body.macct-page .ma-hanapin-days { color: var(--ma-muted); }
/* Serial units sheet + picker */
body.macct-page .ma-ser-list { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-ser-instock { font-size: 12px; font-weight: 700; color: #1f7a45; }
body.macct-page .ma-ser-soldtag { font-size: 12px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ma-ser-sold { opacity: .75; }
body.macct-page .ma-serpick-search { width: 100%; min-height: 44px; margin-bottom: 10px; box-sizing: border-box; }
body.macct-page .ma-serpick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
body.macct-page .ma-serpick-chip { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-serpick-chip.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-serpick-none { border-style: dashed; }
body.macct-page .ma-serpick-warranty { font-size: 13px; color: var(--ma-muted); margin: 4px 0 8px; }
body.macct-page .ma-serpick-empty { color: var(--ma-muted); margin: 4px 0 10px; }
/* POS serial line tag + amber dot */
body.macct-page .ma-pos-serialtag { font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-pos-expdot { position: absolute; top: 6px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: #e0a020; box-shadow: 0 0 0 2px var(--ma-card); }
body.macct-page .ma-pos-tile { position: relative; }
/* stock-in serials textarea + hint */
body.macct-page .ma-in-serials { width: 100%; min-height: 66px; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-paper); color: var(--ma-ink); font: inherit; box-sizing: border-box; resize: vertical; }
body.macct-page .ma-inv-serialhint { font-size: 12px; color: var(--ma-muted); margin: 4px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   R9b — SEASON + PRE-ORDER. Season chip row + section (reuses ma-crew-* split),
   off-season label, pre-order booking sheet + rows + Gagawin strip. 44px targets;
   sheets bottom<768 / right≥768. No horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-cat-seasons, body.macct-page .ma-season-presets, body.macct-page .ma-po-modes, body.macct-page .ma-po-depchips { display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-cat-season, body.macct-page .ma-season-preset, body.macct-page .ma-po-mode, body.macct-page .ma-po-depchip { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-cat-season.is-on, body.macct-page .ma-po-mode.is-on, body.macct-page .ma-po-depchip.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-season-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
body.macct-page .ma-season-chip--off { background: #e7ddc6; color: #7a5a12; }
/* Season section (reuses ma-crew-* / ma-jobs-split) */
body.macct-page .ma-season-prog { display: block; height: 6px; border-radius: 999px; background: var(--ma-line); margin: 6px 0 2px; overflow: hidden; }
body.macct-page .ma-season-progbar { display: block; height: 100%; background: var(--ma-gold-deep, #b8860b); }
body.macct-page .ma-season-tagn { font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-season-atprice { font-size: 11px; color: var(--ma-muted); margin: 4px 0 0; }
body.macct-page .ma-season-taglist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-height: 50vh; overflow-y: auto; }
body.macct-page .ma-season-tagrow { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; }
body.macct-page .ma-season-tagother { font-size: 11px; color: var(--ma-muted); }
/* Pre-order booking sheet */
body.macct-page .ma-po-when { display: flex; gap: 8px; }
body.macct-page .ma-po-when input { flex: 1; min-width: 0; }
body.macct-page .ma-po-items { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-po-item { display: grid; grid-template-columns: minmax(0,1fr) 64px 84px auto; gap: 6px; align-items: center; }
body.macct-page .ma-po-item input { min-height: 44px; padding: 6px 8px; border: 1.5px solid var(--ma-line); border-radius: 8px; background: var(--ma-paper); color: var(--ma-ink); font: inherit; box-sizing: border-box; min-width: 0; }
body.macct-page .ma-po-total { font-weight: 800; font-variant-numeric: tabular-nums; margin: 8px 0; }
body.macct-page .ma-po-depamt { display: flex; gap: 8px; }
body.macct-page .ma-po-depamt input, body.macct-page .ma-po-depamt select { flex: 1; min-height: 44px; }
/* Pre-order rows + tags */
body.macct-page .ma-po-modechip, body.macct-page .ma-po-depchip-tag, body.macct-page .ma-po-baltag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ma-line); color: var(--ma-ink); }
body.macct-page .ma-po-dep-ok { background: #d8ecd8; color: #1f7a45; }
body.macct-page .ma-po-dep-none { background: #f6e6c8; color: #8a5a12; }
body.macct-page .ma-po-detail { padding: 10px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 12px; margin-bottom: 10px; }
/* Gagawin strip */
body.macct-page .ma-gagawin-strip { display: flex; gap: 6px; margin: 8px 0; }
body.macct-page .ma-gagawin-day { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 12px; cursor: pointer; font: inherit; }
body.macct-page .ma-gagawin-lbl { font-weight: 700; }
body.macct-page .ma-gagawin-n { font-size: 12px; color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-gagawin-nodep { font-size: 11px; font-weight: 700; color: #8a5a12; }

/* ═══════════════════════════════════════════════════════════════════════════
   R9c — TENANTS extend + ANI FCR. Arrears chip, tenant detail sheet + Buod,
   Late-na-renta section, cycle FCR block + feed/timbang + reminder. 44px targets;
   sheets bottom<768 / right≥768. No horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-tn-arr { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
body.macct-page .ma-tn-arr--late { background: #f3d6d6; color: #b03636; }
body.macct-page .ma-tn-arr--ok { background: #d8ecd8; color: #1f7a45; }
body.macct-page .ma-unit--r9c { cursor: pointer; }
body.macct-page .ma-tn-arrbig { font-weight: 800; color: #b03636; margin: 6px 0; }
body.macct-page .ma-tn-paidbig { font-weight: 800; color: #1f7a45; margin: 6px 0; }
body.macct-page .ma-tn-red { color: #b03636; }
body.macct-page .ma-tn-dephint { font-size: 12px; color: var(--ma-muted); margin: 8px 0; }
body.macct-page .ma-tn-buod .ma-crew-stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { body.macct-page .ma-tn-buod .ma-crew-stats { grid-template-columns: repeat(4, 1fr); } }
body.macct-page .ma-tn-batchremind { font-weight: 700; margin-top: 8px; }
/* Ani FCR block */
body.macct-page .ma-fcr-block { margin: 6px 0; padding: 8px 10px; background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 12px; }
body.macct-page .ma-fcr-prog { height: 6px; border-radius: 999px; background: var(--ma-line); overflow: hidden; margin: 2px 0 6px; }
body.macct-page .ma-fcr-progbar { display: block; height: 100%; background: var(--ma-gold-deep, #b8860b); }
body.macct-page .ma-fcr-day { font-weight: 700; }
body.macct-page .ma-fcr-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
body.macct-page .ma-fcr-chip--green { background: #d8ecd8; color: #1f7a45; }
body.macct-page .ma-fcr-chip--amber { background: #f6e6c8; color: #8a5a12; }
body.macct-page .ma-fcr-chip--grey { background: var(--ma-line); color: var(--ma-muted); }
body.macct-page .ma-fcr-cost { color: var(--ma-muted); font-size: 13px; }
body.macct-page .ma-fcr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
body.macct-page .ma-fcr-acts .ma-textbtn { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
body.macct-page .ma-fcr-reminder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ma-line); }
body.macct-page .ma-fcr-remtext { font-size: 13px; font-weight: 700; color: var(--ma-ink); flex: 1; min-width: 0; }
body.macct-page .ma-fcr-remdone { font-size: 12px; font-weight: 700; color: #1f7a45; }
body.macct-page .ma-cyc-remind { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   R10a — INTAKE (Bili sheet + Binili view). Chip rows, aging/docs chips, Binili
   section (reuses ma-crew-*/ma-jobs-split). 44px targets; sheets bottom<768 /
   right≥768. No horizontal scroll at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-inv-bilibtn { margin: 0 0 10px; }
body.macct-page .ma-inv-bilibtn .ma-btn { min-height: 44px; }
body.macct-page .ma-bili-units, body.macct-page .ma-bili-ids, body.macct-page .ma-bili-pays, body.macct-page .ma-bili-docs { display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-bili-unit, body.macct-page .ma-bili-id, body.macct-page .ma-bili-pay, body.macct-page .ma-bili-doc { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); color: var(--ma-ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
body.macct-page .ma-bili-unit.is-on, body.macct-page .ma-bili-id.is-on, body.macct-page .ma-bili-pay.is-on, body.macct-page .ma-bili-doc.is-on { background: var(--ma-navy); color: var(--ma-on-navy, #fff); border-color: var(--ma-navy); }
body.macct-page .ma-in-biserials { width: 100%; min-height: 54px; padding: 8px 10px; border: 1.5px solid var(--ma-line); border-radius: 10px; background: var(--ma-paper); color: var(--ma-ink); font: inherit; box-sizing: border-box; resize: vertical; }
/* Binili section */
body.macct-page .ma-bn-sec .ma-crew-stats { grid-template-columns: repeat(3, 1fr); }
body.macct-page .ma-bn-card .ma-bn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
body.macct-page .ma-bn-serial { font-weight: 600; color: var(--ma-muted); font-size: 12px; }
body.macct-page .ma-bn-age { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
body.macct-page .ma-bn-age--ok { background: #d8ecd8; color: #1f7a45; }
body.macct-page .ma-bn-age--amber { background: #f6e6c8; color: #8a5a12; }
body.macct-page .ma-bn-age--red { background: #f3d6d6; color: #b03636; }
body.macct-page .ma-bn-docs { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f3d6d6; color: #b03636; }
body.macct-page .ma-bn-catchip { background: #dfe7f5; color: #2a4a86; }
body.macct-page .ma-bn-docsrow { margin: 8px 0; }
body.macct-page .ma-bn-doc.is-ro { opacity: .7; cursor: default; }
body.macct-page .ma-bn-ro-hint, body.macct-page .ma-bn-estimate { font-size: 12px; color: var(--ma-muted); margin: 4px 0; }
body.macct-page .ma-bn-pos { color: #1f7a45; } body.macct-page .ma-bn-neg { color: #b03636; }

/* ═══════════════════════════════════════════════════════════════════════════
   R10b — COUNTER FLOAT pane (Float). Header (wallet lines · fees · gap · buttons ·
   type tiles) + laptop-frame ledger (wallets-left / ledger-right ≥768). Reuses
   ma-bili-ids chips, ma-bn-age tones, ma-crew-*/ma-jobs-split. 44px targets; no
   horizontal scroll at 390. Sheets: right panel ≥768 / bottom <768 (ma-asset-*).
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-flt-tab { margin: 0 0 12px; }
body.macct-page .ma-flt-cfgbtn { min-height: 44px; padding: 0 12px; font-weight: 700; }
body.macct-page .ma-flt-wallets-sum { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
body.macct-page .ma-flt-wline { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-flt-wlname { font-weight: 700; flex: 1; }
body.macct-page .ma-flt-wlexp { font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-flt-lowchip { margin-left: 4px; }
body.macct-page .ma-flt-hstats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
body.macct-page .ma-flt-hstat { display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-flt-hstatv { font-weight: 700; }
body.macct-page .ma-flt-hstatl { font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-flt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
body.macct-page .ma-flt-acts .ma-btn { min-height: 44px; flex: 1; min-width: 120px; }
body.macct-page .ma-flt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
body.macct-page .ma-flt-tile { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ma-ink); }
body.macct-page .ma-flt-tileic { font-size: 20px; line-height: 1; }
body.macct-page .ma-flt-preview { margin: 4px 0 8px; font-weight: 600; color: var(--ma-navy); }
body.macct-page .ma-flt-feerow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.macct-page .ma-flt-feerow .ma-flt-fee { max-width: 140px; }
body.macct-page .ma-flt-countrow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-flt-countname { font-weight: 700; }
body.macct-page .ma-flt-countin { grid-column: 1 / -1; }
body.macct-page .ma-flt-countgap { grid-column: 1 / -1; font-weight: 700; }
body.macct-page .ma-flt-wrow { padding: 10px 0; border-bottom: 1px solid var(--ma-line); display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-flt-wl { font-size: 12px; color: var(--ma-muted); font-weight: 700; }
body.macct-page .ma-flt-wact { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
body.macct-page .ma-flt-ledger { margin-top: 4px; }
body.macct-page .ma-flt-share { min-height: 44px; padding: 0 12px; font-weight: 700; }
body.macct-page .ma-flt-wcard { padding: 10px 12px; border: 1.5px solid var(--ma-line); border-radius: 10px; margin-bottom: 8px; background: var(--ma-paper); }
body.macct-page .ma-flt-wcname { font-weight: 700; }
body.macct-page .ma-flt-wcexp { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-flt-lrow { padding: 8px 0; border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-flt-ltop { display: flex; align-items: baseline; gap: 8px; }
body.macct-page .ma-flt-ltype { font-weight: 700; }
body.macct-page .ma-flt-lamt { font-variant-numeric: tabular-nums; }
body.macct-page .ma-flt-lfee { margin-left: auto; font-weight: 700; }
body.macct-page .ma-flt-lrow--count { color: var(--ma-muted); }
@media (min-width: 768px) {
  body.macct-page .ma-flt-split { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px; align-items: start; }
  body.macct-page .ma-flt-tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R10c — LOANS / PAWN pane (kind lend). Cards + progress bar + pawn/loan detail
   split. Reuses ma-crew-*/ma-jobs-split (list-left/detail-right ≥768), ma-bili-ids
   chips, ma-bn-age tones. 44px targets; sheets right-panel ≥768 (ma-asset-*). No
   horizontal scroll at 390. `lend` ≠ Money-Matters `loan` (Utang) — separate panes.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-lend-pane .ma-crew-stats { grid-template-columns: repeat(4, 1fr); }
body.macct-page .ma-lend-cardchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-weight: 700; }
body.macct-page .ma-lend-prog { display: block; height: 6px; border-radius: 999px; background: var(--ma-line); margin: 6px 0 2px; overflow: hidden; }
body.macct-page .ma-lend-progbar { display: block; height: 100%; background: var(--ma-green); border-radius: 999px; }
body.macct-page .ma-lend-dstats { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
body.macct-page .ma-lend-note { color: var(--ma-muted); font-size: 12px; margin: 6px 0; }
body.macct-page .ma-lend-pays { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
body.macct-page .ma-lend-payrow { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--ma-line); font-variant-numeric: tabular-nums; }
body.macct-page .ma-lend-split { font-weight: 700; color: var(--ma-navy); margin: 6px 0; }
body.macct-page .ma-sangla-warn { font-weight: 700; padding: 4px 8px; border-radius: 8px; }
body.macct-page .ma-lend-form .ma-btn { min-height: 44px; }
body.macct-page .ma-lendbal-list, body.macct-page .ma-lend-cardchips { min-height: 0; }
body.macct-page .ma-lend-56 { min-height: 44px; margin: 4px 0; }
body.macct-page .ma-lend-pane .ma-crew-tabhead .ma-btn { min-height: 44px; }   /* R10c — [＋ Loan]/[＋ Sangla] header add-button meets the 44px tap target */

/* ═══════════════════════════════════════════════════════════════════════════
   v282 — New-loan RELEASE sheet: reachable sticky header/footer + scrollable
   compact body (Angie Sep 24). ALL rules scoped to `.ma-lend-release` /
   `.ma-lend-scrim` so every other sheet sharing .ma-sheet/.ma-asset-sheet is
   byte-identical. Root cause: base .ma-sheet has no <768 max-height/overflow, so
   a form taller than the viewport grows off the top (header clipped). Here the
   sheet is a flex column capped to the viewport; header + footer don't scroll,
   the body does.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-sheet.ma-lend-release {
  display: flex; flex-direction: column; padding: 0;
  max-height: calc(100vh - 24px);   /* old-browser fallback */
  /* min() of the dynamic viewport (correct on phones with a collapsing URL bar) and 100% of the
     inset:0 backdrop (a hard cap = the layout viewport) → footer stays on-screen everywhere. */
  max-height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(100% - env(safe-area-inset-top)));
}
body.macct-page .ma-lend-release .ma-sheet-grip { flex: 0 0 auto; margin: 8px auto 4px; }
body.macct-page .ma-lend-release .ma-lend-rhead { flex: 0 0 auto; margin: 0; padding: 0 16px 8px; gap: 8px; }
body.macct-page .ma-lend-release .ma-lend-rback { flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: rgba(122,138,165,.12); border-radius: 10px; font-size: 24px; line-height: 1; color: var(--ma-muted); cursor: pointer; }
body.macct-page .ma-lend-release .ma-sheet-title { flex: 1 1 auto; min-width: 0; font-size: 18px; }
body.macct-page .ma-lend-release .ma-sheet-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
body.macct-page .ma-lend-release .ma-lend-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 10px; }
body.macct-page .ma-lend-release .ma-lend-foot { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ma-line); background: var(--ma-card); }
body.macct-page .ma-lend-release .ma-lend-foot .ma-btn { flex: 1 1 0; width: auto; min-height: 48px; margin: 0; }
/* v283 — "Print agreement" secondary button, left of Release (outlined navy, same height). */
body.macct-page .ma-lend-release .ma-lend-printag { background: transparent; border: 1.5px solid var(--ma-navy); color: var(--ma-navy); font-weight: 700; }
body.macct-page .ma-lend-release .ma-lend-printag:hover { background: rgba(13,27,46,.06); }
/* compact fields (this sheet only): 12px labels, 40px inputs, 8px row gap */
body.macct-page .ma-lend-release .ma-sheet-lbl { font-size: 12px; margin: 0 0 2px; }
body.macct-page .ma-lend-release .ma-sheet-in { min-height: 40px; padding: 8px 12px; font-size: 15px; }
body.macct-page .ma-lend-release .ma-lend-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-lend-release .ma-lend-field { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-lend-release .ma-lend-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body.macct-page .ma-lend-release .ma-lend-inline > .ma-sheet-lbl { margin: 0; flex: 0 0 auto; }
body.macct-page .ma-lend-release .ma-lend-inline .ma-bili-ids { flex: 1 1 auto; }
body.macct-page .ma-lend-release .ma-bili-id { min-height: 32px; padding: 4px 12px; font-size: 13px; }
body.macct-page .ma-lend-release .ma-lend-idcopy-chip { min-height: 32px; margin: 0; padding: 0 4px; gap: 6px; align-items: center; font-size: 13px; }
body.macct-page .ma-lend-release .ma-lend-idcopy-chip input { width: 18px; height: 18px; margin: 0; }
body.macct-page .ma-lend-release .ma-lend-56 { min-height: 0; margin: 3px 0 0; padding: 0; background: none; border: 0; color: var(--ma-gold-ink); font-size: 12px; font-weight: 700; text-decoration: underline; align-self: flex-start; cursor: pointer; }
/* v286 — ID-shown fold row (label left, live summary + chevron right). */
body.macct-page .ma-lend-release .ma-lend-idfold { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 6px 0; background: none; border: 0; cursor: pointer; text-align: left; min-height: 40px; }
body.macct-page .ma-lend-release .ma-lend-idfoldlbl { margin: 0; }
body.macct-page .ma-lend-release .ma-lend-idsum { font-size: 13px; font-weight: 600; color: var(--ma-ink); white-space: nowrap; }
/* the chip block is display:flex (.ma-bili-ids), which overrides the UA [hidden] rule — restore it so the fold actually collapses. */
body.macct-page .ma-lend-release .ma-lend-ids[hidden] { display: none; }
/* v286 — read-only "Ends" field (Total-interest styling, but display-only). */
body.macct-page .ma-lend-release .ma-lend-ends-ro { background: var(--ma-bg); color: var(--ma-ink); cursor: default; }
/* v287 — installment preview caption under the Term | Installment row. */
body.macct-page .ma-lend-release .ma-lend-instcap { margin: 3px 0 0; font-size: 12px; color: var(--ma-muted); }
body.macct-page .ma-lend-release .ma-lend-instcap:empty { margin: 0; }
/* v286 — borrower address line under the loan-detail header. */
body.macct-page .ma-lend-daddr { display: block; font-size: 13px; color: var(--ma-muted); margin: 1px 0 3px; }

/* ── v288 — New-loan sheet & borrower detail reorganised (Borrower / Loan / Repayment).
   Section hairline label, read-only Repayment card, payment-schedule list with due dates +
   per-installment status, and the 2×2 KPI header on the borrower detail. Tokens (never hex)
   so the six themes stay correct. Used in BOTH the release sheet and the detail pane. ── */
body.macct-page .ma-lend-sec { margin: 4px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ma-gold-ink); }
/* Repayment card (release sheet) */
body.macct-page .ma-lend-repaycard { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--ma-bg); border: 1px solid var(--ma-line); border-radius: var(--ma-r-md); }
body.macct-page .ma-lend-repaycard:empty { display: none; }
body.macct-page .ma-lend-repayamt { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-lend-repaysub { font-size: 13px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-lend-repaymeta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--ma-muted); }
/* Payment-schedule list (rows: # · due date · amount · status) */
body.macct-page .ma-lend-schlist { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
body.macct-page .ma-lend-schmore { display: flex; flex-direction: column; gap: 3px; }
body.macct-page .ma-lend-schmore[hidden] { display: none; }
body.macct-page .ma-lend-schrow { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; font-size: 13px; background: var(--ma-card); border: 1px solid var(--ma-line); border-left: 3px solid var(--ma-line); }
body.macct-page .ma-lend-schk { color: var(--ma-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-lend-schd { min-width: 0; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-lend-scha { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-lend-schs { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ma-muted); }
body.macct-page .ma-lend-schrow--paid { border-left-color: var(--ma-green); }
body.macct-page .ma-lend-schrow--paid .ma-lend-schs { color: var(--ma-success-ink); }
body.macct-page .ma-lend-schrow--partial { border-left-color: var(--ma-gold-deep); }
body.macct-page .ma-lend-schrow--partial .ma-lend-schs { color: var(--ma-gold-ink); }
body.macct-page .ma-lend-schrow--due { border-left-color: var(--ma-gold-deep); }
body.macct-page .ma-lend-schrow--due .ma-lend-schs { color: var(--ma-gold-ink); }
body.macct-page .ma-lend-schrow--missed { border-left-color: var(--ma-danger); }
body.macct-page .ma-lend-schrow--missed .ma-lend-schs { color: var(--ma-danger); }
body.macct-page .ma-lend-schall { align-self: flex-start; margin: 2px 0 0; padding: 2px 0; background: none; border: 0; font-size: 12px; font-weight: 700; color: var(--ma-gold-ink); text-decoration: underline; cursor: pointer; }
/* Borrower detail — header + 2×2 KPI grid + grouped actions */
body.macct-page .ma-lend-dtop { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
body.macct-page .ma-lend-dsub { display: block; font-size: 13px; color: var(--ma-muted); margin: 2px 0; }
body.macct-page .ma-lend-dkpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-lend-dkpiu { font-size: 12px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ma-lend-dacts { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-lend-dbayad--full { width: 100%; }
body.macct-page .ma-lend-dactrow { display: flex; flex-wrap: wrap; gap: 8px; }
body.macct-page .ma-lend-dactrow .ma-btn { flex: 1 1 auto; }
body.macct-page .ma-lend-dcancel--muted { color: var(--ma-danger); border-color: var(--ma-danger-tint); background: transparent; }
@media (min-width: 768px) {
  body.macct-page .ma-lend-scrim { align-items: center; justify-content: center; }
  body.macct-page .ma-sheet.ma-lend-release { max-width: 460px; height: auto; border-radius: var(--ma-r-xl); transform: translateY(16px); max-height: min(calc(100dvh - 48px), calc(100% - 48px)); }
  body.macct-page .ma-lend-scrim.open .ma-sheet.ma-lend-release { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-sheet.ma-lend-release { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   R10d-1 — TUBIG (water refilling) skin. Hiram na Galon (fleet stats + suki cards),
   3-tap Delivery (steppers + quick chips + pay/rider chips), Deposito sheet, Suki
   split (list-left/detail-right ≥768), Home KPI line, Presyo read-back. Reuses
   ma-crew-*/ma-bili-ids/ma-jobs-split/ma-lend-prog/ma-bn-age. 44px targets; no
   horizontal scroll at 390; sheets right-panel ≥768 (ma-asset-*).
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-tbg-pane .ma-crew-stats { grid-template-columns: repeat(4, 1fr); }
body.macct-page .ma-tbg-depline, body.macct-page .ma-tbg-foot { color: var(--ma-muted); font-size: 12px; margin: 6px 0; }
body.macct-page .ma-tbg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
body.macct-page .ma-tbg-card .ma-lend-cardchips, body.macct-page .ma-tbg-sukicard .ma-lend-cardchips { display: flex; gap: 6px; }
body.macct-page .ma-tbg-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
body.macct-page .ma-tbg-minus, body.macct-page .ma-tbg-plus { width: 44px; height: 44px; min-width: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 10px; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--ma-ink); }
body.macct-page .ma-tbg-val { min-width: 40px; text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-tbg-quick { display: inline-flex; gap: 4px; flex-wrap: wrap; }
body.macct-page .ma-tbg-qc { min-height: 44px; min-width: 40px; padding: 0 10px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ma-ink); }
body.macct-page .ma-tbg-summary { font-weight: 700; color: var(--ma-navy); margin: 8px 0; }
body.macct-page .ma-tbg-note { color: var(--ma-muted); font-size: 12px; }
body.macct-page .ma-tbg-sukibtn .ma-oline, body.macct-page .ma-tbg-typebtn { font-weight: 700; }
body.macct-page .ma-tbg-kpi { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0 0 10px; padding: 6px 12px; background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 10px; }
body.macct-page .ma-tbg-kpiline { font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-tbg-kpipres { color: var(--ma-muted); font-size: 12px; }
body.macct-page .ma-tbg-presyo-sub { color: var(--ma-muted); font-size: 12px; }
body.macct-page .ma-tbg-form .ma-btn { min-height: 44px; }
body.macct-page .ma-tbg-pane .ma-crew-tabhead .ma-btn { min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════════
   R10d-2 — Rider Tally · Day tag · Kalinisan. Tally cards (figures + money line +
   non-accusatory status), week strip, day-tag chips, clock cards (law + filter)
   in a responsive grid (1 col <768, 2 col ≥768), warn line. Reuses ma-crew-card/
   ma-bili-ids/ma-bn-age/ma-tbg-stepper. 44px targets; no h-overflow at 390.
   ═══════════════════════════════════════════════════════════════════════════ */
body.macct-page .ma-tly-cards { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
body.macct-page .ma-tly-card { display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-tly-figs { display: flex; flex-wrap: wrap; gap: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-tly-money { color: var(--ma-muted); font-size: 13px; }
body.macct-page .ma-tly-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.macct-page .ma-tly-add, body.macct-page .ma-tly-crew { min-height: 44px; display: inline-flex; align-items: center; }
body.macct-page .ma-tly-week { margin: 10px 0; }
body.macct-page .ma-tly-weeklbl { color: var(--ma-muted); font-size: 12px; margin: 0 0 4px; }
body.macct-page .ma-tly-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
body.macct-page .ma-tly-cell { position: relative; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid var(--ma-line); border-radius: 8px; background: var(--ma-paper); cursor: pointer; }
body.macct-page .ma-tly-cellv { font-weight: 700; font-variant-numeric: tabular-nums; }
body.macct-page .ma-tly-celld { font-size: 10px; color: var(--ma-muted); }
body.macct-page .ma-tly-celltag { position: absolute; top: 2px; right: 3px; font-size: 11px; }
body.macct-page .ma-daytag-chips { gap: 8px; }
body.macct-page .ma-tly-sum { font-weight: 700; }
body.macct-page .ma-tbg-warn { margin: 0 0 10px; }
body.macct-page .ma-clk-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 14px; }
body.macct-page .ma-clk-card { display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-clk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.macct-page .ma-clk-name { font-weight: 700; }
body.macct-page .ma-clk-act { min-height: 44px; align-self: flex-start; padding: 0 16px; }
body.macct-page .ma-clk-intro, body.macct-page .ma-clk-foot { color: var(--ma-muted); font-size: 12px; }
@media (min-width: 768px) { body.macct-page .ma-clk-grid { grid-template-columns: 1fr 1fr; } }
/* R10d-2 fix — the Tally sheet stepper reuses the R10d-1 stepper look but with ma-tly-* ids */
body.macct-page .ma-tly-minus, body.macct-page .ma-tly-plus { width: 44px; height: 44px; min-width: 44px; border: 1.5px solid var(--ma-line); background: var(--ma-card); border-radius: 10px; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--ma-ink); }
body.macct-page .ma-tly-qc { min-height: 44px; min-width: 40px; padding: 0 10px; border: 1.5px solid var(--ma-line); background: var(--ma-paper); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ma-ink); }
/* ============================================================================
   "Download your Dashboard" install sheet (SW v255) — reuses .ma-sheet /
   .ma-sheet-back bottom-sheet chrome; these rules style only the sheet body.
   ========================================================================== */
body.macct-page .ma-dl-body { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 4px 2px 2px; }
body.macct-page .ma-dl-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--ma-shadow-card); }
body.macct-page .ma-dl-lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ma-ink-soft); }
body.macct-page .ma-dl-steps { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; counter-reset: dlstep; }
body.macct-page .ma-dl-steps li { position: relative; padding: 10px 12px 10px 44px; min-height: 44px; display: flex; align-items: center; font-size: 14px; line-height: 1.45; color: var(--ma-ink); background: var(--ma-paper); border: 1px solid var(--ma-line); border-radius: 11px; }
body.macct-page .ma-dl-steps li::before { counter-increment: dlstep; content: counter(dlstep); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--ma-gold-soft); color: var(--ma-gold-deep); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
body.macct-page .ma-dl-primary { width: 100%; min-height: 50px; font-size: 16px; }
body.macct-page .ma-dl-hint { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ma-muted); }
body.macct-page .ma-dl-addr { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 12px; background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: 11px; }
body.macct-page .ma-dl-addr-url { flex: 1; min-width: 0; font-family: var(--ma-mono, monospace); font-size: 13.5px; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
body.macct-page .ma-dl-copy { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ma-gold-deep); background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); border-radius: 9px; cursor: pointer; }
body.macct-page .ma-dl-openchrome { width: 100%; min-height: 50px; font-size: 16px; text-align: center; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body.macct-page .ma-dl-acts { margin-top: 14px; }
body.macct-page .ma-dl-later { width: 100%; min-height: 46px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ma-muted); background: transparent; border: 1px solid var(--ma-line); border-radius: 12px; cursor: pointer; }
/* Smaller install sheet (Angie, Oct 21) — blueprint buyers only (.ma-dl-sheet--bp, js/portal-pwa.js): on phones it no longer takes half the screen — compact icon, text and
   spacing; buttons keep ≥44px tap targets. */
@media (max-width: 640px) {
  body.macct-page .ma-dl-sheet--bp .ma-sheet-title { font-size: 18px; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-body { gap: 8px; padding: 0 2px; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-icon { width: 40px; height: 40px; border-radius: 10px; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-lead { font-size: 14px; line-height: 1.5; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-hint { font-size: 12.5px; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-primary, body.macct-page .ma-dl-sheet--bp .ma-dl-openchrome { min-height: 46px; font-size: 15px; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-acts { margin-top: 10px; }
  body.macct-page .ma-dl-sheet--bp .ma-dl-later { min-height: 44px; font-size: 14px; }
}
/* First-open welcome card on Home (js/my-account.js, Oct 21) */
body.macct-page .ma-welcome .ma-welcome-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.macct-page .ma-welcome .ma-welcome-acts .ma-btn { min-height: 44px; }
body.macct-page .ma-dl-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 4px; }
body.macct-page .ma-dl-done p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ma-ink); }
body.macct-page .ma-dl-check { width: 44px; height: 44px; border-radius: 50%; background: #EAF5EC; color: #26663A; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* "Download the app" row inside the Ask/Help (Tanong) sheet */
body.macct-page .ma-tanong-dlrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 6px; padding: 10px 12px; text-align: left; background: var(--ma-gold-soft); border: 1px solid var(--ma-gold); border-radius: 11px; color: var(--ma-gold-deep); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-tanong-dlrow .ma-dl-rowicon { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 5px; }
/* ============================================================================
   SW update banner (v256) — "May bagong update…". Full-width bar, bottom edge.
   Root cause of the v255 collapse: the old inline style used position:fixed +
   left:50% + translateX(-50%) with NO width; a fixed element with `left` set and
   width auto resolves its shrink-to-fit width against only the space from the 50%
   offset to the right edge (~half the viewport), so a long Tagalog message wrapped
   one word per line inside a ~50%-wide box that overlapped the header. The fix:
   drop the shrink-to-fit trap and give the bar a real box (left+right insets,
   max-width, margin:auto); the message (flex:1 1 auto; min-width:0) then fills the
   bar and wraps normally, buttons stay on the same row. Bottom edge is used so the
   bar can never overlap the header controls.
   ========================================================================== */
body.macct-page .ma-sw-update {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  margin: 0 auto; max-width: 560px; z-index: 1200;
  display: flex; align-items: center; gap: 10px;
  background: #12233F; color: #fff; border: 1px solid var(--ma-gold, #C8963E);
  border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.28);
  font-family: var(--ma-sans, 'DM Sans', Arial, sans-serif); font-size: 13.5px;
}
body.macct-page .ma-sw-update .ma-sw-msg { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.35; }
body.macct-page .ma-sw-update .ma-sw-refresh {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--ma-gold, #C8963E), var(--ma-gold-deep, #A87230));
  color: #fff; font: inherit; font-weight: 700; white-space: nowrap;
}
body.macct-page .ma-sw-update .ma-sw-x {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: transparent;
  color: rgba(255,255,255,.72); font-size: 18px; line-height: 1; cursor: pointer;
}
/* ============================================================================
   v257 Operations re-layout (Angie mock, Sep 23) — primary action row + the
   dashed "More kinds…" fold. Nodes are relocated from .ma-quickadd by
   renderOperationsPane; these rules lay them out. New order (.ma-qa-pos, gold)
   and −Expense (.ma-qa-gastos, red) keep their own colours; here they only go
   side-by-side, equal width, 56px tall.
   ========================================================================== */
body.macct-page .ma-ops-actions { display: flex; gap: 10px; margin-top: 12px; }
body.macct-page .ma-ops-actions > .ma-qa-btn,
body.macct-page .ma-ops-actions > .ma-qa-pos { flex: 1 1 0; width: auto; min-height: 56px; margin: 0; }
body.macct-page .ma-ops-morewrap { margin-top: 10px; }
body.macct-page .ma-ops-morekinds {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; padding: 11px; cursor: pointer;
  background: transparent; border: 1px dashed var(--ma-line); border-radius: 10px;
  color: var(--ma-ink-soft); font: inherit; font-weight: 700; font-size: 13px;
}
body.macct-page .ma-ops-morekinds:hover { background: var(--ma-bg); border-color: var(--ma-gold); color: var(--ma-gold-deep); }
body.macct-page .ma-ops-morekinds.is-open { border-style: solid; border-color: var(--ma-gold-soft); }
body.macct-page .ma-ops-moredots { letter-spacing: 1px; }
body.macct-page .ma-ops-morebody { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
body.macct-page .ma-ops-morebody > .ma-qa-btn { width: 100%; min-height: 52px; margin: 0; }
body.macct-page .ma-ops-morebody > .ma-qa-more { margin-top: 0; }
/* ============================================================================
   v261 (Angie, Sep 23) — the bell + account buttons sit in a flex SLOT inside the
   business header (.ma-biz-acts), placed by document flow (no absolute positioning,
   no positioning-context or reparent-host dependency — the v260 approach failed live).
   renderPreviewPane moves the SAME .ma-ovacts node into the slot on Preview; the pane
   switch empties the slot, so it is empty (display:none via :empty) on every other pane
   and the header there is unchanged. Right edge at the header content edge (margin-left:
   auto); top aligned to the store-name line (align-self:flex-start on the slot while the
   header stays align-items:center, so the emoji/text are untouched). Buttons 44×44; the
   two-button gap stays on .ma-ovacts.
   ========================================================================== */
body.macct-page .ma-biz-acts { display: flex; margin-left: auto; align-self: flex-start; flex: 0 0 auto; }
body.macct-page .ma-biz-acts:empty { display: none; }

/* ── Notification bell (Oct-3) — shell slots (phone top bar + desktop sidebar) + panel ── */
body.macct-page .ma-notif-slot { display: flex; align-items: center; }
body.macct-page .ma-topbar .ma-notif-slot { margin-left: auto; }   /* push the bell to the right of the phone top bar (menu button follows) */
body:not(.ma-biz-active) .ma-notif-slot { display: none !important; }   /* no business mounted → no bell */
/* Desktop (≥768): the bell sits top-right of the CONTENT area (the business-header actions slot), where a
   bell is expected. Hidden <768 so phones use the top-bar slot only (never both). */
body.macct-page .ma-biz-acts .ma-bell { display: none; }
@media (min-width: 768px){ body.macct-page .ma-biz-acts .ma-bell { display: inline-flex; margin-right: 2px; } }
body.macct-page .ma-bell { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.macct-page .ma-bell-svg { width: 26px; height: 26px; display: block; transform-origin: 50% 14%; }
body.macct-page .ma-bell-body { fill: url(#maBellGold); }
body.macct-page .ma-bell-clapper { fill: var(--ma-gold-deep); }
body.macct-page .ma-bell-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ma-danger); color: #fff; font: 800 11px/18px var(--ma-sans, inherit); text-align: center; border: 2px solid var(--ma-navy); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
body.macct-page .ma-notif-slot--desk .ma-bell-badge { border-color: var(--ma-navy-800, var(--ma-navy)); }
@keyframes maBellShake { 0%,100%{transform:rotate(0)} 10%{transform:rotate(12deg)} 22%{transform:rotate(-10deg)} 34%{transform:rotate(8deg)} 46%{transform:rotate(-6deg)} 58%{transform:rotate(3deg)} 70%{transform:rotate(0)} }
@keyframes maBellPop { 0%{transform:scale(0.2)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }
body.macct-page .ma-bell-svg.ma-bell-shake { animation: maBellShake 1.1s ease-in-out; }
body.macct-page .ma-bell-badge.ma-bell-pop { animation: maBellPop .9s cubic-bezier(.2,1.4,.4,1); }
@media (prefers-reduced-motion: reduce){ body.macct-page .ma-bell-svg.ma-bell-shake, body.macct-page .ma-bell-badge.ma-bell-pop { animation: none; } }
/* panel (reuses .ma-sheet-back backdrop) — bottom sheet */
body.macct-page .ma-notif-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 80vh; overflow-y: auto; background: var(--ma-card); border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(15,29,61,.28); transform: translateY(100%); transition: transform .2s ease; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
body.macct-page .ma-notif-back.open .ma-notif-panel { transform: translateY(0); }
@media (min-width: 768px){ body.macct-page .ma-notif-panel { left: auto; right: 20px; bottom: auto; top: 64px; width: 400px; max-width: calc(100vw - 40px); border-radius: 14px; transform: translateY(-8px); opacity: 0; transition: opacity .15s ease, transform .15s ease; } body.macct-page .ma-notif-back.open .ma-notif-panel { transform: translateY(0); opacity: 1; } }
body.macct-page .ma-notif-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-notif-h { margin: 0; font-size: 15px; font-weight: 700; flex: 1; }
body.macct-page .ma-notif-markall { font: inherit; font-size: 12px; font-weight: 600; color: var(--ma-gold-deep); background: none; border: 0; cursor: pointer; }
body.macct-page .ma-notif-x { width: 34px; height: 34px; border-radius: 9px; background: none; border: 0; cursor: pointer; color: var(--ma-muted); display: flex; align-items: center; justify-content: center; }
body.macct-page .ma-notif-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--ma-line); background: none; cursor: pointer; font: inherit; color: var(--ma-ink); }
body.macct-page .ma-notif-row:last-of-type { border-bottom: 0; }
body.macct-page .ma-notif-row.is-unread { background: var(--ma-bg); position: relative; }
body.macct-page .ma-notif-row.is-unread::before { content: ""; position: absolute; left: 6px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--ma-gold); }
body.macct-page .ma-notif-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--ma-gold-soft, rgba(217,169,60,.16)); }
body.macct-page .ma-notif-main { flex: 1; min-width: 0; }
body.macct-page .ma-notif-title { display: block; font-size: 13.5px; font-weight: 700; }
body.macct-page .ma-notif-body { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ma-ink-soft); }
body.macct-page .ma-notif-cta { align-self: center; flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ma-card); background: linear-gradient(135deg, var(--ma-gold), var(--ma-gold-deep)); border-radius: 8px; padding: 6px 11px; white-space: nowrap; }
body.macct-page .ma-notif-empty { padding: 28px 16px; text-align: center; color: var(--ma-muted); font-size: 13px; }
body.macct-page .ma-notif-sound { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ma-line); font-size: 13px; color: var(--ma-ink-soft); }
body.macct-page .ma-biz-acts .ma-oviconbtn { width: 44px; height: 44px; }
/* v262 (Angie, Sep 23) — the "HOME" caption (.ma-pane-head) lifted into the header
   actions slot on Home: a bare small-caps gold label (title style unchanged), no
   background, no padding/margin, ℹ️ inline (not the pane-top strip's absolute ℹ️). */
body.macct-page .ma-biz-acts .ma-pane-head { min-height: 0; margin: 0; padding: 0; gap: 6px; }
body.macct-page .ma-biz-acts .ma-pane-head .ma-help-i { position: static; transform: none; top: auto; right: auto; }
/* v264 (Angie, Sep 23) — Calculators moved to their own pane; Results shows one jump row
   where the section was (dashed outline, like the More-kinds row). */
body.macct-page .ma-calc-jump {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; margin: 14px 0 4px; padding: 11px 14px;
  background: transparent; border: 1px dashed var(--ma-line); border-radius: 12px;
  color: var(--ma-ink-soft); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
body.macct-page .ma-calc-jump:hover { background: var(--ma-bg); border-color: var(--ma-gold); color: var(--ma-gold-deep); }
/* ============================================================================
   v265 (Angie, Sep 23) — Inventory: 2-column tile grid → sub-panes. Reuses the
   .ma-tile look; ≥768 list-left / detail-right (mirrors .ma-jobs-split), Product
   catalog selected by default, selected tile navy; phone = grid → sub-pane + back row.
   ========================================================================== */
body.macct-page .ma-inv-split { display: block; }
body.macct-page .ma-inv-detailcol:empty { display: none; }
body.macct-page .ma-inv-split.has-detail .ma-inv-listcol { display: none; }   /* phone: sub-pane replaces the grid */
body.macct-page .ma-inv-grid { grid-template-columns: 1fr 1fr; }              /* 2 columns at every width */
body.macct-page .ma-inv-back {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 8px; padding: 0 4px 0 0;
  background: none; border: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--ma-gold-deep); cursor: pointer;
}
body.macct-page .ma-tile-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px;
  padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; vertical-align: 1px;
}
body.macct-page .ma-tile-badge--red { background: var(--ma-danger); }
body.macct-page .ma-tile-badge--amber { background: var(--ma-gold-deep); }
body.macct-page .ma-tile-badge--off { background: #EEE; color: var(--ma-ink-soft); font-weight: 700; }
/* Benefits & Insurance (People tile 5) — rows inside the standard .ma-mlog cards. */
body.macct-page .ma-bn-remrow, body.macct-page .ma-bn-covrow, body.macct-page .ma-bn-remindrow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ma-line); flex-wrap: wrap; }
body.macct-page .ma-bn-ag, body.macct-page .ma-bn-covname { font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-bn-amt, body.macct-page .ma-bn-covmeta { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-bn-remrow .ma-bn-age, body.macct-page .ma-bn-covrow .ma-bn-age { margin-left: 6px; }
body.macct-page .ma-bn-emprow { padding: 8px 0; border-bottom: 1px solid var(--ma-line); }
body.macct-page .ma-bn-emphdr { display: flex; align-items: center; gap: 8px; }
body.macct-page .ma-bn-empname { font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-bn-emphdr .ma-bn-age { margin-left: auto; }
body.macct-page .ma-bn-empcell { display: inline-block; margin: 4px 10px 0 0; font-size: 12px; color: var(--ma-ink-soft); font-variant-numeric: tabular-nums; }
body.macct-page .ma-bn-agsec { margin: 12px 0 2px; font-weight: 800; color: var(--ma-gold-deep); }
body.macct-page .ma-bn-remitpick { margin-top: 8px; }
body.macct-page .ma-bn-stafftabs, body.macct-page .ma-bn-ckinds, body.macct-page .ma-bn-modes { flex-wrap: wrap; }
body.macct-page .ma-benefits .ma-mlog { margin-bottom: 12px; }
/* Manpower + Scheduler (People Slice A) */
body.macct-page .ma-mp-row { cursor: pointer; }
body.macct-page .ma-mp-inactive { opacity: .55; }
body.macct-page .ma-mp-units, body.macct-page .ma-mp-pinrow, body.macct-page .ma-shift-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
body.macct-page .ma-sched-grid { overflow-x: auto; margin: 8px 0; }
body.macct-page .ma-sched-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
body.macct-page .ma-sched-wk { font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-sched-hrow, body.macct-page .ma-sched-srow { display: grid; grid-template-columns: 84px repeat(7, minmax(56px, 1fr)); gap: 4px; align-items: stretch; }
body.macct-page .ma-sched-hcell { font-size: 11px; font-weight: 700; color: var(--ma-muted); text-align: center; padding: 4px 0; }
body.macct-page .ma-sched-hcell.is-today { color: var(--ma-gold-deep); }
body.macct-page .ma-sched-sname { text-align: left; background: none; border: 0; font: inherit; font-weight: 700; color: var(--ma-ink); cursor: pointer; display: flex; flex-direction: column; }
body.macct-page .ma-sched-gracelbl { font-size: 10px; font-weight: 400; color: var(--ma-muted); }
body.macct-page .ma-sched-cell { min-height: 40px; font-size: 11px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 8px; cursor: pointer; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ma-sched-cell:hover { border-color: var(--ma-gold); }
body.macct-page .ma-sched-off { color: var(--ma-muted); background: var(--ma-bg); }
/* PIN pad */
body.macct-page .ma-pin-sheet { max-width: 360px; margin: auto; padding: 16px; text-align: center; }
body.macct-page .ma-pin-head { display: flex; justify-content: flex-end; }
body.macct-page .ma-pin-hand { font-weight: 700; font-size: 16px; color: var(--ma-ink); margin: 8px 0 2px; }
body.macct-page .ma-pin-prompt { color: var(--ma-muted); margin: 0 0 12px; }
body.macct-page .ma-pin-dots { display: flex; gap: 14px; justify-content: center; margin: 8px 0 18px; }
body.macct-page .ma-pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ma-line); }
body.macct-page .ma-pin-dot.is-on { background: var(--ma-gold); border-color: var(--ma-gold); }
body.macct-page .ma-pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 260px; margin: 0 auto; }
body.macct-page .ma-pin-key { min-height: 56px; font-size: 22px; font-weight: 600; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; cursor: pointer; color: var(--ma-ink); }
body.macct-page .ma-pin-key:hover { border-color: var(--ma-gold); }
body.macct-page .ma-pin-err { color: var(--ma-danger); min-height: 20px; margin: 12px 0 0; }
/* Attendance kiosk + owner view (Slice B) */
body.macct-page .ma-kiosk-biz { font-weight: 800; font-size: 18px; color: var(--ma-ink); margin: 4px 0 0; }
body.macct-page .ma-kiosk-clock { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ma-gold-deep); margin: 2px 0 8px; }
body.macct-page .ma-kiosk-banner { min-height: 22px; margin: 14px 0 0; font-weight: 700; }
body.macct-page .ma-kiosk-ontime { color: var(--ma-ok, #2e7d32); } body.macct-page .ma-kiosk-late, body.macct-page .ma-kiosk-unsched { color: var(--ma-gold-deep); }
body.macct-page .ma-kiosk-bad { color: var(--ma-danger); } body.macct-page .ma-kiosk-out { color: var(--ma-ink); }
body.macct-page .ma-att-kiosk, body.macct-page .ma-att .ma-mlog { margin-bottom: 12px; }
body.macct-page .ma-att-mrow, body.macct-page .ma-labor-attline { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ma-line); flex-wrap: wrap; }
body.macct-page .ma-att-mname, body.macct-page .ma-att-mstats { font-variant-numeric: tabular-nums; }
body.macct-page .ma-att-mname { font-weight: 700; color: var(--ma-ink); }
body.macct-page .ma-att-mstats { color: var(--ma-ink-soft); font-size: 12px; }
body.macct-page .ma-achip--ontime { background: rgba(46,125,50,.14); color: #2e7d32; }
body.macct-page .ma-achip--late, body.macct-page .ma-achip--unscheduled { background: var(--ma-gold-soft); color: var(--ma-gold-deep); }
body.macct-page .ma-achip--absent { background: rgba(181,72,58,.14); color: var(--ma-danger); }
body.macct-page .ma-achip--leave { background: rgba(88,101,242,.14); color: #4b53c9; }
body.macct-page .ma-achip--out, body.macct-page .ma-achip--due, body.macct-page .ma-achip--off { background: var(--ma-bg); color: var(--ma-muted); }
body.macct-page .ma-labor-attline { border-bottom: 0; padding: 2px 0; color: var(--ma-ink-soft); font-size: 12px; }
/* v266 — Inventory tiles: vertical layout (icon top-left → title → 2-line hint), taller, Off pill.
   Scoped to .ma-inv-tile so Home's Your-business grid (.ma-tile, no modifier) stays byte-identical. */
body.macct-page .ma-inv-grid { gap: 10px; }
body.macct-page .ma-inv-tile { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; min-height: 112px; }
body.macct-page .ma-inv-tile .ma-tile-ic { width: 38px; height: 38px; }
body.macct-page .ma-inv-tile .ma-tile-ic--emoji { font-size: 20px; line-height: 1; }
body.macct-page .ma-inv-tile .ma-tile-txt b { display: flex; align-items: center; font-size: 14.5px; font-weight: 700; }
body.macct-page .ma-inv-tile .ma-tile-txt b .ma-tile-badge { margin-left: auto; }
body.macct-page .ma-inv-tile .ma-tile-hint { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; font-size: 11.5px; line-height: 1.3; }
@media (min-width: 768px) { body.macct-page .ma-inv-tile { min-height: 120px; } }
body.macct-page .ma-tile.is-on { background: linear-gradient(160deg, var(--ma-navy-a), var(--ma-navy-b)); border-color: var(--ma-navy-b); }
body.macct-page .ma-tile.is-on .ma-tile-txt b, body.macct-page .ma-tile.is-on .ma-tile-hint { color: var(--ma-on-navy, #fff); }
@media (min-width: 768px) {
  body.macct-page .ma-inv-split { display: flex; gap: 16px; align-items: flex-start; }
  body.macct-page .ma-inv-listcol { flex: 0 0 360px; max-width: 360px; min-width: 0; }
  body.macct-page .ma-inv-detailcol { flex: 1 1 480px; min-width: 0; }
  body.macct-page .ma-inv-split.has-detail .ma-inv-listcol { display: block; }   /* laptop: both shown */
  body.macct-page .ma-inv-back { display: none; }                                 /* laptop: grid already visible */
}
/* Oct 10 (C5, tablet overflow) — 768–1023px only; phone and ≥1024 unchanged. The shell's `250px 1fr` track (above) could
   not shrink below its content (`1fr` = minmax(auto, 1fr)), and the list/detail split's fixed 360px tile column left the
   detail forms ~110px at 820 → the page grew to 837–970px. Track may shrink; the split stacks (tiles, then the detail —
   the same tablet pattern the Bookings split already uses). No font, padding or tile size change. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.macct-page .ma-shell { grid-template-columns: 250px minmax(0, 1fr); }
  body.macct-page .ma-inv-split:not(.ma-bk-split) { display: block; }
  body.macct-page .ma-inv-split:not(.ma-bk-split) .ma-inv-listcol { max-width: none; }
  body.macct-page .ma-inv-split:not(.ma-bk-split).has-detail .ma-inv-detailcol { margin-top: 16px; }
  /* Oct 10 r2 (C3) — Float + Tubig Customers: the jobs-split detail column's min-width:480px (~3800) pushed Float to
     983px at 820 and Customers to 786px at 768. On tablets these two splits stack (list, then detail) and the detail may
     shrink. Other jobs-split screens already fit and are untouched. */
  body.macct-page :is(.ma-flt-split, .ma-jobs-split:has(> .ma-tbg-sukidetail)) { display: block; }
  body.macct-page :is(.ma-flt-split, .ma-jobs-split:has(> .ma-tbg-sukidetail)) > .ma-jobs-listcol { max-width: none; }
  body.macct-page :is(.ma-flt-split, .ma-jobs-split:has(> .ma-tbg-sukidetail)) > .ma-jobs-detailcol { min-width: 0; margin-top: 16px; }
}

/* ============================================================================
   Matthew colour-coded navigation — SLICE 1: FEATURE TONES (Angie matte palette).
   Flat/matte (the only gradient is the agenda six-band stripe). --c = feature colour,
   --t = pale tint. Tokens set on ANY element with data-tone; CSS custom props inherit,
   so a toned .ma-pane passes --c/--t down to its sub-pane tiles. Colour is layered ON
   TOP: no box changes size (bars are inset box-shadow / ::before overlays), nothing
   moves, and NO alarm/state (red/orange) colour is touched — that is Slice 2.
   JS sets data-tone at: sidebar .ma-modlink · Home .ma-tile · pane .ma-pane · botnav
   .ma-bn-item · ℹ️ .ma-help-sheet. Untoned (data-tone="") matches no rule below.
   ============================================================================ */
body.macct-page [data-tone="journey"] { --c:#6FA36B; --t:#E3EDE0; }
body.macct-page [data-tone="bp"]      { --c:#0D1B2E; --t:#DDE2EA; }
body.macct-page [data-tone="money"]   { --c:#D9A93C; --t:#F3E6C6; }
body.macct-page [data-tone="loans"]   { --c:#A85C5C; --t:#EEDCDC; }
body.macct-page [data-tone="inv"]     { --c:#A6784E; --t:#EADFD1; }
body.macct-page [data-tone="people"]  { --c:#2F6DB5; --t:#DCE6F3; }
body.macct-page [data-tone="agenda"]  { --c:#D9822B; --t:#F1E7DC; --stripe:linear-gradient(90deg,#C9503E,#D9822B,#D9A93C,#6FA36B,#2F6DB5,#7A55C7); }
body.macct-page [data-tone="meth"]    { --c:#2E2E2E; --t:#E4E1DC; }
body.macct-page [data-tone="check"]   { --c:#5A5A5A; --t:#E6E4E0; }

/* ---- Home tiles (own data-tone) + sub-pane tiles (inherit --c/--t from the toned pane).
   journey (filled) + agenda (stripe) handled separately below, so exclude them here. ---- */
body.macct-page .ma-home-nav .ma-tile[data-tone]:not([data-tone=""]):not([data-tone="journey"]):not([data-tone="agenda"]),
body.macct-page .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) .ma-tilegrid .ma-tile {
  box-shadow: inset 0 3px 0 var(--c), var(--ma-shadow-card);   /* top bar — inset, size-safe */
}
@media (min-width: 768px) {
  body.macct-page .ma-home-nav .ma-tile[data-tone]:not([data-tone=""]):not([data-tone="journey"]):not([data-tone="agenda"]),
  body.macct-page .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) .ma-tilegrid .ma-tile {
    box-shadow: inset 0 4px 0 var(--c), var(--ma-shadow-card);
  }
}
body.macct-page .ma-home-nav .ma-tile[data-tone]:not([data-tone=""]):not([data-tone="journey"]):not([data-tone="agenda"]) .ma-tile-ic,
body.macct-page .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) .ma-tilegrid .ma-tile .ma-tile-ic {
  background: var(--t);
}
/* Journey Home tile: matte filled (was navy). #577F53 = nearest darker green that passes
   4.5:1 with white text (#6FA36B itself is 2.95:1). Token --c (#6FA36B) stays for thin bars. */
body.macct-page .ma-home-nav .ma-tile[data-tone="journey"] {
  background: #577F53; border-color: #577F53; box-shadow: var(--ma-shadow-card);
}
body.macct-page .ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-txt b,
body.macct-page .ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-hint { color: #fff; }
body.macct-page .ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-ic { background: rgba(255,255,255,.20); }

/* Agenda: six-band stripe instead of a solid bar; icon chip = the stripe. */
body.macct-page .ma-home-nav .ma-tile[data-tone="agenda"],
body.macct-page .ma-pane[data-tone="agenda"] .ma-tilegrid .ma-tile { box-shadow: var(--ma-shadow-card); }
body.macct-page .ma-home-nav .ma-tile[data-tone="agenda"]::before,
body.macct-page .ma-pane[data-tone="agenda"] .ma-tilegrid .ma-tile::before {
  content:''; position:absolute; left:0; right:0; top:0; height:3px; background: var(--stripe); border-radius: 12px 12px 0 0;
}
@media (min-width: 768px) {
  body.macct-page .ma-home-nav .ma-tile[data-tone="agenda"]::before,
  body.macct-page .ma-pane[data-tone="agenda"] .ma-tilegrid .ma-tile::before { height:4px; }
}
body.macct-page .ma-home-nav .ma-tile[data-tone="agenda"] .ma-tile-ic,
body.macct-page .ma-pane[data-tone="agenda"] .ma-tilegrid .ma-tile .ma-tile-ic { background: var(--stripe); }

/* ---- Sidebar (≥768): toned active item → 4px left bar in --c (replaces the group accent
   for toned items only); icon chip tint on every toned item. Untoned keep today's look. ---- */
@media (min-width: 768px) {
  body.macct-page #ma-nav-modules .ma-modlink[data-tone]:not([data-tone=""]).active { box-shadow: inset 4px 0 0 var(--c); }
  body.macct-page #ma-nav-modules .ma-modlink[data-tone]:not([data-tone=""]) .ma-modemoji { background: var(--t); border-radius: 5px; }
  body.macct-page #ma-nav-modules .ma-modlink[data-tone="agenda"].active { box-shadow: none; }
  body.macct-page #ma-nav-modules .ma-modlink[data-tone="agenda"].active::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--stripe);
  }
  body.macct-page #ma-nav-modules .ma-modlink[data-tone="agenda"] .ma-modemoji { background: var(--stripe); }
}

/* ---- Pane header: left bar in --c (inset — does not move the title). ---- */
body.macct-page .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) .ma-pane-head { box-shadow: inset 5px 0 0 var(--c); }
body.macct-page .ma-pane[data-tone="agenda"] .ma-pane-head::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--stripe);
}

/* ---- Bottom nav: toned active tab keeps today's fill + a 3px top bar in --c. ---- */
body.macct-page .ma-bn-item.active[data-tone]:not([data-tone=""]) { box-shadow: inset 0 3px 0 var(--c); }

/* ---- ℹ️ help sheet: left edge in --c (sits in the sheet's 20px left padding — nothing
   moves) + a small dot before the title. ---- */
body.macct-page .ma-help-sheet[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) { box-shadow: inset 5px 0 0 var(--c), var(--ma-shadow-float); }
body.macct-page .ma-help-sheet[data-tone]:not([data-tone=""]) .ma-sheet-title::before {
  content:''; display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--c); margin-right:8px; vertical-align:middle;
}
body.macct-page .ma-help-sheet[data-tone="agenda"] { position: relative; }
body.macct-page .ma-help-sheet[data-tone="agenda"]::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--stripe); border-radius: var(--ma-r-xl) 0 0 0;
}
body.macct-page .ma-help-sheet[data-tone="agenda"] .ma-sheet-title::before { background: #D9822B; }

/* ============================================================================
   HOME "A · Ledger" — TABLET/DESKTOP ONLY (≥768). Phone (<768) reverts to the
   pre-Ledger Home (1e92f959): base + Slice-1 rules govern, and the Ledger-only
   decorations (stat line + alert context) are hidden so the old tiles keep their
   old height. All rules scoped under body.ma-home-pane (Home only) — Preview and
   every other pane stay byte-identical. Editorial header · spaced alert cells ·
   row tiles with a LEFT colour spine + live stat lines (2 col tablet · 3 desktop).
   ============================================================================ */
/* Phone (<768): pre-Ledger layout returns from base/Slice-1; hide Ledger-only bits. */
@media (max-width: 767px) {
  body.ma-home-pane .ma-tile-stat { display: none; }
  body.ma-home-pane .ma-ovalert-ctx { display: none; }
  /* Oct 8 (Angie, HomeTight): the HOME label rides on the STOCK ALERTS row (same baseline) instead of its own
     band under the top bar — top bar → row 14px, row → alert cards 10px. Only while Stock alerts is the pane's
     first row (a trial nudge above it keeps today's layout) and not in Bantay (its 44px "Switch to owner" key
     shares the label slot and cannot fit a 17px row). Positioning only; no DOM move. */
  body.ma-home-pane:has(.ma-pane[data-pane="home"] > .ma-ov-alerts:first-child):not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) #ma-biz-content .ma-biz-head { position: relative; height: 0; min-height: 0; margin: 0; }
  body.ma-home-pane:has(.ma-pane[data-pane="home"] > .ma-ov-alerts:first-child):not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) #ma-biz-content .ma-biz-acts { position: absolute; right: 0; top: -2.8px; }   /* HOME text box = STOCK ALERTS text box */
  body.ma-home-pane:has(.ma-pane[data-pane="home"] > .ma-ov-alerts:first-child):not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) #ma-biz-content .ma-biz-top { margin-bottom: 0; }
  body.ma-home-pane:not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) .ma-pane[data-pane="home"] > .ma-ov-alerts:first-child { margin-top: 2px; }   /* main padding 12 + 2 = 14px under the top bar */
  body.ma-home-pane:not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) .ma-pane[data-pane="home"] > .ma-ov-alerts:first-child .ma-ovalerts { margin-top: 10px; }
  /* Oct 13 (Angie, 4c fix): same HomeTight when YOUR BUSINESS is the first row (no stock alerts, no trial nudge — e.g.
     a new custom business): HOME rides on the YOUR BUSINESS row instead of its own empty band. Positioning only. */
  body.ma-home-pane:has(.ma-pane[data-pane="home"] > .ma-home-gridlabel:first-child):not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) #ma-biz-content .ma-biz-head { position: relative; height: 0; min-height: 0; margin: 0; }
  body.ma-home-pane:has(.ma-pane[data-pane="home"] > .ma-home-gridlabel:first-child):not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) #ma-biz-content .ma-biz-acts { position: absolute; right: 0; top: -1px; }   /* HOME text box = YOUR BUSINESS text box */
  body.ma-home-pane:has(.ma-pane[data-pane="home"] > .ma-home-gridlabel:first-child):not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) #ma-biz-content .ma-biz-top { margin-bottom: 0; }
  body.ma-home-pane:not(:has(#ma-biz-content .ma-biz-acts .ma-ownerbtn)) .ma-pane[data-pane="home"] > .ma-home-gridlabel:first-child { margin-top: 2px; }   /* main padding 12 + 2 = 14px under the top bar */
}
@media (min-width: 768px) {
  /* ---- Header ---- */
  body.ma-home-pane .ma-biz-head { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 16px; row-gap: 3px; border-bottom: 2px solid var(--ma-navy-a); padding-bottom: 14px; margin-bottom: 14px; }
  body.ma-home-pane .ma-biz-head > div:first-child:not(.ma-biz-acts) { display: contents; }   /* flatten so date can sit in col 2 — no DOM move. Oct 8: identity block not rendered off Preview → never flatten the label slot */
  body.ma-home-pane .ma-biz-name { grid-column: 1; grid-row: 1; font-family: var(--ma-serif); font-size: 30px; font-weight: 600; line-height: 1.15; margin: 0; }
  body.ma-home-pane .ma-biz-sub  { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--ma-muted); margin-top: 3px; }
  body.ma-home-pane .ma-biz-lic  { grid-column: 1; grid-row: 3; font-size: 11px; font-family: var(--ma-mono); letter-spacing: .04em; color: var(--ma-muted); margin-top: 3px; }
  body.ma-home-pane .ma-id-day   { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: end; text-align: right; font-family: var(--ma-mono); font-size: 13px; color: var(--ma-ink-soft); margin: 0; }
  body.ma-home-pane .ma-biz-acts { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: 0; }
  /* ---- Stock-alerts strip — three cells as separate rounded cards, real gaps ---- */
  body.ma-home-pane .ma-ov-alerts { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(13,27,46,.04), 0 6px 18px rgba(13,27,46,.05); padding: 16px 18px; margin-bottom: 14px; }
  body.ma-home-pane .ma-ov-alerts .ma-ovlabel { padding: 0 0 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ma-muted); }
  body.ma-home-pane .ma-ovalerts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0; }
  body.ma-home-pane .ma-ovalert { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; text-align: left; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; }
  body.ma-home-pane .ma-ovalert-n { order: -1; font-family: var(--ma-mono); font-size: 28px; font-weight: 700; line-height: 1; }
  body.ma-home-pane .ma-ovalert-l { font-size: 12.5px; font-weight: 700; color: var(--ma-ink); }
  body.ma-home-pane .ma-ovalert-ctx { font-size: 12px; color: var(--ma-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* ---- Tiles: row layout + LEFT colour spine ---- */
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile { flex-direction: row; align-items: center; gap: 12px; position: relative; border-radius: 14px; background: var(--ma-card); border: 1px solid var(--ma-line); box-shadow: 0 1px 2px rgba(13,27,46,.04), 0 6px 18px rgba(13,27,46,.05); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-txt { width: auto; flex: 1; min-width: 0; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone]:not([data-tone=""]):not([data-tone="journey"]):not([data-tone="agenda"]) { box-shadow: inset 4px 0 0 var(--c), 0 1px 2px rgba(13,27,46,.04), 0 6px 18px rgba(13,27,46,.05); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="agenda"] { box-shadow: 0 1px 2px rgba(13,27,46,.04), 0 6px 18px rgba(13,27,46,.05); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="agenda"]::before { content: ''; position: absolute; left: 0; top: 0; right: auto; bottom: 0; width: 4px; height: auto; background: var(--stripe); border-radius: 14px 0 0 14px; }
  /* ---- stat line + pills ---- */
  body.ma-home-pane .ma-tile-stat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--ma-ink-soft); }
  body.ma-home-pane .ma-tile-statv { font-family: var(--ma-mono); font-size: 15px; font-weight: 600; color: var(--ma-ink); }
  body.ma-home-pane .ma-tile-pill { font-size: 11px; line-height: 1.5; border-radius: 999px; padding: 1px 8px; font-weight: 700; white-space: nowrap; }
  body.ma-home-pane .ma-tile-pill--up { background: rgba(46,125,84,.18); color: #1F5E3A; }   /* 5.77:1 */
  body.ma-home-pane .ma-tile-pill--dn { background: rgba(181,72,58,.16); color: #8E2E22; }   /* 6.20:1 */
  body.ma-home-pane .ma-tile-pill--wn { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
  /* Journey keeps its green fill (re-assert — the generic card bg above would otherwise win). */
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="journey"] { background: #577F53; border-color: #577F53; box-shadow: 0 1px 2px rgba(13,27,46,.04), 0 6px 18px rgba(13,27,46,.05); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-txt b,
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-hint,
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-stat,
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-statv { color: #fff; }
}
/* ---- per-width columns + sizing (≥768) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  body.ma-home-pane .ma-tilegrid.ma-home-nav { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  body.ma-home-pane .ma-ovalerts { gap: 12px; }
  body.ma-home-pane .ma-home-nav .ma-tile { min-height: 120px; padding: 14px 16px; }
  body.ma-home-pane .ma-home-nav .ma-tile-ic { width: 48px; height: 48px; }
  body.ma-home-pane .ma-home-nav .ma-tile-txt b { font-size: 16px; }
  body.ma-home-pane .ma-home-nav .ma-tile-hint { font-size: 12.5px; -webkit-line-clamp: 2; }
}
@media (min-width: 1024px) {
  body.ma-home-pane .ma-tilegrid.ma-home-nav { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  body.ma-home-pane .ma-home-nav .ma-tile { min-height: 128px; padding: 16px 18px; }
  body.ma-home-pane .ma-home-nav .ma-tile-ic { width: 52px; height: 52px; }
  body.ma-home-pane .ma-home-nav .ma-tile-txt b { font-size: 17px; }
  body.ma-home-pane .ma-home-nav .ma-tile-hint { font-size: 12.5px; -webkit-line-clamp: 2; }
}
/* ============================================================================
   HOME — ONE-SCREEN LAYOUT (≥1280px AND viewport height ≥640px). Angie ruling:
   the whole Home fits the viewport, no page scroll, footer in view. .ma-main is
   already display:flex/column — here it is pinned to the viewport height and its
   inner chain (view → biz-content → journey-mount → journey → pane) all become
   growing flex columns so the tile grid (flex:1) fills the slack while banner ·
   header · alerts · section label · footer stay flex:none. Grid = 5 columns ×
   equal-height rows (10 tiles → 2 rows). Scoped to body.ma-home-pane so Preview
   and every other pane are untouched; scoped to ≥1280 so phone/tablet Home is
   byte-identical; gated at min-height ≥640 so shorter viewports keep today's
   scrolling layout (item E). Layout only — nothing removed, no DOM change.
   ============================================================================ */
@media (min-width: 1280px) and (min-height: 640px) {
  /* Viewport column. The wrappers (view → biz-content → journey-mount → pane) collapse to
     display:contents so banner · header · alerts · section-label · grid · footer become ONE
     flex column on .ma-main; justify-content:space-between turns leftover height into even
     spacing BETWEEN them (never inside a card), with a gap floor for the tight cases. Sizes
     are fluid (clamp on vh/vw) instead of the old 720/≥900/≥1440 fixed steps. */
  body.ma-home-pane .ma-main { height: 100dvh; max-height: 100dvh; overflow: hidden; justify-content: space-between; gap: clamp(6px, 1.3vh, 22px); padding: clamp(10px,1.5vh,20px) clamp(20px,2vw,44px); }
  body.ma-home-pane #view-business.ma-view.active,
  body.ma-home-pane #ma-biz-content,
  body.ma-home-pane #ma-biz-content > .ma-journey-mount,
  body.ma-home-pane .ma-journey-mount > .ma-pane { display: contents; }
  body.ma-home-pane .ma-biz-top,
  body.ma-home-pane .ma-journey-mount > .ma-tabs,
  body.ma-home-pane .ma-journey-mount > .ma-botnav { display: none; }
  /* fixed-height sections keep their natural (fluid) size; the grid is CAPPED, not filling */
  body.ma-home-pane .mt-mount { flex: 0 0 auto; margin: 0; gap: 6px; }
  body.ma-home-pane .ma-biz-head { flex: 0 0 auto; margin: 0; padding-bottom: clamp(4px,.8vh,10px); }
  body.ma-home-pane .ma-ov-alerts { flex: 0 0 auto; margin: 0; }
  body.ma-home-pane .ma-home-gridlabel { flex: 0 0 auto; margin: 0; }
  body.ma-home-pane .ma-foot { flex: 0 0 auto; margin: 0; padding: clamp(6px,1vh,16px) 20px; }
  /* tile rows capped at min(23vh,236px) so leftover becomes spacing, never a huge card */
  body.ma-home-pane .ma-tilegrid.ma-home-nav { flex: 0 1 auto; min-height: 0; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(96px, min(23vh, 236px)); gap: clamp(8px,1vw,16px); }
  /* Oct 8: the business identity block (~48px) no longer renders on Home → give that height to the tiles, not the
     section gaps: each row's cap grows by 48px ÷ rows (rows = ceil(tiles ÷ 5)), so the gaps stay as they were. */
  body.ma-home-pane .ma-tilegrid.ma-home-nav { --ma-home-rows: 1; grid-auto-rows: minmax(96px, calc(min(23vh, 236px) + 48px / var(--ma-home-rows))); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav:has(> :nth-child(6))  { --ma-home-rows: 2; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav:has(> :nth-child(11)) { --ma-home-rows: 3; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav:has(> :nth-child(16)) { --ma-home-rows: 4; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav:has(> :nth-child(21)) { --ma-home-rows: 5; }

  /* ---- trial-banner block: one line + slim clarity (behavior unchanged; fluid type) ---- */
  body.ma-home-pane .mt-goldline { padding: 7px 14px; }
  body.ma-home-pane .mt-banner { padding: clamp(6px,1vh,12px) 14px; }
  body.ma-home-pane .mt-banner-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  body.ma-home-pane .mt-banner-title { font-size: clamp(13px,1.6vh,15px); margin: 0; white-space: nowrap; flex: 0 0 auto; }
  body.ma-home-pane .mt-banner-body { font-size: clamp(12px,1.4vh,14px); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  body.ma-home-pane .mt-banner-note { display: none; }
  body.ma-home-pane .mt-clarity { padding: 6px 40px 6px 10px; font-size: clamp(10.5px,1.3vh,12px); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ---- header: fluid serif title ---- */
  body.ma-home-pane .ma-biz-name { font-size: clamp(22px,3vh,30px); }

  /* ---- section labels (YOUR BUSINESS + STOCK ALERTS): fluid caps ---- */
  body.ma-home-pane .ma-home-gridlabel,
  body.ma-home-pane .ma-ov-alerts .ma-ovlabel { font-size: clamp(9.5px,1.2vh,11px); }

  /* ---- STOCK ALERTS: fluid KPI cards + › affordance ---- */
  body.ma-home-pane .ma-ov-alerts { padding: clamp(8px,1.2vh,16px) 16px; }
  body.ma-home-pane .ma-ov-alerts .ma-ovlabel { padding-bottom: clamp(4px,.8vh,10px); }
  body.ma-home-pane .ma-ovalerts { gap: clamp(10px,1vw,16px); }
  body.ma-home-pane .ma-ovalert { position: relative; min-height: clamp(117px,16vh,165px); justify-content: center; padding: 12px 30px 12px 16px; }
  body.ma-home-pane .ma-ovalert-n { font-size: clamp(38px,4.8vh,50px); }
  body.ma-home-pane .ma-ovalert-l { font-size: clamp(14px,1.55vh,16px); }
  body.ma-home-pane .ma-ovalert-ctx { font-size: clamp(12px,1.3vh,13.5px); }
  body.ma-home-pane .ma-ovalert:not(.ma-ovalert--locked)::after { content: '\203A'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: clamp(20px,2.2vh,26px); line-height: 1; color: var(--ma-muted); }

  /* ---- YOUR BUSINESS tiles: fluid; stat = small caption over a big mono value ---- */
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile { min-height: 0; padding: clamp(8px,1.5vh,18px) clamp(10px,1.1vw,18px); align-items: stretch; gap: clamp(6px,1.2vh,12px); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-ic { width: clamp(26px,4.4vh,46px); height: clamp(26px,4.4vh,46px); border-radius: 10px; align-self: flex-start; flex: 0 0 auto; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-ic .ma-ic { width: 56%; height: 56%; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-emoji { width: 56%; height: 56%; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-ic--emoji { font-size: clamp(18px,3vh,30px); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-txt { flex: 1 1 auto; min-height: 0; width: auto; gap: clamp(2px,.6vh,6px); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-txt b { font-size: clamp(12.5px,1.7vh,17px); line-height: 1.2; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-hint { font-size: clamp(10.5px,1.3vh,13.5px); line-height: 1.3; -webkit-line-clamp: 1; }
  /* stat: CAPTION (caps) stacked above a big mono VALUE; value never wraps */
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-stat { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: clamp(1px,.3vh,3px); margin-top: auto; padding-top: clamp(2px,.6vh,6px); max-width: 100%; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-statcap { font-size: clamp(10px,1.15vh,11px); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ma-muted); line-height: 1.15; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-statv { font-family: var(--ma-mono); font-size: clamp(13px,2.1vh,22px); font-weight: 700; color: var(--ma-ink); line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile[data-tone="journey"] .ma-tile-statv { font-size: clamp(13px,2.3vh,24px); }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-statv--text { font-family: var(--ma-sans); font-size: clamp(11.5px,1.7vh,17px); font-weight: 600; white-space: normal; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-pill { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(9.5px,1.15vh,12px); }
}
/* Hint gets its 2nd line only when the viewport is tall enough (≥800px) to afford it;
   shorter heights keep the 1-line + ellipsis hint from the base block above. */
@media (min-width: 1280px) and (min-height: 800px) {
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile-hint { -webkit-line-clamp: 2; }
}

/* ==========================================================================
   Home "YOUR BUSINESS" launcher — <1280 HEIGHT-FILL (EN/TL parity).
   Below the ≥1280 one-screen block (29083ab7), the phone/tablet Home had no
   height management: the tile grid was content-height and `.ma-foot { margin-top:
   auto }` pinned the footer to the bottom, so the slack became a dead band above
   it — and because EN labels wrap more than TL, EN filled by accident while TL
   left an empty band. Fix: make the wrapper chain a growing flex column so the
   tile grid GROWS to fill the leftover height, its rows sharing it evenly with a
   MIN so nothing clips. Scoped to body.ma-home-pane + <1280 so the ≥1280 block
   and every other pane stay byte-identical. Fallback: .ma-main keeps min-height
   (not height), so when tiles×min exceed the viewport (small/landscape/many
   tiles) the document simply scrolls — never squashed.
   ========================================================================== */
@media (max-width: 1279px) {
  /* flatten the wrapper chain (the SAME selectors the ≥1280 block collapses) so
     header · alerts · label · grid · footer become ONE flex column on .ma-main —
     the grid is then a direct flex child and grows reliably. */
  body.ma-home-pane #view-business.ma-view.active,
  body.ma-home-pane #ma-biz-content,
  body.ma-home-pane #ma-biz-content > .ma-journey-mount,
  body.ma-home-pane .ma-journey-mount > .ma-pane { display: contents; }
  /* fixed-size siblings keep natural height; only the grid grows */
  body.ma-home-pane .ma-biz-head,
  body.ma-home-pane .ma-ov-alerts,
  body.ma-home-pane .ma-home-gridlabel.ma-home-nav { flex: 0 0 auto; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav {
    flex: 1 1 auto; min-height: 0;
    grid-auto-rows: minmax(var(--ma-home-tile-min, 64px), 1fr);
  }
  /* footer no longer swallows the slack (the grid does); keep its botnav clearance */
  body.ma-home-pane .ma-foot { margin-top: 0; }
}
/* Phone (<768): row-layout tiles reserve space for the top-right ℹ️ so a long
   title (e.g. TL "Paraan at Diskarte") wraps instead of running under it. */
@media (max-width: 767px) {
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile { --ma-home-tile-min: 60px; padding-right: 34px; }
}
/* Tablet (768–1279): stacked tiles already clear the ℹ️ (title below the icon);
   match the existing stacked min-heights so rows grow from a sensible floor. */
@media (min-width: 768px) and (max-width: 1279px) {
  body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile { --ma-home-tile-min: 132px; }
}

/* ═══════════ POS "Custom amount" (Ibang halaga) — tile + sheet + gold cart line ═══════════ */
/* Owner POS (scoped body.macct-page). Tile is pinned first in the grid: 2px gold outline, ₱ in Fraunces gold. */
body.macct-page .ma-pos-ctile { border: 2px solid var(--ma-gold); background: var(--ma-card); align-items: flex-start; justify-content: center; gap: 2px; }
body.macct-page .ma-pos-ctile-sym { font-family: var(--ma-serif); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ma-gold-deep); }
body.macct-page .ma-pos-ctile .ma-pos-tname { font-weight: 700; }
body.macct-page .ma-pos-ctile-sub { font-size: 11px; color: var(--ma-muted); line-height: 1.3; }
/* Owner custom cart lines — gold name + "no stock" pill (rides the .ma-pos-worder row layout). */
body.macct-page .ma-pos-crow .ma-pos-cname { color: var(--ma-gold-deep); font-weight: 700; }
body.macct-page .ma-pos-cnostock { font-size: 11px; color: var(--ma-muted); border: 1px solid var(--ma-line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
/* Custom-amount sheet (owner + counter share the same .ma-posc markup). */
body.macct-page .ma-posc-sub { font-size: 13px; color: var(--ma-muted); margin: 0 0 12px; }
body.macct-page .ma-posc-amt { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; font-family: var(--ma-mono); font-size: 40px; font-weight: 700; color: var(--ma-ink); padding: 4px 2px 10px; border-bottom: 1px solid var(--ma-line); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-posc-amt-sym { font-size: 26px; color: var(--ma-muted); }
body.macct-page .ma-posc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
body.macct-page .ma-posc-chip { font-size: 12.5px; border: 1px solid var(--ma-line); border-radius: 999px; padding: 5px 12px; background: var(--ma-card); color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-posc-chip.is-on { border-color: var(--ma-gold); background: var(--ma-gold-soft); color: var(--ma-gold-ink); font-weight: 700; }
body.macct-page .ma-posc-hint { font-size: 12px; color: var(--ma-muted); text-align: center; margin: 10px 0 0; }
/* Counter light POS (unscoped .ma-ctr-*, like the rest of the counter shell). */
.ma-ctr-ctile { border: 2px solid var(--ma-gold); }
.ma-ctr-ctile-sym { font-family: var(--ma-serif); font-size: 22px; font-weight: 600; color: var(--ma-gold-deep); }
.ma-ctr-ccart .ma-ctr-cname { color: var(--ma-gold-deep); font-weight: 700; }
.ma-ctr-cnostock { font-size: 10.5px; color: var(--ma-muted); border: 1px solid var(--ma-line); border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.ma-ctr-cdel { border: 0; background: transparent; color: var(--ma-muted); cursor: pointer; padding: 0 4px; }

/* ── Business Automation S1 (by Lintejas) — owner-only pane (dark behind NP_AUTOMATION_ENABLED).
   Matthew theme tokens everywhere; BA violet ONLY on the gear-and-bolt mark (inline SVG fill) and the
   primary send action (.ba-primary). 44px tap targets. ── */
body.macct-page { --ba-violet: #7A5CF5; --ba-violet-deep: #6243E6; }
body.macct-page .ba { max-width: 760px; }
body.macct-page .ba-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; }
body.macct-page .ba-head .ba-mark { width: 44px; height: 44px; flex: 0 0 auto; }
body.macct-page .ba-head-txt { min-width: 0; }
body.macct-page .ba-title { margin: 0; font-family: var(--ma-serif); font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: var(--ma-ink); }
body.macct-page .ba-by { margin: 2px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ma-muted); }
body.macct-page .ba-count { margin: 12px 0 0; font-size: 15px; font-weight: 800; color: var(--ma-ink); }
body.macct-page .ba-list { display: grid; grid-template-columns: 1fr; gap: 0; }
body.macct-page .ba-card { margin-top: 12px; }
body.macct-page .ba-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
body.macct-page .ba-name { font-size: 1.05rem; font-weight: 800; color: var(--ma-ink); overflow-wrap: anywhere; }
body.macct-page .ba-tag { font-size: 11px; font-weight: 800; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); white-space: nowrap; }
body.macct-page .ba-tag--winback { background: var(--ma-cat-blue-tint); color: var(--ma-cat-blue-ink); }
body.macct-page .ba-reason { margin: 4px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ba-msg-lbl { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--ma-muted); }
body.macct-page .ba-msg { width: 100%; min-height: 104px; resize: vertical; font-family: var(--ma-sans); font-size: 14px; line-height: 1.45; }
body.macct-page .ba-acts, body.macct-page .ba-acts2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.macct-page .ba-acts .ma-btn, body.macct-page .ba-acts2 .ma-btn, body.macct-page .ba-confirm .ma-btn { min-height: 44px; flex: 1 1 120px; }
body.macct-page .ba-acts2 .ma-btn { min-height: 44px; font-size: 13px; }
body.macct-page .ba-primary { color: #fff; background: var(--ba-violet); box-shadow: 0 4px 14px rgba(122,92,245,.28); }
body.macct-page a.ba-primary, body.macct-page a.ba-primary:hover { color: #fff; text-decoration: none; }
body.macct-page .ba-primary:hover { background: var(--ba-violet-deep); }
body.macct-page .ba-primary:disabled, body.macct-page .ba-primary.ma-locked-ctl { opacity: .5; cursor: not-allowed; box-shadow: none; }
body.macct-page .ba-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px; border-radius: var(--ma-r-sm); background: var(--ma-paper); border: 1px dashed var(--ma-line); }
body.macct-page .ba-confirm[hidden] { display: none; }
body.macct-page .ba-confirm-q { flex: 1 1 100%; font-weight: 800; color: var(--ma-ink); }
body.macct-page .ba-empty { display: flex; align-items: center; gap: 12px; }
body.macct-page .ba-empty .ba-mark { width: 32px; height: 32px; flex: 0 0 auto; opacity: .85; }
body.macct-page .ba-empty-txt { margin: 0; font-size: 14px; font-weight: 600; color: var(--ma-muted); }
body.macct-page .ba-done-n { display: inline-block; min-width: 22px; padding: 2px 7px; margin-left: 4px; border-radius: 999px; font-family: var(--ma-sans); font-size: 12px; font-weight: 800; text-align: center; background: var(--ma-line-soft); color: var(--ma-ink); }
body.macct-page .ba-done-list { list-style: none; margin: 0; padding: 0; }
body.macct-page .ba-done-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; border-top: 1px solid var(--ma-line-soft); }
body.macct-page .ba-done-name { font-weight: 700; color: var(--ma-ink); overflow-wrap: anywhere; }
body.macct-page .ba-done-st { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--ma-muted); }
body.macct-page .ba-done-st--sent { color: var(--ma-success-ink); }
body.macct-page .ba-set-row { margin: 4px 0 12px; }
body.macct-page .ba-set-lbl { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ba-seg .ma-seg-btn { min-height: 44px; }
body.macct-page .ba-set-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ma-muted); }
body.macct-page .ma-tile--ba .ma-tile-ic svg, body.macct-page .ma-modlink .ba-mark { width: 20px; height: 20px; flex: 0 0 auto; }
body.macct-page .ma-modlink .ba-mark { width: 18px; height: 18px; }
@media (min-width: 820px) {
  body.macct-page .ba-list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

/* Oct-3 — Upcoming bookings card (top of the Bookings tab) + new-booking count on the Home tile */
body.macct-page .ma-bk-upwrap { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-bk-upday { margin: 6px 0 0; font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-gold-deep); }
body.macct-page .ma-bk-upday:first-child { margin-top: 0; }
body.macct-page .ma-bk-uptime { font-weight: 800; font-size: 0.95rem; color: var(--ma-ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-bk-up .ma-bk-tel { color: var(--ma-gold-deep); font-weight: 700; text-decoration: none; display: inline-block; padding: 6px 0; }
body.macct-page .ma-bk-upcopy { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start; }
body.macct-page .ma-bk-upcopy svg { width: 16px; height: 16px; }
body.macct-page .ma-tile[data-tile="bookings"] { position: relative; }
body.macct-page .ma-tile-new { position: absolute; top: 8px; left: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ma-danger); color: #fff; font: 800 11px/20px var(--ma-sans, inherit); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); pointer-events: none; }
body.macct-page .ma-bk-up .ma-bk-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
body.macct-page .ma-bk-up .ma-bk-actions .ma-textbtn, body.macct-page .ma-bk-up .ma-bk-stage-start, body.macct-page .ma-bk-up .ma-bk-stage-adv { min-height: 44px; display: inline-flex; align-items: center; }
/* BA "Coming soon" teaser — violet-outline pill; rows reuse Matthew tokens. */
body.macct-page .ba-soon-pill { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border: 1.5px solid var(--ba-violet); border-radius: 999px; font-family: var(--ma-sans); font-size: 10.5px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; color: var(--ba-violet); background: transparent; white-space: nowrap; vertical-align: middle; }
body.macct-page .ma-modlink .ba-soon-pill { margin-left: auto; }
/* AA (tablet check): violet #7A5CF5 was 3.0:1 on the light tiles and 3.9:1 on the navy sidebar. Darker violet on
   light surfaces (≈5.4:1), lighter violet on the navy sidebar / drawer (≈8:1). Colour only — same size and outline. */
body.macct-page .ba-soon-pill { color: #4B2FC2; border-color: #4B2FC2; }
body.macct-page .ma-modlink .ba-soon-pill { color: #B7A6FF; border-color: #B7A6FF; }
body.macct-page .ba-soon .ba-head { flex-wrap: wrap; }
body.macct-page .ba-soon-pill--head { margin-left: 0; font-size: 12px; padding: 4px 10px; }
/* item 147 Smart Reminders — violet top bar (tone 'ba', drawn by the shared [data-tone] tile rule) +
   the filled violet "Advanced" label shown ON the tile/sidebar for Basic (replaces the 🔒). */
body.macct-page [data-tone="ba"] { --c: var(--ba-violet, #7A5CF5); --t: #ECE7FE; }
body.macct-page .ba-adv-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ba-violet); color: #fff; font-family: var(--ma-sans); font-size: 10.5px; font-weight: 800; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
body.macct-page .ma-modlink .ba-adv-chip { margin-left: auto; }
body.macct-page .ba-soon-card { margin-top: 14px; }
body.macct-page .ba-soon-line { margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ma-ink); }
body.macct-page .ba-soon-rows { list-style: none; margin: 0 0 16px; padding: 0; }
body.macct-page .ba-soon-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ma-line-soft); }
body.macct-page .ba-soon-ic { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ba-soon-ic .ma-ic { width: 20px; height: 20px; }
body.macct-page .ba-soon-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.macct-page .ba-soon-txt b { font-size: 14.5px; color: var(--ma-ink); }
body.macct-page .ba-soon-txt span { font-size: 13px; color: var(--ma-muted); }
body.macct-page .ba-notify { width: 100%; min-height: 48px; }
body.macct-page .ba-notify.is-done, body.macct-page .ba-notify.is-done:disabled { opacity: 1; cursor: default; color: var(--ma-success-ink); background: var(--ma-success-tint); box-shadow: none; }
body.macct-page .ba-notify-err { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ma-danger-ink); }
@media (min-width: 820px) { body.macct-page .ba-soon { max-width: 620px; } }

/* Oct-3 — Bookings tab tile grid (reuses the v265 .ma-inv-split/.ma-inv-grid shell). Phone + tablet
   (<1280): grid → sub-pane + back row; ≥1280 the shared ≥768 list-left / card-right split applies. */
@media (min-width: 768px) and (max-width: 1279px) {
  body.macct-page .ma-inv-split.ma-bk-split { display: block; }
  body.macct-page .ma-inv-split.ma-bk-split .ma-inv-listcol { max-width: none; }
  body.macct-page .ma-inv-split.ma-bk-split.has-detail .ma-inv-listcol { display: none; }
  body.macct-page .ma-inv-split.ma-bk-split .ma-inv-back { display: inline-flex; }
}
body.macct-page .ma-bk-grid { grid-auto-rows: 1fr; }   /* 6 tiles = 3 even rows */
/* BA S1.1 — one decision at a time. STATE A (default): send row + Later/Skip. STATE B (the existing
   .ba-confirm un-hidden by Send/Copy/Share): ONLY "Did you send it?" → Yes, sent · Not yet. Pure CSS on
   the confirm row's [hidden] (handlers untouched); B reserves A's exact height → no layout shift. */
body.macct-page .ba-card:has(.ba-confirm:not([hidden])) .ba-acts,
body.macct-page .ba-card:has(.ba-confirm:not([hidden])) .ba-acts2 { display: none; }
body.macct-page .ba-acts .ma-btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }   /* send row = one line on a 390 phone */
body.macct-page .ba-confirm { min-height: 104px; align-content: center; padding: 8px 10px; }              /* = STATE A send row + Later/Skip row (measured) → zero shift */
body.macct-page .ba-confirm-q { text-align: center; }
body.macct-page .ba-reason { margin: 2px 0 8px; }
body.macct-page .ba-msg { min-height: 124px; }   /* S1.1 templates are ~5 lines at 390 → whole draft visible, no inner scroll */
@media (max-width: 767px) { body.macct-page .ba { padding-bottom: 16px; } }   /* + .ma-journey-mount's nav+safe-area clearance → last card scrolls clear of the floating nav */
/* BA S2.0 — 3–4 option Settings segments fit a 390 phone with no inner scroll: share the width, trim side padding (font unchanged). */
body.macct-page .ba-seg .ma-seg-btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
/* BA S2.1 — ⋯ owner menu (44px, absolutely placed → the card never grows), flag sheets, Settings restore lists. */
body.macct-page .ba-card--menu { position: relative; }
body.macct-page .ba-card--menu .ba-card-top { padding-right: 40px; }
body.macct-page .ba-more { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ma-muted); font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.macct-page .ba-more:hover, body.macct-page .ba-more:focus-visible { background: var(--ma-line-soft); color: var(--ma-ink); }
body.macct-page .ba-more:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
body.macct-page .ba-sheet-body { display: flex; flex-direction: column; gap: 10px; }
body.macct-page .ba-menu-btn { width: 100%; min-height: 48px; justify-content: flex-start; text-align: left; line-height: 1.3; }
body.macct-page .ba-sheet-txt { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ma-ink); }
body.macct-page .ba-sheet-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body.macct-page .ba-sheet-acts .ma-btn { flex: 1 1 140px; min-height: 48px; }
body.macct-page .ba-skip-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
body.macct-page .ba-skip-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 2px; border-top: 1px solid var(--ma-line-soft); cursor: pointer; }
body.macct-page .ba-skip-row input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--ba-violet); }
body.macct-page .ba-skip-day { flex: 1 1 auto; font-weight: 700; color: var(--ma-ink); }
body.macct-page .ba-skip-amt { flex: 0 0 auto; font-weight: 800; color: var(--ma-ink); font-variant-numeric: tabular-nums; }
body.macct-page .ba-flag-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--ma-ink); cursor: pointer; }
body.macct-page .ba-flag-chev { color: var(--ma-muted); transition: transform .18s ease; }
body.macct-page .ba-flag-toggle[aria-expanded="true"] .ba-flag-chev { transform: rotate(180deg); }
body.macct-page .ba-flag-list { list-style: none; margin: 0; padding: 0; }
body.macct-page .ba-flag-list[hidden] { display: none; }
body.macct-page .ba-flag-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-top: 1px solid var(--ma-line-soft); }
body.macct-page .ba-flag-name { display: flex; flex-direction: column; min-width: 0; font-weight: 700; color: var(--ma-ink); overflow-wrap: anywhere; }
body.macct-page .ba-flag-name small { font-weight: 600; color: var(--ma-muted); }
body.macct-page .ba-flag-restore { flex: 0 0 auto; min-height: 44px; padding: 0 14px; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ba-flag-chev { transition: none; } }
body.macct-page .ba-sheet .ma-sheet-x { min-width: 44px; min-height: 44px; }
body.macct-page .ba-card:has(.ba-confirm:not([hidden])) .ba-more { display: none; }   /* STATE B stays one decision: no ⋯ */
/* BA S2.2 — suki check-in tag + Settings hint under the toggle. */
body.macct-page .ba-tag--churn { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ba-set-hint { margin: -6px 2px 0; font-size: 12px; line-height: 1.4; color: var(--ma-muted); }

/* Oct-3 — owner web-push toggle (Upcoming card + bell menu); dark unless NP_PUSH_ENABLED */
body.macct-page .ma-push-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
body.macct-page .ma-push-row[hidden] { display: none; }
body.macct-page .ma-push-txt { margin: 0; flex: 1 1 220px; font-size: 13px; line-height: 1.45; color: var(--ma-ink-soft); }
body.macct-page .ma-push-btn { min-height: 44px; }
body.macct-page .ma-notif-push .ma-push-row { margin: 0; padding: 2px 16px 10px; }   /* same 16px inset as the sheet rows (the blocked/iOS line ran edge-to-edge) */
/* BA S2.4 — AI Rewrite: text button on the message-label row (44px target via negative margins → the card
   never grows), tone chips in the BA sheet, busy draft. Hidden in STATE B (one decision). */
body.macct-page .ba-msg-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 0 4px; }
body.macct-page .ba-msg-row .ba-msg-lbl { margin: 0; flex: 1 1 auto; min-width: 0; }
body.macct-page .ba-rw, body.macct-page .ba-rw-orig { flex: 0 0 auto; min-height: 44px; margin: -14px -6px -14px 0; padding: 0 6px; border: 0; background: transparent; font-family: var(--ma-sans); font-size: 12.5px; font-weight: 800; color: var(--ba-violet); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
body.macct-page .ba-rw-orig { color: var(--ma-muted); font-weight: 700; }
body.macct-page .ba-rw-orig[hidden] { display: none; }
body.macct-page .ba-rw:disabled { opacity: .45; cursor: not-allowed; }
body.macct-page .ba-card:has(.ba-confirm:not([hidden])) .ba-rw,
body.macct-page .ba-card:has(.ba-confirm:not([hidden])) .ba-rw-orig { display: none; }
body.macct-page .ba-msg--busy { opacity: .55; cursor: progress; }
body.macct-page .ba-rw-tones { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ba-rw-tone { width: 100%; min-height: 48px; }

/* 148.2 — trial nudges (Matthew Home card · Lite home line). Additions only. */
body.macct-page .ma-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--ma-line); border-left: 4px solid var(--ma-gold, #C8963E); border-radius: 12px; background: #FFFBF1; color: var(--ma-ink); }
body.macct-page .ma-nudge-txt { flex: 1 1 260px; margin: 0; font-size: .92rem; line-height: 1.45; }
body.macct-page .ma-nudge-btn { min-height: 44px; }
body.macct-page .ma-nudge-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.macct-page .ma-nudge-later, body.macct-page .ma-nudge-open { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--ma-ink-soft); font: inherit; font-size: .86rem; text-decoration: underline; cursor: pointer; }
body.macct-page .ma-nudge-open { flex: 1 1 200px; text-align: left; color: var(--ma-ink); text-decoration: none; font-weight: 600; }
body.macct-page .ma-nudge--end { background: #FFF6E5; border-left-color: #D98A1A; }
body.macct-page .ma-nudge.is-collapsed { padding: 4px 8px 4px 14px; }
body.macct-page .ma-lite-main > .ma-nudge { margin: 12px 16px 4px; }

/* ==========================================================================
   FEATURE COLOR CODE — Slice 1 (Home tiles: pastel background ONLY). Standing tokens, reused by Slice 2.
   Default cream theme only (:root without data-theme); the other 5 themes are untouched. JS adds
   .ma-fc + data-fc to Home tiles (homeTile FC_HOME). Everything else stays original: emoji icon box,
   layout, top bars / ≥768 left spine, agenda stripe, ℹ️. Removing .ma-fc restores the cream tiles.
   Inks darkened (never the bg) for >=4.5:1 — given: journey #1F9D55, blueprint #2B6CB0, money #B7791F,
   loans #C05621, counter #B83280 (inks are for Slice 2; this slice uses the bg tokens).
   Text on the pastels: title --ma-ink #2C2818 (11.7–12.9:1) unchanged; the hint/stat grey #837863 is only
   3.45–3.81:1 on the pastels → #6D6452 (>=4.6:1). Journey was a filled dark tile with white text (1.17:1
   on mint) → ink title + #6D6452 hint.
   ========================================================================== */
:root {
  --fc-journey-bg:#DDF3E4; --fc-journey-ink:#187941;
  --fc-blueprint-bg:#DCEBFB; --fc-blueprint-ink:#2A6AAC;
  --fc-money-bg:#FAF0CD;   --fc-money-ink:#926119;
  --fc-loans-bg:#FDE4D7;   --fc-loans-ink:#A94C1D;
  --fc-inventory-bg:#E8E2FA; --fc-inventory-ink:#6B46C1;
  --fc-agenda-bg:#DFE7FD;  --fc-agenda-ink:#4C51BF;
  --fc-benta-bg:#D7F1F0;   --fc-benta-ink:#0F766E;
  --fc-counter-bg:#FBE0E6; --fc-counter-ink:#B2317C;
  /* RUN 1 — 10-hue wheel: own hue per tile (bg / ink; all pairings >=4.5:1 — title 11.7–12.5, hint 4.63–4.93, ink 4.51–6.30) */
  --fc-clients-bg:#D7F1F0; --fc-clients-ink:#0F766E;
  --fc-methods-bg:#E6EFD8; --fc-methods-ink:#4A6B1D;
  --fc-calc-bg:#EFE4CC;    --fc-calc-ink:#7E631C;
  --fc-smart-bg:#F4E0F4;   --fc-smart-ink:#8E1D86;
}

:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="journey"]   { --fc-bg: var(--fc-journey-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="blueprint"] { --fc-bg: var(--fc-blueprint-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="money"]     { --fc-bg: var(--fc-money-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="loans"]     { --fc-bg: var(--fc-loans-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="inventory"] { --fc-bg: var(--fc-inventory-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="agenda"]    { --fc-bg: var(--fc-agenda-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="benta"]     { --fc-bg: var(--fc-benta-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="counter"]   { --fc-bg: var(--fc-counter-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="clients"]   { --fc-bg: var(--fc-clients-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="methods"]   { --fc-bg: var(--fc-methods-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="calc"]      { --fc-bg: var(--fc-calc-bg); }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="smart"]     { --fc-bg: var(--fc-smart-bg); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc] { background: var(--fc-bg); border-radius: 18px; }
/* Flat pastel (Angie, Oct 5): no coloured top bar / ≥768 left spine / agenda stripe on Home tiles —
   every tile gets the neutral card shadow Journey already had. Home grid only: the feature-interior
   tiles share the bar rules (.ma-pane[data-tone] .ma-tilegrid .ma-tile) and keep their bars. */
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc] { box-shadow: var(--ma-shadow-card); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc]::before { content: none; }
@media (min-width: 768px) { :root:not([data-theme]) body.ma-home-pane .ma-tilegrid.ma-home-nav .ma-tile.ma-fc[data-fc] { box-shadow: 0 1px 2px rgba(13,27,46,.04), 0 6px 18px rgba(13,27,46,.05); } }
/* text contrast on the pastels (darken only) */
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc] .ma-tile-hint,
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc] .ma-tile-stat,
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc] .ma-tile-statcap { color: #554D3C; }   /* was #6D6452 — darkened for the diamond mosaic (Angie, Oct 6): >=5.17:1 under the darkest diamond */
/* Journey: was a filled dark tile with white text — on the mint pastel its text uses the normal ink */
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc][data-tone="journey"] { border-color: var(--ma-line); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc][data-tone="journey"] .ma-tile-txt b,
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc][data-tone="journey"] .ma-tile-statv { color: var(--ma-ink); }

/* Home tiles — faint diamond mosaic (Angie's mock, Oct 6; eGovPH weather-card texture). Default theme, Home grid only.
   One ::before per tile, inked with the tile's own --fc-*-ink, masked by a shared 136px SVG pattern (13px diamonds on a
   17px staggered step, drawn 21px phone / 26px wide, ~28% skipped, per-diamond alpha .05–.16) intersected with a left-40% fade and a top/bottom soften.
   Static, composite-only (no layout). No mask(-composite) support → no texture (plain tile, never a solid fill). */
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="journey"] { --tile-ink: var(--fc-journey-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="blueprint"] { --tile-ink: var(--fc-blueprint-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="money"] { --tile-ink: var(--fc-money-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="loans"] { --tile-ink: var(--fc-loans-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="inventory"] { --tile-ink: var(--fc-inventory-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="agenda"] { --tile-ink: var(--fc-agenda-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="benta"] { --tile-ink: var(--fc-benta-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="counter"] { --tile-ink: var(--fc-counter-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="clients"] { --tile-ink: var(--fc-clients-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="methods"] { --tile-ink: var(--fc-methods-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="calc"] { --tile-ink: var(--fc-calc-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="smart"] { --tile-ink: var(--fc-smart-ink); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc] { position: relative; isolation: isolate; }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) and ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  :root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc]::before {
    content: ''; position: absolute; inset: 0; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto;
    border-radius: inherit; background: var(--tile-ink); pointer-events: none; z-index: -1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='136'%3E%3Cpath d='M8.5 -2.25L15 4.25L8.5 10.75L2 4.25Z' fill-opacity='0.124'/%3E%3Cpath d='M8.5 133.75L15 140.25L8.5 146.75L2 140.25Z' fill-opacity='0.124'/%3E%3Cpath d='M25.5 -2.25L32 4.25L25.5 10.75L19 4.25Z' fill-opacity='0.106'/%3E%3Cpath d='M25.5 133.75L32 140.25L25.5 146.75L19 140.25Z' fill-opacity='0.106'/%3E%3Cpath d='M42.5 -2.25L49 4.25L42.5 10.75L36 4.25Z' fill-opacity='0.076'/%3E%3Cpath d='M42.5 133.75L49 140.25L42.5 146.75L36 140.25Z' fill-opacity='0.076'/%3E%3Cpath d='M59.5 -2.25L66 4.25L59.5 10.75L53 4.25Z' fill-opacity='0.128'/%3E%3Cpath d='M59.5 133.75L66 140.25L59.5 146.75L53 140.25Z' fill-opacity='0.128'/%3E%3Cpath d='M76.5 -2.25L83 4.25L76.5 10.75L70 4.25Z' fill-opacity='0.134'/%3E%3Cpath d='M76.5 133.75L83 140.25L76.5 146.75L70 140.25Z' fill-opacity='0.134'/%3E%3Cpath d='M34 6.25L40.5 12.75L34 19.25L27.5 12.75Z' fill-opacity='0.091'/%3E%3Cpath d='M85 6.25L91.5 12.75L85 19.25L78.5 12.75Z' fill-opacity='0.073'/%3E%3Cpath d='M119 6.25L125.5 12.75L119 19.25L112.5 12.75Z' fill-opacity='0.1'/%3E%3Cpath d='M25.5 14.75L32 21.25L25.5 27.75L19 21.25Z' fill-opacity='0.07'/%3E%3Cpath d='M59.5 14.75L66 21.25L59.5 27.75L53 21.25Z' fill-opacity='0.075'/%3E%3Cpath d='M76.5 14.75L83 21.25L76.5 27.75L70 21.25Z' fill-opacity='0.075'/%3E%3Cpath d='M93.5 14.75L100 21.25L93.5 27.75L87 21.25Z' fill-opacity='0.105'/%3E%3Cpath d='M110.5 14.75L117 21.25L110.5 27.75L104 21.25Z' fill-opacity='0.077'/%3E%3Cpath d='M34 23.25L40.5 29.75L34 36.25L27.5 29.75Z' fill-opacity='0.153'/%3E%3Cpath d='M51 23.25L57.5 29.75L51 36.25L44.5 29.75Z' fill-opacity='0.136'/%3E%3Cpath d='M68 23.25L74.5 29.75L68 36.25L61.5 29.75Z' fill-opacity='0.054'/%3E%3Cpath d='M85 23.25L91.5 29.75L85 36.25L78.5 29.75Z' fill-opacity='0.117'/%3E%3Cpath d='M102 23.25L108.5 29.75L102 36.25L95.5 29.75Z' fill-opacity='0.063'/%3E%3Cpath d='M119 23.25L125.5 29.75L119 36.25L112.5 29.75Z' fill-opacity='0.086'/%3E%3Cpath d='M42.5 31.75L49 38.25L42.5 44.75L36 38.25Z' fill-opacity='0.067'/%3E%3Cpath d='M59.5 31.75L66 38.25L59.5 44.75L53 38.25Z' fill-opacity='0.064'/%3E%3Cpath d='M127.5 31.75L134 38.25L127.5 44.75L121 38.25Z' fill-opacity='0.103'/%3E%3Cpath d='M34 40.25L40.5 46.75L34 53.25L27.5 46.75Z' fill-opacity='0.058'/%3E%3Cpath d='M51 40.25L57.5 46.75L51 53.25L44.5 46.75Z' fill-opacity='0.132'/%3E%3Cpath d='M68 40.25L74.5 46.75L68 53.25L61.5 46.75Z' fill-opacity='0.115'/%3E%3Cpath d='M85 40.25L91.5 46.75L85 53.25L78.5 46.75Z' fill-opacity='0.101'/%3E%3Cpath d='M102 40.25L108.5 46.75L102 53.25L95.5 46.75Z' fill-opacity='0.154'/%3E%3Cpath d='M119 40.25L125.5 46.75L119 53.25L112.5 46.75Z' fill-opacity='0.062'/%3E%3Cpath d='M136 40.25L142.5 46.75L136 53.25L129.5 46.75Z' fill-opacity='0.114'/%3E%3Cpath d='M0 40.25L6.5 46.75L0 53.25L-6.5 46.75Z' fill-opacity='0.114'/%3E%3Cpath d='M25.5 48.75L32 55.25L25.5 61.75L19 55.25Z' fill-opacity='0.053'/%3E%3Cpath d='M42.5 48.75L49 55.25L42.5 61.75L36 55.25Z' fill-opacity='0.1'/%3E%3Cpath d='M59.5 48.75L66 55.25L59.5 61.75L53 55.25Z' fill-opacity='0.102'/%3E%3Cpath d='M93.5 48.75L100 55.25L93.5 61.75L87 55.25Z' fill-opacity='0.069'/%3E%3Cpath d='M110.5 48.75L117 55.25L110.5 61.75L104 55.25Z' fill-opacity='0.075'/%3E%3Cpath d='M127.5 48.75L134 55.25L127.5 61.75L121 55.25Z' fill-opacity='0.095'/%3E%3Cpath d='M17 57.25L23.5 63.75L17 70.25L10.5 63.75Z' fill-opacity='0.109'/%3E%3Cpath d='M34 57.25L40.5 63.75L34 70.25L27.5 63.75Z' fill-opacity='0.089'/%3E%3Cpath d='M51 57.25L57.5 63.75L51 70.25L44.5 63.75Z' fill-opacity='0.082'/%3E%3Cpath d='M68 57.25L74.5 63.75L68 70.25L61.5 63.75Z' fill-opacity='0.073'/%3E%3Cpath d='M102 57.25L108.5 63.75L102 70.25L95.5 63.75Z' fill-opacity='0.14'/%3E%3Cpath d='M136 57.25L142.5 63.75L136 70.25L129.5 63.75Z' fill-opacity='0.137'/%3E%3Cpath d='M0 57.25L6.5 63.75L0 70.25L-6.5 63.75Z' fill-opacity='0.137'/%3E%3Cpath d='M25.5 65.75L32 72.25L25.5 78.75L19 72.25Z' fill-opacity='0.097'/%3E%3Cpath d='M42.5 65.75L49 72.25L42.5 78.75L36 72.25Z' fill-opacity='0.065'/%3E%3Cpath d='M76.5 65.75L83 72.25L76.5 78.75L70 72.25Z' fill-opacity='0.1'/%3E%3Cpath d='M93.5 65.75L100 72.25L93.5 78.75L87 72.25Z' fill-opacity='0.097'/%3E%3Cpath d='M110.5 65.75L117 72.25L110.5 78.75L104 72.25Z' fill-opacity='0.061'/%3E%3Cpath d='M127.5 65.75L134 72.25L127.5 78.75L121 72.25Z' fill-opacity='0.084'/%3E%3Cpath d='M17 74.25L23.5 80.75L17 87.25L10.5 80.75Z' fill-opacity='0.054'/%3E%3Cpath d='M34 74.25L40.5 80.75L34 87.25L27.5 80.75Z' fill-opacity='0.079'/%3E%3Cpath d='M51 74.25L57.5 80.75L51 87.25L44.5 80.75Z' fill-opacity='0.112'/%3E%3Cpath d='M68 74.25L74.5 80.75L68 87.25L61.5 80.75Z' fill-opacity='0.077'/%3E%3Cpath d='M85 74.25L91.5 80.75L85 87.25L78.5 80.75Z' fill-opacity='0.112'/%3E%3Cpath d='M102 74.25L108.5 80.75L102 87.25L95.5 80.75Z' fill-opacity='0.066'/%3E%3Cpath d='M119 74.25L125.5 80.75L119 87.25L112.5 80.75Z' fill-opacity='0.132'/%3E%3Cpath d='M136 74.25L142.5 80.75L136 87.25L129.5 80.75Z' fill-opacity='0.07'/%3E%3Cpath d='M0 74.25L6.5 80.75L0 87.25L-6.5 80.75Z' fill-opacity='0.07'/%3E%3Cpath d='M8.5 82.75L15 89.25L8.5 95.75L2 89.25Z' fill-opacity='0.097'/%3E%3Cpath d='M76.5 82.75L83 89.25L76.5 95.75L70 89.25Z' fill-opacity='0.137'/%3E%3Cpath d='M93.5 82.75L100 89.25L93.5 95.75L87 89.25Z' fill-opacity='0.15'/%3E%3Cpath d='M110.5 82.75L117 89.25L110.5 95.75L104 89.25Z' fill-opacity='0.111'/%3E%3Cpath d='M127.5 82.75L134 89.25L127.5 95.75L121 89.25Z' fill-opacity='0.068'/%3E%3Cpath d='M17 91.25L23.5 97.75L17 104.25L10.5 97.75Z' fill-opacity='0.119'/%3E%3Cpath d='M34 91.25L40.5 97.75L34 104.25L27.5 97.75Z' fill-opacity='0.131'/%3E%3Cpath d='M51 91.25L57.5 97.75L51 104.25L44.5 97.75Z' fill-opacity='0.075'/%3E%3Cpath d='M68 91.25L74.5 97.75L68 104.25L61.5 97.75Z' fill-opacity='0.079'/%3E%3Cpath d='M85 91.25L91.5 97.75L85 104.25L78.5 97.75Z' fill-opacity='0.148'/%3E%3Cpath d='M102 91.25L108.5 97.75L102 104.25L95.5 97.75Z' fill-opacity='0.058'/%3E%3Cpath d='M8.5 99.75L15 106.25L8.5 112.75L2 106.25Z' fill-opacity='0.068'/%3E%3Cpath d='M25.5 99.75L32 106.25L25.5 112.75L19 106.25Z' fill-opacity='0.066'/%3E%3Cpath d='M42.5 99.75L49 106.25L42.5 112.75L36 106.25Z' fill-opacity='0.158'/%3E%3Cpath d='M59.5 99.75L66 106.25L59.5 112.75L53 106.25Z' fill-opacity='0.143'/%3E%3Cpath d='M76.5 99.75L83 106.25L76.5 112.75L70 106.25Z' fill-opacity='0.079'/%3E%3Cpath d='M110.5 99.75L117 106.25L110.5 112.75L104 106.25Z' fill-opacity='0.077'/%3E%3Cpath d='M17 108.25L23.5 114.75L17 121.25L10.5 114.75Z' fill-opacity='0.05'/%3E%3Cpath d='M51 108.25L57.5 114.75L51 121.25L44.5 114.75Z' fill-opacity='0.067'/%3E%3Cpath d='M68 108.25L74.5 114.75L68 121.25L61.5 114.75Z' fill-opacity='0.085'/%3E%3Cpath d='M85 108.25L91.5 114.75L85 121.25L78.5 114.75Z' fill-opacity='0.094'/%3E%3Cpath d='M25.5 116.75L32 123.25L25.5 129.75L19 123.25Z' fill-opacity='0.123'/%3E%3Cpath d='M42.5 116.75L49 123.25L42.5 129.75L36 123.25Z' fill-opacity='0.144'/%3E%3Cpath d='M93.5 116.75L100 123.25L93.5 129.75L87 123.25Z' fill-opacity='0.077'/%3E%3Cpath d='M127.5 116.75L134 123.25L127.5 129.75L121 123.25Z' fill-opacity='0.117'/%3E%3Cpath d='M34 125.25L40.5 131.75L34 138.25L27.5 131.75Z' fill-opacity='0.136'/%3E%3Cpath d='M34 -10.75L40.5 -4.25L34 2.25L27.5 -4.25Z' fill-opacity='0.136'/%3E%3Cpath d='M68 125.25L74.5 131.75L68 138.25L61.5 131.75Z' fill-opacity='0.11'/%3E%3Cpath d='M68 -10.75L74.5 -4.25L68 2.25L61.5 -4.25Z' fill-opacity='0.11'/%3E%3Cpath d='M85 125.25L91.5 131.75L85 138.25L78.5 131.75Z' fill-opacity='0.119'/%3E%3Cpath d='M85 -10.75L91.5 -4.25L85 2.25L78.5 -4.25Z' fill-opacity='0.119'/%3E%3Cpath d='M102 125.25L108.5 131.75L102 138.25L95.5 131.75Z' fill-opacity='0.131'/%3E%3Cpath d='M102 -10.75L108.5 -4.25L102 2.25L95.5 -4.25Z' fill-opacity='0.131'/%3E%3Cpath d='M119 125.25L125.5 131.75L119 138.25L112.5 131.75Z' fill-opacity='0.156'/%3E%3Cpath d='M119 -10.75L125.5 -4.25L119 2.25L112.5 -4.25Z' fill-opacity='0.156'/%3E%3Cpath d='M136 125.25L142.5 131.75L136 138.25L129.5 131.75Z' fill-opacity='0.138'/%3E%3Cpath d='M136 -10.75L142.5 -4.25L136 2.25L129.5 -4.25Z' fill-opacity='0.138'/%3E%3Cpath d='M0 125.25L6.5 131.75L0 138.25L-6.5 131.75Z' fill-opacity='0.138'/%3E%3Cpath d='M0 -10.75L6.5 -4.25L0 2.25L-6.5 -4.25Z' fill-opacity='0.138'/%3E%3C/svg%3E"),
      linear-gradient(to right, transparent 40%, #000 85%), linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-repeat: repeat, no-repeat, no-repeat; -webkit-mask-size: 220px 220px, 100% 100%, 100% 100%;
    -webkit-mask-position: right top, 0 0, 0 0; -webkit-mask-composite: source-in, source-in;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='136'%3E%3Cpath d='M8.5 -2.25L15 4.25L8.5 10.75L2 4.25Z' fill-opacity='0.124'/%3E%3Cpath d='M8.5 133.75L15 140.25L8.5 146.75L2 140.25Z' fill-opacity='0.124'/%3E%3Cpath d='M25.5 -2.25L32 4.25L25.5 10.75L19 4.25Z' fill-opacity='0.106'/%3E%3Cpath d='M25.5 133.75L32 140.25L25.5 146.75L19 140.25Z' fill-opacity='0.106'/%3E%3Cpath d='M42.5 -2.25L49 4.25L42.5 10.75L36 4.25Z' fill-opacity='0.076'/%3E%3Cpath d='M42.5 133.75L49 140.25L42.5 146.75L36 140.25Z' fill-opacity='0.076'/%3E%3Cpath d='M59.5 -2.25L66 4.25L59.5 10.75L53 4.25Z' fill-opacity='0.128'/%3E%3Cpath d='M59.5 133.75L66 140.25L59.5 146.75L53 140.25Z' fill-opacity='0.128'/%3E%3Cpath d='M76.5 -2.25L83 4.25L76.5 10.75L70 4.25Z' fill-opacity='0.134'/%3E%3Cpath d='M76.5 133.75L83 140.25L76.5 146.75L70 140.25Z' fill-opacity='0.134'/%3E%3Cpath d='M34 6.25L40.5 12.75L34 19.25L27.5 12.75Z' fill-opacity='0.091'/%3E%3Cpath d='M85 6.25L91.5 12.75L85 19.25L78.5 12.75Z' fill-opacity='0.073'/%3E%3Cpath d='M119 6.25L125.5 12.75L119 19.25L112.5 12.75Z' fill-opacity='0.1'/%3E%3Cpath d='M25.5 14.75L32 21.25L25.5 27.75L19 21.25Z' fill-opacity='0.07'/%3E%3Cpath d='M59.5 14.75L66 21.25L59.5 27.75L53 21.25Z' fill-opacity='0.075'/%3E%3Cpath d='M76.5 14.75L83 21.25L76.5 27.75L70 21.25Z' fill-opacity='0.075'/%3E%3Cpath d='M93.5 14.75L100 21.25L93.5 27.75L87 21.25Z' fill-opacity='0.105'/%3E%3Cpath d='M110.5 14.75L117 21.25L110.5 27.75L104 21.25Z' fill-opacity='0.077'/%3E%3Cpath d='M34 23.25L40.5 29.75L34 36.25L27.5 29.75Z' fill-opacity='0.153'/%3E%3Cpath d='M51 23.25L57.5 29.75L51 36.25L44.5 29.75Z' fill-opacity='0.136'/%3E%3Cpath d='M68 23.25L74.5 29.75L68 36.25L61.5 29.75Z' fill-opacity='0.054'/%3E%3Cpath d='M85 23.25L91.5 29.75L85 36.25L78.5 29.75Z' fill-opacity='0.117'/%3E%3Cpath d='M102 23.25L108.5 29.75L102 36.25L95.5 29.75Z' fill-opacity='0.063'/%3E%3Cpath d='M119 23.25L125.5 29.75L119 36.25L112.5 29.75Z' fill-opacity='0.086'/%3E%3Cpath d='M42.5 31.75L49 38.25L42.5 44.75L36 38.25Z' fill-opacity='0.067'/%3E%3Cpath d='M59.5 31.75L66 38.25L59.5 44.75L53 38.25Z' fill-opacity='0.064'/%3E%3Cpath d='M127.5 31.75L134 38.25L127.5 44.75L121 38.25Z' fill-opacity='0.103'/%3E%3Cpath d='M34 40.25L40.5 46.75L34 53.25L27.5 46.75Z' fill-opacity='0.058'/%3E%3Cpath d='M51 40.25L57.5 46.75L51 53.25L44.5 46.75Z' fill-opacity='0.132'/%3E%3Cpath d='M68 40.25L74.5 46.75L68 53.25L61.5 46.75Z' fill-opacity='0.115'/%3E%3Cpath d='M85 40.25L91.5 46.75L85 53.25L78.5 46.75Z' fill-opacity='0.101'/%3E%3Cpath d='M102 40.25L108.5 46.75L102 53.25L95.5 46.75Z' fill-opacity='0.154'/%3E%3Cpath d='M119 40.25L125.5 46.75L119 53.25L112.5 46.75Z' fill-opacity='0.062'/%3E%3Cpath d='M136 40.25L142.5 46.75L136 53.25L129.5 46.75Z' fill-opacity='0.114'/%3E%3Cpath d='M0 40.25L6.5 46.75L0 53.25L-6.5 46.75Z' fill-opacity='0.114'/%3E%3Cpath d='M25.5 48.75L32 55.25L25.5 61.75L19 55.25Z' fill-opacity='0.053'/%3E%3Cpath d='M42.5 48.75L49 55.25L42.5 61.75L36 55.25Z' fill-opacity='0.1'/%3E%3Cpath d='M59.5 48.75L66 55.25L59.5 61.75L53 55.25Z' fill-opacity='0.102'/%3E%3Cpath d='M93.5 48.75L100 55.25L93.5 61.75L87 55.25Z' fill-opacity='0.069'/%3E%3Cpath d='M110.5 48.75L117 55.25L110.5 61.75L104 55.25Z' fill-opacity='0.075'/%3E%3Cpath d='M127.5 48.75L134 55.25L127.5 61.75L121 55.25Z' fill-opacity='0.095'/%3E%3Cpath d='M17 57.25L23.5 63.75L17 70.25L10.5 63.75Z' fill-opacity='0.109'/%3E%3Cpath d='M34 57.25L40.5 63.75L34 70.25L27.5 63.75Z' fill-opacity='0.089'/%3E%3Cpath d='M51 57.25L57.5 63.75L51 70.25L44.5 63.75Z' fill-opacity='0.082'/%3E%3Cpath d='M68 57.25L74.5 63.75L68 70.25L61.5 63.75Z' fill-opacity='0.073'/%3E%3Cpath d='M102 57.25L108.5 63.75L102 70.25L95.5 63.75Z' fill-opacity='0.14'/%3E%3Cpath d='M136 57.25L142.5 63.75L136 70.25L129.5 63.75Z' fill-opacity='0.137'/%3E%3Cpath d='M0 57.25L6.5 63.75L0 70.25L-6.5 63.75Z' fill-opacity='0.137'/%3E%3Cpath d='M25.5 65.75L32 72.25L25.5 78.75L19 72.25Z' fill-opacity='0.097'/%3E%3Cpath d='M42.5 65.75L49 72.25L42.5 78.75L36 72.25Z' fill-opacity='0.065'/%3E%3Cpath d='M76.5 65.75L83 72.25L76.5 78.75L70 72.25Z' fill-opacity='0.1'/%3E%3Cpath d='M93.5 65.75L100 72.25L93.5 78.75L87 72.25Z' fill-opacity='0.097'/%3E%3Cpath d='M110.5 65.75L117 72.25L110.5 78.75L104 72.25Z' fill-opacity='0.061'/%3E%3Cpath d='M127.5 65.75L134 72.25L127.5 78.75L121 72.25Z' fill-opacity='0.084'/%3E%3Cpath d='M17 74.25L23.5 80.75L17 87.25L10.5 80.75Z' fill-opacity='0.054'/%3E%3Cpath d='M34 74.25L40.5 80.75L34 87.25L27.5 80.75Z' fill-opacity='0.079'/%3E%3Cpath d='M51 74.25L57.5 80.75L51 87.25L44.5 80.75Z' fill-opacity='0.112'/%3E%3Cpath d='M68 74.25L74.5 80.75L68 87.25L61.5 80.75Z' fill-opacity='0.077'/%3E%3Cpath d='M85 74.25L91.5 80.75L85 87.25L78.5 80.75Z' fill-opacity='0.112'/%3E%3Cpath d='M102 74.25L108.5 80.75L102 87.25L95.5 80.75Z' fill-opacity='0.066'/%3E%3Cpath d='M119 74.25L125.5 80.75L119 87.25L112.5 80.75Z' fill-opacity='0.132'/%3E%3Cpath d='M136 74.25L142.5 80.75L136 87.25L129.5 80.75Z' fill-opacity='0.07'/%3E%3Cpath d='M0 74.25L6.5 80.75L0 87.25L-6.5 80.75Z' fill-opacity='0.07'/%3E%3Cpath d='M8.5 82.75L15 89.25L8.5 95.75L2 89.25Z' fill-opacity='0.097'/%3E%3Cpath d='M76.5 82.75L83 89.25L76.5 95.75L70 89.25Z' fill-opacity='0.137'/%3E%3Cpath d='M93.5 82.75L100 89.25L93.5 95.75L87 89.25Z' fill-opacity='0.15'/%3E%3Cpath d='M110.5 82.75L117 89.25L110.5 95.75L104 89.25Z' fill-opacity='0.111'/%3E%3Cpath d='M127.5 82.75L134 89.25L127.5 95.75L121 89.25Z' fill-opacity='0.068'/%3E%3Cpath d='M17 91.25L23.5 97.75L17 104.25L10.5 97.75Z' fill-opacity='0.119'/%3E%3Cpath d='M34 91.25L40.5 97.75L34 104.25L27.5 97.75Z' fill-opacity='0.131'/%3E%3Cpath d='M51 91.25L57.5 97.75L51 104.25L44.5 97.75Z' fill-opacity='0.075'/%3E%3Cpath d='M68 91.25L74.5 97.75L68 104.25L61.5 97.75Z' fill-opacity='0.079'/%3E%3Cpath d='M85 91.25L91.5 97.75L85 104.25L78.5 97.75Z' fill-opacity='0.148'/%3E%3Cpath d='M102 91.25L108.5 97.75L102 104.25L95.5 97.75Z' fill-opacity='0.058'/%3E%3Cpath d='M8.5 99.75L15 106.25L8.5 112.75L2 106.25Z' fill-opacity='0.068'/%3E%3Cpath d='M25.5 99.75L32 106.25L25.5 112.75L19 106.25Z' fill-opacity='0.066'/%3E%3Cpath d='M42.5 99.75L49 106.25L42.5 112.75L36 106.25Z' fill-opacity='0.158'/%3E%3Cpath d='M59.5 99.75L66 106.25L59.5 112.75L53 106.25Z' fill-opacity='0.143'/%3E%3Cpath d='M76.5 99.75L83 106.25L76.5 112.75L70 106.25Z' fill-opacity='0.079'/%3E%3Cpath d='M110.5 99.75L117 106.25L110.5 112.75L104 106.25Z' fill-opacity='0.077'/%3E%3Cpath d='M17 108.25L23.5 114.75L17 121.25L10.5 114.75Z' fill-opacity='0.05'/%3E%3Cpath d='M51 108.25L57.5 114.75L51 121.25L44.5 114.75Z' fill-opacity='0.067'/%3E%3Cpath d='M68 108.25L74.5 114.75L68 121.25L61.5 114.75Z' fill-opacity='0.085'/%3E%3Cpath d='M85 108.25L91.5 114.75L85 121.25L78.5 114.75Z' fill-opacity='0.094'/%3E%3Cpath d='M25.5 116.75L32 123.25L25.5 129.75L19 123.25Z' fill-opacity='0.123'/%3E%3Cpath d='M42.5 116.75L49 123.25L42.5 129.75L36 123.25Z' fill-opacity='0.144'/%3E%3Cpath d='M93.5 116.75L100 123.25L93.5 129.75L87 123.25Z' fill-opacity='0.077'/%3E%3Cpath d='M127.5 116.75L134 123.25L127.5 129.75L121 123.25Z' fill-opacity='0.117'/%3E%3Cpath d='M34 125.25L40.5 131.75L34 138.25L27.5 131.75Z' fill-opacity='0.136'/%3E%3Cpath d='M34 -10.75L40.5 -4.25L34 2.25L27.5 -4.25Z' fill-opacity='0.136'/%3E%3Cpath d='M68 125.25L74.5 131.75L68 138.25L61.5 131.75Z' fill-opacity='0.11'/%3E%3Cpath d='M68 -10.75L74.5 -4.25L68 2.25L61.5 -4.25Z' fill-opacity='0.11'/%3E%3Cpath d='M85 125.25L91.5 131.75L85 138.25L78.5 131.75Z' fill-opacity='0.119'/%3E%3Cpath d='M85 -10.75L91.5 -4.25L85 2.25L78.5 -4.25Z' fill-opacity='0.119'/%3E%3Cpath d='M102 125.25L108.5 131.75L102 138.25L95.5 131.75Z' fill-opacity='0.131'/%3E%3Cpath d='M102 -10.75L108.5 -4.25L102 2.25L95.5 -4.25Z' fill-opacity='0.131'/%3E%3Cpath d='M119 125.25L125.5 131.75L119 138.25L112.5 131.75Z' fill-opacity='0.156'/%3E%3Cpath d='M119 -10.75L125.5 -4.25L119 2.25L112.5 -4.25Z' fill-opacity='0.156'/%3E%3Cpath d='M136 125.25L142.5 131.75L136 138.25L129.5 131.75Z' fill-opacity='0.138'/%3E%3Cpath d='M136 -10.75L142.5 -4.25L136 2.25L129.5 -4.25Z' fill-opacity='0.138'/%3E%3Cpath d='M0 125.25L6.5 131.75L0 138.25L-6.5 131.75Z' fill-opacity='0.138'/%3E%3Cpath d='M0 -10.75L6.5 -4.25L0 2.25L-6.5 -4.25Z' fill-opacity='0.138'/%3E%3C/svg%3E"),
      linear-gradient(to right, transparent 40%, #000 85%), linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
    mask-repeat: repeat, no-repeat, no-repeat; mask-size: 220px 220px, 100% 100%, 100% 100%;
    mask-position: right top, 0 0, 0 0; mask-composite: intersect, intersect;
  }
  /* scale (re-scale, Oct 6): 136px pattern = 13px diamonds on a 17px step (rows 8.5px, alternate rows offset) →
     phone 220px = 21px diamonds / 27.5px step; tablet+desktop (>=768, taller tiles) 272px = 26px / 34px. Fixed px — never scales with tile height. */
  @media (min-width: 768px) { :root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc]::before { -webkit-mask-size: 272px 272px, 100% 100%, 100% 100%; mask-size: 272px 272px, 100% 100%, 100% 100%; } }
}

/* ==========================================================================
   FEATURE COLOR CODE — Slice 2 (feature interiors). Default cream theme only. JS stamps the routed pane
   name on .ma-pane (data-pane); each feature's CARDS wear its Home tile pastel. The page, pane header,
   controls (segments, inputs, buttons) and the Journey hero stay as they were. Interior tile bars die here.
   ========================================================================== */
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="journey"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="cycles"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="production"] { --pfc: var(--fc-journey-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="trial"] { --pfc: var(--fc-blueprint-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="moneymatters"] { --pfc: var(--fc-money-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="lend"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tenants"] { --pfc: var(--fc-loans-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="bookings"] { --pfc: var(--fc-clients-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="jobs"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-tally"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-suki"] { --pfc: var(--fc-benta-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="inventory"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="suppliers"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="consign"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="assets"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-galon"] { --pfc: var(--fc-inventory-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="agenda"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="byahe"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-kalinisan"] { --pfc: var(--fc-agenda-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="devices"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="people"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="roster"] { --pfc: var(--fc-counter-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="methodology"] { --pfc: var(--fc-methods-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="calculators"] { --pfc: var(--fc-calc-bg); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="automation"] { --pfc: var(--fc-smart-bg); }
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="moneymatters"],[data-pane="lend"],[data-pane="tenants"],[data-pane="bookings"],[data-pane="jobs"],[data-pane="tubig-tally"],[data-pane="tubig-suki"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="consign"],[data-pane="assets"],[data-pane="tubig-galon"],[data-pane="agenda"],[data-pane="byahe"],[data-pane="tubig-kalinisan"],[data-pane="devices"],[data-pane="people"],[data-pane="roster"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"]) :is(.ma-tilegrid .ma-tile, .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod,
  .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day) { border-radius: 18px; }   /* background → MATTE GRADIENT recipe below */
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="moneymatters"],[data-pane="lend"],[data-pane="tenants"],[data-pane="bookings"],[data-pane="jobs"],[data-pane="tubig-tally"],[data-pane="tubig-suki"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="consign"],[data-pane="assets"],[data-pane="tubig-galon"],[data-pane="agenda"],[data-pane="byahe"],[data-pane="tubig-kalinisan"],[data-pane="devices"],[data-pane="people"],[data-pane="roster"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"]) :is(.ma-tilegrid .ma-tile, .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod,
  .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow) {
  /* inks darkened inside the pastel cards (never the bg) — >=4.5:1 on all 12 pastels: muted 5.15+, gold 4.99+,
     green 5.20+, red 5.51+, violet 5.43+ (cream values were 3.4–4.4 on the pastels) */
  --ma-muted: #665D4B; --ma-ink-soft: #665D4B; --ma-gold-deep: #7A5B12; --ma-green: #25694A; --ma-success: #25694A;
  --ma-danger: #9A3A2E; --ba-violet: #5B3FD0;
}
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="moneymatters"],[data-pane="lend"],[data-pane="tenants"],[data-pane="bookings"],[data-pane="jobs"],[data-pane="tubig-tally"],[data-pane="tubig-suki"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="consign"],[data-pane="assets"],[data-pane="tubig-galon"],[data-pane="agenda"],[data-pane="byahe"],[data-pane="tubig-kalinisan"],[data-pane="devices"],[data-pane="people"],[data-pane="roster"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"]) :is(.ma-ipon-chart [style*="#8A8474"], [style*="#7a6f57"]) { color: #665D4B !important; }   /* inline greys from JS (chart dates, 16:9 placeholder) */
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="moneymatters"],[data-pane="lend"],[data-pane="tenants"],[data-pane="bookings"],[data-pane="jobs"],[data-pane="tubig-tally"],[data-pane="tubig-suki"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="consign"],[data-pane="assets"],[data-pane="tubig-galon"],[data-pane="agenda"],[data-pane="byahe"],[data-pane="tubig-kalinisan"],[data-pane="devices"],[data-pane="people"],[data-pane="roster"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"]) .ma-tilegrid .ma-tile::before { content: none; }

/* ==========================================================================
   PREVIEW KPI PALETTE — earthy pastel cards (Angie's "Preview" mock). Separate family from --fc-*.
   Default cream theme only, Preview page only (body.ma-ov-pane without .ma-home-pane); Home, the
   other 5 themes and every value/handler/ℹ️ are untouched. Cards carry data-kpi (buildOverviewKPIs).
   Contrast (darken ink only): steps accent given #8A6D1F (3.98:1) → #7E631C; ↑/↓ lines #2E7D54 /
   #B5483A (3.9–4.3:1 on these pastels) → #296F4B / #A74235 on these cards. Net meta #6B5A48 and steps
   meta #6B5A2E derived (mock gives none). Gold ℹ️ unchanged (1.66–1.76:1 vs 2.04:1 on cream — noted).
   ========================================================================== */
:root {
  --kpi-health-bg:#EAE7E1; --kpi-health-accent:#555044;
  --kpi-sales-bg:#F8DCDA;  --kpi-sales-accent:#9B1C1C;
  --kpi-net-bg:#EFE1D1;    --kpi-net-accent:#7B4A21;
  --kpi-recv-bg:#F2DCE2;   --kpi-recv-accent:#8C2743;
  --kpi-lent-bg:#E2E2E6;   --kpi-lent-accent:#3F3F46;
  --kpi-steps-bg:#F3E7C6;  --kpi-steps-accent:#7E631C;
  --kpi-blueprint-bg:#D6E6F7; --kpi-blueprint-accent:#1E4A7A;   /* Oct 17: Blueprint card (Preview) — the old Home tile's sky blue */
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov-health .ma-hs-card,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health { --kpi-bg: var(--kpi-health-bg); --kpi-acc: var(--kpi-health-accent); --kpi-meta: #555044; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="sales"]       { --kpi-bg: var(--kpi-sales-bg); --kpi-acc: var(--kpi-sales-accent); --kpi-meta: #705050; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="net"]         { --kpi-bg: var(--kpi-net-bg);   --kpi-acc: var(--kpi-net-accent);   --kpi-meta: #6B5A48; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="receivables"] { --kpi-bg: var(--kpi-recv-bg);  --kpi-acc: var(--kpi-recv-accent);  --kpi-meta: #6E4A55; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="lent"]        { --kpi-bg: var(--kpi-lent-bg);  --kpi-acc: var(--kpi-lent-accent);  --kpi-meta: #55555E; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="steps"]       { --kpi-bg: var(--kpi-steps-bg); --kpi-acc: var(--kpi-steps-accent); --kpi-meta: #6B5A2E; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="blueprint"]   { --kpi-bg: var(--kpi-blueprint-bg); --kpi-acc: var(--kpi-blueprint-accent); --kpi-meta: #3A5578; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] { border-radius: 18px; }   /* background → MATTE GRADIENT recipe below */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health { background: var(--kpi-bg); border-radius: 18px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-l { color: var(--kpi-acc); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-s,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-cmp,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health .ma-hs-cap:not(.ma-hs-cap--red) { color: var(--kpi-meta); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-s.pos { color: #296F4B; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-s.neg { color: #A74235; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi="sales"] .ma-ovkpi-s.muted { color: #9B1C1C; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health .ma-hs-cap--red { color: #A74235; }
/* health ring: structure kept; gray-family track + hole matches the card pastel */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health .ma-hs-ring--good { background: conic-gradient(var(--ma-success-ink) var(--hs), #CFC9BD 0); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health .ma-hs-ring--ok   { background: conic-gradient(var(--ma-gold) var(--hs), #CFC9BD 0); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health .ma-hs-ring--risk { background: conic-gradient(var(--ma-danger) var(--hs), #CFC9BD 0); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-hs-card.ma-ov-health .ma-hs-ring::before { background: var(--kpi-bg); }

/* ==========================================================================
   MATTE GRADIENT + PIXEL GRAIN — Preview KPI tiles + every feature's interior cards (Angie's two mocks, Oct 8).
   COLOUR ONLY: background + box-shadow + text colour. No size / padding / margin / radius / gap / grid / font /
   DOM change (each card keeps its own border-radius rule). Default cream theme only (:root without data-theme) —
   the other 5 themes keep their current look. One recipe, driven by per-feature tokens --fc-<name>-a / -b
   (gradient stops) / -label / -ink (main text + numbers) / -sub (sublines) / -glow. Every text pair ≥4.5:1 vs
   the darker stop (b). Untouched: health-score card, Loans v2 navy flow card + .ma-l2, selected (.is-on) and navy
   tiles (they keep their navy), buttons, inputs, sheets. Warnings inside cards: #8a1f2c.
   ========================================================================== */
:root {
  --fc-sales-a:#ffe1da; --fc-sales-b:#ffbccb; --fc-sales-label:#8a1e2a; --fc-sales-ink:#2a1615; --fc-sales-sub:#6b2430; --fc-sales-glow:rgba(230,90,110,.22);
  --fc-net-a:#ffeccf; --fc-net-b:#ffcd9a; --fc-net-label:#7a3e00; --fc-net-ink:#2a1d10; --fc-net-sub:#6b3a10; --fc-net-glow:rgba(230,140,60,.22);
  --fc-recv-a:#fff5c2; --fc-recv-b:#ffdc80; --fc-recv-label:#6a4b00; --fc-recv-ink:#2a2108; --fc-recv-sub:#5c4300; --fc-recv-glow:rgba(220,170,30,.26);   /* Oct 8: Pautang na item → Money Matters yellow */
  --fc-lent-a:#fff5c2; --fc-lent-b:#ffdc80; --fc-lent-label:#6a4b00; --fc-lent-ink:#2a2108; --fc-lent-sub:#5c4300; --fc-lent-glow:rgba(220,170,30,.26);   /* Oct 8: Pautang cash → Money Matters yellow */
  --fc-steps-a:#e4f7ea; --fc-steps-b:#b7ebd9; --fc-steps-label:#165e46; --fc-steps-ink:#0f2920; --fc-steps-sub:#1f5c46; --fc-steps-glow:rgba(30,140,100,.22);   /* Oct 8: Hakbang → Journey mint */
  --fc-blueprint-a:#e4f0fb; --fc-blueprint-b:#bfdaf5; --fc-blueprint-label:#1e4a7a; --fc-blueprint-ink:#0f2236; --fc-blueprint-sub:#2b4f78; --fc-blueprint-glow:rgba(40,100,170,.22);   /* Oct 17: Blueprint → sky blue (was the Home tile's tone) */
  --fc-money-a:#fff5c2; --fc-money-b:#ffdc80; --fc-money-label:#6a4b00; --fc-money-ink:#2a2108; --fc-money-sub:#5c4300; --fc-money-glow:rgba(220,170,30,.26);
  --fc-benta-a:#d8f6ef; --fc-benta-b:#a9e6d6; --fc-benta-label:#0b5a48; --fc-benta-ink:#0b2a23; --fc-benta-sub:#0f4b3d; --fc-benta-glow:rgba(20,150,120,.24);
  --fc-inventory-a:#ece3ff; --fc-inventory-b:#d4c6fa; --fc-inventory-label:#4a3480; --fc-inventory-ink:#241640; --fc-inventory-sub:#4a3480; --fc-inventory-glow:rgba(120,80,220,.22);
  --fc-clients-a:#ffe3ea; --fc-clients-b:#ffcdb8; --fc-clients-label:#6b2a30; --fc-clients-ink:#3a1418; --fc-clients-sub:#6b2a30; --fc-clients-glow:rgba(230,100,110,.22);
  --fc-results-a:#dceaff; --fc-results-b:#c3ccfb; --fc-results-label:#1f3a8a; --fc-results-ink:#14204a; --fc-results-sub:#23356e; --fc-results-glow:rgba(80,110,230,.22);
  --fc-agenda-a:#e1f0ff; --fc-agenda-b:#b9dcf7; --fc-agenda-label:#13517d; --fc-agenda-ink:#0c2a42; --fc-agenda-sub:#13517d; --fc-agenda-glow:rgba(40,130,210,.22);
  --fc-journey-a:#e4f7ea; --fc-journey-b:#b7ebd9; --fc-journey-label:#165e46; --fc-journey-ink:#0f2920; --fc-journey-sub:#1f5c46; --fc-journey-glow:rgba(143,195,177,.22);
  --fc-produksyon-a:#eaf7e4; --fc-produksyon-b:#cee19d; --fc-produksyon-label:#435514; --fc-produksyon-ink:#21290f; --fc-produksyon-sub:#44551d; --fc-produksyon-glow:rgba(166,185,117,.22);
  --fc-trial-a:#e4f1fd; --fc-trial-b:#aff2fa; --fc-trial-label:#185f67; --fc-trial-ink:#0f2629; --fc-trial-sub:#1f565c; --fc-trial-glow:rgba(135,202,210,.22);
  --fc-loans-a:#feeae0; --fc-loans-b:#feb8b4; --fc-loans-label:#671c18; --fc-loans-ink:#29100f; --fc-loans-sub:#5c211f; --fc-loans-glow:rgba(214,144,140,.22);
  --fc-rentals-a:#feeae0; --fc-rentals-b:#fee2a8; --fc-rentals-label:#674e18; --fc-rentals-ink:#29200f; --fc-rentals-sub:#5c481f; --fc-rentals-glow:rgba(214,186,128,.22);
  --fc-people-a:#fde8ec; --fc-people-b:#f9b6dc; --fc-people-label:#671844; --fc-people-ink:#290f1d; --fc-people-sub:#5c1f41; --fc-people-glow:rgba(209,142,180,.22);
  --fc-roster-a:#fde8e8; --fc-roster-b:#eec0a8; --fc-roster-label:#673318; --fc-roster-ink:#29180f; --fc-roster-sub:#5c341f; --fc-roster-glow:rgba(198,152,128,.22);
  --fc-counter-a:#fde8f7; --fc-counter-b:#f0b4f6; --fc-counter-label:#601867; --fc-counter-ink:#260f29; --fc-counter-sub:#561f5c; --fc-counter-glow:rgba(200,140,206,.22);
  --fc-methods-a:#ebf3de; --fc-methods-b:#c1e6b3; --fc-methods-label:#295b15; --fc-methods-ink:#16290f; --fc-methods-sub:#2f5c1f; --fc-methods-glow:rgba(153,190,139,.22);
  --fc-calc-a:#f3e9d2; --fc-calc-b:#e2e49a; --fc-calc-label:#545514; --fc-calc-ink:#28290f; --fc-calc-sub:#54551d; --fc-calc-glow:rgba(186,188,114,.22);
  --fc-smart-a:#f7e7f7; --fc-smart-b:#ebbbdb; --fc-smart-label:#67184d; --fc-smart-ink:#290f20; --fc-smart-sub:#5c1f47; --fc-smart-glow:rgba(195,147,179,.22);
  --fc-float-a:#fcead5; --fc-float-b:#faf69f; --fc-float-label:#636017; --fc-float-ink:#29280f; --fc-float-sub:#5c591f; --fc-float-glow:rgba(210,206,119,.22);
  --fc-jobs-a:#ddf5ec; --fc-jobs-b:#aae1b8; --fc-jobs-label:#145726; --fc-jobs-ink:#0f2916; --fc-jobs-sub:#1d562c; --fc-jobs-glow:rgba(130,185,144,.22);
  --fc-consign-a:#eae9fc; --fc-consign-b:#c8ccd7; --fc-consign-label:#182f67; --fc-consign-ink:#0f1729; --fc-consign-sub:#1f305c; --fc-consign-glow:rgba(160,164,175,.22);
  --fc-assets-a:#fcfae9; --fc-assets-b:#e6f7b2; --fc-assets-label:#506217; --fc-assets-ink:#22290f; --fc-assets-sub:#4d5c1f; --fc-assets-glow:rgba(190,207,138,.22);
  --fc-byahe-a:#e6edfe; --fc-byahe-b:#8cd1f9; --fc-byahe-label:#184a67; --fc-byahe-ink:#0f1f29; --fc-byahe-sub:#1f455c; --fc-byahe-glow:rgba(100,169,209,.22);
  --fc-tubig-a:#ddf3f5; --fc-tubig-b:#a2cff1; --fc-tubig-label:#184567; --fc-tubig-ink:#0f1e29; --fc-tubig-sub:#1f425c; --fc-tubig-glow:rgba(122,167,201,.22);
}
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="moneymatters"] { --fa: var(--fc-money-a); --fb: var(--fc-money-b); --fl: var(--fc-money-label); --fi: var(--fc-money-ink); --fs: var(--fc-money-sub); --fg: var(--fc-money-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="operations"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="money"] { --fa: var(--fc-benta-a); --fb: var(--fc-benta-b); --fl: var(--fc-benta-label); --fi: var(--fc-benta-ink); --fs: var(--fc-benta-sub); --fg: var(--fc-benta-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="inventory"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="suppliers"] { --fa: var(--fc-inventory-a); --fb: var(--fc-inventory-b); --fl: var(--fc-inventory-label); --fi: var(--fc-inventory-ink); --fs: var(--fc-inventory-sub); --fg: var(--fc-inventory-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="bookings"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-suki"] { --fa: var(--fc-clients-a); --fb: var(--fc-clients-b); --fl: var(--fc-clients-label); --fi: var(--fc-clients-ink); --fs: var(--fc-clients-sub); --fg: var(--fc-clients-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="summary"] { --fa: var(--fc-results-a); --fb: var(--fc-results-b); --fl: var(--fc-results-label); --fi: var(--fc-results-ink); --fs: var(--fc-results-sub); --fg: var(--fc-results-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="agenda"] { --fa: var(--fc-agenda-a); --fb: var(--fc-agenda-b); --fl: var(--fc-agenda-label); --fi: var(--fc-agenda-ink); --fs: var(--fc-agenda-sub); --fg: var(--fc-agenda-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="journey"] { --fa: var(--fc-journey-a); --fb: var(--fc-journey-b); --fl: var(--fc-journey-label); --fi: var(--fc-journey-ink); --fs: var(--fc-journey-sub); --fg: var(--fc-journey-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="cycles"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="production"] { --fa: var(--fc-produksyon-a); --fb: var(--fc-produksyon-b); --fl: var(--fc-produksyon-label); --fi: var(--fc-produksyon-ink); --fs: var(--fc-produksyon-sub); --fg: var(--fc-produksyon-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="trial"] { --fa: var(--fc-trial-a); --fb: var(--fc-trial-b); --fl: var(--fc-trial-label); --fi: var(--fc-trial-ink); --fs: var(--fc-trial-sub); --fg: var(--fc-trial-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="lend"] { --fa: var(--fc-loans-a); --fb: var(--fc-loans-b); --fl: var(--fc-loans-label); --fi: var(--fc-loans-ink); --fs: var(--fc-loans-sub); --fg: var(--fc-loans-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tenants"] { --fa: var(--fc-rentals-a); --fb: var(--fc-rentals-b); --fl: var(--fc-rentals-label); --fi: var(--fc-rentals-ink); --fs: var(--fc-rentals-sub); --fg: var(--fc-rentals-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="people"] { --fa: var(--fc-people-a); --fb: var(--fc-people-b); --fl: var(--fc-people-label); --fi: var(--fc-people-ink); --fs: var(--fc-people-sub); --fg: var(--fc-people-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="roster"] { --fa: var(--fc-roster-a); --fb: var(--fc-roster-b); --fl: var(--fc-roster-label); --fi: var(--fc-roster-ink); --fs: var(--fc-roster-sub); --fg: var(--fc-roster-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="devices"] { --fa: var(--fc-counter-a); --fb: var(--fc-counter-b); --fl: var(--fc-counter-label); --fi: var(--fc-counter-ink); --fs: var(--fc-counter-sub); --fg: var(--fc-counter-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="methodology"] { --fa: var(--fc-methods-a); --fb: var(--fc-methods-b); --fl: var(--fc-methods-label); --fi: var(--fc-methods-ink); --fs: var(--fc-methods-sub); --fg: var(--fc-methods-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="calculators"] { --fa: var(--fc-calc-a); --fb: var(--fc-calc-b); --fl: var(--fc-calc-label); --fi: var(--fc-calc-ink); --fs: var(--fc-calc-sub); --fg: var(--fc-calc-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="automation"] { --fa: var(--fc-smart-a); --fb: var(--fc-smart-b); --fl: var(--fc-smart-label); --fi: var(--fc-smart-ink); --fs: var(--fc-smart-sub); --fg: var(--fc-smart-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="float"] { --fa: var(--fc-float-a); --fb: var(--fc-float-b); --fl: var(--fc-float-label); --fi: var(--fc-float-ink); --fs: var(--fc-float-sub); --fg: var(--fc-float-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="jobs"] { --fa: var(--fc-jobs-a); --fb: var(--fc-jobs-b); --fl: var(--fc-jobs-label); --fi: var(--fc-jobs-ink); --fs: var(--fc-jobs-sub); --fg: var(--fc-jobs-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="consign"] { --fa: var(--fc-consign-a); --fb: var(--fc-consign-b); --fl: var(--fc-consign-label); --fi: var(--fc-consign-ink); --fs: var(--fc-consign-sub); --fg: var(--fc-consign-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="assets"] { --fa: var(--fc-assets-a); --fb: var(--fc-assets-b); --fl: var(--fc-assets-label); --fi: var(--fc-assets-ink); --fs: var(--fc-assets-sub); --fg: var(--fc-assets-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="byahe"] { --fa: var(--fc-byahe-a); --fb: var(--fc-byahe-b); --fl: var(--fc-byahe-label); --fi: var(--fc-byahe-ink); --fs: var(--fc-byahe-sub); --fg: var(--fc-byahe-glow); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-galon"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-tally"],
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="tubig-kalinisan"] { --fa: var(--fc-tubig-a); --fb: var(--fc-tubig-b); --fl: var(--fc-tubig-label); --fi: var(--fc-tubig-ink); --fs: var(--fc-tubig-sub); --fg: var(--fc-tubig-glow); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="sales"] { --fa: var(--fc-sales-a); --fb: var(--fc-sales-b); --fl: var(--fc-sales-label); --fi: var(--fc-sales-ink); --fs: var(--fc-sales-sub); --fg: var(--fc-sales-glow); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="net"] { --fa: var(--fc-net-a); --fb: var(--fc-net-b); --fl: var(--fc-net-label); --fi: var(--fc-net-ink); --fs: var(--fc-net-sub); --fg: var(--fc-net-glow); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="receivables"] { --fa: var(--fc-recv-a); --fb: var(--fc-recv-b); --fl: var(--fc-recv-label); --fi: var(--fc-recv-ink); --fs: var(--fc-recv-sub); --fg: var(--fc-recv-glow); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="lent"] { --fa: var(--fc-lent-a); --fb: var(--fc-lent-b); --fl: var(--fc-lent-label); --fi: var(--fc-lent-ink); --fs: var(--fc-lent-sub); --fg: var(--fc-lent-glow); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="steps"] { --fa: var(--fc-steps-a); --fb: var(--fc-steps-b); --fl: var(--fc-steps-label); --fi: var(--fc-steps-ink); --fs: var(--fc-steps-sub); --fg: var(--fc-steps-glow); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="blueprint"] { --fa: var(--fc-blueprint-a); --fb: var(--fc-blueprint-b); --fl: var(--fc-blueprint-label); --fi: var(--fc-blueprint-ink); --fs: var(--fc-blueprint-sub); --fg: var(--fc-blueprint-glow); }
/* the recipe */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi],
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) {
  background:
    repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(135deg, var(--fa) 0%, var(--fb) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px var(--fg);
}
/* inks — main text inherits --fi; sublines via the muted tokens; labels + numbers set explicitly; semantic green/red darkened to pass on b */
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) { color: var(--fi); --ma-muted: var(--fs); --ma-ink-soft: var(--fs); --ma-green: #1B5539; --ma-success: #1B5539; --ma-danger: #8a1f2c; --ma-danger-ink: #8a1f2c; }
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) :is(label:not(.ma-mlog-help), .ma-rcard-lbl, .ma-th-lbl, .ma-chart-lbl, .ma-gabay-num, .ma-bk-upday, .ma-lg, .ma-th-val.ma-th-ipon) { color: var(--fl); }
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) :is(.ma-mlog-title, .ma-collapse-title, .ma-lbl, .ma-orow-title, .ma-oline, .ma-gabay-title, .ma-rcard-val:not(.pos):not(.neg), .ma-th-val:not(.pos):not(.neg):not(.ma-th-ipon), .ma-tile-txt > b, .ma-bk-uptime, .ma-orow-amt--dark) { color: var(--fi); }
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) :is(.ma-tile-hint, .ma-mlog-help, .ma-mlog-empty, .ma-gabay-body, .ma-rcard-of, .ma-gate-sub, .ma-hs-bigcap) { color: var(--fs); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-l { color: var(--fl); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-v { color: var(--fi); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp), :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi][data-kpi="sales"] .ma-ovkpi-s.muted { color: var(--fs); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-s.pos { color: #1B5539; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ovkpi[data-kpi] .ma-ovkpi-s.neg { color: #8a1f2c; }

:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) .pos { color: #1B5539; }   /* hard-coded greens (e.g. take-home #1C6B47) were 4.1:1 on the darker stop */
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) .neg { color: #8a1f2c; }
:root:not([data-theme]) body.macct-page .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-orow, .ma-mrow, .ma-rcard, .ma-takehome, .ma-chart, .ma-flt-wcard):not(.ma-results-health *):not(.ma-l2 *):not(:has(.ma-hs-card)) :is(.ma-chart-net--dash, .ma-bar-dash) { color: var(--fs); }   /* "–" no-data placeholders (were #E4D9C0, 1.1:1) */

/* ==========================================================================
   Inventory interior — compact Stock & Paninda cards (~20% shorter, no clipping). Inventory pane ONLY
   (.ma-pane[data-tone="inv"]); .ma-inv-grid/.ma-inv-tile are shared with the Money Matters, Calculators,
   pp and Bookings grids, which stay as they are. Was: grid-auto-rows 1fr (every row as tall as the
   tallest card in the grid — 122px EN / 128px TL) + 12px vertical padding. Now each row sizes to its
   own tallest card (both cards in a row still equal), bottom padding 12→4px (top unchanged), min-height 98px; a card
   with more text still grows. Fonts, icons, hint clamp, ℹ️/Off/badge anchoring, gaps, widths unchanged.
   ========================================================================== */
body.macct-page .ma-pane[data-tone="inv"] .ma-inv-grid { grid-auto-rows: auto; }
body.macct-page .ma-pane[data-tone="inv"] .ma-inv-grid .ma-inv-tile { padding-bottom: 4px; min-height: 98px; }   /* top padding stays 12px → icon/title/Off/ℹ️ keep their exact positions; only the empty space below the subtitle shrinks */

/* ==========================================================================
   Loans v2 "Pautang" (DARK — entitlement lendV2 ← NP_LEND_V2). Every rule is scoped to .ma-l2, which only
   the v2 renderer emits → flag off, nothing here matches. Theme-safe: page surfaces use the --ma-* tokens;
   the money-flow card is fixed navy in every theme. All text pairs measured ≥ 4.5:1.
   ========================================================================== */
body.macct-page .ma-l2 { --l2-navy: #10223f; --l2-navy-deep: #0A1424; --l2-gold: #b8902f; --l2-muted: color-mix(in srgb, var(--ma-ink) 78%, var(--ma-card));
  display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; font-family: var(--ma-sans); color: var(--ma-ink); }
body.macct-page .ma-l2-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
body.macct-page .ma-l2-back { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); font-size: 28px; line-height: 1; padding: 0 0 4px; cursor: pointer; }
body.macct-page .ma-l2-ttl { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-l2-sub { display: flex; align-items: center; margin-top: 2px; }
body.macct-page .ma-l2-h { font-family: var(--ma-serif); font-size: 26px; font-weight: 600; line-height: 1.1; margin: 0; color: var(--ma-ink); }
body.macct-page .ma-l2-date { font-size: 13px; color: var(--l2-muted); }
body.macct-page .ma-l2 .ma-btn.ma-l2-new { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--l2-gold); color: var(--l2-navy-deep); font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: none; }
body.macct-page .ma-l2 .ma-btn.ma-l2-new:disabled { opacity: .55; }
body.macct-page .ma-l2 > .ma-lend-tabs { margin: 0; }
/* Card 1 — money flow (navy) */
body.macct-page .ma-l2-flow { background: var(--l2-navy); color: var(--ma-navy-ink); border-radius: var(--ma-r-lg); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--ma-shadow-card); }
body.macct-page .ma-l2-flow p { margin: 0; }
body.macct-page .ma-l2-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ma-gold-hi); }
body.macct-page .ma-l2-lentl { font-size: 14px; color: var(--ma-navy-muted); margin-top: 4px !important; }
body.macct-page .ma-l2-lent { font-family: var(--ma-serif); font-size: 38px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ma-navy-ink); }
body.macct-page .ma-l2-cap { font-size: 14px; color: var(--ma-navy-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-bar { height: 10px; border-radius: 999px; background: var(--l2-gold); overflow: hidden; margin: 8px 0 4px; }
body.macct-page .ma-l2-bar-in { display: block; height: 100%; background: #3FA36E; border-radius: 999px 0 0 999px; }
body.macct-page .ma-l2-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-l2-box { background: var(--ma-navy-card); border-radius: var(--ma-r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-left: 4px solid #3FA36E; }
body.macct-page .ma-l2-box--out { border-left-color: var(--l2-gold); }
body.macct-page .ma-l2-boxl { font-size: 13px; color: var(--ma-navy-muted); }
body.macct-page .ma-l2-boxv { font-family: var(--ma-serif); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ma-navy-pos); }
body.macct-page .ma-l2-box--out .ma-l2-boxv { color: var(--ma-gold-hi); }
body.macct-page .ma-l2-boxs { font-size: 12.5px; color: var(--ma-navy-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
body.macct-page .ma-l2-tile { border: 1px solid var(--ma-navy-line); border-radius: var(--ma-r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.macct-page .ma-l2-tilel { font-size: 12.5px; color: var(--ma-navy-muted); font-weight: 600; }
body.macct-page .ma-l2-tilev { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ma-navy-ink); }
body.macct-page .ma-l2-tile--late .ma-l2-tilev { color: var(--ma-navy-neg); }
body.macct-page .ma-l2-tiles2 { font-size: 12px; color: var(--ma-navy-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
body.macct-page .ma-l2-note { font-size: 12.5px; color: var(--ma-navy-muted); margin-top: 4px !important; }
/* "Suriin bago magpautang" */
body.macct-page .ma-l2-check { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-lg); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-l2-checkl { font-family: var(--ma-serif); font-size: 18px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-l2-q { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; font: 16px var(--ma-sans); color: var(--ma-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: var(--ma-r-sm); }
body.macct-page .ma-l2-q::placeholder { color: var(--l2-muted); }
body.macct-page .ma-l2-q:focus-visible { outline: 3px solid var(--l2-gold); outline-offset: 1px; }
body.macct-page .ma-l2-results:empty { display: none; }
body.macct-page .ma-l2-results { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-l2-none, body.macct-page .ma-l2-privacy { margin: 0; font-size: 13.5px; color: var(--l2-muted); }
body.macct-page .ma-l2-none { color: var(--ma-ink); font-weight: 600; }
/* Card 2 — who owes you */
body.macct-page .ma-l2-list { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-lg); padding: 14px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-l2-listh { font-family: var(--ma-serif); font-size: 18px; font-weight: 600; margin: 0 4px 4px; color: var(--ma-ink); }
body.macct-page .ma-l2-rows { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-l2-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; min-height: 64px; box-sizing: border-box; padding: 10px 12px; text-align: left; font: inherit; color: var(--ma-ink); background: var(--ma-paper); border: 1.5px solid var(--ma-line-soft); border-radius: var(--ma-r-md); cursor: pointer; }
body.macct-page .ma-l2-row:focus-visible { outline: 3px solid var(--l2-gold); outline-offset: 1px; }
body.macct-page .ma-l2-row--today { background: color-mix(in srgb, var(--ma-gold) 16%, var(--ma-card)); border-color: color-mix(in srgb, var(--ma-gold) 55%, var(--ma-card)); }
body.macct-page .ma-l2-row--late { background: color-mix(in srgb, var(--ma-danger) 9%, var(--ma-card)); border-color: var(--ma-danger); }
body.macct-page .ma-l2-row--late .ma-l2-rstat { color: var(--ma-danger-ink); font-weight: 700; }
body.macct-page .ma-l2-row--cancelled .ma-l2-rname { text-decoration: line-through; color: var(--l2-muted); }
body.macct-page .ma-l2-rmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.macct-page .ma-l2-rname { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
body.macct-page .ma-l2-rstat { font-size: 13.5px; color: var(--l2-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-rleft { display: flex; flex-direction: column; align-items: flex-end; }
body.macct-page .ma-l2-rleftv { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-rleftl { font-size: 12px; color: var(--l2-muted); }
body.macct-page .ma-l2-chev { font-size: 22px; color: var(--l2-muted); line-height: 1; }
body.macct-page .ma-l2-score { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--ma-serif); line-height: 1; flex: none; }
body.macct-page .ma-l2-score b { font-size: 17px; font-weight: 700; }
body.macct-page .ma-l2-score small { font: 700 9px/1 var(--ma-sans); letter-spacing: .06em; margin-top: 1px; }
body.macct-page .ma-l2-score--good { background: #2E7D54; color: #fff; }
body.macct-page .ma-l2-score--mid { background: var(--ma-gold); color: var(--l2-navy-deep); }
body.macct-page .ma-l2-score--bad { background: #B5483A; color: #fff; }
body.macct-page .ma-l2-score--new { border: 2px dashed color-mix(in srgb, var(--ma-ink) 45%, var(--ma-card)); color: var(--ma-ink); background: transparent; }
body.macct-page .ma-l2-fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: 4px; padding: 8px 6px; font: 600 14px var(--ma-sans); color: var(--ma-ink); background: none; border: 0; border-top: 1px dashed var(--ma-line); text-align: left; cursor: pointer; }
body.macct-page .ma-l2-fold[aria-expanded="true"] .ma-l2-foldi { transform: rotate(180deg); }
body.macct-page .ma-l2-foldi { transition: transform .2s var(--ma-ease-out); }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-l2-foldi { transition: none; } }
body.macct-page .ma-l2-done[hidden] { display: none; }
body.macct-page .ma-l2-detail { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-lg); padding: 14px; }
@media (min-width: 768px) {
  body.macct-page .ma-l2-lent { font-size: 44px; }
  body.macct-page .ma-l2-flow { padding: 22px 22px 20px; }
}
/* Loans v2 — Screen 2 borrower kard · Screen 3 score box · history · Screen 4 results · new-loan score card */
body.macct-page .ma-l2-detail { display: flex; flex-direction: column; gap: 12px; }
body.macct-page .ma-l2-detail > .ma-lend-back { align-self: flex-start; min-height: 44px; }
body.macct-page .ma-l2-sech { margin: 6px 0 2px; font: 700 12.5px var(--ma-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--l2-muted); }
body.macct-page .ma-l2-kard { background: var(--ma-paper); border: 1.5px solid var(--ma-line); border-radius: var(--ma-r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-l2-kard p { margin: 0; }
body.macct-page .ma-l2-kard--late { border: 2.5px solid var(--ma-danger); }
body.macct-page .ma-l2-kname { font-family: var(--ma-serif); font-size: 28px; font-weight: 600; line-height: 1.1; margin: 0; color: var(--ma-ink); overflow-wrap: anywhere; }
body.macct-page .ma-l2-ksub, body.macct-page .ma-l2-kscheme, body.macct-page .ma-l2-kterms { font-size: 14px; color: var(--l2-muted); }
body.macct-page .ma-l2-kterms { color: var(--ma-ink); }
body.macct-page .ma-l2-banner { background: #B5483A; color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1.35; border-radius: var(--ma-r-sm); padding: 10px 12px; }
body.macct-page .ma-l2-kpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-l2-kpair > div { background: var(--ma-card); border: 1px solid var(--ma-line-soft); border-radius: var(--ma-r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-l2-kpair span { font-size: 13px; color: var(--l2-muted); }
body.macct-page .ma-l2-kpair b { font-family: var(--ma-serif); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
body.macct-page .ma-l2-hbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
body.macct-page .ma-l2-hb { display: flex; flex-direction: column; gap: 2px; min-height: 72px; box-sizing: border-box; padding: 8px 10px; border-radius: var(--ma-r-sm); border: 1.5px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); text-align: left; font: inherit; }
body.macct-page .ma-l2 .ma-btn.ma-l2-hb { width: auto; margin: 0; box-shadow: none; cursor: pointer; align-items: flex-start; justify-content: flex-start; }
body.macct-page .ma-l2-hbk { font-size: 12.5px; color: var(--l2-muted); }
body.macct-page .ma-l2-hba { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-hbs2 { font-size: 12.5px; font-weight: 700; }
body.macct-page .ma-l2-hb--paid { background: var(--ma-success-tint); border-color: color-mix(in srgb, var(--ma-success) 55%, var(--ma-card)); }
body.macct-page .ma-l2-hb--paid .ma-l2-hbs2, body.macct-page .ma-l2-hb--part .ma-l2-hbs2 { color: var(--ma-success-ink); }
body.macct-page .ma-l2-hb--part { background: var(--ma-success-tint); border-style: dashed; border-color: var(--ma-success); }
body.macct-page .ma-l2 .ma-btn.ma-l2-hb--due { background: color-mix(in srgb, var(--ma-gold) 22%, var(--ma-card)); border: 2px solid var(--ma-gold-deep); color: var(--ma-ink); }
body.macct-page .ma-l2 .ma-btn.ma-l2-hb--miss { background: #B5483A; border: 2px solid #B5483A; color: #fff; }   /* fixed brick red: white text 5.3:1 in every theme */
body.macct-page .ma-l2 .ma-btn.ma-l2-hb--miss .ma-l2-hbk { color: #fff; }
body.macct-page .ma-l2-hb--up { border-style: dashed; background: transparent; }
body.macct-page .ma-l2-hb--up .ma-l2-hbs2 { color: var(--l2-muted); font-weight: 600; }
body.macct-page .ma-l2-hb--void { border-style: dashed; background: transparent; }
body.macct-page .ma-l2-hb--void .ma-l2-hbs2, body.macct-page .ma-l2-hb--void .ma-l2-hba { color: var(--l2-muted); text-decoration: line-through; }
body.macct-page .ma-l2 .ma-btn.ma-l2-hb:disabled { opacity: .55; cursor: not-allowed; }
body.macct-page .ma-l2-sq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
body.macct-page .ma-l2-sqi { aspect-ratio: 1; border-radius: 4px; border: 1.5px solid var(--ma-line); }
body.macct-page .ma-l2-sqi--paid, body.macct-page .ma-l2-sqi--part { background: var(--ma-success); border-color: var(--ma-success); }
body.macct-page .ma-l2-sqi--due { background: var(--ma-gold); border-color: var(--ma-gold-deep); }
body.macct-page .ma-l2-sqi--miss { background: var(--ma-danger); border-color: var(--ma-danger); }
body.macct-page .ma-l2-sqi--up, body.macct-page .ma-l2-sqi--void { border-style: dashed; }
body.macct-page .ma-l2-sqcap { font-size: 13.5px; font-weight: 600; }
body.macct-page .ma-l2-kfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--ma-line-soft); font-size: 14px; color: var(--l2-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-kleft { font-family: var(--ma-serif); font-size: 20px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-l2-acts { margin-top: 4px; }
body.macct-page .ma-l2-acts .ma-btn { min-height: 44px; }
body.macct-page .ma-l2-cancelbox[hidden], body.macct-page .ma-l2-paylog .ma-lend-pays[hidden] { display: none; }
body.macct-page .ma-l2-scorebox, body.macct-page .ma-l2-hist, body.macct-page .ma-l2-paylog { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-lg); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-l2-scorehead, body.macct-page .ma-l2-reshead { display: flex; align-items: center; gap: 12px; }
body.macct-page .ma-l2-scoreband { display: flex; flex-direction: column; gap: 2px; }
body.macct-page .ma-l2-scoreband b { font-family: var(--ma-serif); font-size: 20px; font-weight: 600; }
body.macct-page .ma-l2-scoreband span { font-size: 13.5px; color: var(--l2-muted); }
body.macct-page .ma-l2-parts { display: flex; flex-direction: column; }
body.macct-page .ma-l2-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l p" "d p"; column-gap: 12px; padding: 8px 0; border-top: 1px solid var(--ma-line-soft); }
body.macct-page .ma-l2-partl { grid-area: l; font-weight: 700; font-size: 14.5px; }
body.macct-page .ma-l2-partd { grid-area: d; font-size: 13px; color: var(--l2-muted); }
body.macct-page .ma-l2-partp { grid-area: p; align-self: center; font-family: var(--ma-serif); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-partp small { font: 600 12px var(--ma-sans); color: var(--l2-muted); }
body.macct-page .ma-l2-part--total { border-top: 2px solid var(--ma-line); }
body.macct-page .ma-l2-advice { margin: 0; font-size: 13.5px; color: var(--ma-ink); font-style: italic; }
body.macct-page .ma-l2-hgrp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--ma-line); font-size: 14px; }
body.macct-page .ma-l2-hgrp span { color: var(--l2-muted); }
body.macct-page .ma-l2-hrow { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.4fr); gap: 8px; padding: 6px 0 6px 10px; font-size: 13.5px; border-left: 4px solid var(--ma-line); font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-hrow > span:last-child { text-align: right; }
body.macct-page .ma-l2-hrow--on { border-left-color: var(--ma-success); }
body.macct-page .ma-l2-hrow--late { border-left-color: var(--ma-gold-deep); }
body.macct-page .ma-l2-hrow--miss { border-left-color: var(--ma-danger); }
body.macct-page .ma-l2-hrow--miss > span:last-child { color: var(--ma-danger-ink); font-weight: 700; }
body.macct-page .ma-l2-hrow--wait > span:last-child { color: var(--l2-muted); }
body.macct-page .ma-l2-htotal { margin: 6px 0 0; font-weight: 700; font-size: 14px; }
body.macct-page .ma-l2-paylog .ma-l2-fold { margin: 0; border: 0; }
body.macct-page .ma-l2-res { border: 1.5px solid var(--ma-line); border-radius: var(--ma-r-md); background: var(--ma-paper); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
body.macct-page .ma-l2-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.macct-page .ma-l2-fact { background: var(--ma-card); border-radius: var(--ma-r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
body.macct-page .ma-l2-fact span { font-size: 12.5px; color: var(--l2-muted); }
body.macct-page .ma-l2-fact b { font-size: 16px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-owebox { margin: 0; background: var(--ma-danger-tint); border: 1.5px solid var(--ma-danger); color: var(--ma-danger-ink); font-weight: 700; font-size: 14px; border-radius: var(--ma-r-sm); padding: 8px 10px; }
body.macct-page .ma-l2-resbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-l2-btn2 { min-height: 44px; border-radius: 999px; font: 700 15px var(--ma-sans); border: 1.5px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); cursor: pointer; }
body.macct-page .ma-l2 .ma-btn.ma-l2-lendto { margin: 0; width: auto; background: var(--l2-gold); border-color: var(--l2-gold); color: var(--l2-navy-deep); box-shadow: none; }
body.macct-page .ma-l2-sheetscore { --l2-muted: color-mix(in srgb, var(--ma-ink) 78%, var(--ma-card)); --l2-navy-deep: #0A1424; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 10px; padding: 10px 12px; border: 1.5px solid var(--ma-line); border-radius: var(--ma-r-md); background: var(--ma-paper); }
body.macct-page .ma-l2-sheetscore[hidden], body.macct-page .ma-l2-sheetadvice[hidden] { display: none; }
body.macct-page .ma-lend-release .ma-lend-foot:has(.ma-l2-sheetadvice:not([hidden])) { flex-wrap: wrap; }
body.macct-page .ma-lend-release .ma-l2-sheetadvice { flex: 1 0 100%; margin: 0; text-align: center; }
body.macct-page .ma-l2 .ma-btn.ma-btn-primary.ma-lend-dbayad { color: var(--l2-navy-deep); }   /* gold gradient: deep navy ≥5.4:1 (cream text was ~3.2:1) — v2 only */
body.macct-page .ma-l2-detail .ma-lend-note { color: var(--l2-muted); }
/* Loans v2 C3 — "Paalalahanan ngayon" card (top of the Pautang pane; nothing renders when the list is empty) */
body.macct-page .ma-l2-rem { background: var(--ma-card); border: 1.5px solid var(--l2-gold); border-radius: var(--ma-r-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
body.macct-page .ma-l2-remh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-family: var(--ma-serif); font-size: 19px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-l2-remn { font: 700 14px var(--ma-sans); color: var(--ma-ink); background: color-mix(in srgb, var(--ma-gold) 22%, var(--ma-card)); border-radius: 999px; padding: 3px 10px; }
body.macct-page .ma-l2-remg { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-l2-remgh { margin: 0; font: 700 12.5px var(--ma-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--l2-muted); }
body.macct-page .ma-l2-remrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--ma-line-soft); border-radius: var(--ma-r-md); background: var(--ma-paper); }
body.macct-page .ma-l2-remmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 160px; }
body.macct-page .ma-l2-remmain b { font-size: 16px; overflow-wrap: anywhere; }
body.macct-page .ma-l2-remmain span { font-size: 13.5px; color: var(--l2-muted); font-variant-numeric: tabular-nums; }
body.macct-page .ma-l2-rembtns { display: flex; gap: 8px; flex: 0 0 auto; }
body.macct-page .ma-l2 .ma-btn.ma-l2-send, body.macct-page .ma-l2 .ma-btn.ma-l2-remdone { min-height: 44px; min-width: 44px; width: auto; margin: 0; padding: 0 14px; border-radius: 999px; font: 700 14.5px var(--ma-sans); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body.macct-page .ma-l2 .ma-btn.ma-l2-send { background: var(--l2-gold); border: 0; color: var(--l2-navy-deep); }
body.macct-page .ma-l2 .ma-btn.ma-l2-remdone { background: transparent; border: 1.5px solid var(--ma-line); color: var(--ma-ink); }
body.macct-page .ma-l2-remrow.is-done { background: var(--ma-success-tint); border-color: color-mix(in srgb, var(--ma-success) 50%, var(--ma-card)); }
body.macct-page .ma-l2-remrow.is-done .ma-btn.ma-l2-remdone { background: #2E7D54; border-color: #2E7D54; color: #fff; }
body.macct-page .ma-l2-remnote { margin: 0; font-size: 13px; color: var(--l2-muted); }
/* Oct 8 — lapsed owner: the reminders list stays, Send / ✓ give way to one Renew line (opens the subscribe sheet) */
body.macct-page .ma-l2-remlock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
body.macct-page .ma-l2-remlocktxt { margin: 0; flex: 1 1 200px; font-size: 14px; font-weight: 600; color: var(--ma-ink); }
body.macct-page .ma-l2 .ma-btn.ma-l2-remrenew { flex: 0 0 auto; min-height: 44px; padding: 0 18px; background: var(--l2-gold); color: var(--l2-navy-deep); border: 0; box-shadow: none; }   /* the pane's gold CTA (= + Bagong pautang): navy on gold ≥4.5:1 — the lock-row white-on-gold is 3.4:1 */
/* Loans v2 D2 — "Paalala tuwing 7am" switch (same device push subscription as booking alerts) */
body.macct-page .ma-l2-pushslot[hidden] { display: none; }
body.macct-page .ma-l2-push { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 14px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: var(--ma-r-md); }
body.macct-page .ma-l2-pushtxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.macct-page .ma-l2-pushtxt b { font-size: 15px; color: var(--ma-ink); }
body.macct-page .ma-l2-pushtxt span { font-size: 13px; color: var(--l2-muted); }
body.macct-page .ma-l2 .ma-btn.ma-l2-switch { flex: none; position: relative; width: 60px; min-width: 60px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
body.macct-page .ma-l2-switch::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 30px; transform: translateY(-50%); border-radius: 999px; background: color-mix(in srgb, var(--ma-ink) 55%, var(--ma-card)); transition: background .2s var(--ma-ease-out); }
body.macct-page .ma-l2-switch[aria-checked="true"]::before { background: #2E7D54; }
body.macct-page .ma-l2-knob { position: absolute; top: 50%; left: 8px; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s var(--ma-ease-out); }
body.macct-page .ma-l2-switch[aria-checked="true"] .ma-l2-knob { left: 30px; }
body.macct-page .ma-l2-switch:focus-visible { outline: 3px solid var(--l2-gold); outline-offset: 1px; border-radius: 999px; }
body.macct-page .ma-l2 .ma-btn.ma-l2-switch:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-l2-switch::before, body.macct-page .ma-l2-knob { transition: none; } }
/* Loans v2 — Preview "Pinautang" tile: "late mula <date>" in the Loans late red (same token as "LATE N araw") */
body.macct-page .ma-ov-lentout .ma-ov-lentout-late { color: var(--ma-danger-ink); font-weight: 700; }

/* Oct 8 (Angie, AlertsPurple option B) — stock-alert cards: Inventory purple, three shades, LIGHT matte recipe (colour only;
   same size, layout, taps and lock). Default theme. Was three deep reds with white text (e4ad12ff). Dark text, no text-shadow:
   on stop B out #1e0f3d 4.80 · low #2a1450 6.57 · expiring #2a1450 10.19. Wherever .ma-ov-alerts renders. */
:root:not([data-theme]) body.macct-page .ma-ov-alerts .ma-ovalert {
  background:
    repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(135deg, var(--sa-a) 0%, var(--sa-b) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px var(--sa-g);
  border-color: transparent;
}
:root:not([data-theme]) body.macct-page .ma-ov-alerts .ma-ovalert:nth-child(1) { --sa-a: #c3a6f4; --sa-b: #9670e2; --sa-g: rgba(150,112,226,.32); --sa-ink: #1e0f3d; }   /* Out of stock */
:root:not([data-theme]) body.macct-page .ma-ov-alerts .ma-ovalert:nth-child(2) { --sa-a: #e4d6fe; --sa-b: #b796f0; --sa-g: rgba(183,150,240,.32); --sa-ink: #2a1450; }   /* Low stock */
:root:not([data-theme]) body.macct-page .ma-ov-alerts .ma-ovalert:nth-child(3) { --sa-a: #f6f0ff; --sa-b: #d9c6f9; --sa-g: rgba(217,198,249,.32); --sa-ink: #2a1450; }   /* Expiring soon (incl. 🔒) */
:root:not([data-theme]) body.macct-page .ma-ov-alerts .ma-ovalert :is(.ma-ovalert-l, .ma-ovalert-n, .ma-ovalert-ctx, .ma-ovalert-lock),
:root:not([data-theme]) body.macct-page .ma-ov-alerts .ma-ovalert::after { color: var(--sa-ink); opacity: 1; text-shadow: none; }

/* Oct 8 (Angie, OpsGap) — Operations: 16px between the New order / Expense button row and the calendar card
   (was 0). Matches only the button row → (hidden "N saved" counter) → calendar sequence, so the phone
   show('operations') layout with "More kinds…" in between keeps its spacing; nothing else moves. */
body.macct-page .ma-ops-actions + .ma-cal,
body.macct-page .ma-ops-actions + .ma-qa-pending + .ma-cal { margin-top: 16px; }

/* Oct 8 (Angie, HealthGray) — Results: 16px between the Business health card and the chart (was 0; KPI tiles → health
   is already 18px, left as is). All themes. */
body.macct-page .ma-results-health + .ma-chart { margin-top: 16px; }
/* Business health card — dark-gray matte, Results (renderKalusugan card) AND Preview (ring card), locked + unlocked,
   EN + TL. Default theme (as the matte recipe). Colour only; score math, bands, lock gate untouched.
   On #2a2e35: title/number #fff 13.63 · subtitle #d9d4ca 9.23 · good ring #5fd39a 7.32 / sub #b9ebd0 10.29 ·
   ok ring #e8c25a 7.98 / sub #f3dfa6 10.33 · risk ring #f07a6e 5.01 / sub #f6c4bd 8.79 · Upgrade #1d1608 on #d4a93c 8.15. */
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health {
  background:
    repeating-conic-gradient(rgba(255,255,255,.15) 0% 25%, rgba(0,0,0,.24) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(135deg, #4a5059 0%, #2a2e35 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -8px rgba(20,24,30,.45);
  border-color: transparent;
}
/* Grain 3x (Oct 21, Angie, Option B): Results health card only — its grey darkened (x0.64: #4a5059 -> #2f3339,
   #2a2e35 -> #1b1d22) so the ORIGINAL texts keep >=4.5:1 at the lightest spot (stop + the .15 white square):
   gold Why? #e8c25a 4.63 · red #f6c4bd 5.10 · grey #d9d4ca 5.35 · green #b9ebd0 5.97 · yellow #f3dfa6 5.99 · white 7.90.
   Same grain, shadow and radius; the Preview card is untouched (its navy rule wins there). */
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog {
  background:
    repeating-conic-gradient(rgba(255,255,255,.15) 0% 25%, rgba(0,0,0,.24) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(135deg, #2f3339 0%, #1b1d22 100%);
}
/* Results card */
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog :is(.ma-mlog-title, .ma-hs-bignum, .ma-hs-comp-name, .ma-hs-comp-sub) { color: #ffffff; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog :is(.ma-mlog-title .ma-ic) { color: #ffffff; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog :is(.ma-mlog-empty, .ma-hs-alarmhdr, .ma-hs-comp-na, .ma-hs-whytext, .ma-hs-bigcap) { color: #d9d4ca; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-big.ma-hs-good .ma-hs-bigcap { color: #b9ebd0; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-big.ma-hs-ok .ma-hs-bigcap { color: #f3dfa6; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-big.ma-hs-risk .ma-hs-bigcap { color: #f6c4bd; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-why { color: #e8c25a; }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-comp { border-bottom-color: rgba(255,255,255,.12); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-bar { background: rgba(255,255,255,.18); }
:root:not([data-theme]) body.macct-page .ma-pane[data-pane="results"] .ma-results-health > .ma-mlog .ma-hs-upcta { background: #d4a93c; border-color: #d4a93c; color: #1d1608; }
/* Preview ring card */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health :is(.ma-hs-title, .ma-hs-num, .ma-hs-lockglyph .ma-ic) { color: #ffffff; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-cap { color: #d9d4ca; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health.ma-hs-good .ma-hs-cap { color: #b9ebd0; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health.ma-hs-ok .ma-hs-cap { color: #f3dfa6; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health.ma-hs-risk .ma-hs-cap,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-cap.ma-hs-cap--red { color: #f6c4bd; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-tick { color: #e8c25a; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring { background: conic-gradient(rgba(255,255,255,.18) 0 360deg); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring--good { background: conic-gradient(#5fd39a var(--hs), rgba(255,255,255,.18) 0); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring--ok { background: conic-gradient(#e8c25a var(--hs), rgba(255,255,255,.18) 0); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring--risk { background: conic-gradient(#f07a6e var(--hs), rgba(255,255,255,.18) 0); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring::before { background: #3e434b; }   /* inner disc ≈ the card where the ring sits */

/* Oct 8 (Angie, NavIcons A) — Back ⬅️ and Preview 📋 are colour emoji glyphs like Home/Operations/Results. Same icon
   slot + font-size; each slot keeps its exact previous height (Back 23px, Preview 25px) so no label moves. A colour
   glyph ignores `color`, so the dimmed Back fades its glyph; its label keeps the 3.3:1 dimmed colour. */
body.macct-page .ma-botnav [data-bn="back"] .ma-bn-ic,
body.macct-page .ma-botnav [data-bn="preview"] .ma-bn-ic { display: flex; align-items: center; justify-content: center; }
body.macct-page .ma-botnav [data-bn="back"] .ma-bn-ic { height: 23px; }
body.macct-page .ma-botnav [data-bn="preview"] .ma-bn-ic { height: 25px; }
body.macct-page .ma-bn-back[aria-disabled="true"] .ma-bn-ic { opacity: .5; }
body.macct-page #ma-nav-modules .ma-modglyph,
body.macct-page .ma-side-back-ic { flex: none; width: 16px; height: 16px; font-size: 14px; line-height: 16px; text-align: center; }
body.macct-page .ma-side-back[aria-disabled="true"] .ma-side-back-ic { opacity: .5; }

/* ==========================================================================
   Oct 8 (Angie, HomeTight) — Home "Your business" tiles: matte gradient + pixel grain (same recipe as the Preview tiles).
   Default theme, Home grid only; colour/texture only (sizes, text, icons, badges, taps unchanged). The tone is picked by
   the tile's data-fc; People/Roster (data-fc="counter", shared with Counter device) by their ℹ️ help id. Skin tiles take
   the nearest tone: Production/Cycles→Journey, Tenants→Loans, Consignment/Assets/Containers→Inventory,
   Trips/Cleanliness→Agenda, Clients→People, Jobs/Pre-orders/Delivery/Rider tally→Smart Reminders.
   --glow is the tile's tint, read by the float shadow. Text on stop B: title #1d2433 ≥9.29:1, subtitle #3f4450 ≥5.83:1.
   ========================================================================== */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc] {
  background:
    repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(135deg, var(--ht-a, #fdf6e8) 0%, var(--ht-b, #f3e7cc) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px var(--glow, rgba(60,45,15,.30));
}
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="journey"]   { --ht-a: #e3f6dc; --ht-b: #bfe8b2; --glow: rgba(191,232,178,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="blueprint"] { --ht-a: #e1f0ff; --ht-b: #b9dcf7; --glow: rgba(185,220,247,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="money"]     { --ht-a: #fff5c2; --ht-b: #ffdc80; --glow: rgba(255,220,128,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="loans"]     { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="inventory"] { --ht-a: #efe4ff; --ht-b: #d2bcf7; --glow: rgba(210,188,247,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="agenda"]    { --ht-a: #ffeedb; --ht-b: #ffd0a0; --glow: rgba(255,208,160,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="clients"],
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc]:has([data-help="page.people"], [data-help="roster.list"]) { --ht-a: #ffe6f1; --ht-b: #f9c2dc; --glow: rgba(249,194,220,0.32); }   /* People */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="counter"]:not(:has([data-help="page.people"], [data-help="roster.list"])) { --ht-a: #dcf6f3; --ht-b: #a8e6df; --glow: rgba(168,230,223,0.32); }   /* Counter device */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="methods"]   { --ht-a: #f5ece0; --ht-b: #e2cbab; --glow: rgba(226,203,171,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="calc"]      { --ht-a: #eceff3; --ht-b: #c9d2dc; --glow: rgba(201,210,220,0.32); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc:is([data-fc="smart"], [data-fc="benta"]) { --ht-a: #e6e8ff; --ht-b: #bcc1f5; --glow: rgba(188,193,245,0.32); }

/* Oct 8 (Angie, HomeSoftDistinct) — no two tiles on one Home share a colour. An extra tile whose family colour is already
   on its Home takes a list colour that Home doesn't use (Loans coral, then People pink…). One exact rule per tile set seen
   across the 144 dashboards (generated); a set not listed here keeps the family colour. Six Homes have more tiles (12–14)
   than the 11 approved colours, so their last extras keep the family colour (a like-with-like pair). */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.cycles"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.cycles"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* hydroponics-farm, piggery-farming…: page.cycles → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host)):has(> .ma-tile [data-help="page.bookings"]):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile[data-fc="inventory"]:not(.ma-help-host) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* event-venue-rental, party-supplies-rental…: assets → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.production"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.production"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* frozen-lumpia-spring-roll-production, bakery-kakanin…: page.production → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="tubig.delivery"]):has(> .ma-tile [data-help="tubig.galon"]):has(> .ma-tile [data-help="tubig.kalinisan"]):has(> .ma-tile [data-help="tubig.tally"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])) > .ma-tile:has([data-help="tubig.delivery"]):not(.ma-tile:has([data-help="tubig.delivery"]) ~ .ma-tile) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* water-refilling: tubig.delivery → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="tubig.delivery"]):has(> .ma-tile [data-help="tubig.galon"]):has(> .ma-tile [data-help="tubig.kalinisan"]):has(> .ma-tile [data-help="tubig.tally"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])) > .ma-tile:has([data-help="tubig.galon"]) { --ht-a: #ffe6f1; --ht-b: #f9c2dc; --glow: rgba(249,194,220,0.32); }   /* water-refilling: tubig.galon → P */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.byahe"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.byahe"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* tricycle-transport-plan, forwarder-logistics…: page.byahe → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.bookings"]):has(> .ma-tile [data-help="page.jobs"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.jobs"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* printing-shop, electronics-repair-shop…: page.jobs → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.jobs"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* cebu-litson-baboy, graham-pastry-cake…: page.jobs → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="preorder.book"]) { --ht-a: #ffe6f1; --ht-b: #f9c2dc; --glow: rgba(249,194,220,0.32); }   /* cebu-litson-baboy, graham-pastry-cake…: preorder.book → P */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="assets.floor"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="assets.floor"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* computer-shop, ktv-bar…: assets.floor → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.bookings"]):has(> .ma-tile [data-help="page.byahe"]):has(> .ma-tile [data-help="page.production"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.production"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* industrial-ice-maker: page.production → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):has(> .ma-tile [data-help="page.production"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="consign.accounts"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* ice-cream-ice-drop-production, chicharon-production…: consign.accounts → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):has(> .ma-tile [data-help="page.production"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.production"]) { --ht-a: #ffe6f1; --ht-b: #f9c2dc; --glow: rgba(249,194,220,0.32); }   /* ice-cream-ice-drop-production, chicharon-production…: page.production → P */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.bookings"]):has(> .ma-tile [data-help="roster.list"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="roster.list"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* night-market-organiser, street-food-organiser…: roster.list → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.jobs"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.jobs"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* bicycle-shop-repair: page.jobs → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="consign.accounts"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* power-tools-shop, engineering-tools-supplies: consign.accounts → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.jobs"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* chili-garlic-chicken-pastel: page.jobs → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="preorder.book"]) { --ht-a: #ffe6f1; --ht-b: #f9c2dc; --glow: rgba(249,194,220,0.32); }   /* chili-garlic-chicken-pastel: preorder.book → P */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="assets.floor"]):has(> .ma-tile [data-help="page.bookings"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="assets.floor"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* indoor-sports-facility: assets.floor → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.bookings"]):has(> .ma-tile [data-help="page.byahe"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.byahe"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* liquid-waste-hauler: page.byahe → L */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.bookings"]):has(> .ma-tile [data-help="page.production"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.production"]) { --ht-a: #ffe6df; --ht-b: #fdbcab; --glow: rgba(253,188,171,0.32); }   /* bags-uniform-production: page.production → L */
/* Oct 9 (Angie, ExtraColours) — the 6 Homes with 12–14 tiles get three extra soft colours (Lime, Orchid, Mint) for the
   tile that repeated a colour; nowhere else. Title #1d2433 ≥9.44:1, subtitle #3f4450 ≥5.93:1 on their stop B. */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="tubig.delivery"]):has(> .ma-tile [data-help="tubig.galon"]):has(> .ma-tile [data-help="tubig.kalinisan"]):has(> .ma-tile [data-help="tubig.tally"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])) > .ma-tile:has([data-help="tubig.tally"]) { --ht-a: #f0f7d4; --ht-b: #d6eb9a; --glow: rgba(214,235,154,0.32); }   /* water-refilling: tubig.tally → Lime */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="tubig.delivery"]):has(> .ma-tile [data-help="tubig.galon"]):has(> .ma-tile [data-help="tubig.kalinisan"]):has(> .ma-tile [data-help="tubig.tally"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])) > .ma-tile:has([data-help="tubig.kalinisan"]) { --ht-a: #def7ea; --ht-b: #ade6c8; --glow: rgba(173,230,200,0.32); }   /* water-refilling: tubig.kalinisan → Mint */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="tubig.delivery"]):has(> .ma-tile [data-help="tubig.galon"]):has(> .ma-tile [data-help="tubig.kalinisan"]):has(> .ma-tile [data-help="tubig.tally"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.production"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])) > .ma-tile:has([data-help="tubig.delivery"]) ~ .ma-tile:has([data-help="tubig.delivery"]) { --ht-a: #f6e6fb; --ht-b: #e2bdf0; --glow: rgba(226,189,240,0.32); }   /* water-refilling: tubig.delivery → Orchid */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.production"]) { --ht-a: #f0f7d4; --ht-b: #d6eb9a; --glow: rgba(214,235,154,0.32); }   /* cebu-litson-baboy, graham-pastry-cake, japanese-cake-production: page.production → Lime */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="page.bookings"]):has(> .ma-tile [data-help="page.byahe"]):has(> .ma-tile [data-help="page.production"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="consign.accounts"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.jobs"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="preorder.book"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.byahe"]) { --ht-a: #f0f7d4; --ht-b: #d6eb9a; --glow: rgba(214,235,154,0.32); }   /* industrial-ice-maker: page.byahe → Lime */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="consign.accounts"]) { --ht-a: #f6e6fb; --ht-b: #e2bdf0; --glow: rgba(226,189,240,0.32); }   /* chili-garlic-chicken-pastel: consign.accounts → Orchid */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav:has(> .ma-tile [data-help="consign.accounts"]):has(> .ma-tile [data-help="page.jobs"]):has(> .ma-tile [data-help="page.production"]):has(> .ma-tile [data-help="preorder.book"]):not(:has(> .ma-tile[data-fc="inventory"]:not(.ma-help-host))):not(:has(> .ma-tile [data-help="assets.floor"])):not(:has(> .ma-tile [data-help="lend.release"])):not(:has(> .ma-tile [data-help="page.bookings"])):not(:has(> .ma-tile [data-help="page.byahe"])):not(:has(> .ma-tile [data-help="page.cycles"])):not(:has(> .ma-tile [data-help="page.people"])):not(:has(> .ma-tile [data-help="page.tenants"])):not(:has(> .ma-tile [data-help="roster.list"])):not(:has(> .ma-tile [data-help="tubig.delivery"])):not(:has(> .ma-tile [data-help="tubig.galon"])):not(:has(> .ma-tile [data-help="tubig.kalinisan"])):not(:has(> .ma-tile [data-help="tubig.tally"])) > .ma-tile:has([data-help="page.production"]) { --ht-a: #f0f7d4; --ht-b: #d6eb9a; --glow: rgba(214,235,154,0.32); }   /* chili-garlic-chicken-pastel: page.production → Lime */
/* text + icon chip (the Advanced / Coming soon pills and counts keep their own look) */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc] .ma-tile-txt b,
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc] .ma-tile-statv { color: #1d2433; }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc] :is(.ma-tile-hint, .ma-tile-stat, .ma-tile-statcap) { color: #3f4450; }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc] .ma-tile-ic { background: rgba(255,255,255,.55); }

/* Oct 8 (Angie, HomeTight) — Home "Your business" tiles: the faint diamond mosaic (::before, Oct 6) is hidden; the pixel
   grain of the matte recipe stays. Revert = delete this block (the mosaic rules above are untouched). */
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc]::before { display: none; }


/* ==========================================================================
   Oct 8 (Angie, FloatMax "Option 3: extra float") — in-scope cards lift 6px and get a deep 3-layer shadow tinted by
   their own glow at ~1.5× (--glow on Home tiles, --sa-g on stock alerts, the pane's --fg matte glow, else neutral).
   Each card keeps its existing inset highlight (--float-inset) ahead of the float shadow. The lift uses the CSS
   `translate` property, so the cards' `ma-rise` entrance animation (transform, fill both) never cancels it.
   Default theme (as the matte recipe). #ma-biz-content anchors the cascade above the matte/tone rules (no !important).
   OUT: rows inside cards, inputs/selects, chips/pills/segments, the header, sheets/modals/toasts, the ≥768 sidebar,
   the blueprint viewer. Colour/shadow/translate only — sizes, gaps and grids unchanged.
   ========================================================================== */
:root:not([data-theme]) #ma-biz-content .ma-tilegrid.ma-home-nav > .ma-tile,
:root:not([data-theme]) #ma-biz-content .ma-ov-alerts .ma-ovalert,
:root:not([data-theme]) #ma-biz-content .ma-ovkpi,
:root:not([data-theme]) #ma-biz-content .ma-hs-card.ma-ov-health,
:root:not([data-theme]) #ma-biz-content .ma-results-health > .ma-mlog,
:root:not([data-theme]) #ma-biz-content .ma-rcard,
:root:not([data-theme]) #ma-biz-content .ma-chart,
:root:not([data-theme]) #ma-biz-content .ma-mcal-left,
:root:not([data-theme]) #ma-biz-content .ma-mcal-panel,
:root:not([data-theme]) #ma-biz-content .ma-ops-actions .ma-qa-btn,
:root:not([data-theme]) #ma-biz-content .ma-quickadd--home .ma-qa-btn,
:root:not([data-theme]) #ma-biz-content .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile,
:root:not([data-theme]) #ma-biz-content .ma-flt-tile,
:root:not([data-theme]) #ma-biz-content .ma-l2-flow,
:root:not([data-theme]) #ma-biz-content .ma-l2-list,
:root:not([data-theme]) #ma-biz-content .ma-l2-check,
:root:not([data-theme]) #ma-biz-content .ma-l2-rem,
:root:not([data-theme]) #ma-biz-content .ma-l2-push,
:root:not([data-theme]) #ma-biz-content .ma-l2-kard,
:root:not([data-theme]) #ma-biz-content .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog) {
  --float-lift: -6px;
  --float-glow: var(--glow, var(--sa-g, var(--fg, rgba(60,45,15,.30))));
  --float-shadow: 0 3px 6px rgba(60,45,15,.14), 0 18px 32px -8px rgba(60,45,15,.36), 0 36px 54px -18px var(--float-glow);
  translate: 0 var(--float-lift);
  box-shadow: var(--float-inset, 0 0 0 0 transparent), var(--float-shadow);
}
@supports (color: rgb(from red r g b / calc(alpha * 1.5))) {
  :root:not([data-theme]) #ma-biz-content .ma-tilegrid.ma-home-nav > .ma-tile,
  :root:not([data-theme]) #ma-biz-content .ma-ov-alerts .ma-ovalert,
  :root:not([data-theme]) #ma-biz-content .ma-ovkpi,
  :root:not([data-theme]) #ma-biz-content .ma-hs-card.ma-ov-health,
  :root:not([data-theme]) #ma-biz-content .ma-results-health > .ma-mlog,
  :root:not([data-theme]) #ma-biz-content .ma-rcard,
  :root:not([data-theme]) #ma-biz-content .ma-chart,
  :root:not([data-theme]) #ma-biz-content .ma-mcal-left,
  :root:not([data-theme]) #ma-biz-content .ma-mcal-panel,
  :root:not([data-theme]) #ma-biz-content .ma-ops-actions .ma-qa-btn,
  :root:not([data-theme]) #ma-biz-content .ma-quickadd--home .ma-qa-btn,
  :root:not([data-theme]) #ma-biz-content .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile,
  :root:not([data-theme]) #ma-biz-content .ma-flt-tile,
  :root:not([data-theme]) #ma-biz-content .ma-l2-flow,
  :root:not([data-theme]) #ma-biz-content .ma-l2-list,
  :root:not([data-theme]) #ma-biz-content .ma-l2-check,
  :root:not([data-theme]) #ma-biz-content .ma-l2-rem,
  :root:not([data-theme]) #ma-biz-content .ma-l2-push,
  :root:not([data-theme]) #ma-biz-content .ma-l2-kard,
  :root:not([data-theme]) #ma-biz-content .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog) {
    --float-glow: rgb(from var(--glow, var(--sa-g, var(--fg, rgba(60,45,15,.20)))) r g b / calc(alpha * 1.5));   /* tint ×1.5; neutral .20 → .30 */
  }
}
/* insets kept from each card's current look */
:root:not([data-theme]) #ma-biz-content .ma-tilegrid.ma-home-nav > .ma-tile,
:root:not([data-theme]) #ma-biz-content .ma-ovkpi, :root:not([data-theme]) #ma-biz-content .ma-rcard, :root:not([data-theme]) #ma-biz-content .ma-chart,
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="moneymatters"],[data-pane="operations"],[data-pane="money"],[data-pane="inventory"],[data-pane="suppliers"],[data-pane="bookings"],[data-pane="tubig-suki"],[data-pane="results"],[data-pane="summary"],[data-pane="agenda"],[data-pane="journey"],[data-pane="cycles"],[data-pane="production"],[data-pane="trial"],[data-pane="lend"],[data-pane="tenants"],[data-pane="people"],[data-pane="roster"],[data-pane="devices"],[data-pane="methodology"],[data-pane="calculators"],[data-pane="automation"],[data-pane="float"],[data-pane="jobs"],[data-pane="consign"],[data-pane="assets"],[data-pane="byahe"],[data-pane="tubig-galon"],[data-pane="tubig-tally"],[data-pane="tubig-kalinisan"]) :is(.ma-tilegrid:not(.ma-home-nav) > .ma-tile:not(.is-on):not(.ma-tile--navy), .ma-mlog:not(.ma-mlog .ma-mlog):not(.ma-results-health > .ma-mlog)) { --float-inset: inset 0 1px 0 rgba(255,255,255,.7); }   /* matte recipe (the dark-gray health card keeps its own .12) */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) .ma-tilegrid:not(.ma-home-nav) > .ma-tile.is-on { --float-inset: inset 0 3px 0 var(--c); }   /* selected sub-pane tile keeps its tone bar */
@media (min-width: 768px) { :root:not([data-theme]) #ma-biz-content .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) .ma-tilegrid:not(.ma-home-nav) > .ma-tile.is-on { --float-inset: inset 0 4px 0 var(--c); } }
:root:not([data-theme]) #ma-biz-content .ma-ov-alerts .ma-ovalert { --float-inset: inset 0 1px 0 rgba(255,255,255,.7); }   /* AlertsPurple: light matte highlight */
:root:not([data-theme]) #ma-biz-content :is(.ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog) { --float-inset: inset 0 1px 0 rgba(255,255,255,.12); --glow: rgba(20,24,30,.40); }   /* dark-gray card: .40 ×1.5 = .60 */
/* bottom nav bar: float shadow only, no lift (fixed to the bottom; its auto-hide transform is untouched) */
:root:not([data-theme]) #ma-biz-content .ma-botnav { box-shadow: 0 3px 6px rgba(60,45,15,.14), 0 18px 32px -8px rgba(60,45,15,.36), 0 36px 54px -18px rgba(60,45,15,.30); }


/* ==========================================================================
   Oct 8 (Angie, FloatMax) — tap press. Only TAPPABLE in-scope cards (button / a / role=button) press; the others keep
   the float with no press. Press = sink to -1px + scale .97 + brightness .96 + a short shadow, 60ms in / 140ms out.
   Hover lift (-9px) only where a real hover exists (laptop/tablet), never sticks on phones. Nav items press to .94
   on #f1e4c2 (label darkened while pressed: 4.92:1) and hover #f6efdd (label 4.80:1); the active gold tab is untouched.
   Uses the individual translate/scale properties, like the float. Default theme.
   ========================================================================== */
:root:not([data-theme]) #ma-biz-content :is(.ma-tilegrid.ma-home-nav > .ma-tile, .ma-ov-alerts .ma-ovalert, .ma-ovkpi, .ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog, .ma-rcard, .ma-chart, .ma-mcal-left, .ma-mcal-panel, .ma-ops-actions .ma-qa-btn, .ma-quickadd--home .ma-qa-btn, .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile, .ma-flt-tile, .ma-l2-flow, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard, .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog)):is(button, a, [role="button"]) {
  transition: translate .14s ease, scale .14s ease, box-shadow .14s ease, filter .14s ease, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
:root:not([data-theme]) #ma-biz-content :is(.ma-tilegrid.ma-home-nav > .ma-tile, .ma-ov-alerts .ma-ovalert, .ma-ovkpi, .ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog, .ma-rcard, .ma-chart, .ma-mcal-left, .ma-mcal-panel, .ma-ops-actions .ma-qa-btn, .ma-quickadd--home .ma-qa-btn, .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile, .ma-flt-tile, .ma-l2-flow, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard, .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog)):is(button, a, [role="button"]):active {
  translate: 0 -1px; scale: .97; filter: brightness(.96);
  box-shadow: var(--float-inset, 0 0 0 0 transparent), 0 2px 4px rgba(60,45,15,.18), 0 6px 12px -6px rgba(60,45,15,.30);
  transition-duration: .06s;
}
@media (hover: hover) {
  :root:not([data-theme]) #ma-biz-content :is(.ma-tilegrid.ma-home-nav > .ma-tile, .ma-ov-alerts .ma-ovalert, .ma-ovkpi, .ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog, .ma-rcard, .ma-chart, .ma-mcal-left, .ma-mcal-panel, .ma-ops-actions .ma-qa-btn, .ma-quickadd--home .ma-qa-btn, .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile, .ma-flt-tile, .ma-l2-flow, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard, .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog)):is(button, a, [role="button"]):hover:not(:active) { translate: 0 -9px; }
  :root:not([data-theme]) #ma-biz-content :is(.ma-ops-actions, .ma-quickadd--home) .ma-qa-btn:hover { transform: none; }   /* the older 1px hover lift would stack on the -9px */
}
:root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item { transition: scale .14s ease, background-color .14s ease; -webkit-tap-highlight-color: transparent; }
:root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item:not(.active):not([aria-disabled="true"]):active { scale: .94; background: #f1e4c2; color: color-mix(in srgb, var(--ma-muted) 70%, var(--ma-ink)); transition-duration: .06s; }
@media (hover: hover) { :root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item:not(.active):not([aria-disabled="true"]):hover:not(:active) { background: #f6efdd; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-theme]) #ma-biz-content :is(.ma-tilegrid.ma-home-nav > .ma-tile, .ma-ov-alerts .ma-ovalert, .ma-ovkpi, .ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog, .ma-rcard, .ma-chart, .ma-mcal-left, .ma-mcal-panel, .ma-ops-actions .ma-qa-btn, .ma-quickadd--home .ma-qa-btn, .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile, .ma-flt-tile, .ma-l2-flow, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard, .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog)):is(button, a, [role="button"]) { transition: box-shadow .14s ease, filter .14s ease; }
  :root:not([data-theme]) #ma-biz-content :is(.ma-tilegrid.ma-home-nav > .ma-tile, .ma-ov-alerts .ma-ovalert, .ma-ovkpi, .ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog, .ma-rcard, .ma-chart, .ma-mcal-left, .ma-mcal-panel, .ma-ops-actions .ma-qa-btn, .ma-quickadd--home .ma-qa-btn, .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile, .ma-flt-tile, .ma-l2-flow, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard, .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog)):is(button, a, [role="button"]):active, :root:not([data-theme]) #ma-biz-content :is(.ma-tilegrid.ma-home-nav > .ma-tile, .ma-ov-alerts .ma-ovalert, .ma-ovkpi, .ma-hs-card.ma-ov-health, .ma-results-health > .ma-mlog, .ma-rcard, .ma-chart, .ma-mcal-left, .ma-mcal-panel, .ma-ops-actions .ma-qa-btn, .ma-quickadd--home .ma-qa-btn, .ma-pane .ma-tilegrid:not(.ma-home-nav) > .ma-tile, .ma-flt-tile, .ma-l2-flow, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard, .ma-pane .ma-mlog:not(.ma-mlog .ma-mlog)):is(button, a, [role="button"]):hover { translate: 0 var(--float-lift); scale: none; filter: none; }   /* float stays still; press = shadow only */
  :root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item { transition: background-color .14s ease; }
  :root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item:active { scale: none; }
}

/* ==========================================================================
   Oct 8 (Angie, LabelsConsistent) — ONE section-label style on Preview, Home, Operations, Results (default theme).
   Section label: Figtree 12/16, 700, .14em, uppercase, #5b6472. Screen name (PREVIEW, HOME, OPERATIONS, RESULTS): the
   same style in #7a5d12, right-aligned on the pane's first label row; no bar, no border. Text style only.
   ========================================================================== */
:root:not([data-theme]) #ma-biz-content :is(.ma-pane[data-pane="preview"], .ma-pane[data-pane="home"], .ma-pane[data-pane="money"], .ma-pane[data-pane="operations"], .ma-pane[data-pane="results"]) :is(.ma-ovlabel, .ma-home-gridlabel, .ma-xsec, .ma-res-period),
:root:not([data-theme]) #ma-biz-content :is(.ma-pane[data-pane="preview"], .ma-pane[data-pane="home"], .ma-pane[data-pane="money"], .ma-pane[data-pane="operations"], .ma-pane[data-pane="results"]) :is(.ma-ovlabel-pane, .ma-pane-head-ttl),
:root:not([data-theme]) body.ma-home-pane #ma-biz-content .ma-biz-acts .ma-pane-head-ttl {
  font-family: 'Figtree', var(--ma-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 16px; color: #5b6472;
}
:root:not([data-theme]) #ma-biz-content :is(.ma-pane[data-pane="preview"], .ma-pane[data-pane="home"], .ma-pane[data-pane="money"], .ma-pane[data-pane="operations"], .ma-pane[data-pane="results"]) :is(.ma-ovlabel-pane, .ma-pane-head-ttl),
:root:not([data-theme]) body.ma-home-pane #ma-biz-content .ma-biz-acts .ma-pane-head-ttl { color: #7a5d12; }
/* Preview row: "TODAY · FRI, OCT 9" left, PREVIEW right (the day span inherits the label style) */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="preview"] .ma-ovlabel--withdate .ma-ovlabel-day { font: inherit; letter-spacing: inherit; color: inherit; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="preview"] .ma-ovlabel--withdate .ma-ovlabel-pane { margin-left: auto; white-space: nowrap; }
/* Oct 9 (C3, label-row safety): the first row is always label (left) · gold screen name (far right) · ⓘ last — the same
   order as Home / Operations / Results (name then ⓘ). Flex `order` only (DOM + handler untouched); unscoped so no theme can
   put the ⓘ between the label and the screen name again. */
#ma-biz-content .ma-pane[data-pane="preview"] .ma-ovlabel--withdate .ma-ovlabel-pane { margin-left: auto; white-space: nowrap; }
#ma-biz-content .ma-pane[data-pane="preview"] .ma-ovlabel--withdate > .ma-help-i { order: 1; }
/* Results row: period left, RESULTS right; Operations: OPERATIONS right — and no gold tone bar on these rows */
:root:not([data-theme]) #ma-biz-content :is(.ma-pane[data-pane="results"], .ma-pane[data-pane="operations"]) > .ma-pane-head { box-shadow: none; justify-content: space-between; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="operations"] > .ma-pane-head { justify-content: flex-end; }

/* >>> PANE COLOUR CODING (Oct 9, Angie: JourneyGreen / LoansCoral / ExtraColours) — generated by fam.py; edit the config, not this block.
   Every in-scope pane (and its sheets) takes the family of the Home tile that opens it: --pa/--pb (the tile gradient = the
   strongest fill), --tint, --line, --mid (thin lines only), --deep (small indicators only), --ink / --strong (text only).
   Default theme only. Colour / background / border colour / grain / glow only — no size, spacing or DOM change
   (rows and rings that had no border get a box-shadow line, so nothing moves). */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="journey"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="journey"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #e3f6dc; --pb: #bfe8b2; --tint: #f4faf1; --line: #d6ecce; --mid: #5bb85a; --deep: #2e7d34; --ink: #2e6b33; --strong: #173d1c; --fl: #2e6b33; --fi: #173d1c; --fs: #2e6b33; --fg: rgba(191,232,178,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="lend"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="moneymatters"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="moneymatters"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #fff5c2; --pb: #ffdc80; --tint: #fffbf2; --line: #f6e7c1; --mid: #e9c467; --deep: #8f6c14; --ink: #705410; --strong: #3c2e0c; --fl: #705410; --fi: #3c2e0c; --fs: #705410; --fg: rgba(255,220,128,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="float"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="float"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #fff5c2; --pb: #ffdc80; --tint: #fffbf2; --line: #f6e7c1; --mid: #e9c467; --deep: #8f6c14; --ink: #705410; --strong: #3c2e0c; --fl: #705410; --fi: #3c2e0c; --fs: #705410; --fg: rgba(255,220,128,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="inventory"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="inventory"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #efe4ff; --pb: #d2bcf7; --tint: #f8f3fe; --line: #d8c8ef; --mid: #a079d8; --deep: #53298e; --ink: #3f1f6b; --strong: #211235; --fl: #3f1f6b; --fi: #211235; --fs: #3f1f6b; --fg: rgba(210,188,247,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="suppliers"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="suppliers"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #efe4ff; --pb: #d2bcf7; --tint: #f8f3fe; --line: #d8c8ef; --mid: #a079d8; --deep: #53298e; --ink: #3f1f6b; --strong: #211235; --fl: #3f1f6b; --fi: #211235; --fs: #3f1f6b; --fg: rgba(210,188,247,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="people"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="people"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6f1; --pb: #f9c2dc; --tint: #fef3f8; --line: #f1c6da; --mid: #dc74a5; --deep: #932558; --ink: #6e1c42; --strong: #371022; --fl: #6e1c42; --fi: #371022; --fs: #6e1c42; --fg: rgba(249,194,220,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="bookings"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="bookings"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6f1; --pb: #f9c2dc; --tint: #fef3f8; --line: #f1c6da; --mid: #dc74a5; --deep: #932558; --ink: #6e1c42; --strong: #371022; --fl: #6e1c42; --fi: #371022; --fs: #6e1c42; --fg: rgba(249,194,220,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="agenda"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="agenda"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffeedb; --pb: #ffd0a0; --tint: #fff9f2; --line: #f6dbc1; --mid: #e9a867; --deep: #a15c17; --ink: #784511; --strong: #3c240c; --fl: #784511; --fi: #3c240c; --fs: #784511; --fg: rgba(255,208,160,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="dailycheck"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="dailycheck"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffeedb; --pb: #ffd0a0; --tint: #fff9f2; --line: #f6dbc1; --mid: #e9a867; --deep: #a15c17; --ink: #784511; --strong: #3c240c; --fl: #784511; --fi: #3c240c; --fs: #784511; --fg: rgba(255,208,160,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="devices"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="devices"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #dcf6f3; --pb: #a8e6df; --tint: #f4fefd; --line: #c9ede9; --mid: #7dd4ca; --deep: #2b8278; --ink: #206058; --strong: #143430; --fl: #206058; --fi: #143430; --fs: #206058; --fg: rgba(168,230,223,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="methodology"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="methodology"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f5ece0; --pb: #e2cbab; --tint: #fdf9f4; --line: #e8ddcf; --mid: #c7ad8a; --deep: #7c613c; --ink: #5d492d; --strong: #2f2618; --fl: #5d492d; --fi: #2f2618; --fs: #5d492d; --fg: rgba(226,203,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="calculators"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="calculators"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #eceff3; --pb: #c9d2dc; --tint: #f6f8fc; --line: #d5dbe2; --mid: #99a7b8; --deep: #4b5b6c; --ink: #384451; --strong: #1e2329; --fl: #384451; --fi: #1e2329; --fs: #384451; --fg: rgba(201,210,220,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="automation"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="automation"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #e6e8ff; --pb: #bcc1f5; --tint: #f3f4fe; --line: #c8ccef; --mid: #7982d8; --deep: #29338e; --ink: #1f276b; --strong: #121635; --fl: #1f276b; --fi: #121635; --fs: #1f276b; --fg: rgba(188,193,245,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="cycles"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="cycles"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="assets"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="assets"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="production"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="production"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="tenants"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="tenants"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="tubig-galon"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="tubig-galon"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6f1; --pb: #f9c2dc; --tint: #fef3f8; --line: #f1c6da; --mid: #dc74a5; --deep: #932558; --ink: #6e1c42; --strong: #371022; --fl: #6e1c42; --fi: #371022; --fs: #6e1c42; --fg: rgba(249,194,220,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="tubig-tally"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="tubig-tally"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f0f7d4; --pb: #d6eb9a; --tint: #fbfef3; --line: #e5efc8; --mid: #b9d369; --deep: #687e25; --ink: #51631d; --strong: #293211; --fl: #51631d; --fi: #293211; --fs: #51631d; --fg: rgba(214,235,154,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="tubig-kalinisan"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="tubig-kalinisan"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #def7ea; --pb: #ade6c8; --tint: #f4fdf8; --line: #cbebda; --mid: #72ca9b; --deep: #307e54; --ink: #235c3e; --strong: #142f20; --fl: #235c3e; --fi: #142f20; --fs: #235c3e; --fg: rgba(173,230,200,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="tubig-suki"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="tubig-suki"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f6e6fb; --pb: #e2bdf0; --tint: #fbf4fe; --line: #e4c9ed; --mid: #b66ecf; --deep: #6c2b82; --ink: #502060; --strong: #291230; --fl: #502060; --fi: #291230; --fs: #502060; --fg: rgba(226,189,240,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="roster"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="roster"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="byahe"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="byahe"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="jobs"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="jobs"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="consign"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="consign"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6df; --pb: #fdbcab; --tint: #fff7f4; --line: #f6d3c8; --mid: #f59a85; --deep: #b5472f; --ink: #8a2d18; --strong: #3a120a; --fl: #8a2d18; --fi: #3a120a; --fs: #8a2d18; --fg: rgba(253,188,171,.32); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="trial"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="trial"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #e1f0ff; --pb: #b9dcf7; --tint: #f3f9fe; --line: #c6ddf1; --mid: #74aedc; --deep: #256193; --ink: #1c496e; --strong: #102637; --fl: #1c496e; --fi: #102637; --fs: #1c496e; --fg: rgba(185,220,247,.32); }
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="consign"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="jobs"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])) #ma-biz-content .ma-pane[data-pane="production"],
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="consign"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="jobs"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])):has(#ma-biz-content .ma-pane[data-pane="production"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6f1; --pb: #f9c2dc; --tint: #fef3f8; --line: #f1c6da; --mid: #dc74a5; --deep: #932558; --ink: #6e1c42; --strong: #371022; --fl: #6e1c42; --fi: #371022; --fs: #6e1c42; --fg: rgba(249,194,220,.32); }   /* production → people on ice-cream-ice-drop-production, chicharon-production, homemade-processed-meat, jam-production, chips-production */
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="jobs"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="consign"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])) #ma-biz-content .ma-pane[data-pane="production"],
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="jobs"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="consign"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])):has(#ma-biz-content .ma-pane[data-pane="production"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f0f7d4; --pb: #d6eb9a; --tint: #fbfef3; --line: #e5efc8; --mid: #b9d369; --deep: #687e25; --ink: #51631d; --strong: #293211; --fl: #51631d; --fi: #293211; --fs: #51631d; --fg: rgba(214,235,154,.32); }   /* production → lime on cebu-litson-baboy, graham-pastry-cake, japanese-cake-production */
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="consign"]):has(#ma-nav-modules [data-mod="jobs"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])) #ma-biz-content .ma-pane[data-pane="production"],
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="consign"]):has(#ma-nav-modules [data-mod="jobs"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])):has(#ma-biz-content .ma-pane[data-pane="production"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f0f7d4; --pb: #d6eb9a; --tint: #fbfef3; --line: #e5efc8; --mid: #b9d369; --deep: #687e25; --ink: #51631d; --strong: #293211; --fl: #51631d; --fi: #293211; --fs: #51631d; --fg: rgba(214,235,154,.32); }   /* production → lime on chili-garlic-chicken-pastel */
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="roster"]):not(:has(#ma-nav-modules [data-mod="production"])):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="consign"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="jobs"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])) #ma-biz-content .ma-pane[data-pane="roster"],
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="roster"]):not(:has(#ma-nav-modules [data-mod="production"])):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="consign"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="jobs"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])):has(#ma-biz-content .ma-pane[data-pane="roster"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #ffe6f1; --pb: #f9c2dc; --tint: #fef3f8; --line: #f1c6da; --mid: #dc74a5; --deep: #932558; --ink: #6e1c42; --strong: #371022; --fl: #6e1c42; --fi: #371022; --fs: #6e1c42; --fg: rgba(249,194,220,.32); }   /* roster → people on daycare-tutorial-center-plan, fitness-gym */
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="bookings"]):has(#ma-nav-modules [data-mod="byahe"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="consign"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="jobs"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])) #ma-biz-content .ma-pane[data-pane="byahe"],
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="bookings"]):has(#ma-nav-modules [data-mod="byahe"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="consign"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="jobs"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])):has(#ma-biz-content .ma-pane[data-pane="byahe"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f0f7d4; --pb: #d6eb9a; --tint: #fbfef3; --line: #e5efc8; --mid: #b9d369; --deep: #687e25; --ink: #51631d; --strong: #293211; --fl: #51631d; --fi: #293211; --fs: #51631d; --fg: rgba(214,235,154,.32); }   /* byahe → lime on industrial-ice-maker */
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="consign"]):has(#ma-nav-modules [data-mod="jobs"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])) #ma-biz-content .ma-pane[data-pane="consign"],
:root:not([data-theme]) body:has(#ma-nav-modules [data-mod="consign"]):has(#ma-nav-modules [data-mod="jobs"]):has(#ma-nav-modules [data-mod="production"]):not(:has(#ma-nav-modules [data-mod="cycles"])):not(:has(#ma-nav-modules [data-mod="tenants"])):not(:has(#ma-nav-modules [data-mod="assets"])):not(:has(#ma-nav-modules [data-mod="byahe"])):not(:has(#ma-nav-modules [data-mod="roster"])):not(:has(#ma-nav-modules [data-mod="bookings"])):not(:has(#ma-nav-modules [data-mod="lend"])):not(:has(#ma-nav-modules [data-mod="tubig-delivery"])):not(:has(#ma-nav-modules [data-mod="tubig-galon"])):not(:has(#ma-nav-modules [data-mod="tubig-tally"])):not(:has(#ma-nav-modules [data-mod="tubig-kalinisan"])):not(:has(#ma-nav-modules [data-mod="tubig-suki"])):has(#ma-biz-content .ma-pane[data-pane="consign"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f6e6fb; --pb: #e2bdf0; --tint: #fbf4fe; --line: #e4c9ed; --mid: #b66ecf; --deep: #6c2b82; --ink: #502060; --strong: #291230; --fl: #502060; --fi: #291230; --fs: #502060; --fg: rgba(226,189,240,.32); }   /* consign → orchid on chili-garlic-chicken-pastel */
:root:not([data-theme]) body .ma-pos-back { --pa: #efe4ff; --pb: #d2bcf7; --tint: #f8f3fe; --line: #d8c8ef; --mid: #a079d8; --deep: #53298e; --ink: #3f1f6b; --strong: #211235; --fl: #3f1f6b; --fi: #211235; --fs: #3f1f6b; --fg: rgba(210,188,247,.32); }   /* POS / Benta = Inventory family wherever it opens */
/* muted / soft text inside these panes and their sheets reads in the family ink (≥5:1 on white, tint and B) */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]), :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) { --ma-muted: var(--ink); --ma-ink-soft: var(--ink); --ma-ink: var(--strong); }

/* content cards: tint + line (the float keeps its shadow; its glow reads --fg = --pb at .32) */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-flt-wcard, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard):not(.ma-results-health *):not(.ma-hs-card *) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border-color: var(--line); }   /* matte recipe kept: grain + the family gradient */
:root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) { background: var(--tint); border-color: var(--line); }
/* sub-pane tiles: content-card colours; the selected tile is filled like a primary action (never navy) */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-tilegrid .ma-tile { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border-color: var(--line); }   /* matte recipe kept */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-tilegrid .ma-tile:is(.is-on, .ma-tile--navy) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border-color: var(--line); color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-tilegrid .ma-tile:is(.is-on, .ma-tile--navy) :is(b, .ma-tile-hint, .ma-tile-txt) { color: var(--strong); }
/* hero / overview card: the tile gradient + grain; strong text, ink secondary text, white inner tiles */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-pane > .ma-hero, .ma-ring-wrap, .ma-l2-flow):not(.ma-results-health *):not(.ma-hs-card *) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border-color: rgba(255,255,255,.8); color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-pane > .ma-hero, .ma-ring-wrap, .ma-l2-flow) :is(h1, h2, h3, h4, b, strong, [class*="title"], [class*="-v"], [class*="pct"]) { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-pane > .ma-hero, .ma-ring-wrap, .ma-l2-flow) :is(p, [class*="kicker"], [class*="desc"], [class*="step"], [class*="cap"], [class*="-l"], [class*="sub"]) { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-pane > .ma-hero, .ma-ring-wrap, .ma-l2-flow) :is(.ma-kpi-ic, .ma-ring-hole, .ma-bp-link, .ma-l2-box, .ma-l2-tile) { background: rgba(255,255,255,.62); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-pane > .ma-hero, .ma-ring-wrap, .ma-l2-flow) .ma-ring-hole { box-shadow: inset 0 1px 3px rgba(18,35,63,.06), 0 0 0 1px rgba(255,255,255,.8); }   /* original inset kept */
/* list / checklist rows: white card + 1px line + 5px left bar (box-shadow — no size change); status bars keep their colour */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-orow, .ma-mrow, .ma-witem, .ma-dc-item, .ma-l2-row, .ma-lendbal, .ma-l2-remrow):not([class*="late"]):not([class*="overdue"]):not([class*="danger"]) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, #fff; border-color: var(--line); box-shadow: inset 5px 0 0 var(--mid), 0 0 0 1px var(--line); }
/* primary action: tile gradient (never stronger), strong text, soft --pb glow */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-btn-primary:not(.ma-hs-upcta):not(.ma-mm-lockrenew):not(.ma-l2-remrenew):not([class*="renew"]):not([class*="upgrade"]), :is(button, [role="button"]):is(.is-on, .active):not(.ma-tile):not(.ma-help-i), .ma-bili-id.is-on, .ma-chip.is-on, .ma-seg-btn.active, .ma-phase.active, .ma-crew-pbtn.is-on, .ma-bk-subtab.is-on),
:root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) :is(.ma-btn-primary:not(.ma-hs-upcta):not(.ma-mm-lockrenew):not(.ma-l2-remrenew):not([class*="renew"]):not([class*="upgrade"]), .ma-bili-id.is-on, .ma-chip.is-on, .ma-seg-btn.active) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); color: var(--strong); border-color: var(--line); box-shadow: 0 4px 12px -6px var(--pb); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-pane > .ma-hero, .ma-ring-wrap, .ma-l2-flow, .ma-mlog, .ma-ring-wrap, .ma-jr-logs, .ma-dev-setup, .ma-gabay-tip, .ma-crew-buod, .ma-crew-card, .ma-by-buod, .ma-asset-scell, .ma-roster-scell, .ma-job-sumcell, .ma-gagawin-day, .ma-flt-wcard, .ma-l2-list, .ma-l2-check, .ma-l2-rem, .ma-l2-push, .ma-l2-kard) .ma-btn-primary:not(.ma-hs-upcta):not(.ma-mm-lockrenew):not(.ma-l2-remrenew):not([class*="renew"]):not([class*="upgrade"]) { box-shadow: 0 0 0 1.5px var(--mid), 0 4px 12px -6px var(--pb); }   /* on a card that shares the gradient, a thin --mid ring keeps the action visible */
/* secondary buttons: white, --mid border colour, ink text (border widths unchanged) */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-btn-secondary, .ma-btn-ghost, .ma-mark-btn, .ma-l2-back, .ma-l2-remdone, .ma-lend-back, .ma-lend-dresibo, .ma-lend-dpaalala, .ma-lend-dagreement, .ma-lend-dcancel), :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) :is(.ma-btn-secondary, .ma-btn-ghost, .ma-lend-printag) { background: #fff; border-color: var(--mid); color: var(--ink); }
/* links + blueprint chips */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-textbtn, :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) .ma-textbtn { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-bp-link { background: var(--tint); border-color: var(--line); color: var(--ink); }
/* headings + section labels */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-mlog-title, .ma-weekly-title, .ma-hero-title, h2, h3, h4), :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) .ma-sheet-title { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-lbl, .ma-xsec, .ma-home-gridlabel, .ma-prog-label, .ma-jr-logs-title, .ma-kpi-l), :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) :is(.ma-sheet-lbl, .ma-lend-sec, .ma-lend-56, .ma-lbl) { color: var(--ink); }
/* progress: track --line, fill --mid → --deep; the Journey ring repaints through its own inline vars */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-prog-bar { background: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-prog-bar, [class*="progbar"]) > span { background: linear-gradient(90deg, var(--mid), var(--deep)); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-bn-age--amber { color: #6b4510; }   /* status colours kept, text darkened to pass */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-bn-age--ok { color: #1B5539; }   /* green "ok" age pill was 4.30:1 */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-ring { --ma-gold: var(--deep); --ma-line: var(--line); }
/* step markers: done = --deep + white glyph; current = white, 3px --deep ring + --line halo; upcoming = white, --line border */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-mnode .ma-mnode-dot { background: #fff; border-color: var(--line); color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-mnode.done .ma-mnode-dot { background: var(--deep); border-color: var(--deep); color: #fff; }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-mnode.current .ma-mnode-dot { background: #fff; border-color: var(--deep); color: var(--deep); box-shadow: 0 0 0 1px var(--deep), 0 0 0 5px var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-mnode.done::before { background: var(--mid); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-mnode-htitle) { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-mnode-desc, .ma-wdesc, .ma-hero-step) { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-mnode.current .ma-mnode-htitle { color: var(--strong); }
/* inputs: white, --line border colour (focus --mid) */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { background: #fff; border-color: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(input, select, textarea):focus, :root:not([data-theme]) :is(body:has(#ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"])) .ma-sheet-back, body .ma-pos-back) .ma-sheet:not(.ma-help-sheet) :is(input, select, textarea):focus { border-color: var(--mid); }
/* dashed optional buttons */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-stepexp-toggle, .ma-qa-more, .ma-mlog-addbtn) { border-color: var(--mid); background: var(--tint); color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-stepexp-toggle, .ma-qa-more, .ma-mlog-addbtn) * { color: var(--ink); }
/* checkboxes: --mid border, checked = --deep */
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-wbox, .ma-dc-box) { border-color: var(--mid); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-wcheck input:checked + .ma-wbox, :root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-dc-item.done .ma-dc-box { background: var(--deep); border-color: var(--deep); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-phases, .ma-crew-periodsw, .ma-seg) { background: var(--tint); border-color: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-inv-back, .ma-crew-pbtn:not(.is-on), .ma-seg-btn:not(.active)) { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) :is(.ma-gabay-h, .ma-gabay-tip [class*="-h"], .ma-dc-h, .ma-dc-go) { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane:is([data-pane="journey"], [data-pane="lend"], [data-pane="moneymatters"], [data-pane="float"], [data-pane="inventory"], [data-pane="suppliers"], [data-pane="people"], [data-pane="bookings"], [data-pane="agenda"], [data-pane="dailycheck"], [data-pane="devices"], [data-pane="methodology"], [data-pane="calculators"], [data-pane="automation"], [data-pane="cycles"], [data-pane="assets"], [data-pane="production"], [data-pane="tenants"], [data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="roster"], [data-pane="byahe"], [data-pane="jobs"], [data-pane="consign"], [data-pane="trial"]) .ma-phase:not(.active) { color: var(--ink); }
/* C9 — MA_TONE alignment (values only, same mechanism): each tone's accent / tint = its family's --deep / --tint (sidebar chips, pane header bar, help-sheet edge). Default theme only. */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="journey"], .ma-pane[data-tone="journey"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="journey"]) { --c: #2e7d34; --t: #f4faf1; }   /* journey → journey (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="bp"], .ma-pane[data-tone="bp"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="bp"]) { --c: #256193; --t: #f3f9fe; }   /* bp → blueprint (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="money"], .ma-pane[data-tone="money"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="money"]) { --c: #8f6c14; --t: #fffbf2; }   /* money → money (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="loans"], .ma-pane[data-tone="loans"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="loans"]) { --c: #b5472f; --t: #fff7f4; }   /* loans → loans (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="inv"], .ma-pane[data-tone="inv"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="inv"]) { --c: #53298e; --t: #f8f3fe; }   /* inv → inventory (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="people"], .ma-pane[data-tone="people"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="people"]) { --c: #932558; --t: #fef3f8; }   /* people → people (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="agenda"], .ma-pane[data-tone="agenda"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="agenda"]) { --c: #a15c17; --t: #fff9f2; }   /* agenda → agenda (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="meth"], .ma-pane[data-tone="meth"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="meth"]) { --c: #7c613c; --t: #fdf9f4; }   /* meth → methods (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="check"], .ma-pane[data-tone="check"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="check"]) { --c: #a15c17; --t: #fff9f2; }   /* check → agenda (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
:root:not([data-theme]) body.macct-page :is(#ma-nav-modules [data-tone="ba"], .ma-pane[data-tone="ba"]:not([data-pane="preview"], [data-pane="home"], [data-pane="operations"], [data-pane="money"], [data-pane="results"]), .ma-help-sheet[data-tone="ba"]) { --c: #29338e; --t: #f3f4fe; }   /* ba → smart (Preview / Home / Operations / Results panes and the bottom nav keep their tone values) */
/* Loans (C2, LoansCoral): Money Flow navy → coral hero; collected stays green, late stays red */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow :is(.ma-l2-eyebrow, .ma-l2-lentl, .ma-l2-cap, .ma-l2-boxl, .ma-l2-boxs, .ma-l2-tilel, .ma-l2-tiles2) { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow :is(.ma-l2-lent, .ma-l2-tilev, .ma-l2-box--out .ma-l2-boxv) { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow .ma-l2-box--in .ma-l2-boxv { color: #1B5539; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow .ma-l2-tile--late .ma-l2-tilev { color: #8a1f2c; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow .ma-l2-bar { background: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow .ma-l2-bar-in { background: #2e7d54; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow .ma-l2-box--out { border-left-color: var(--mid); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-flow .ma-l2-box--in { border-left-color: #2e7d54; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-rem { border-color: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-remn { background: var(--pb); color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] :is(.ma-l2-new, .ma-l2-send):not([class*="renew"]) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); color: var(--strong); box-shadow: 0 4px 12px -6px var(--pb); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-row--today { background: #fff; border-color: var(--line); box-shadow: inset 5px 0 0 #b45309, 0 0 0 1px var(--line); }   /* due today: orange status bar */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-row--late { box-shadow: inset 5px 0 0 var(--ma-danger); }   /* late: red stays */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-score--new, :root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-fold { border-color: var(--mid); color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] :is(.ma-l2-detail, .ma-l2-scorebox, .ma-l2-hist, .ma-l2-paylog) { background: var(--tint); border-color: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-kard > div:not(.ma-l2-banner) { background: #fff; border-color: var(--line); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-kard.ma-l2-kard--late.ma-l2-kard--late { border-color: var(--ma-danger); }   /* a late kard still turns red */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2 .ma-btn.ma-l2-hb--due { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border-color: var(--mid); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-hb--due :is(.ma-l2-hba, .ma-l2-hbs2) { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-hb--due .ma-l2-hbk { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] :is(.ma-lend-dresibo, .ma-lend-dpaalala, .ma-lend-dagreement, .ma-lend-back) { box-shadow: 0 0 0 1.5px var(--mid); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] :is(.ma-l2-sech, .ma-l2-ksub, .ma-l2-kscheme, .ma-l2-date, .ma-l2-rstat, .ma-l2-rleftl, .ma-l2-chev, .ma-l2-remgh, .ma-l2-remnote) { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-row--late .ma-l2-rstat { color: var(--ma-danger-ink); }
/* POS / Benta (C4) — Inventory family wherever it opens; the green "on" pill keeps its colour */
:root:not([data-theme]) body .ma-pos-back .ma-pos { background: var(--tint); }
:root:not([data-theme]) body .ma-pos-back .ma-pos-head { background: #fff; border-color: var(--line); }
:root:not([data-theme]) body .ma-pos-back .ma-pos-devhint { background: var(--tint); box-shadow: 0 0 0 1px var(--line); }
:root:not([data-theme]) body .ma-pos-back .ma-pos-devhint :is(.ma-pos-devhint-txt, .ma-pos-devhint-x) { color: var(--strong); }
:root:not([data-theme]) body .ma-pos-back .ma-pos-devhint .ma-pos-devhint-go { color: var(--ink); }
:root:not([data-theme]) body .ma-pos-back :is(.ma-pos-tile, .ma-pos-svc, .ma-pos-bar) { background: #fff; border-color: var(--line); }
:root:not([data-theme]) body .ma-pos-back :is(.ma-pos-ctile, .ma-pos-svc) { border-color: var(--mid); }
:root:not([data-theme]) body .ma-pos-back :is(.ma-pos-ctile-sym, .ma-pos-tname, .ma-pos-svc-tx, .ma-pos-svc-ic) { color: var(--strong); }
:root:not([data-theme]) body .ma-pos-back :is(.ma-pos-editlink, .ma-pos-undo, .ma-pos-lista) { background: #fff; border-color: var(--mid); color: var(--ink); }
:root:not([data-theme]) body .ma-pos-back .ma-pos-pay { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); color: var(--strong); box-shadow: 0 4px 12px -6px var(--pb); }
/* Smart Reminders (C7): its own primary action (Send SMS, Notify me) on the periwinkle gradient; the in-pane "Coming soon" pill in --ink */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="automation"] .ba-primary, :root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="automation"]) .ma-sheet .ba-primary { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); color: var(--strong); box-shadow: 0 4px 12px -6px var(--pb); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="automation"] .ba-soon-pill { color: var(--ink); border-color: var(--mid); }
/* <<< PANE COLOUR CODING */

/* >>> TITLE BAND (Oct 9, Angie — C10 step 1 "you are here"). ONLY the 9 screens with the page-label strip
   (.ma-pane-head.ma-band: Journey, Agenda, Smart Reminders, Suppliers, Production, Jobs, Cycles, Tenants, Trips)
   + Loans (.ma-l2-head). No new rows: the existing row becomes the band; the only new element is the 44×44
   icon chip (the Home tile's icon, from MA_TILE_IC). Band = grain + --pa→--pb, radius 20, inset highlight,
   --pb glow at .32. The tone left bar (inset 5px --c) and Agenda's stripe are kept. */
body.macct-page .ma-band-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
body.macct-page .ma-band-ic img { width: 24px; height: 24px; }
body.macct-page .ma-band-ic svg { width: 24px; height: 24px; }
body.macct-page .ma-pane-head.ma-band { gap: 12px; }
body.macct-page .ma-l2-head:has(> .ma-band-ic) { grid-template-columns: 44px 44px minmax(0, 1fr) auto; }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-pane-head.ma-band,
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-head { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px color-mix(in srgb, var(--pb) 32%, transparent); }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-pane-head.ma-band { padding: 10px 40px 10px 10px; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-head { padding: 10px; }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-tone]:not([data-tone=""]):not([data-tone="agenda"]) > .ma-pane-head.ma-band { box-shadow: inset 5px 0 0 var(--c), inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px color-mix(in srgb, var(--pb) 32%, transparent); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-tone="agenda"] > .ma-pane-head.ma-band::before { border-radius: 20px 0 0 20px; }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-pane-head.ma-band .ma-pane-head-ttl,
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-head .ma-l2-h { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-head .ma-l2-date { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-head .ma-l2-back { background: rgba(255,255,255,.7); border: 1.5px solid var(--mid); color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="lend"] .ma-l2-head .ma-l2-new:not([class*="renew"]) { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb)); border: 1px solid var(--line); color: var(--strong); }
/* Step 2 (Oct 10, Angie BandStep2): the same band as a NEW first row (.ma-band2) on Money Matters, Inventory, People,
   Calculators, Bookings, Devices, Methods, Roster, Consignment, Assets, the 4 Tubig screens and Trial — Loans' layout:
   back circle · 44×44 icon chip · title (Loans' serif h3) + subline · moved primary action (right). */
body.macct-page .ma-band2 { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px; border-radius: 20px; }
body.macct-page .ma-band2-back { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-ink); font-size: 28px; line-height: 1; padding: 0 0 4px; cursor: pointer; }
body.macct-page .ma-band2-back[aria-disabled="true"] { opacity: .55; }
body.macct-page .ma-band2-ttl { display: flex; flex-direction: column; min-width: 0; }
body.macct-page .ma-band2-h { font-family: var(--ma-serif); font-size: 26px; font-weight: 600; line-height: 1.1; margin: 0; color: var(--ma-ink); }
body.macct-page .ma-band2-sub { display: flex; align-items: center; margin-top: 2px; font-size: 13px; color: var(--ma-muted); }
body.macct-page .ma-band2-act:empty { display: none; }
body.macct-page .ma-band2-act .ma-btn { white-space: nowrap; }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-band2 { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--pa), var(--pb));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px color-mix(in srgb, var(--pb) 32%, transparent); }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-band2 .ma-band2-h { color: var(--strong); }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-band2 .ma-band2-sub { color: var(--ink); }
:root:not([data-theme]) #ma-biz-content .ma-pane > .ma-band2 .ma-band2-back { background: rgba(255,255,255,.7); border: 1.5px solid var(--mid); color: var(--ink); }
/* Oct 10 (C2, no duplicate titles): where the band now names the screen, the old in-page title right under it is hidden
   (CSS only — element, builder and i18n stay). A title-only row is hidden whole (no empty gap); a row that also holds a
   control keeps the control (only the title goes). Only while the band is present. */
#ma-biz-content .ma-pane:is([data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="float"]):has(> .ma-band2) > :is(.ma-tbg-pane, .ma-flt-pane) > .ma-crew-tab:first-child > .ma-crew-tabhead:first-child > .ma-crew-tabtitle { display: none; }
#ma-biz-content .ma-pane:is([data-pane="tubig-galon"], [data-pane="tubig-tally"], [data-pane="tubig-kalinisan"], [data-pane="tubig-suki"], [data-pane="float"]):has(> .ma-band2) > :is(.ma-tbg-pane, .ma-flt-pane) > .ma-crew-tab:first-child > .ma-crew-tabhead:first-child:not(:has(> :not(.ma-crew-tabtitle))) { display: none; }
#ma-biz-content .ma-pane[data-pane="roster"]:has(> .ma-band2) .ma-roster-list > .ma-mlog-title:first-child { display: none; }
/* Oct 10 r2 (C2): bands that hold an action — the title may never run under the button. The button keeps its width
   (nowrap, never shrinks); a long title word wraps (hyphenated) inside its own column; on phones the title steps
   down to 18px (the floor). Bands without an action are unchanged. */
body.macct-page .ma-band2:has(> .ma-band2-act > *) .ma-band2-act { min-width: max-content; }
body.macct-page .ma-band2:has(> .ma-band2-act > *) .ma-band2-h { overflow-wrap: break-word; hyphens: auto; }   /* page lang=en → "Cus-tomers", never under the button */
@media (max-width: 480px) {
  body.macct-page .ma-band2:has(> .ma-band2-act > *) .ma-band2-h { font-size: 18px; }
}
/* Oct 10 r2 (C4): Bookings + Trial — their label strip under the band repeated the band's name. Only the name text is
   hidden (CSS); the strip, its tone bar and its ⓘ stay. A strip left with nothing visible is hidden whole (no gap). */
#ma-biz-content .ma-pane:is([data-pane="bookings"], [data-pane="trial"]):has(> .ma-band2) > .ma-pane-head > .ma-pane-head-ttl { display: none; }
#ma-biz-content .ma-pane:is([data-pane="bookings"], [data-pane="trial"]):has(> .ma-band2) > .ma-pane-head:not(:has(> :not(.ma-pane-head-ttl))) { display: none; }
/* Oct 10 r3 F3 — Tubig Customers, phones (≤480px) only: the action gets its own full-width row under the title instead of
   squeezing it; with the room back the title returns to the normal band size. Tablet / laptop unchanged. */
@media (max-width: 480px) {
  #ma-biz-content .ma-pane[data-pane="tubig-suki"] > .ma-band2:has(> .ma-band2-act > *) { grid-template-columns: 44px 44px minmax(0, 1fr); }
  #ma-biz-content .ma-pane[data-pane="tubig-suki"] > .ma-band2 > .ma-band2-act { grid-column: 1 / -1; min-width: 0; }
  #ma-biz-content .ma-pane[data-pane="tubig-suki"] > .ma-band2 > .ma-band2-act > .ma-btn { width: 100%; min-height: 44px; }
  #ma-biz-content .ma-pane[data-pane="tubig-suki"] > .ma-band2 .ma-band2-h { font-size: 26px; }
}
/* Oct 10 r3 F5 — Tubig Delivery sheet: its title's ⓘ (absolute, top-right of the title box) sat on the last letters of
   "Delivery". The title box reserves room for it (padding only — font size unchanged), so the two never overlap. */
body.macct-page .ma-sheet:has(.ma-tbg-form) .ma-sheet-title.ma-help-host { padding-right: 32px; }
/* <<< TITLE BAND */

/* ═══════════ Universal Slice 1 — My features (☰ → My features; dark: reachable only while NP_FEATURES_ENABLED) ═══════════
   Band = the Methods palette (mock ①: #f5ece0 → #e2cbab) on the shared band2 style (grain + inset + glow, same intensity).
   Row icon chips carry the business's REAL Home-tile colours (--fa/--fb read from the Home tile set) on the same grain. */
:root:not([data-theme]) #ma-biz-content .ma-pane[data-pane="features"],
:root:not([data-theme]) body:has(#ma-biz-content .ma-pane[data-pane="features"]) :is(.ma-sheet-back, .ma-pos-back) { --pa: #f5ece0; --pb: #e2cbab; --tint: #fdf9f4; --line: #e8ddcf; --mid: #c7ad8a; --deep: #7c613c; --ink: #5d492d; --strong: #2f2618; --fl: #5d492d; --fi: #2f2618; --fs: #5d492d; --fg: rgba(226,203,171,.32); }
body.macct-page .ma-feat { display: flex; flex-direction: column; gap: 12px; }
body.macct-page .ma-feat-card { background: #fffdf8; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 5px rgba(60,45,15,.10), 0 12px 24px -10px rgba(60,45,15,.25); }
body.macct-page .ma-feat-info { padding: 12px 14px; font-size: 13.5px; color: #3f4450; line-height: 1.45; }
body.macct-page .ma-feat-info p { margin: 0; }
body.macct-page .ma-feat-info p + p { margin-top: 6px; }
body.macct-page .ma-feat-info b { color: #1d2433; }
body.macct-page .ma-feat-sec { margin: 6px 2px 0; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: #5b6472; text-transform: uppercase; }
body.macct-page .ma-feat-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; box-sizing: border-box; border-top: 1px solid #efe7d8; }
body.macct-page .ma-feat-row:first-child { border-top: 0; }
body.macct-page .ma-feat-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px;
  background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--fa, #fdf6e8) 0%, var(--fb, #f3e7cc) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px -2px rgba(60,45,15,.25); }
body.macct-page .ma-feat-ic svg { width: 22px; height: 22px; }
body.macct-page .ma-feat-emoji { display: block; }
body.macct-page .ma-feat-row.is-off .ma-feat-ic { opacity: .55; }   /* icon only — the text keeps its AA contrast */
body.macct-page .ma-feat-txt { flex: 1 1 auto; min-width: 0; }
body.macct-page .ma-feat-nmrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
body.macct-page .ma-feat-nm { font-size: 15.5px; font-weight: 700; color: #1d2433; }
body.macct-page .ma-feat-sb { font-size: 12.5px; color: #4b5260; margin-top: 2px; }
body.macct-page .ma-feat-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
body.macct-page .ma-feat-pill--adv { background: #f3ead2; color: #6b5110; }
body.macct-page .ma-feat-pill--on { background: #e3f6dc; color: #24572f; flex-shrink: 0; }
body.macct-page .ma-feat-sw { position: relative; width: 52px; height: 30px; flex-shrink: 0; border-radius: 30px; border: 1px solid #6f7888; background: #cfd4dc; padding: 0; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
body.macct-page .ma-feat-sw[aria-checked="true"] { background: #2f7d4f; border-color: #2f7d4f; }
body.macct-page .ma-feat-knob { position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
body.macct-page .ma-feat-sw[aria-checked="true"] .ma-feat-knob { transform: translateX(22px); }
body.macct-page .ma-feat-sw:focus-visible, body.macct-page .ma-feat-reset:focus-visible { outline: 3px solid #7a5d12; outline-offset: 2px; }
body.macct-page .ma-feat-sw:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-feat-sw, body.macct-page .ma-feat-knob { transition: none; } }
body.macct-page .ma-feat-reset { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15.5px; background: #fffdf8; border: 1.5px solid #d8c9a6; color: #7a5d12; cursor: pointer; margin-top: 2px; }
body.macct-page .ma-feat-note { font-size: 12px; color: #5b6472; text-align: center; margin: 0; }
body.macct-page .ma-feat-sheet-p { margin: 0 0 14px; font-size: 14px; color: #3f4450; line-height: 1.45; }
body.macct-page .ma-feat-sheet-acts { display: flex; gap: 8px; flex-wrap: wrap; }
body.macct-page .ma-feat-sheet-acts .ma-btn { flex: 1 1 140px; min-height: 46px; }
/* Universal Slice 2 — My features: "still works outside" note on an off row + the route-guard toast's button */
body.macct-page .ma-feat-offnote { margin: 4px 0 0; font-size: 12px; color: #6b5110; line-height: 1.35; }
.portal-toast .ma-feat-toastbtn { margin-left: 6px; min-height: 28px; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.portal-toast .ma-feat-toastbtn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ═══════════ Universal Slice 3 — quick business switcher (mock ②) ═══════════
   Phone: ▾ beside the business name on Preview (.ma-biz-switch, <768 only). Laptop: the sidebar context card's ▾
   (.ma-bizctx-caret, now a button). Both open the same in-page sheet listing exactly the sidebar's businesses. */
body.macct-page .ma-biz-switch { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 8px; vertical-align: middle; border: 0; border-radius: 10px; background: #f3ead2; color: #7a5d12; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-biz-switch:focus-visible, body.macct-page .ma-bizctx-caret:focus-visible, body.macct-page .ma-sw-row:focus-visible, body.macct-page .ma-sw-add:focus-visible { outline: 3px solid #7a5d12; outline-offset: 2px; }
@media (min-width: 768px) { body.macct-page .ma-biz-switch { display: none; } }
body.macct-page button.ma-bizctx-caret { border: 0; background: transparent; padding: 6px 8px; margin-right: -6px; min-width: 28px; min-height: 28px; border-radius: 8px; font: inherit; cursor: pointer; }
body.macct-page button.ma-bizctx-caret:hover { background: rgba(255,255,255,.08); color: #fff; }
body.macct-page .ma-sw-sheet { display: flex; flex-direction: column; max-height: 86vh; }
body.macct-page .ma-sw-list { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; max-height: 62vh; }
body.macct-page .ma-sw-grp { margin: 10px 2px 4px; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: #5b6472; text-transform: uppercase; }
body.macct-page .ma-sw-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 60px; box-sizing: border-box; border-radius: 14px; text-decoration: none; color: #1d2433; }
body.macct-page .ma-sw-row:hover { background: #fbf4e3; text-decoration: none; }
body.macct-page .ma-sw-row.is-cur { background: #fbf4e3; box-shadow: inset 0 0 0 1.5px #c9a84c; }
body.macct-page .ma-sw-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
  background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--swa, #f5ece0) 0%, var(--swb, #e2cbab) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px -2px rgba(60,45,15,.25); }
body.macct-page .ma-sw-row[data-cat="retail"] { --swa: #e1f0ff; --swb: #b9dcf7; }
body.macct-page .ma-sw-row[data-cat="food"] { --swa: #ffeedb; --swb: #ffd0a0; }
body.macct-page .ma-sw-row[data-cat="food-manufacturing"] { --swa: #fff5c2; --swb: #ffdc80; }
body.macct-page .ma-sw-row[data-cat="services"] { --swa: #e6e8ff; --swb: #bcc1f5; }
body.macct-page .ma-sw-row[data-cat="agriculture"] { --swa: #e3f6dc; --swb: #bfe8b2; }
body.macct-page .ma-sw-row[data-cat="online"] { --swa: #efe4ff; --swb: #d2bcf7; }
body.macct-page .ma-sw-row[data-cat="property"] { --swa: #ffe6df; --swb: #fdbcab; }
body.macct-page .ma-sw-row[data-cat="automotive"] { --swa: #eceff3; --swb: #c9d2dc; }
body.macct-page .ma-sw-row[data-cat="repair"] { --swa: #dcf6f3; --swb: #a8e6df; }
body.macct-page .ma-sw-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.macct-page .ma-sw-nm { font-size: 15.5px; font-weight: 700; color: #1d2433; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.macct-page .ma-sw-ty { font-size: 12.5px; color: #4b5260; margin-top: 2px; }
body.macct-page .ma-sw-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; background: #eef1f5; color: #3f4450; flex-shrink: 0; }
body.macct-page .ma-sw-cur { font-size: 20px; font-weight: 700; color: #2f7d4f; flex-shrink: 0; }
body.macct-page .ma-sw-chev { font-size: 18px; color: #5b6472; flex-shrink: 0; }
body.macct-page .ma-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.macct-page .ma-sw-foot { padding-top: 12px; margin-top: 8px; border-top: 1px solid #efe7d8; }
body.macct-page .ma-sw-add { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px; background: #10223f; color: #e8d9a8; font-weight: 700; font-size: 15.5px; text-decoration: none; }
body.macct-page .ma-sw-add:hover { text-decoration: none; filter: brightness(1.08); }
body.macct-page .ma-sw-note { margin: 8px 0 0; font-size: 12px; color: #5b6472; text-align: center; }
/* ═══════════ Universal Slice 4d — Archive / Restore (dark NP_ARCHIVE_ENABLED) ═══════════ */
body.macct-page .ma-sw-rowwrap { display: flex; align-items: center; gap: 4px; }
body.macct-page .ma-sw-rowwrap .ma-sw-row { flex: 1 1 auto; min-width: 0; }
body.macct-page .ma-sw-more { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #5b6472; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-sw-more:hover { background: #fbf4e3; }
body.macct-page .ma-sw-more:focus-visible, body.macct-page .ma-sw-restore:focus-visible, body.macct-page .ma-sw-arch summary:focus-visible, body.macct-page .ma-arch-go:focus-visible, body.macct-page .ma-arch-cancel:focus-visible { outline: 3px solid #7a5d12; outline-offset: 2px; }
body.macct-page .ma-sw-arch { margin: 14px 0 4px; border-top: 1px solid #efe7d8; padding-top: 6px; }
body.macct-page .ma-sw-arch summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: #5b6472; text-transform: uppercase; }
body.macct-page .ma-sw-archrow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 56px; box-sizing: border-box; color: #1d2433; opacity: .92; }
body.macct-page .ma-sw-archrow[data-cat="retail"] { --swa: #e1f0ff; --swb: #b9dcf7; }
body.macct-page .ma-sw-archrow[data-cat="food"] { --swa: #ffeedb; --swb: #ffd0a0; }
body.macct-page .ma-sw-archrow[data-cat="food-manufacturing"] { --swa: #fff5c2; --swb: #ffdc80; }
body.macct-page .ma-sw-archrow[data-cat="services"] { --swa: #e6e8ff; --swb: #bcc1f5; }
body.macct-page .ma-sw-archrow[data-cat="agriculture"] { --swa: #e3f6dc; --swb: #bfe8b2; }
body.macct-page .ma-sw-archrow[data-cat="online"] { --swa: #efe4ff; --swb: #d2bcf7; }
body.macct-page .ma-sw-restore { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1.5px solid #10223f; border-radius: 12px; background: #fff; color: #10223f; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
body.macct-page .ma-arch-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; color: #3f4450; }
body.macct-page .ma-arch-p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #3f4450; }
body.macct-page .ma-arch-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fdecea; color: #8a1f17; font-size: 13.5px; font-weight: 600; }
body.macct-page .ma-arch-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
body.macct-page .ma-arch-go { min-height: 50px; border: 0; border-radius: 14px; background: #10223f; color: #e8d9a8; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
body.macct-page .ma-arch-go:disabled { opacity: .7; cursor: progress; }
body.macct-page .ma-arch-cancel { min-height: 46px; border: 1px solid #d9cfba; border-radius: 14px; background: #fff; color: #1d2433; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
/* ═══════════ Universal Slice 4b — ＋ Add a business (dark NP_ADDBIZ_ENABLED; mock ③ cards, no price box) ═══════════
   Choice sheet (Matthew business / full blueprint) + the form sheet. Sidebar row at the end of the business list. */
body.macct-page .ma-nav-addbiz { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); min-height: 42px; margin: 8px 8px 4px; padding: 8px 12px; box-sizing: border-box; border: 1px dashed rgba(201,168,76,.55); border-radius: 10px; background: transparent; color: #e8d9a8; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
body.macct-page .ma-nav-addbiz:hover { background: rgba(201,168,76,.10); }
body.macct-page .ma-nav-addbiz:focus-visible { outline: 3px solid #c9a84c; outline-offset: 2px; }
body.macct-page .ma-ab-sheet { display: flex; flex-direction: column; max-height: 90vh; }
body.macct-page .ma-ab-opts { display: flex; flex-direction: column; gap: 10px; }
body.macct-page .ma-ab-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; box-sizing: border-box; border: 1.5px solid #e6dcc6; border-radius: 16px; background: #fffdf8; color: #1d2433; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 5px rgba(60,45,15,.10), 0 12px 24px -10px rgba(60,45,15,.25); }
body.macct-page .ma-ab-opt:hover { background: #fbf4e3; text-decoration: none; }
body.macct-page .ma-ab-opt--new { border-color: #c9a84c; }
body.macct-page .ma-ab-optic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; color: #7a5d12;
  background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, #fff5c2 0%, #ffdc80 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px -2px rgba(60,45,15,.25); }
body.macct-page .ma-ab-opt--bp .ma-ab-optic { background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, #e1f0ff 0%, #b9dcf7 100%); }
body.macct-page .ma-ab-opttxt, body.macct-page .ma-ab-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.macct-page .ma-ab-optnm, body.macct-page .ma-ab-nm { font-size: 15.5px; font-weight: 700; color: #1d2433; }
body.macct-page .ma-ab-optsb, body.macct-page .ma-ab-ex { font-size: 12.5px; color: #4b5260; margin-top: 2px; }
body.macct-page .ma-ab-body { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px 4px; }
body.macct-page .ma-ab-lbl { font-size: 12px; letter-spacing: .14em; font-weight: 700; color: #5b6472; text-transform: uppercase; margin: 2px 0 6px; }
body.macct-page .ma-ab-name { width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid #d9cfba; border-radius: 12px; background: #fff; color: #1d2433; font: inherit; font-size: 16px; }
body.macct-page .ma-ab-name:focus-visible { outline: 3px solid #7a5d12; outline-offset: 1px; border-color: #c9a84c; }
body.macct-page .ma-ab-q { margin: 16px 0 0; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: #1d2433; }
body.macct-page .ma-ab-qsub { margin: 2px 0 0; font-size: 13.5px; color: #4b5260; }
body.macct-page .ma-ab-types { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
body.macct-page .ma-ab-type { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; box-sizing: border-box; border: 2px solid transparent; border-radius: 16px; background: #fffdf8; color: #1d2433; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 5px rgba(60,45,15,.10), 0 12px 24px -10px rgba(60,45,15,.25); transition: transform .12s ease; }
body.macct-page .ma-ab-type:active { transform: scale(.97); }
body.macct-page .ma-ab-type.is-on { border-color: #c9a84c; }
body.macct-page .ma-ab-type:focus-visible, body.macct-page .ma-ab-opt:focus-visible, body.macct-page .ma-ab-create:focus-visible { outline: 3px solid #7a5d12; outline-offset: 2px; }
body.macct-page .ma-ab-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
  background: repeating-conic-gradient(rgba(255,255,255,.48) 0% 25%, rgba(0,0,0,.105) 0% 50%) 0 0 / 4px 4px, linear-gradient(135deg, var(--swa, #eceff3) 0%, var(--swb, #c9d2dc) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px -2px rgba(60,45,15,.25); }
body.macct-page .ma-ab-type[data-cat="retail"] { --swa: #e1f0ff; --swb: #b9dcf7; }
body.macct-page .ma-ab-type[data-cat="food"] { --swa: #ffeedb; --swb: #ffd0a0; }
body.macct-page .ma-ab-type[data-cat="food-manufacturing"] { --swa: #fff5c2; --swb: #ffdc80; }
body.macct-page .ma-ab-type[data-cat="online"] { --swa: #efe4ff; --swb: #d2bcf7; }
body.macct-page .ma-ab-type[data-cat="agriculture"] { --swa: #e3f6dc; --swb: #bfe8b2; }
body.macct-page .ma-ab-type[data-cat="services"] { --swa: #e6e8ff; --swb: #bcc1f5; }
body.macct-page .ma-ab-ready { font-size: 12px; color: #7a5d12; font-weight: 600; margin-top: 3px; }
body.macct-page .ma-ab-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfd4dc; box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
body.macct-page .ma-ab-type.is-on .ma-ab-radio { border: 0; background: #2f7d4f; }
body.macct-page .ma-ab-type.is-on .ma-ab-radio::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; }
body.macct-page .ma-ab-incl { margin: 14px 0 0; padding: 10px 12px; border: 1px solid #e6dcc6; border-radius: 12px; background: #fbf4e3; font-size: 13px; color: #3f4450; }
body.macct-page .ma-ab-err { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fdecea; color: #8a1f17; font-size: 13.5px; font-weight: 600; }
body.macct-page .ma-ab-create { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 14px; border: 0; border-radius: 14px; background: #10223f; color: #e8d9a8; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
body.macct-page .ma-ab-create:disabled { opacity: .7; cursor: progress; }
@media (prefers-reduced-motion: reduce) { body.macct-page .ma-ab-type { transition: none; } body.macct-page .ma-ab-type:active { transform: none; } }

/* ═══ Restaurant Orders S2 — Mesa & Orders (staff screens). Reachable only while the server flag is on (NP_ORDERS_ENABLED);
   every rule is scoped to new .ma-ord-* / bill-out classes, so existing panes are untouched. Navy #0B1B33 · gold #C9A24A.
   Text pairs (measured): navy/white 17.6:1 · gold-on-navy 6.9:1 · navy-on-gold 6.9:1 · pills ≥ 7:1. Tap targets ≥ 44px. ═══ */
body.macct-page .ma-ord { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
body.macct-page .ma-ord-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.macct-page .ma-ord-head-l { min-width: 0; }
body.macct-page .ma-ord-h { margin: 0; font-family: var(--ma-serif, Georgia, serif); font-size: 22px; line-height: 1.2; color: #0B1B33; }
body.macct-page .ma-ord-counts { margin: 4px 0 0; font-size: 14px; color: #3B4A60; font-weight: 600; }
body.macct-page .ma-ord .ma-btn, body.macct-page .ma-ord-sheet .ma-btn { min-height: 44px; background: #fff; color: #0B1B33; border: 1.5px solid #0B1B33; box-shadow: none; }
body.macct-page .ma-ord .ma-btn-primary, body.macct-page .ma-ord-sheet .ma-btn-primary { background: #C9A24A; color: #0B1B33; border-color: #C9A24A; }
body.macct-page .ma-ord .ma-btn:disabled, body.macct-page .ma-ord-sheet .ma-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
body.macct-page .ma-ord-setup { flex: 0 0 auto; }
body.macct-page .ma-ord-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { body.macct-page .ma-ord-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { body.macct-page .ma-ord-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { body.macct-page .ma-ord-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
body.macct-page .ma-ord-table { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; min-height: 88px; min-width: 0; padding: 10px 11px; border-radius: 14px; border: 2px solid #0B1B33; background: #fff; color: #0B1B33; font: inherit; text-align: left; cursor: pointer; }
body.macct-page .ma-ord-table.is-open { background: #0B1B33; color: #fff; }
body.macct-page .ma-ord-table-n { font-weight: 800; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
body.macct-page .ma-ord-table-v { font-weight: 800; font-size: 16px; color: #C9A24A; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-table-s { font-size: 12.5px; font-weight: 600; color: #3B4A60; }
body.macct-page .ma-ord-table.is-open .ma-ord-table-s { color: #DCE3EE; }
body.macct-page .ma-ord-table:focus-visible, body.macct-page .ma-ord-row:focus-visible, body.macct-page .ma-ord-tile:focus-visible { outline: 3px solid #C9A24A; outline-offset: 2px; }
body.macct-page .ma-ord-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.macct-page .ma-ord-listh { margin: 4px 0 0; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3B4A60; }
body.macct-page .ma-ord-list { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-ord-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t v" "m v"; gap: 4px 10px; align-items: center; min-height: 56px; padding: 10px 12px; border: 1.5px solid #CBD3DF; border-radius: 12px; background: #fff; color: #0B1B33; font: inherit; text-align: left; cursor: pointer; }
body.macct-page .ma-ord-row-t { grid-area: t; font-weight: 800; overflow-wrap: anywhere; }
body.macct-page .ma-ord-row-m { grid-area: m; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.macct-page .ma-ord-row-v { grid-area: v; font-weight: 800; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-row-time { font-size: 12.5px; color: #3B4A60; }
body.macct-page .ma-ord-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap; }
body.macct-page .ma-ord-pill--new { background: #E6ECF6; color: #0B1B33; }
body.macct-page .ma-ord-pill--cooking { background: #FFF0D1; color: #5C3D00; }
body.macct-page .ma-ord-pill--ready { background: #DDF3E4; color: #14532D; }
body.macct-page .ma-ord-pill--served { background: #ECEEF2; color: #333F50; }
body.macct-page .ma-ord-pill--paid { background: #0B1B33; color: #fff; }
body.macct-page .ma-ord-empty { margin: 0; font-size: 14px; color: #3B4A60; }
body.macct-page .ma-ord-hint { margin: 0; font-size: 13px; color: #3B4A60; }
body.macct-page .ma-ord-offline { margin: 0; padding: 9px 12px; border-radius: 10px; background: #FFF1DE; color: #6E3800; font-size: 13.5px; font-weight: 700; }
body.macct-page .ma-ord-err, body.macct-page .ma-pos-billerr, body.macct-page .ma-ctr-billerr { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #FDECEC; color: #8F1B1B; font-size: 13.5px; font-weight: 700; }
/* sheets (the existing .ma-sheet / .ma-asset-sheet shell: bottom sheet on phone, side panel ≥768) */
body.macct-page .ma-ord-sheet { display: flex; flex-direction: column; max-height: 92vh; }
body.macct-page .ma-ord-sbody { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; padding-bottom: 8px; min-height: 0; flex: 1 1 auto; }
body.macct-page .ma-ord-sheetbar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--ma-card, #fff); border-top: 1px solid #E3E8EF; }
body.macct-page .ma-ord-sheetbar .ma-btn { flex: 1 1 140px; }
body.macct-page .ma-ord-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 12px; background: #EEF1F6; }
body.macct-page .ma-ord-segbtn { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: #0B1B33; font: inherit; font-weight: 800; cursor: pointer; }
body.macct-page .ma-ord-segbtn.is-on { background: #0B1B33; color: #fff; }
body.macct-page .ma-ord-fl { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: #0B1B33; }
body.macct-page .ma-ord-fl .ma-sheet-in, body.macct-page .ma-ord-lnote, body.macct-page .ma-ord-count, body.macct-page .ma-ord-setname { min-height: 44px; box-sizing: border-box; width: 100%; font-size: 16px; }
body.macct-page .ma-ord-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.macct-page .ma-ord-dl .ma-ord-fl--wide, body.macct-page .ma-ord-dl .ma-ord-hint { grid-column: 1 / -1; }
body.macct-page .ma-ord-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { body.macct-page .ma-ord-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.macct-page .ma-ord-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 72px; min-width: 0; padding: 9px; border: 1.5px solid #CBD3DF; border-radius: 12px; background: #fff; color: #0B1B33; font: inherit; text-align: left; cursor: pointer; }
body.macct-page .ma-ord-tile.has-q { border-color: #0B1B33; box-shadow: inset 0 0 0 1px #0B1B33; }
body.macct-page .ma-ord-tile.is-out { background: #F1F3F6; border-style: dashed; color: #333F50; cursor: not-allowed; }
body.macct-page .ma-ord-tile-n { font-weight: 700; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
body.macct-page .ma-ord-tile-p { font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-tile-q { position: absolute; top: -8px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #0B1B33; color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
body.macct-page .ma-ord-tile-out { font-size: 11.5px; font-weight: 800; color: #8F1B1B; }
body.macct-page .ma-ord-ctile { border-style: dashed; border-color: #8A6A1E; background: #FFF9EC; }
body.macct-page .ma-ord-cart { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-ord-cline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n q v" "note note note"; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #E3E8EF; }
body.macct-page .ma-ord-cline-n { grid-area: n; font-weight: 700; overflow-wrap: anywhere; }
body.macct-page .ma-ord-cline-v { grid-area: v; font-weight: 800; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-qty { grid-area: q; display: inline-flex; align-items: center; gap: 6px; }
body.macct-page .ma-ord-qbtn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #0B1B33; background: #fff; color: #0B1B33; font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; }
body.macct-page .ma-ord-qbtn:disabled { opacity: .4; cursor: not-allowed; }
body.macct-page .ma-ord-lnote { grid-area: note; }
body.macct-page .ma-ord-nostock { font-size: 11.5px; font-weight: 700; color: #6E4E00; }
body.macct-page .ma-ord-note { min-height: 64px; resize: vertical; }
body.macct-page .ma-ord-vmeta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.macct-page .ma-ord-vnote { margin: 0; padding: 8px 10px; border-radius: 10px; background: #F4F6FA; color: #0B1B33; font-size: 14px; overflow-wrap: anywhere; }
body.macct-page .ma-ord-send-g { display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-ord-send-h { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #3B4A60; }
body.macct-page .ma-ord-vline { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
body.macct-page .ma-ord-vline-n { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
body.macct-page .ma-ord-vline-note { display: block; font-size: 13px; color: #3B4A60; font-weight: 500; }
body.macct-page .ma-ord-vline-v { font-variant-numeric: tabular-nums; font-weight: 700; }
body.macct-page .ma-ord-vtot { display: flex; justify-content: space-between; padding-top: 10px; border-top: 2px solid #0B1B33; font-size: 16px; color: #0B1B33; }
body.macct-page .ma-ord-vtot b { font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-danger { background: #8F1B1B !important; border-color: #8F1B1B !important; color: #fff !important; }
body.macct-page .ma-ord-paidnote { margin: 0; flex: 1 1 100%; font-weight: 700; color: #14532D; }
body.macct-page .ma-ord-setsub { margin: 0 0 10px; font-size: 13.5px; color: #3B4A60; }
body.macct-page .ma-ord-stepper { display: grid; grid-template-columns: 44px minmax(0, 120px) 44px; gap: 8px; align-items: center; margin-bottom: 12px; }
body.macct-page .ma-ord-stepper .ma-btn { padding: 0; font-size: 20px; }
body.macct-page .ma-ord-count { text-align: center; font-weight: 800; }
body.macct-page .ma-ord-setlist { display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-ord-setrow { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; font-weight: 700; color: #0B1B33; }
/* Operations entry */
body.macct-page .ma-ord-opsentry { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i t" "i s"; gap: 2px 10px; justify-content: stretch !important; width: 100%; min-height: 56px; margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: #0B1B33; color: #fff; border: 0; text-align: left; line-height: 1.25; }
body.macct-page .ma-ord-opsentry-ic { grid-area: i; font-size: 24px; align-self: center; }
body.macct-page .ma-ord-opsentry-t { grid-area: t; font-weight: 800; font-size: 15px; }
body.macct-page .ma-ord-opsentry-s { grid-area: s; font-size: 12.5px; font-weight: 600; color: #DCE3EE; }
/* S4 — opt-in switch (food-cart / kanto), the "Bago: Mesa & Orders" Preview card. Dark unless Orders is on for the license. */
body.macct-page .ma-ord-optin { margin: 10px 0 0; }
body.macct-page .ma-ord-optin .ma-consign-toggle { min-height: 44px; }
body.macct-page .ma-ord-optin-s { margin: 4px 2px 0; font-size: 12.5px; line-height: 1.35; color: var(--ma-ink); }
body.macct-page .ma-ord-newcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; gap: 10px; align-items: start; margin: 12px 0 0; padding: 12px 6px 12px 14px; border-radius: 14px; background: var(--ma-card); border: 1.5px solid var(--ma-gold-deep); color: var(--ma-ink); }
body.macct-page .ma-ord-newcard-ic { font-size: 26px; line-height: 1; padding-top: 2px; }
body.macct-page .ma-ord-newcard-txt { min-width: 0; }
body.macct-page .ma-ord-newcard-txt b { display: block; font-size: 15px; font-weight: 800; }
body.macct-page .ma-ord-newcard-txt p { margin: 4px 0 10px; font-size: 13px; line-height: 1.4; color: var(--ma-ink); }
body.macct-page .ma-ord-newcard-go { min-height: 44px; }
body.macct-page .ma-ord-newcard-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ma-ink); border-radius: 999px; cursor: pointer; }
/* POS bill-out mode (openPOS billOut / counter POS): the order's lines above the POS's own total */
body.macct-page .ma-pos-billlines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: #F4F6FA; }
body.macct-page .ma-pos-billline { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #0B1B33; }
body.macct-page .ma-pos-billline-n { min-width: 0; overflow-wrap: anywhere; }
body.macct-page .ma-pos-billline-v { font-variant-numeric: tabular-nums; font-weight: 700; }
body.macct-page .ma-ord-sheet .ma-sheet-x { min-width: 44px; min-height: 44px; }   /* S2 — 44px close target inside the orders sheets only */
body.macct-page .ma-ctr-billback { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; color: #0B1B33; font-weight: 700; }   /* S2 — counter bill-out ← Back (new control) */
body.macct-page .ma-ctr-billline { color: #0B1B33; }
body.macct-page .ma-pos-methods.ma-pos-methods--bill { grid-template-columns: 1fr 1fr; }   /* S5 bill-out: Lista is back → 4 methods in the POS's own 2 × 2 (no orphan) */
body.macct-page .ma-pos-billlock { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: #E6ECF6; color: #0B1B33; font-size: 13.5px; font-weight: 700; }   /* S2 — retry after a partial failure: the method the server already locked */
body.macct-page .ma-pos-methods--bill .ma-pos-method:disabled { opacity: .5; text-decoration: line-through; cursor: not-allowed; box-shadow: none; }   /* S2 — methods the server did not lock read as unavailable */

/* ═══ Restaurant Orders S3 — KITCHEN SCREEN (body.ma-kitchen; reachable only from a paired kitchen device). Dark navy.
   Text pairs (measured): #FFFFFF / #0B1B33 17.6 · #FFFFFF / #13284A 14.3 · #C9D3E3 / #13284A 9.6 · #0B1B33 / #C9A24A 6.9 ·
   #0B1B33 / #3CC47E 8.0 · #0B1B33 / #FFE9A8 15.3 · #0B1B33 / #FF8A57 7.5 · #0B1B33 / #FFFFFF 17.6. Buttons ≥ 56px. ═══ */
body.ma-kitchen { background: #0B1B33; color: #fff; margin: 0; min-height: 100vh; }
body.ma-kitchen .ma-shell, body.macct-page.ma-kitchen .ma-shell { display: block !important; grid-template-columns: none !important; width: 100%; max-width: none; margin: 0; padding: 0; background: #0B1B33; }   /* full width — the dashboard's sidebar grid never applies on the kitchen screen */
body.macct-page .ma-kit { display: flex; flex-direction: column; gap: 12px; min-height: 100vh; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background: #0B1B33; color: #fff; font-family: var(--ma-sans, system-ui, sans-serif); }
body.macct-page .ma-kit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body.macct-page .ma-kit-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
body.macct-page .ma-kit-biz { font-size: 20px; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
body.macct-page .ma-kit-pill { padding: 4px 10px; border-radius: 999px; background: #13284A; color: #C9D3E3; font-size: 13px; font-weight: 700; }
body.macct-page .ma-kit-head-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.macct-page .ma-kit-hbtn { min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #3A5580; background: #13284A; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
body.macct-page .ma-kit-sound.is-on { color: #C9D3E3; font-size: 14px; font-weight: 700; }
body.macct-page .ma-kit-offline { margin: 0; padding: 10px 14px; border-radius: 12px; background: #FF8A57; color: #0B1B33; font-weight: 800; font-size: 15px; }
body.macct-page .ma-kit-tip { margin: 0; padding: 8px 12px; border-radius: 10px; background: #13284A; color: #C9D3E3; font-size: 14px; }
body.macct-page .ma-kit-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.macct-page .ma-kit-tab { min-height: 52px; border-radius: 12px; border: 1.5px solid #3A5580; background: #13284A; color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
body.macct-page .ma-kit-tab.is-on { background: #C9A24A; color: #0B1B33; border-color: #C9A24A; }
body.macct-page .ma-kit-cols { display: block; }
body.macct-page .ma-kit-col { display: none; flex-direction: column; gap: 10px; }
body.macct-page .ma-kit-col.is-tab { display: flex; }
body.macct-page .ma-kit-colh { display: none; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .02em; color: #fff; }
body.macct-page .ma-kit-count { display: inline-flex; min-width: 30px; height: 30px; padding: 0 8px; align-items: center; justify-content: center; margin-left: 6px; border-radius: 999px; background: #C9A24A; color: #0B1B33; font-size: 16px; }
@media (min-width: 768px) {
  body.macct-page .ma-kit-tabs { display: none; }
  body.macct-page .ma-kit-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  body.macct-page .ma-kit-col { display: flex; }
  body.macct-page .ma-kit-colh { display: block; }
}
body.macct-page .ma-kit-empty { margin: 0; padding: 14px; border-radius: 12px; background: #13284A; color: #C9D3E3; font-size: 15px; }
body.macct-page .ma-kit-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: #13284A; border: 2px solid #3A5580; color: #fff; }
body.macct-page .ma-kit-card.is-late { border-color: #FF8A57; box-shadow: inset 0 0 0 2px #FF8A57; }
body.macct-page .ma-kit-card.is-pending { opacity: 1; border-style: dashed; }
body.macct-page .ma-kit-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.macct-page .ma-kit-ttl { font-size: 26px; font-weight: 900; line-height: 1.1; color: #fff; overflow-wrap: anywhere; }
body.macct-page .ma-kit-dagdag { padding: 4px 10px; border-radius: 8px; background: #C9A24A; color: #0B1B33; font-weight: 900; font-size: 14px; letter-spacing: .06em; }
body.macct-page .ma-kit-time { margin-left: auto; font-size: 16px; font-weight: 800; color: #C9D3E3; font-variant-numeric: tabular-nums; }
body.macct-page .ma-kit-time.is-late { color: #FFB291; }
body.macct-page .ma-kit-latebadge { padding: 2px 8px; border-radius: 6px; background: #FF8A57; color: #0B1B33; font-weight: 900; letter-spacing: .06em; }
body.macct-page .ma-kit-meta { margin: 0; font-size: 15px; font-weight: 700; color: #C9D3E3; }
body.macct-page .ma-kit-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
body.macct-page .ma-kit-line { font-size: 21px; font-weight: 700; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
body.macct-page .ma-kit-q { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
body.macct-page .ma-kit-lnote { display: block; margin-top: 2px; padding: 3px 8px; border-radius: 6px; background: #FFE9A8; color: #0B1B33; font-size: 15px; font-weight: 700; }
body.macct-page .ma-kit-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFE9A8; color: #0B1B33; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
body.macct-page .ma-kit-dl { padding: 8px 10px; border-radius: 10px; background: #0B1B33; color: #fff; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
body.macct-page .ma-kit-btn { min-height: 56px; width: 100%; border: 0; border-radius: 14px; font: inherit; font-size: 19px; font-weight: 900; cursor: pointer; }
body.macct-page .ma-kit-btn--new { background: #C9A24A; color: #0B1B33; }
body.macct-page .ma-kit-btn--cooking { background: #3CC47E; color: #0B1B33; }
body.macct-page .ma-kit-btn--ready { background: #FFFFFF; color: #0B1B33; }
body.macct-page .ma-kit-btn:disabled { cursor: progress; }
body.macct-page .ma-kit-btn:focus-visible, body.macct-page .ma-kit-hbtn:focus-visible, body.macct-page .ma-kit-tab:focus-visible { outline: 3px solid #FFE9A8; outline-offset: 2px; }
body.macct-page .ma-kit-undo, body.macct-page .ma-kit-err { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px; background: #FFFFFF; color: #0B1B33; font-weight: 800; font-size: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
body.macct-page .ma-kit-err { background: #FF8A57; padding: 14px 16px; }
body.macct-page .ma-kit-undo-b { min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: #0B1B33; color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
body.macct-page .ma-kit-drawerback { position: fixed; inset: 0; z-index: 8000; background: rgba(5, 12, 24, .7); display: flex; justify-content: flex-end; }
body.macct-page .ma-kit-drawer { width: min(480px, 100vw); height: 100%; overflow-y: auto; background: #0B1B33; color: #fff; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
body.macct-page .ma-kit-menusheet { height: auto; align-self: flex-start; margin: 12px; border-radius: 16px; border: 1.5px solid #3A5580; }
body.macct-page .ma-kit-drawer-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.macct-page .ma-kit-drawer-h h2 { margin: 0; font-size: 20px; }
body.macct-page .ma-kit-srow { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #13284A; }
body.macct-page .ma-kit-srow-t { font-weight: 800; font-size: 17px; }
body.macct-page .ma-kit-srow-l { color: #C9D3E3; font-size: 15px; }
body.macct-page .ma-kit-srow-at { color: #C9D3E3; font-size: 14px; }
body.macct-page .ma-kit-menurow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.macct-page .ma-kit-confirm { margin: 0; font-size: 17px; font-weight: 700; }
body.macct-page .ma-kit--msg { align-items: center; justify-content: center; }
body.macct-page .ma-kit-msgbox { max-width: 420px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
body.macct-page .ma-kit-msg-ic { font-size: 40px; }
/* Devices & access — kitchen screens section (owner; only when Orders is on for the business) */
body.macct-page .ma-dev-kit { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ma-line, #E3E8EF); }
body.macct-page .ma-dev-kit-intro, body.macct-page .ma-dev-kit-full { margin: 0; font-size: 14px; color: #3B4A60; }
body.macct-page .ma-dev-kit-full { font-weight: 700; }
body.macct-page .ma-dev-kit .ma-btn, body.macct-page .ma-dev-kit .ma-input { min-height: 44px; }   /* S3 — 44px targets in the new kitchen section only */
body.macct-page .ma-dev-kit .ma-dev-remove { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
body.macct-page .ma-ord-table-p { display: flex; flex-wrap: wrap; gap: 4px; }   /* S3 — per-send pills on a Mesa tile */
body.macct-page .ma-ord-table.is-open .ma-ord-table-p .ma-ord-pill--paid { background: #fff; color: #0B1B33; }
body.macct-page .ma-ord-dagdag { display: inline-flex; padding: 1px 7px; border-radius: 6px; background: #C9A24A; color: #0B1B33; font-size: 11.5px; font-weight: 900; letter-spacing: .05em; vertical-align: middle; }
body.macct-page .ma-ord-send-h .ma-ord-pill { text-transform: none; letter-spacing: 0; vertical-align: middle; }

/* Oct 17 — Preview Blueprint card: the value is the plan name (text), not a peso figure */
body.macct-page .ma-ovkpi-v.ma-ovkpi-v--text { font-family: inherit; font-size: 1.05rem; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }

/* Oct 17 2026 (Angie) — in-app blueprint overlay: the bar above the viewer iframe is now the viewer's own navy, so the
   cream "‹ Back" strip no longer sits on top of a dark document. Same node, same tap target, same close handler. */
body.macct-page .ma-bpview { background: #0b1020; }
body.macct-page .ma-bpview-bar { background: #0b1020; border-bottom: 1px solid #1c2541; }
body.macct-page .ma-bpview-close { background: #121a33; border-color: #27304f; color: #e9e6dc; border-radius: 10px; }
body.macct-page .ma-bpview-close:hover { background: #182243; border-color: #3a4670; }
body.macct-page .ma-bpview-frame { background: #0b1020; }
/* S4 — one-time hint on the Mesa screen (first open) */
body.macct-page .ma-ord-hint { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #E6ECF6; color: #0B1B33; }
body.macct-page .ma-ord-hint-h { margin: 0; font-weight: 800; font-size: 15px; }
body.macct-page .ma-ord-hint-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; }
body.macct-page .ma-ord-hint-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body.macct-page .ma-ord-hint .ma-btn { min-height: 44px; }
body.macct-page .ma-ord-optin .ma-consign-toggle { color: #0B1B33; font-weight: 700; }   /* S4 — the opt-in switch text ≥ 4.5:1 in both states (the shared toggle style stays as is elsewhere) */
/* S4 — the inline ℹ️ inside the Orders screens gets a full 44 × 44 tap area; negative margins keep the 18px icon exactly
   where and how it looks today (the shared ℹ️ elsewhere is unchanged). */
body.macct-page .ma-ord .ma-help-i--inline, body.macct-page .ma-ord-sheet .ma-help-i--inline, body.macct-page .ma-dev-kit .ma-help-i--inline {
  width: 44px; height: 44px; margin: -11px -11px -11px -5px; box-sizing: border-box;
}

/* ==========================================================================
   Oct 19 (Angie, design A "IVORY & GOLD") — Preview home screen polish, ONE shared card system for every business type,
   tier, language and device. VISUAL ONLY: no value, handler, link, tier gate or element is added or removed.
   Scope: default theme + Preview page only (body.ma-ov-pane without .ma-home-pane), the same scope as the Preview layers
   above — Home, Operations, Results, Lite, counter, kitchen and the other themes are untouched. Exception (approved):
   the phone bottom nav gets the new floating bar + line icons on every pane.
   Nothing removed on restyle: every card keeps its pixel grain (lighter), inset highlight, shadow and radius.
   Colours: data-kpi → sales pink · net peach · receivables yellow · lent gold · steps mint · blueprint blue.
   Contrast vs the darker stop b: labels 4.90–6.59, sublines 6.06–7.00, values 11.7–12.9, ↓ red 4.60–4.81, ↑ green 6.37;
   PREVIEW pill 5.6 (mock #8A6A1F was 3.98 → #6E5313); health title 12.05 / caption 7.36 / pill 8.23; nav 5.84 / active 5.86.
   ========================================================================== */
:root {
  --iv-sales-a:#FDEBEF; --iv-sales-b:#F8D3DB; --iv-sales-l:#9B2C45; --iv-sales-s:#6B3A47; --iv-sales-bd:#F1C3CD; --iv-sales-dot:#C2415A; --iv-sales-g:rgba(194,65,90,.12);
  --iv-net-a:#FDF0E3;   --iv-net-b:#F9DCC0;   --iv-net-l:#8E4A18;   --iv-net-s:#6B4426;   --iv-net-bd:#F0CFAE;   --iv-net-dot:#C26A2D;   --iv-net-g:rgba(194,106,45,.12);
  --iv-recv-a:#FDF6DC;  --iv-recv-b:#F7E7B0;  --iv-recv-l:#7A5F0E;  --iv-recv-s:#5E4F24;  --iv-recv-bd:#EBD89A;  --iv-recv-dot:#B08A1E;  --iv-recv-g:rgba(176,138,30,.12);
  --iv-lent-a:#FBF1D6;  --iv-lent-b:#F2DFA6;  --iv-lent-l:#715710;  --iv-lent-s:#5E4F24;  --iv-lent-bd:#E5D090;  --iv-lent-dot:#9C7A12;  --iv-lent-g:rgba(156,122,18,.12);
  --iv-steps-a:#E7F6EF; --iv-steps-b:#CBEBDC; --iv-steps-l:#1F6B4B; --iv-steps-s:#2F5345; --iv-steps-bd:#B7DFCB; --iv-steps-dot:#2E8A63; --iv-steps-g:rgba(46,138,99,.12);
  --iv-bp-a:#E9F0FB;    --iv-bp-b:#D2DFF5;    --iv-bp-l:#24488A;    --iv-bp-s:#34466A;    --iv-bp-bd:#BFD0EE;    --iv-bp-dot:#2F5BA8;    --iv-bp-g:rgba(47,91,168,.12);
  --iv-ink:#14213D; --iv-muted:#5B6478; --iv-gold:#D4AF5A; --iv-navy:#14213D; --iv-navy-2:#1E2D50; --iv-ivory:#FFFDF8;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="sales"]       { --iv-a:var(--iv-sales-a); --iv-b:var(--iv-sales-b); --iv-l:var(--iv-sales-l); --iv-s:var(--iv-sales-s); --iv-bd:var(--iv-sales-bd); --iv-dot:var(--iv-sales-dot); --iv-g:var(--iv-sales-g); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="net"]         { --iv-a:var(--iv-net-a);   --iv-b:var(--iv-net-b);   --iv-l:var(--iv-net-l);   --iv-s:var(--iv-net-s);   --iv-bd:var(--iv-net-bd);   --iv-dot:var(--iv-net-dot);   --iv-g:var(--iv-net-g); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="receivables"] { --iv-a:var(--iv-recv-a);  --iv-b:var(--iv-recv-b);  --iv-l:var(--iv-recv-l);  --iv-s:var(--iv-recv-s);  --iv-bd:var(--iv-recv-bd);  --iv-dot:var(--iv-recv-dot);  --iv-g:var(--iv-recv-g); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="lent"]        { --iv-a:var(--iv-lent-a);  --iv-b:var(--iv-lent-b);  --iv-l:var(--iv-lent-l);  --iv-s:var(--iv-lent-s);  --iv-bd:var(--iv-lent-bd);  --iv-dot:var(--iv-lent-dot);  --iv-g:var(--iv-lent-g); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="steps"]       { --iv-a:var(--iv-steps-a); --iv-b:var(--iv-steps-b); --iv-l:var(--iv-steps-l); --iv-s:var(--iv-steps-s); --iv-bd:var(--iv-steps-bd); --iv-dot:var(--iv-steps-dot); --iv-g:var(--iv-steps-g); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="blueprint"]   { --iv-a:var(--iv-bp-a);    --iv-b:var(--iv-bp-b);    --iv-l:var(--iv-bp-l);    --iv-s:var(--iv-bp-s);    --iv-bd:var(--iv-bp-bd);    --iv-dot:var(--iv-bp-dot);    --iv-g:var(--iv-bp-g); }

/* grid: 2 equal columns, fixed rows (phone + tablet portrait), 3 columns from 1024px. An odd last card fills its row. */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 148px; gap: 12px;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis > .ma-ovkpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 156px; gap: 14px; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis > .ma-ovkpi:last-child:nth-child(odd) { grid-column: auto; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis > .ma-ovkpi:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis > .ma-ovkpi:last-child:nth-child(3n+2) { grid-column: span 2; }
}
/* the card: three rows — [chip + LABEL] / [big value] / [summary line(s)] — fixed height, text ends with "…" */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis > .ma-ovkpi[data-kpi] {
  box-sizing: border-box; height: 100%; min-height: 0; margin: 0; padding: 14px 14px 14px 14px; border-radius: 18px;
  display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; color: var(--iv-ink);
  background:
    repeating-conic-gradient(rgba(255,255,255,.30) 0% 25%, rgba(0,0,0,.066) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(150deg, var(--iv-a) 0%, var(--iv-b) 100%);
  border: 1px solid var(--iv-bd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(20,33,61,.05), 0 10px 22px var(--iv-g);
  translate: none;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-l {
  flex: none; display: block; padding-right: 16px; margin: 0; line-height: 24px;
  font-family: var(--ma-sans); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--iv-l);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-l::before {
  content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin: -2px 6px 0 0; border-radius: 7px;
  background: radial-gradient(circle at 50% 50%, var(--iv-dot) 0 3.5px, transparent 4px), rgba(255,255,255,.72);
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v {
  flex: none; margin: 12px 0 0; padding-right: 0; font-family: var(--ma-sans); font-size: 24px; font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--iv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v.ma-ovkpi-v--text { font-size: 19px; letter-spacing: -.01em; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp) {
  flex: none; display: block; margin: 2px 0 0; padding-right: 16px; font-family: var(--ma-sans); font-size: 12.5px; font-weight: 600; line-height: 17px;
  font-variant-numeric: tabular-nums; color: var(--iv-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp) * { white-space: nowrap; }
/* the amount sits at the same height on every card (12px under the label); the summary row is reserved at the bottom, empty or not */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v + :is(.ma-ovkpi-s, .ma-ovkpi-cmp) { margin-top: auto; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp).pos,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp) .pos { color: #1B5539; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp).neg,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] :is(.ma-ovkpi-s, .ma-ovkpi-cmp) .neg { color: #A3402F; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi="sales"] .ma-ovkpi-s.muted { color: var(--iv-s); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi.ma-kpi-link::after { top: auto; bottom: 13px; right: 11px; transform: none; color: var(--iv-l); opacity: .75; }   /* › beside the summary line, so the value row has the full width */
@media (min-width: 768px) {
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v { font-size: 28px; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-l { font-size: 11px; letter-spacing: .08em; }
}
@media (min-width: 1024px) {
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v { font-size: 30px; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v.ma-ovkpi-v--text { font-size: 21px; }
}

@media (max-width: 374px) {   /* narrowest phones (360): a slightly tighter label so the English labels still fit */
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-l { font-size: 10px; letter-spacing: .02em; padding-right: 14px; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-l::before { margin-right: 5px; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpis > .ma-ovkpi[data-kpi] { padding-left: 12px; padding-right: 12px; }
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v { font-size: 22px; }
}
/* money values never cut: the after-layout check (renderPreviewPane) steps an overflowing amount down */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v.ma-ovkpi-v--fit1 { font-size: 19px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ovkpi[data-kpi] .ma-ovkpi-v.ma-ovkpi-v--fit2 { font-size: 15px; }

/* header (Preview only): name in the existing serif; "<blueprint title> · NP-…" on one line; round 44px account button */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head > div:first-child > :is(.ma-biz-name, form, .ma-biz-nameform) { flex: 1 0 100%; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head .ma-biz-name { font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; color: var(--iv-ink); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head :is(.ma-biz-sub, .ma-biz-lic) {
  margin: 6px 0 0; font-family: var(--ma-sans); font-size: 14px; line-height: 20px; color: var(--iv-muted); white-space: nowrap;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head .ma-biz-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head .ma-biz-lic { flex: none; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head .ma-biz-sub + .ma-biz-lic::before { content: '\00B7'; margin: 0 6px; letter-spacing: 0; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-head .ma-biz-lic .ma-license-label { display: none; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-acts .ma-oviconbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #DCD3BF; background: var(--iv-ivory); color: var(--iv-ink);
}

/* date row: "TODAY · …" left, small gold PREVIEW pill right */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-pane[data-pane="preview"] .ma-ovlabel--withdate { align-items: center; margin: 22px 0 12px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-pane[data-pane="preview"] .ma-ovlabel--withdate .ma-ovlabel-pane {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; line-height: 16px; color: #6E5313; background: #EFE4C6;   /* mock #8A6A1F = 3.98:1 → darkened */ padding: 4px 8px; border-radius: 6px;
}

/* Business health card (Preview): dark navy, gold-ringed lock, small gold pill from data-pill (locked only). Scored
   tiers keep their real score in the same card shape. Grain, inset highlight, shadow and radius kept. */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health {
  position: relative; padding: 16px 16px 16px 16px; gap: 12px; border-radius: 18px; border-color: transparent;
  background:
    repeating-conic-gradient(rgba(255,255,255,.105) 0% 25%, rgba(0,0,0,.18) 0% 50%) 0 0 / 4px 4px,
    linear-gradient(135deg, var(--iv-navy) 0%, var(--iv-navy-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(15,27,51,.22);
  translate: none;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health .ma-hs-title { font-family: var(--ma-serif); font-size: 18px; font-weight: 600; color: #F5F1E8; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health .ma-hs-cap:not(.ma-hs-cap--red) { color: #B8BFCE; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health.ma-hs-good .ma-hs-cap { color: #b9ebd0; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health.ma-hs-ok .ma-hs-cap { color: #f3dfa6; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring::before { background: #18274A; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health.ma-hs-lockcard .ma-hs-ring { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(212,175,90,.6); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health.ma-hs-lockcard .ma-hs-ring::before { background: transparent; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health.ma-hs-lockcard .ma-hs-lockglyph,
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health.ma-hs-lockcard .ma-hs-lockglyph .ma-ic { color: var(--iv-gold); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health[data-pill]::after {
  content: attr(data-pill); flex: none; align-self: center; margin-left: auto;
  font-family: var(--ma-sans); font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1; color: #0F1B33;
  background: var(--iv-gold); padding: 7px 10px; margin-right: 14px; border-radius: 999px; white-space: nowrap;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health .ma-hs-txt { flex: 1 1 0; min-width: 0; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health[data-pill] { flex-wrap: wrap; row-gap: 10px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health[data-pill] .ma-hs-txt { flex: 1 1 var(--iv-hs-txt, 170px); }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health[data-pill] .ma-hs-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health[data-pill] .ma-hs-txt { padding-right: 0; }   /* the pill keeps clear of the ⓘ itself */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health .ma-hs-ring { width: 48px; height: 48px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-ov .ma-hs-card.ma-ov-health .ma-hs-cap { font-size: 13px; line-height: 17px; }

/* action buttons (Preview only): equal width, 56px; primary gold filled, Expense outlined with red text */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-quickadd--home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-quickadd--home .ma-qa-btn {
  min-height: 56px; height: 56px; width: 100%; border-radius: 16px; font-family: var(--ma-sans); font-size: 16px; font-weight: 800; translate: none;
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-quickadd--home .ma-qa-btn.ma-qa-neworder {
  background: var(--iv-gold); border: 0; color: #0F1B33; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(176,138,48,.28);
}
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-quickadd--home .ma-qa-btn.ma-qa-gastos {
  background: var(--iv-ivory); border: 1.5px solid #E2C9C3; color: #9E3A2C; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(158,58,44,.08);
}

/* phone spacing: 20px side margins on Preview */
@media (max-width: 767px) {
  :root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) .ma-main { padding-left: 20px; padding-right: 20px; }
}
/* touch targets ≥44px on Preview without moving anything: an invisible hit area around the small ✎ and Subscribe */
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content :is(.ma-biz-editname, #ma-freechip button) { position: relative; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content .ma-biz-editname::after { content: ''; position: absolute; inset: -12px; }
:root:not([data-theme]) body.ma-ov-pane:not(.ma-home-pane) #ma-biz-content #ma-freechip button::after { content: ''; position: absolute; inset: -9px -4px; }

/* phone bottom nav (every pane, approved): floating rounded bar, active item = soft gold pill. Icons: the original colour
   emoji (Oct 19, Angie: line icons reverted — the nav markup is back to exactly main before #19). */
:root:not([data-theme]) #ma-biz-content .ma-botnav {
  left: 16px; right: 16px; padding: 6px; border-radius: 22px; background: var(--iv-ivory); border: 1px solid #E7DFCC;
  box-shadow: 0 10px 28px rgba(20,33,61,.10), 0 2px 6px rgba(20,33,61,.05);
}
:root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item { min-height: 54px; border-radius: 16px; color: var(--iv-muted); }
:root:not([data-theme]) #ma-biz-content .ma-botnav .ma-bn-item.active { background: #F3E7C4; color: #6E5313; }

/* ==========================================================================
   Oct 19 (Angie) — Home "Tables & Orders" / "Mesa & Orders" tile: its own colour family "orders" (soft lime). It was plain
   white since it was added (Oct 16): the tile has no help id, so FC_HOME never gave it a family. Lime is a hue no other Home
   tile uses on any dashboard, so no Home shows two tiles alike. A NEW family name, so the generated HomeSoftDistinct rules
   (which test data-fc="inventory" etc.) match exactly as before. The Advanced badge, icon, ℹ️-free layout and link are unchanged.
   ========================================================================== */
:root { --fc-orders-bg: #EEF6D4; --fc-orders-ink: #4E5F12; }
:root:not([data-theme]) body.macct-page .ma-tile.ma-fc[data-fc="orders"] { --fc-bg: var(--fc-orders-bg); }
:root:not([data-theme]) body.macct-page .ma-home-nav .ma-tile.ma-fc[data-fc="orders"] { --tile-ink: var(--fc-orders-ink); }
:root:not([data-theme]) body.macct-page .ma-tilegrid.ma-home-nav > .ma-tile.ma-fc[data-fc="orders"] { --ht-a: #f2f9d6; --ht-b: #d6ea96; --glow: rgba(214,234,150,0.32); }
/* ═══ QR orders Q2 — staff side (Mesa additions + reject sheet + QR codes sheet). Drawn only while the QR endpoints answer
   200 (NP_QR_ORDERS on + pilot); every rule is scoped to new .ma-ord-qr* classes, so nothing existing changes.
   Same Mesa pairs: navy #0B1B33 on white 17.6:1 · navy on gold #C9A24A 6.9:1 · #3B4A60 on white 9.4:1 ·
   #8F1B1B on #FDECEC 7.7:1 · #6E3800 on #FFF1DE 9.0:1. Tap targets ≥ 44px. ═══ */
body.macct-page .ma-ord-qrcount { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #C9A24A; color: #0B1B33; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-qr { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px solid #C9A24A; border-radius: 16px; background: #FFFBF0; }
body.macct-page .ma-ord-qrhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body.macct-page .ma-ord-qrh { margin: 0; font-size: 16px; font-weight: 800; color: #0B1B33; }
body.macct-page .ma-ord-qrcard { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px solid #CBD3DF; border-radius: 12px; background: #fff; color: #0B1B33; }
body.macct-page .ma-ord-qrcard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
body.macct-page .ma-ord-qrwait { font-size: 13px; font-weight: 600; color: #3B4A60; }
body.macct-page .ma-ord-qrlines, body.macct-page .ma-ord-qrchgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
body.macct-page .ma-ord-qrlines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
body.macct-page .ma-ord-qrlines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.macct-page .ma-ord-qrnote { margin: 0; padding: 7px 10px; border-radius: 9px; background: #EEF1F6; color: #0B1B33; font-size: 13.5px; overflow-wrap: anywhere; }
body.macct-page .ma-ord-qrchg { padding: 7px 10px; border-radius: 9px; background: #FFF1DE; color: #6E3800; font-size: 13.5px; font-weight: 700; }
body.macct-page .ma-ord-qrtot { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid #E3E8EF; font-weight: 800; font-variant-numeric: tabular-nums; }
body.macct-page .ma-ord-qracts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.macct-page .ma-ord-table-qr { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #C9A24A; color: #0B1B33; font-size: 12px; font-weight: 800; line-height: 1.5; }
body.macct-page .ma-ord-qrreasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 12px; }
body.macct-page .ma-ord-qrreason { min-height: 52px; }
body.macct-page .ma-ord-qrrows { display: flex; flex-direction: column; gap: 8px; }
body.macct-page .ma-ord-qrrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1.5px solid #CBD3DF; border-radius: 12px; background: #fff; color: #0B1B33; font-weight: 800; }
body.macct-page .ma-ord-qrwarn { margin: 0; padding: 9px 12px; border-radius: 10px; background: #FFF1DE; color: #6E3800; font-size: 13.5px; font-weight: 700; }
body.macct-page .ma-ord-qrcard .ma-btn:focus-visible, body.macct-page .ma-ord-qr .ma-btn:focus-visible, body.macct-page .ma-ord-qrrej .ma-btn:focus-visible { outline: 3px solid #C9A24A; outline-offset: 2px; }

/* ⓘ everywhere (Angie, Oct 20): every ⓘ gets a ≥ 44×44 touch area — an invisible ring (::after) around the SAME 26px / 22px icon.
   No visual or layout change: the icon keeps its size and place; static icons become position:relative with their offsets reset
   (relative + auto offsets = exactly where they were). The Orders / Kitchen icons are already 44px → ring 0. */
body.macct-page .ma-help-i::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
body.macct-page .ma-help-i--inline,
body.macct-page .ma-biz-acts .ma-pane-head .ma-help-i { position: relative; top: auto; right: auto; }
body.macct-page .ma-help-i--inline::after { inset: -11px; }
body.macct-page .ma-ord .ma-help-i--inline::after, body.macct-page .ma-ord-sheet .ma-help-i--inline::after, body.macct-page .ma-dev-kit .ma-help-i--inline::after { inset: 0; }
/* flush inline ⓘ (Oct 20): the new card ⓘ never add height to the text line they sit in (negative block margins = the 22px icon
   counts as ~14px in the line box); the 44px touch ring is unchanged. */
body.macct-page .ma-help-i--inline.ma-help-i--flush { margin-top: -4px; margin-bottom: -4px; }
/* …inside Tables & Orders / its sheets / Devices-kitchen the inline ⓘ is already a 44px box with its own -11px margins — keep those. */
body.macct-page .ma-ord .ma-help-i--flush, body.macct-page .ma-ord-sheet .ma-help-i--flush, body.macct-page .ma-dev-kit .ma-help-i--flush { margin: -11px -11px -11px -5px; }
body.macct-page .ma-tbg-kpi > .ma-help-i { top: auto; bottom: var(--sp-1); }   /* Tubig line: ⓘ beside the short last row, clear of the long first one */
body.macct-page .ma-upsell > .ma-help-i { top: 9px; right: 40px; }   /* custom-business blueprint card: ⓘ sits beside the ✕ */
body.macct-page .ma-help-i--inline.ma-help-i--tail { margin-left: 4px; margin-right: -26px; }   /* ends a line of text without taking width, so it never wraps it */

/* ==========================================================================
   Oct 21 (Angie) — TILE GRIDS: one rule for every 2-column tile grid (Home "Your business", Inventory/Paninda,
   Money Matters, Calculators, People, Bookings, counter Home). LAYOUT ONLY — colours, icons, 3× grain, ⓘ chips,
   GABAY and features untouched.
   · Equal heights: every tile in a grid is the same height (rows 1fr, tile fills its cell); the odd last tile
     keeps spanning the full row at the SAME height.
   · Title: one line with "…". Subline: max 2 lines (clamp) and 2 lines of space always reserved, so short and
     long tiles are the same size.
   · Status pills (Naka-off / count / 🔒 / Coming soon) are direct children on the top row next to the icon, LEFT of
     the ⓘ, white-space: nowrap — they never wrap ("Naka- / off") or squeeze the title.
   ========================================================================== */
body.macct-page .ma-tilegrid { grid-auto-rows: 1fr; align-items: stretch; }
body.macct-page .ma-tilegrid > .ma-tile { position: relative; height: 100%; min-width: 0; }
body.macct-page .ma-tilegrid .ma-tile-txt { min-width: 0; max-width: 100%; }
/* Home "Your business" keeps its own ≥768 type scale + wrapping (big 3–4 column tiles); the one-line title /
   2-line subline rule applies to Home on phones and to every other grid at all widths. */
body.macct-page .ma-tilegrid:not(.ma-home-nav) .ma-tile-txt > b { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.macct-page .ma-tilegrid:not(.ma-home-nav) .ma-tile-hint {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.3; min-height: 2.6em;
}
@media (max-width: 767px) {
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-txt > b { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.macct-page .ma-tilegrid.ma-home-nav .ma-tile-hint {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.3; min-height: 2.6em;
  }
}
/* Status pills are DIRECT children of the tile (no wrapper element, so element counts stay identical). A tile that
   has one lays out as a small grid: row 1 = icon … pill(s) (right-aligned, left of the ⓘ), row 2 = the text. */
body.macct-page .ma-tilegrid > .ma-tile:has(> :is(.ma-tile-badge, .ba-soon-pill, .ba-adv-chip)) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; justify-items: start;
}
body.macct-page .ma-tilegrid > .ma-tile:has(> :is(.ma-tile-badge, .ba-soon-pill, .ba-adv-chip)) > .ma-tile-ic { grid-row: 1; grid-column: 1; }
body.macct-page .ma-tilegrid > .ma-tile:has(> :is(.ma-tile-badge, .ba-soon-pill, .ba-adv-chip)) > .ma-tile-txt { grid-row: 2; grid-column: 1 / -1; width: 100%; }
body.macct-page .ma-tilegrid > .ma-tile > :is(.ma-tile-badge, .ba-soon-pill, .ba-adv-chip) {
  grid-row: 1; align-self: start; justify-self: end; margin: 4px 0 0 4px; white-space: nowrap; flex: none;
}
body.macct-page .ma-tilegrid > .ma-tile > :is(.ma-tile-badge, .ba-soon-pill, .ba-adv-chip):first-of-type { grid-column: 2; }
body.macct-page .ma-tilegrid > .ma-tile.ma-help-host > :is(.ma-tile-badge, .ba-soon-pill, .ba-adv-chip):has(+ .ma-tile-txt) { margin-right: 26px; }
/* Home "Your business" on phones uses the Paninda layout (Angie, Oct 21): icon on top, ⓘ top-right, full-width
   one-line title — so every Home title fits instead of being squeezed beside the icon. ≥768 unchanged. */
@media (max-width: 767px) {
  body.ma-home-pane .ma-tilegrid.ma-home-nav > .ma-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  body.ma-home-pane .ma-tilegrid.ma-home-nav > .ma-tile > .ma-tile-txt { width: 100%; flex: none; }
}
/* Odd count → the last VISIBLE tile spans the full row at the same height, wherever a grid is 2 columns
   (inline display:none tiles — e.g. Home's unconfirmed Suppliers probe — don't count). */
@media (max-width: 767px) {
  body.macct-page .ma-tilegrid > .ma-tile:nth-child(odd of .ma-tile:not([style*="display: none"]):not([hidden])):nth-last-child(1 of .ma-tile:not([style*="display: none"]):not([hidden])) { grid-column: 1 / -1; }
}
body.macct-page .ma-tilegrid.ma-inv-grid > .ma-tile:nth-child(odd of .ma-tile:not([style*="display: none"]):not([hidden])):nth-last-child(1 of .ma-tile:not([style*="display: none"]):not([hidden])) { grid-column: 1 / -1; }

/* ==========================================================================
   Oct 22 (Angie) — SIDEBAR SCROLL HINT. When the link list is longer than the window, a soft fade at the bottom
   edge shows there is more below. CSS only (no element, no markup change): a sticky ::after spacer at the end of
   the scrolling list. While the list overflows it sticks to the bottom over the links; at the end of the list (or
   when everything fits) it sits after the last link over empty sidebar colour, so it is invisible.
   Tablet/desktop: the .ma-nav list scrolls inside the sticky 100vh sidebar (solid #0D1B2E).
   Phone: the whole drawer (.ma-sidebar) scrolls (navy gradient → --ma-navy-b at the bottom).
   ========================================================================== */
@media (min-width: 768px) {
  body.macct-page .ma-sidebar .ma-nav::after {
    content: ''; position: sticky; bottom: 0; display: block; height: 56px; flex: none; margin: 0 -10px;
    background: linear-gradient(to bottom, rgba(13, 27, 46, 0), rgba(13, 27, 46, .85) 55%, #0D1B2E 90%); pointer-events: none;
  }
}
@media (max-width: 767px) {
  body.macct-page .ma-sidebar::after {
    content: ''; position: sticky; bottom: 0; display: block; height: 56px; flex: none; margin: auto -18px 0;
    background: linear-gradient(to bottom, transparent, var(--ma-navy-b) 90%); pointer-events: none;
  }
}

/* F2 (Oct 22) — farm logging: final-harvest tick in the brand colour (not the red "unrecorded" tick),
   the edit-mode Cancel link under Save, and the dated deaths / contamination list on a cycle card. */
body.macct-page .ma-h-final input { accent-color: var(--ma-gold); }
body.macct-page .ma-cyc-cancel { grid-column: 1 / -1; justify-self: center; min-height: 44px; }
body.macct-page .ma-loss-log { color: var(--ma-muted); font-size: 0.8rem; }

/* Costing (Oct 22) — the recipe / formula / design card's numbers sit in one labelled COSTING box
   (cost per batch, cost per piece, selling price, profit per piece + %). Adds a box; removes nothing. */
body.macct-page .ma-rcard-nums.ma-rcard-costing {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px 16px;
  margin: 10px 0 0; padding: 10px 12px 12px; border: 1px solid var(--ma-line); border-radius: 12px;
  background: color-mix(in srgb, var(--ma-gold-tint, #f6ecd6) 60%, transparent);   /* see-through: the card's grain still shows */
}
body.macct-page .ma-rcard-costlbl { grid-column: 1 / -1; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-gold-deep); }
body.macct-page .ma-rcard-costing > span { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.3; min-width: 0; }
body.macct-page .ma-rcard-costing strong { font-size: 15px; }
body.macct-page .ma-prodrecipe-sub { margin: -4px 0 10px; }

/* F3 (Oct 22) — farm check card on a cycle (schedule / water / nutrient / climate) + its sheets.
   Adds rules only; colours are the existing tokens (success / amber / danger / gold / slate). */
body.macct-page .ma-chk { margin-top: 8px; }
body.macct-page .ma-chk-title { font-weight: 800; margin: 0 0 4px; padding-right: 30px; }
body.macct-page .ma-chk-meta { margin: 0 0 6px; }
body.macct-page .ma-chk-muted, body.macct-page .ma-chk-src { color: var(--ma-muted); }
body.macct-page .ma-chk-src { margin: 4px 0 0; }
body.macct-page .ma-chk-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px dashed var(--ma-line); }
body.macct-page .ma-chk-rowname { margin: 0; flex: 1 1 170px; min-width: 0; }
body.macct-page .ma-chk-rowact { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
body.macct-page .ma-chk-rowact .ma-textbtn { min-height: 44px; }
body.macct-page .ma-chk-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
body.macct-page .ma-chk-st--over, body.macct-page .ma-chk-st--bad { background: var(--ma-danger-tint); color: var(--ma-danger-ink); }
body.macct-page .ma-chk-st--due { background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-chk-st--soon, body.macct-page .ma-chk-st--later, body.macct-page .ma-chk-st--noday { background: var(--ma-cat-purple-tint); color: var(--ma-cat-purple-ink); }
body.macct-page .ma-chk-st--done, body.macct-page .ma-chk-st--ok { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-chk-st--warn { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-chk-lock { border: 1px solid var(--ma-line); background: var(--ma-gold-soft); color: var(--ma-gold-ink); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; min-height: 28px; }
body.macct-page .ma-chk-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
body.macct-page .ma-chk-tile { position: relative; display: inline-flex; flex-direction: column; gap: 2px; min-width: 86px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ma-line); background: var(--ma-paper); }
body.macct-page .ma-chk-tile small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
body.macct-page .ma-chk-tile strong { font-size: 15px; font-variant-numeric: tabular-nums; }
body.macct-page .ma-chk-tile--ppm, body.macct-page .ma-chk-tile--contam { padding-right: 32px; }
body.macct-page .ma-chk-tile--ok { background: var(--ma-success-tint); color: var(--ma-success-ink); }
body.macct-page .ma-chk-tile--warn { background: var(--ma-cat-amber-tint); color: var(--ma-cat-amber-ink); }
body.macct-page .ma-chk-tile--bad { background: var(--ma-danger-tint); color: var(--ma-danger-ink); }
body.macct-page .ma-chk-warn { margin: 6px 0 0; }
body.macct-page .ma-chk-warn--bad { color: var(--ma-danger-ink); font-weight: 700; }
body.macct-page .ma-chk-warn--warn { color: var(--ma-cat-amber-ink); }
body.macct-page .ma-chk-sheet .ma-chk-srow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px dashed var(--ma-line); }
body.macct-page .ma-chk-sheet .ma-chk-son { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; min-height: 32px; }
body.macct-page .ma-chk-sheet .ma-chk-son input { width: 20px; height: 20px; accent-color: var(--ma-gold); }
body.macct-page .ma-chk-sheet .ma-chk-nm { flex: 1 1 100%; }
body.macct-page .ma-chk-sheet .ma-chk-sdays, body.macct-page .ma-chk-sheet .ma-chk-sdone { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ma-ink-soft); }
body.macct-page .ma-chk-sheet .ma-chk-d1, body.macct-page .ma-chk-sheet .ma-chk-d2 { width: 64px; }
body.macct-page .ma-chk-sheet .ma-chk-dn { width: auto; }
body.macct-page .ma-chk-sheet .ma-chk-sdays input, body.macct-page .ma-chk-sheet .ma-chk-sdone input, body.macct-page .ma-chk-sheet .ma-chk-rgrow input { margin: 0; }
body.macct-page .ma-chk-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 8px; }
body.macct-page .ma-chk-in { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ma-ink-soft); }
body.macct-page .ma-chk-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
body.macct-page .ma-chk-table { width: 100%; border-collapse: collapse; }
body.macct-page .ma-chk-table th { font-size: 11px; color: var(--ma-muted); padding: 4px; text-align: center; }
body.macct-page .ma-chk-td { padding: 4px; text-align: center; font-size: 13px; }
body.macct-page .ma-chk-tdday { text-align: left; white-space: nowrap; }
body.macct-page .ma-chk-rgset { padding: 6px 0 10px; border-top: 1px dashed var(--ma-line); }
body.macct-page .ma-chk-rgrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; font-size: 13px; }
body.macct-page .ma-chk-rglbl { flex: 1 1 100%; font-weight: 700; }
body.macct-page .ma-chk-rgrow label { display: inline-flex; align-items: center; gap: 4px; color: var(--ma-ink-soft); }
body.macct-page .ma-chk-rgrow input { width: 70px; }
/* Counter Leave guard — unsynced rows warning */
.ma-ctr-unsynced { color: var(--ma-danger-ink); font-weight: 600; }
.ma-ctr-unsynced-list { margin: 0 0 12px; padding-left: 18px; max-height: 180px; overflow: auto; font-size: 13px; color: var(--ma-ink); display: grid; gap: 4px; }
.ma-ctr-unsynced-tip { margin: 0 0 12px; font-size: 13px; color: var(--ma-ink); }
.ma-ctr-unsynced-btns { flex-direction: column; }
.ma-ctr-danger { background: transparent; color: var(--ma-danger-ink); border: 1px solid var(--ma-danger); min-height: 44px; }
/* Counter: the owner header hides its drawer + scrim from 768px (the sidebar takes over), but the counter reuses
   them for its ··· menu and the Leave confirm — keep them on tablets/desktops or Leave can't be reached */
@media (min-width: 768px) { .ma-hdr-drawer.ma-ctr-drawer, .ma-hdr-scrim.ma-ctr-scrim { display: block !important; } }
/* Storage full — the row was NOT saved (lasting, dismissible) */
.ma-wq-full { position: relative; margin: 10px 12px; padding: 10px 44px 10px 14px; border-radius: 10px; background: var(--ma-danger-tint); border: 1px solid var(--ma-danger); color: var(--ma-danger-ink); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ma-wq-full-txt { margin: 0; }
.ma-wq-full-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; }

/* F4 (Oct 22) — profit outlook: the "tantiya" (estimate) marker next to a default target / yield. */
body.macct-page .ma-out-tant { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--ma-gold-soft); color: var(--ma-gold-ink); }
body.macct-page .ma-out-line { margin: 4px 0 0; }