/* =========================================================================
MAESTROX — App layer (.mxa-*)
Native-app screens for iOS / Android and the mobile web view.
Load after: tokens.css → canvas.css → components.css → glass.css →
glass-input.css → mobile.css → app.css
Same oxblood / ivory direction as discussions.css.
========================================================================= */
:root,
.mxa{
--mxa-ui:var(--font-ui,'Work Sans','Josefin Sans',system-ui,sans-serif);
--espresso:#0f0b07;
--espresso-2:#1b140d;
--ink:#5e1418;
--ink-fg:#f6e9e2;
--ink-accent:#e2b979;
--paper:#fffdf8;
--paper-line:#e8dfcc;
--stream:#f4ede1;
/* mobile metrics — kept local so the layer is hermetic */
--m-gutter:16px;
--m-touch:44px;
position:relative;display:flex;flex-direction:column;height:100%;background:var(--stream);color:var(--fg-1);font-family:var(--font-body)
}
.doc{--mxa-ui:var(--font-ui,'Work Sans','Josefin Sans',system-ui,sans-serif)}
/* ---- status + app bar: 86px total, was ~340 ---- */
.mxa-status{height:34px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:var(--espresso);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.mxa-status svg{width:44px;height:12px;fill:currentColor}
.mxa-bar{height:52px;flex:none;display:flex;align-items:center;gap:6px;padding:0 10px 0 16px;background:var(--espresso);color:#fff}
.mxa-bar .logo{height:36px;width:auto;display:block}
.mxa-bar .sp{flex:1}
.mxa-bar .tstack{flex:1;min-width:0}
.mxa-bar .tstack .e{display:block;font-size:8.5px;font-weight:700;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--ink-accent)}
.mxa-bar .tstack b{display:block;font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-ib{position:relative;width:var(--m-touch);height:var(--m-touch);flex:none;display:grid;place-items:center;border:0;background:none;border-radius:50%;color:rgba(255,255,255,.86);cursor:pointer}
.mxa-ib svg{width:21px;height:21px}
.mxa-ib:active{background:rgba(255,255,255,.1)}
.mxa-ib .dot{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:#c4453b;box-shadow:0 0 0 2px var(--espresso)}
.mxa-ib.gold{width:36px;height:36px;margin:0 4px;background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso)}
.mxa-ib.gold svg{width:18px;height:18px;stroke-width:2.2}
.mxa-me{width:32px;height:32px;margin-left:4px;flex:none;border-radius:50%;background:var(--ink);color:var(--ink-accent);display:grid;place-items:center;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:15px;box-shadow:0 0 0 1.5px rgba(226,185,121,.5);overflow:hidden;position:relative}
/* The avatar photo must fill + clip to the circle; without this the raw ![]()
isn't sized/clipped and the oxblood button bg bleeds at the corners (reads as
a bad ring). .avatar-fallback (base.css) is absolute+display:none until the
img errors, so sizing the img is all that's needed. */
.mxa-me > img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.mxa-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:none}
.mxa-scroll::-webkit-scrollbar{display:none}
/* ---- .mxa-head — THE page header. Every screen uses it, same anatomy:
crumb (path from Home, gold current) · title + one primary action · meta.
The app bar above it is identical on every screen. ---- */
.mxa-head{position:relative;flex:none;padding:6px var(--m-gutter) 18px;background:radial-gradient(120% 100% at 100% 0%,rgba(200,169,94,.22),transparent 62%),var(--espresso);color:#fff}
.mxa-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,185,121,.5),transparent)}
.mxa-head.has-overlap{padding-bottom:74px}
.mxa-crumb{display:flex;align-items:center;gap:7px;min-height:24px;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden}
.mxa-crumb a{display:inline-flex;align-items:center;gap:2px;min-height:var(--m-touch);margin-block:-10px;color:rgba(255,255,255,.72);text-decoration:none}
.mxa-crumb a svg{width:14px;height:14px;margin-left:-3px}
.mxa-crumb .sep{color:rgba(226,185,121,.55)}
.mxa-crumb .cur{color:var(--ink-accent);overflow:hidden;text-overflow:ellipsis}
.mxa-head-row{display:flex;align-items:flex-start;gap:12px;margin-top:6px;min-height:var(--m-touch)}
/* Titles wrap to two lines, then clamp — long campaign and client names
stay readable. Tile and action align to the first line so a two-line
title never shifts them. */
.mxa-head h1{flex:1;min-width:0;margin:0;padding-top:3px;font-family:var(--font-display);font-weight:400;font-size:27px;line-height:1.12;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.mxa-head .mxa-tile.logo{background:#fff}
.mxa-head h1 em{color:var(--ink-accent);font-weight:500}
.mxa-head .mxa-tile{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.mxa-head .meta{margin:6px 0 0;font-family:var(--mxa-ui);font-size:13px;line-height:1.4;color:rgba(255,255,255,.74)}
.mxa-head .meta b{color:#fff;font-weight:600}
.mxa-head .meta em{font-style:normal;color:#f0a59b;font-weight:600}
.mxa-act{width:var(--m-touch);height:var(--m-touch);flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso);box-shadow:0 6px 16px rgba(0,0,0,.35);cursor:pointer}
.mxa-act svg{width:20px;height:20px;stroke-width:2.2}
.mxa-title{padding:18px var(--m-gutter) 12px}
.mxa-title .e{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-title h1{margin:4px 0 0;font-family:var(--font-display);font-weight:500;font-size:34px;line-height:1;letter-spacing:-.01em}
.mxa-title h1 em{font-style:italic;font-weight:400;color:var(--fg-2)}
.mxa-title-row{display:flex;align-items:flex-end;gap:8px}
.mxa-title-row .grow{flex:1;min-width:0}
/* ---- section key ---- */
.mxa-key{display:flex;align-items:baseline;gap:8px;padding:18px var(--m-gutter) 8px}
.mxa-key h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.1}
.mxa-key .c{font-size:10px;font-weight:700;letter-spacing:var(--tracking-wide);color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-key a{margin-left:auto;display:inline-flex;align-items:center;gap:3px;min-height:var(--m-touch);margin-block:-14px;font-size:10px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink);text-decoration:none}
.mxa-key a svg{width:13px;height:13px}
/* ---- client tiles ---- */
.mxa-tile{flex:none;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line)}
.mxa-tile.lr{background:#000;color:#fff;font-family:var(--font-display);font-weight:600;box-shadow:none}
.mxa-tile.mx{background:#0b0906;box-shadow:none}
.mxa-tile.mx img{width:72%;height:auto}
.mxa-tile.t44{width:44px;height:44px}.mxa-tile.t44.lr{font-size:15px}
.mxa-tile.t40{width:40px;height:40px;border-radius:9px}.mxa-tile.t40.lr{font-size:14px}
.mxa-tile.t36{width:36px;height:36px;border-radius:8px}.mxa-tile.t36.lr{font-size:12px}
.mxa-tile.t22{width:22px;height:22px;border-radius:6px}.mxa-tile.t22.lr{font-size:8px}
/* ---- network marks ---- */
.mxa-net{display:inline-flex;gap:3px}
.mxa-net svg{width:16px;height:16px;border-radius:4px;display:block}
/* ---- status pills ---- */
.mxa-st{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:var(--r-pill);font-size:9px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap}
.mxa-st svg{width:10px;height:10px;stroke-width:2.4}
.mxa-st.fail{background:var(--danger-bg);color:var(--danger)}
.mxa-st.rev{background:rgba(94,20,24,.09);color:var(--ink)}
.mxa-st.sched{background:var(--neutral-bg);color:var(--neutral)}
.mxa-st.pub{background:var(--success-bg);color:var(--success)}
/* ---- tab bar: system .m-tabbar / .m-tab ---- */
.mxa .m-tabbar{flex:none;background:rgba(255,253,248,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--paper-line)}
.mxa .m-tab{position:relative;text-decoration:none}
.mxa .m-tab.is-active{color:var(--ink)}
.mxa .m-tab.is-active::after{background:var(--ink)}
.mxa .m-tab .badge{position:absolute;top:6px;left:50%;margin-left:6px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-fg);font-size:9px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--paper)}
/* =================== HOME =================== */
.mxa-hero{position:relative;padding:14px var(--m-gutter) 74px;background:radial-gradient(120% 90% at 100% 0%,rgba(200,169,94,.24),transparent 60%),var(--espresso);color:#fff;overflow:hidden}
.mxa-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,185,121,.5),transparent)}
.mxa-hero .e{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--ink-accent)}
.mxa-hero h1{margin:8px 0 0;font-family:var(--font-display);font-weight:400;font-size:36px;line-height:1.02;letter-spacing:-.01em}
.mxa-hero h1 em{color:var(--ink-accent);font-weight:500}
.mxa-hero p{margin:8px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.74)}
.mxa-hero p b{color:#fff;font-weight:600}
.mxa-needs{position:relative;z-index:2;margin:-56px var(--m-gutter) 0;background:var(--paper);border-radius:16px;box-shadow:0 14px 34px rgba(30,18,6,.16),0 0 0 1px rgba(200,169,94,.22);overflow:hidden}
.mxa-needs-h{display:flex;align-items:center;padding:12px 16px 2px;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-needs-g{display:grid;grid-template-columns:repeat(3,1fr)}
.mxa-need{display:block;min-height:var(--m-touch);padding:8px 14px 14px;text-decoration:none;color:inherit}
.mxa-need+.mxa-need{border-left:1px solid var(--paper-line)}
.mxa-need .n{display:block;font-family:var(--font-display);font-weight:500;font-size:38px;line-height:1;font-variant-numeric:lining-nums}
.mxa-need .l{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.mxa-need .l i{width:7px;height:7px;border-radius:50%;flex:none}
.mxa-need.d .n{color:var(--danger)}.mxa-need.d .l i{background:var(--danger)}
.mxa-need.a .n{color:var(--ink)}.mxa-need.a .l i{background:var(--ink)}
.mxa-need.u .l i{background:var(--gold)}
.mxa-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:16px var(--m-gutter) 4px}
.mxa-q{display:grid;justify-items:center;gap:7px;padding:4px 0;border:0;background:none;cursor:pointer;color:var(--fg-1)}
.mxa-q .ring{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line),0 4px 10px rgba(30,18,6,.06);color:var(--ink)}
.mxa-q .ring svg{width:22px;height:22px}
.mxa-q.primary .ring{background:var(--ink);color:var(--ink-accent);box-shadow:0 6px 16px rgba(94,20,24,.3)}
.mxa-q span{font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1.2;text-align:center}
.mxa-rev{display:flex;align-items:center;gap:12px;margin:0 var(--m-gutter) 8px;padding:10px 12px 10px 10px;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:inherit}
.mxa-rev .th{position:relative;width:52px;height:52px;flex:none;border-radius:10px}
.mxa-rev .th .mxa-tile{position:absolute;right:-5px;bottom:-5px;box-shadow:0 0 0 2px var(--paper)}
.mxa-rev .m{flex:1;min-width:0}
.mxa-rev .m b{display:block;font-family:var(--mxa-ui);font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-rev .m .r{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:10.5px;font-weight:600;color:var(--fg-2)}
.mxa-go{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--stream);color:var(--ink)}
.mxa-go svg{width:16px;height:16px}
/* =================== DISCUSSIONS =================== */
.mxa-search{padding:0 var(--m-gutter) 6px}
.mxa-search .glass-input{width:100%;background:var(--paper)}
.mxa-list{margin:0 var(--m-gutter);background:var(--paper);border-radius:16px;box-shadow:0 0 0 1px var(--paper-line);overflow:hidden}
.mxa-crow{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;text-decoration:none;color:inherit}
.mxa-crow+.mxa-crow{border-top:1px solid var(--paper-line)}
.mxa-crow .m{flex:1;min-width:0}
.mxa-crow .t1{display:flex;align-items:baseline;gap:8px}
.mxa-crow .t1 b{flex:1;min-width:0;font-family:var(--mxa-ui);font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-crow .t1 time{flex:none;font-size:10.5px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-crow .t2{display:flex;align-items:center;gap:8px;margin-top:3px}
.mxa-crow .t2 p{flex:1;min-width:0;margin:0;font-family:var(--mxa-ui);font-size:13px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-crow .t2 p b{color:var(--fg-1);font-weight:600}
.mxa-crow .t3{margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.mxa-crow .t3 em{font-style:normal;color:var(--danger)}
.mxa-cnt{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-fg);font-size:11px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mxa-crow.read .t1 b{font-weight:500}
/* =================== SOCIAL =================== */
.mxa-cal-h{display:flex;align-items:center;gap:2px;padding:10px 6px 2px var(--m-gutter)}
.mxa-cal-h .mo{flex:1;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1}
.mxa-cal-h .mo em{font-style:italic;font-weight:400;color:var(--fg-2)}
.mxa-cal-h .mxa-ib{color:var(--fg-1)}
.mxa-cal-h .mxa-ib svg{width:20px;height:20px}
.mxa-cal-h .today{min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--paper-line);background:var(--paper);font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-1)}
.mxa-seg{display:flex;margin:6px var(--m-gutter) 0;padding:3px;border-radius:12px;background:rgba(94,20,24,.06)}
.mxa-seg button{flex:1;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;border-radius:9px;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--fg-2);cursor:pointer}
.mxa-seg button.is-active{background:var(--paper);color:var(--fg-1);box-shadow:0 1px 4px rgba(30,18,6,.12)}
.mxa-seg i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--paper-line);color:var(--fg-1);font-size:9.5px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mxa-seg i.hot{background:var(--ink);color:var(--ink-fg)}
.mxa-week{display:grid;grid-template-columns:repeat(7,1fr);padding:12px 8px 4px}
.mxa-day{display:grid;justify-items:center;gap:4px;padding:2px 0;border:0;background:none;cursor:pointer}
.mxa-day .w{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--fg-2)}
.mxa-day .d{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);font-variant-numeric:lining-nums}
.mxa-day.past .d{color:var(--fg-3)}
.mxa-day.sel .d{background:var(--espresso);color:var(--ink-accent);box-shadow:0 4px 12px rgba(15,11,7,.28)}
.mxa-day .dots{display:flex;gap:3px;height:5px}
.mxa-day .dots i{width:5px;height:5px;border-radius:50%;display:block}
.mxa-chips{display:flex;gap:7px;padding:10px var(--m-gutter) 4px;overflow-x:auto;scrollbar-width:none}
.mxa-chips::-webkit-scrollbar{display:none}
.mxa-chip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:var(--m-touch);padding:0 14px 0 6px;border-radius:var(--r-pill);border:1px solid var(--paper-line);background:var(--paper);font-family:var(--mxa-ui);font-size:13px;font-weight:600;color:var(--fg-1);white-space:nowrap}
.mxa-chip.all{padding:0 16px;background:var(--espresso);border-color:var(--espresso);color:#fff;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mxa-post{display:flex;gap:12px;margin:0 var(--m-gutter) 8px;padding:12px;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:inherit}
.mxa-post.is-fail{box-shadow:0 0 0 1px rgba(184,52,28,.32),inset 3px 0 0 var(--danger)}
.mxa-post .tm{width:44px;flex:none;padding-top:2px}
.mxa-post .tm b{display:block;font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-post .tm span{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--fg-2)}
.mxa-post .th{position:relative;width:56px;height:56px;flex:none;border-radius:10px}
.mxa-post .th .mxa-tile{position:absolute;right:-5px;bottom:-5px;box-shadow:0 0 0 2px var(--paper)}
.mxa-post .m{flex:1;min-width:0}
.mxa-post .m p{margin:0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.35;color:var(--fg-1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mxa-post .m .r{display:flex;align-items:center;gap:7px;margin-top:7px}
.mxa-retry{margin-left:auto;min-height:30px;padding:0 11px;border-radius:var(--r-pill);border:0;background:var(--danger);color:#fff;font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}
.mxa-retry svg{width:11px;height:11px;stroke-width:2.4}
/* =================== LIBRARY =================== */
.mxa-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:14px var(--m-gutter) 0;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--paper-line)}
.mxa-stat{padding:12px 14px}
.mxa-stat+.mxa-stat{border-left:1px solid var(--paper-line)}
.mxa-stat b{display:block;font-family:var(--font-display);font-size:26px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-stat b small{font-size:15px;color:var(--fg-2)}
.mxa-stat span{display:block;margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.mxa-grid{display:grid;grid-template-columns:162px 162px;gap:14px 12px;padding:0 var(--m-gutter) 18px}
.mxa-card{display:block;text-decoration:none;color:inherit}
.mxa-card .cov{position:relative;width:162px;height:162px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(30,18,6,.08),0 8px 18px rgba(30,18,6,.12)}
.mxa-card .cov .mxa-tile{position:absolute;left:8px;bottom:8px;box-shadow:0 0 0 2px rgba(255,253,248,.9)}
.mxa-card .cov .cnt{position:absolute;right:8px;top:8px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:rgba(15,11,7,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.mxa-card .cov .cnt svg{width:11px;height:11px}
.mxa-card b{display:block;margin-top:9px;font-family:var(--mxa-ui);font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-card span.meta{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-card .cov.empty{display:grid;place-items:center;align-content:center;gap:8px;background:repeating-linear-gradient(135deg,var(--paper) 0 10px,#faf5ea 10px 20px);box-shadow:inset 0 0 0 1.5px var(--paper-line);color:var(--fg-2);font-size:10px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase}
.mxa-card .cov.empty svg{width:24px;height:24px;color:var(--gold-hover)}
.mxa-card .cov.dark{background:radial-gradient(90% 90% at 70% 20%,#2a2016,#0b0906)}
.mxa-card .cov.dark img{position:absolute;left:50%;top:44%;width:74px;transform:translate(-50%,-50%)}
.mxa-card .cov.crest{background:radial-gradient(90% 90% at 50% 30%,#fffaf0,#efe4cc)}
.mxa-sortrow{display:flex;align-items:center;gap:6px;padding:14px 6px 6px var(--m-gutter)}
.mxa-sortrow span{flex:1;font-size:10px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2)}
.mxa-sortrow .mxa-ib{color:var(--fg-2)}
.mxa-sortrow .mxa-ib.on{color:var(--ink)}
.mxa-sortrow .mxa-ib svg{width:19px;height:19px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* =================== SHARED — added with the second screen set =================== */
/* toolbar: search + filter button on one line */
.mxa-tools{display:flex;align-items:center;gap:8px;padding:14px var(--m-gutter) 4px}
.mxa-tools .glass-input{flex:1;min-width:0;background:var(--paper)}
.mxa-sq{width:var(--m-touch);height:var(--m-touch);flex:none;display:grid;place-items:center;border:1px solid var(--paper-line);border-radius:12px;background:var(--paper);color:var(--fg-1);position:relative;cursor:pointer}
.mxa-sq svg{width:19px;height:19px}
.mxa-sq .n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-fg);font-size:9.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--stream)}
/* chip-select — a dropdown that reads like a chip */
.mxa-csel{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 13px;border-radius:var(--r-pill);border:1px solid var(--paper-line);background:var(--paper);font-family:var(--mxa-ui);font-size:12.5px;font-weight:600;color:var(--fg-1);white-space:nowrap}
.mxa-csel svg{width:14px;height:14px;color:var(--fg-2)}
.mxa-csel.on{background:var(--ink);border-color:var(--ink);color:var(--ink-fg)}
.mxa-csel.on svg{color:var(--ink-accent)}
.mxa-csel .mxa-tile{margin-left:-7px}
.mxa-crow-chips{display:flex;gap:7px;padding:8px var(--m-gutter) 2px;overflow-x:auto;scrollbar-width:none}
.mxa-crow-chips::-webkit-scrollbar{display:none}
/* full-width picker row */
.mxa-pick{display:flex;align-items:center;gap:12px;margin:14px var(--m-gutter) 0;min-height:56px;padding:0 14px 0 8px;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:inherit}
.mxa-pick .ph{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--stream);color:var(--fg-2)}
.mxa-pick .ph svg{width:19px;height:19px}
.mxa-pick .m{flex:1;min-width:0}
.mxa-pick .m small{display:block;font-size:9px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-pick .m b{display:block;font-family:var(--mxa-ui);font-size:15px;font-weight:600}
.mxa-pick>svg{width:18px;height:18px;color:var(--fg-2)}
/* grouped card list (settings, notifications) */
.mxa-group{margin:0 var(--m-gutter);background:var(--paper);border-radius:16px;box-shadow:0 0 0 1px var(--paper-line);overflow:hidden}
.mxa-grow{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px 10px 12px;text-decoration:none;color:inherit}
.mxa-grow+.mxa-grow{border-top:1px solid var(--paper-line)}
.mxa-grow .ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(94,20,24,.07);color:var(--ink)}
.mxa-grow .ic svg{width:18px;height:18px}
.mxa-grow .ic.gold{background:var(--gold-faint);color:var(--gold-hover)}
.mxa-grow .m{flex:1;min-width:0}
.mxa-grow .m b{display:block;font-family:var(--mxa-ui);font-size:14.5px;font-weight:600;line-height:1.25}
.mxa-grow .m span{display:block;margin-top:2px;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-grow .v{flex:none;font-size:11px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-grow>svg{width:16px;height:16px;flex:none;color:var(--fg-3)}
.mxa-grow.danger .m b{color:var(--danger)}
.mxa-grow.danger .ic{background:var(--danger-bg);color:var(--danger)}
/* Mobile shoot admin — tappable participant row, hero location photo, edit sheet. */
.mxa-grow.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mxa-grow.tap:active{background:rgba(94,20,24,.05)}
.mxa-grow-chev{color:var(--fg-3)}
.mxa-hero-sv{display:block;margin:12px var(--m-gutter) 0;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(30,18,6,.14),0 0 0 1px var(--paper-line)}
.mxa-hero-sv img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper)}
.mxa-part-contact{margin:0 0 14px;font-family:var(--mxa-ui);font-size:12.5px;color:var(--fg-2);line-height:1.45}
.mxa-part-contact:empty{display:none}
.mxa-part-remove{margin-top:10px}
.mxa-btn.danger{background:var(--danger-bg);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(184,52,28,.25)}
/* empty state — no emoji, no shouting monospace */
.mxa-empty{display:grid;justify-items:center;text-align:center;gap:10px;margin:20px var(--m-gutter) 0;padding:34px 24px 28px;background:var(--paper);border-radius:18px;box-shadow:0 0 0 1px var(--paper-line)}
.mxa-empty .art{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff7e4,var(--gold-faint));box-shadow:0 0 0 1px rgba(200,169,94,.4),0 0 0 9px rgba(200,169,94,.09)}
.mxa-empty .art svg{width:32px;height:32px;color:var(--gold-hover)}
.mxa-empty h3{margin:8px 0 0;font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.1}
.mxa-empty p{margin:0;max-width:30ch;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.mxa-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-height:var(--m-touch);padding:0 20px;border-radius:var(--r-pill);border:0;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;text-decoration:none}
.mxa-btn svg{width:15px;height:15px;stroke-width:2.2}
.mxa-btn.primary{background:var(--ink);color:var(--ink-fg);box-shadow:0 6px 16px rgba(94,20,24,.26)}
.mxa-btn.ghost{background:transparent;color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mxa-btn.block{width:100%}
/* =================== CAMPAIGNS =================== */
.mxa-camp{display:block;margin:0 var(--m-gutter) 8px;padding:12px 14px 13px;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:inherit}
.mxa-camp .r1{display:flex;align-items:center;gap:11px}
.mxa-camp .r1 .m{flex:1;min-width:0}
.mxa-camp .r1 b{display:block;font-family:var(--mxa-ui);font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-camp .r1 span{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-camp .r1 .no{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-camp .r1>svg{width:16px;height:16px;flex:none;color:var(--fg-3)}
.mxa-stage{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:11px}
.mxa-stage i{height:4px;border-radius:2px;background:var(--paper-line);display:block}
.mxa-stage i.done{background:var(--gold)}
.mxa-stage i.now{background:var(--ink)}
.mxa-camp .r3{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.mxa-camp .r3 .cur{color:var(--ink)}
.mxa-camp .r3 .due{margin-left:auto;letter-spacing:.04em}
.mxa-camp .r3 .due.late{color:var(--danger)}
/* campaign detail: stepper */
.mxa-steps{display:grid;grid-template-columns:repeat(5,1fr);margin:14px var(--m-gutter) 0;padding:14px 4px 12px;background:var(--paper);border-radius:16px;box-shadow:0 0 0 1px var(--paper-line)}
.mxa-step{position:relative;display:grid;justify-items:center;gap:7px}
.mxa-step::before{content:"";position:absolute;top:11px;left:-50%;right:50%;height:2px;background:var(--paper-line)}
.mxa-step:first-child::before{display:none}
.mxa-step.done::before,.mxa-step.now::before{background:var(--gold)}
.mxa-step .dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:inset 0 0 0 2px var(--paper-line)}
.mxa-step .dot svg{width:13px;height:13px;stroke-width:2.6}
.mxa-step.done .dot{background:var(--gold);box-shadow:none;color:var(--espresso)}
.mxa-step.now .dot{background:var(--ink);box-shadow:0 0 0 4px rgba(94,20,24,.14);color:var(--ink-accent)}
.mxa-step.now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-accent)}
.mxa-step span{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.mxa-step.now span{color:var(--ink)}
.mxa-card2{margin:10px var(--m-gutter) 0;padding:16px;background:var(--paper);border-radius:16px;box-shadow:0 0 0 1px var(--paper-line)}
.mxa-card2 .k{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-card2 .k svg{width:15px;height:15px;color:var(--gold-hover)}
.mxa-card2 h3{margin:8px 0 0;font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.15}
.mxa-card2 p{margin:6px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.mxa-card2 p b{color:var(--fg-1);font-weight:600}
.mxa-prog{display:flex;align-items:center;gap:10px;margin:12px 0 14px}
.mxa-prog .bar{flex:1;height:6px;border-radius:3px;background:var(--paper-line);overflow:hidden}
.mxa-prog .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--ink))}
.mxa-prog b{font-family:var(--font-display);font-size:18px;font-weight:500;font-variant-numeric:lining-nums}
.mxa-send{display:flex;gap:8px;margin-top:12px}
.mxa-send .glass-input{flex:1;min-width:0;background:var(--stream)}
.mxa-send .mxa-sq{background:var(--ink);border-color:var(--ink);color:var(--ink-accent)}
/* =================== CONTENT PLANNER =================== */
.mxa-draft{position:relative;display:block;text-decoration:none;color:inherit}
.mxa-draft .cov{position:relative;width:162px;height:162px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(30,18,6,.08),0 8px 18px rgba(30,18,6,.12)}
.mxa-draft .cov.sel{box-shadow:0 0 0 3px var(--ink),0 8px 18px rgba(94,20,24,.22)}
.mxa-draft .chk{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,253,248,.9);box-shadow:0 0 0 1px rgba(30,18,6,.12)}
.mxa-draft .cov.sel .chk{background:var(--ink);box-shadow:none;color:var(--ink-accent)}
.mxa-draft .chk svg{width:15px;height:15px;stroke-width:2.8}
.mxa-draft .ai{position:absolute;right:8px;top:8px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:rgba(15,11,7,.66);color:var(--ink-accent);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}
.mxa-draft .ai svg{width:11px;height:11px}
.mxa-draft .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(10,8,5,.86));color:#fff}
.mxa-draft .cap p{margin:0;font-family:var(--mxa-ui);font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mxa-draft .cap .mxa-net{margin-top:6px}
.mxa-draft .cap .mxa-net svg{width:14px;height:14px}
.mxa-selbar{position:absolute;left:12px;right:12px;bottom:calc(var(--m-tabbar-h) + 10px);z-index:9;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:18px;background:var(--espresso);color:#fff;box-shadow:0 14px 30px rgba(15,11,7,.4)}
.mxa-selbar b{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--ink-accent)}
.mxa-selbar span{flex:1;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mxa-selbar .mxa-btn{min-height:40px;padding:0 14px;background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso)}
.mxa-selbar .x{width:40px;height:40px;display:grid;place-items:center;border:0;background:rgba(255,255,255,.1);border-radius:50%;color:#fff}
.mxa-selbar .x svg{width:16px;height:16px}
/* =================== NOTIFICATIONS =================== */
.mxa-ntf{position:relative;display:flex;gap:12px;padding:12px 14px;text-decoration:none;color:inherit}
.mxa-ntf+.mxa-ntf{border-top:1px solid var(--paper-line)}
.mxa-ntf.unread{background:linear-gradient(90deg,rgba(94,20,24,.05),transparent 60%)}
.mxa-ntf .av{position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;background:var(--gold-faint);color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mxa-ntf .av .ty{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--ink-accent);box-shadow:0 0 0 2px var(--paper)}
.mxa-ntf .av .ty svg{width:11px;height:11px;stroke-width:2.2}
.mxa-ntf .av .ty.ok{background:var(--success);color:#fff}
.mxa-ntf .m{flex:1;min-width:0}
.mxa-ntf .m .t{font-family:var(--mxa-ui);font-size:13.5px;line-height:1.35;color:var(--fg-1)}
.mxa-ntf .m .t b{font-weight:600}
.mxa-ntf .m p{margin:3px 0 0;font-family:var(--mxa-ui);font-size:12.5px;line-height:1.4;color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mxa-ntf time{flex:none;font-size:10.5px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-ntf.unread::after{content:"";position:absolute;right:14px;top:32px;width:8px;height:8px;border-radius:50%;background:var(--ink)}
/* =================== SETTINGS =================== */
.mxa-colophon{display:grid;justify-items:center;gap:6px;padding:22px var(--m-gutter) 26px;text-align:center}
.mxa-colophon img{height:44px;width:auto;opacity:.9}
.mxa-colophon span{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2)}
/* =================== PART 3 — client settings, brand profile, thread, client calendar =================== */
/* underline tabs — for 4+ sections where .mxa-seg would cramp. Scrolls. */
.mxa-tabs{display:flex;gap:2px;margin-top:6px;padding:0 var(--m-gutter);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--paper-line);background:var(--stream)}
.mxa-tabs::-webkit-scrollbar{display:none}
.mxa-tabs button{flex:none;position:relative;min-height:var(--m-touch);padding:0 12px;border:0;background:none;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2);cursor:pointer}
.mxa-tabs button.is-active{color:var(--fg-1)}
.mxa-tabs button.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
.mxa-tabs button i{font-style:normal;margin-left:5px;color:var(--ink)}
/* shortcut row — 3 linked destinations under the header */
.mxa-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px var(--m-gutter) 0}
.mxa-shortcuts a{display:grid;justify-items:center;gap:7px;min-height:78px;padding:12px 4px 10px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:var(--fg-1)}
.mxa-shortcuts a svg{width:21px;height:21px;color:var(--ink)}
.mxa-shortcuts a span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.2}
/* brand asset block */
.mxa-brand{display:flex;gap:14px;align-items:center}
.mxa-brand .logo{width:96px;height:96px;flex:none;border-radius:14px;background:#000;color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:34px;font-weight:600;box-shadow:0 8px 18px rgba(15,11,7,.2)}
.mxa-brand .m{flex:1;min-width:0}
.mxa-brand .m b{display:block;font-family:var(--mxa-ui);font-size:14px;font-weight:600}
.mxa-brand .m span{display:block;margin-top:2px;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-brand .acts{display:flex;gap:6px;margin-top:10px}
.mxa-brand .acts .mxa-btn{min-height:38px;padding:0 14px;font-size:10px}
.mxa-swatches{display:flex;gap:8px;margin-top:14px}
.mxa-swatches i{flex:1;height:40px;border-radius:10px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mxa-swatches i.add{display:grid;place-items:center;background:var(--stream);box-shadow:inset 0 0 0 1.5px var(--paper-line);color:var(--fg-2);font-style:normal;font-size:18px}
/* Cosimo callout — the one place the assistant speaks; no emoji */
.mxa-cosimo{display:flex;gap:12px;align-items:center;margin:14px var(--m-gutter) 0;padding:14px;border-radius:16px;background:radial-gradient(120% 140% at 0% 0%,rgba(226,185,121,.28),transparent 60%),var(--espresso);color:#fff;text-decoration:none}
.mxa-cosimo .ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso)}
.mxa-cosimo .ic svg{width:21px;height:21px}
.mxa-cosimo .m{flex:1;min-width:0}
.mxa-cosimo .m b{display:block;font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1.15}
.mxa-cosimo .m span{display:block;margin-top:3px;font-family:var(--mxa-ui);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.76)}
.mxa-cosimo>svg{width:18px;height:18px;color:var(--ink-accent);flex:none}
/* completeness meter in a grouped row */
.mxa-grow .meter{display:flex;align-items:center;gap:7px;margin-top:6px}
.mxa-grow .meter .bar{flex:1;max-width:120px;height:4px;border-radius:2px;background:var(--paper-line);overflow:hidden}
.mxa-grow .meter .bar i{display:block;height:100%;background:var(--gold)}
.mxa-grow .meter .bar i.full{background:var(--success)}
.mxa-grow .meter em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mxa-tags span{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--stream);box-shadow:inset 0 0 0 1px var(--paper-line);font-family:var(--mxa-ui);font-size:12.5px;color:var(--fg-1)}
.mxa-tags span.no{background:var(--danger-bg);box-shadow:none;color:var(--danger);text-decoration:line-through;text-decoration-thickness:1px}
/* sticky action bar above the tab bar (two buttons) */
.mxa-dock{flex:none;display:flex;gap:8px;padding:10px var(--m-gutter);background:rgba(255,253,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--paper-line)}
.mxa-dock .mxa-btn{flex:1}
/* people strip in a thread */
.mxa-people{display:flex;align-items:center;gap:10px;margin:12px var(--m-gutter) 0;padding:8px 8px 8px 12px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:inherit}
.mxa-people .stack{display:flex}
.mxa-people .stack span{width:30px;height:30px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;box-shadow:0 0 0 2px var(--paper)}
.mxa-people .stack span:first-child{margin-left:0}
.mxa-people .stack .a{background:var(--ink);color:var(--ink-accent);font-family:var(--font-display);font-style:italic;font-size:13px}
.mxa-people .stack .c{background:var(--gold-faint);color:var(--fg-1)}
.mxa-people .m{flex:1;min-width:0;font-family:var(--mxa-ui);font-size:13px;color:var(--fg-2)}
.mxa-people .m b{color:var(--fg-1);font-weight:600}
.mxa-people .mxa-btn{min-height:36px;padding:0 12px;font-size:10px}
/* chat thread */
.mxa-thread{padding:4px var(--m-gutter) 12px}
.mxa-dsep{display:flex;align-items:center;gap:10px;padding:16px 0 10px}
.mxa-dsep i{flex:1;height:1px;background:var(--paper-line);display:block}
.mxa-dsep span{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-msg{display:flex;gap:8px;align-items:flex-end;margin-bottom:10px}
.mxa-msg .av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:var(--gold-faint);color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mxa-msg .bub{max-width:80%;min-width:0;padding:10px 13px 11px;border-radius:18px 18px 18px 6px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);color:var(--fg-1);overflow-wrap:anywhere;word-break:break-word}
.mxa-msg .who{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;font-size:11px;font-weight:700;color:var(--fg-1)}
.mxa-msg .who time{font-weight:600;color:var(--fg-2);font-size:10px}
.mxa-msg p{margin:0;font-family:var(--mxa-ui);font-size:14.5px;line-height:1.45;color:var(--fg-1)}
.mxa-msg .men{color:var(--ink);font-weight:600}
.mxa-msg.me{flex-direction:row-reverse}
.mxa-msg.me .av{background:var(--ink);color:var(--ink-accent);box-shadow:none;font-family:var(--font-display);font-style:italic}
.mxa-msg.me .bub{border-radius:18px 18px 6px 18px;background:var(--ink);box-shadow:none;color:var(--ink-fg)}
.mxa-msg.me .who{color:var(--ink-accent)}
.mxa-msg.me .who time{color:rgba(246,233,226,.7)}
.mxa-msg.me p{color:var(--ink-fg)}
.mxa-msg.me .men{color:var(--ink-accent)}
.mxa-msg.cont .av{visibility:hidden}
.mxa-msg.cont .who{display:none}
.mxa-seen{display:flex;justify-content:flex-end;gap:4px;margin:-4px 38px 0 0;font-size:9.5px;font-weight:600;color:var(--fg-2)}
.mxa-seen svg{width:12px;height:12px;color:var(--success)}
/* composer replaces the tab bar inside a thread (pushed screen) */
.mxa-composer{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px var(--m-gutter) 26px;background:rgba(255,253,248,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--paper-line)}
.mxa-composer .fld{flex:1;min-height:var(--m-touch);display:flex;align-items:center;padding:0 16px;border-radius:22px;background:var(--stream);box-shadow:inset 0 0 0 1px var(--paper-line);font-family:var(--mxa-ui);font-size:14.5px;color:var(--fg-3)}
.mxa-composer .att{width:var(--m-touch);height:var(--m-touch);flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--stream);color:var(--fg-2)}
.mxa-composer .att svg{width:19px;height:19px}
.mxa-composer .snd{width:var(--m-touch);height:var(--m-touch);flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:var(--ink-accent)}
.mxa-composer .snd svg{width:18px;height:18px;stroke-width:2.2}
/* client approval card */
.mxa-appr{margin:0 var(--m-gutter) 10px;padding:12px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line),0 6px 16px rgba(30,18,6,.06)}
.mxa-appr .r1{display:flex;gap:12px}
.mxa-appr .th{width:76px;height:76px;flex:none;border-radius:12px;overflow:hidden;position:relative}
.mxa-appr .m{flex:1;min-width:0}
.mxa-appr .m .when{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.mxa-appr .m p{margin:5px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.4;color:var(--fg-1);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mxa-appr .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mxa-appr .acts .mxa-btn{min-height:40px;padding:0 10px;white-space:nowrap}
.mxa-appr .acts .ok{background:var(--success);color:#fff}
.mxa-dayempty{display:flex;align-items:center;gap:12px;margin:0 var(--m-gutter);padding:14px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line)}
.mxa-dayempty .ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--stream);color:var(--fg-2)}
.mxa-dayempty .ic svg{width:18px;height:18px}
.mxa-dayempty b{display:block;font-family:var(--mxa-ui);font-size:14px;font-weight:600}
.mxa-dayempty span{display:block;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-dayempty .mxa-btn{margin-left:auto;min-height:36px;padding:0 12px;font-size:10px}
/* =================== PART 3b — billing, event shoots, planner (no client) =================== */
.mxa-tile.ini{font-family:var(--font-display);font-weight:500;color:var(--gold-hover);background:var(--gold-faint);box-shadow:inset 0 0 0 1px rgba(200,169,94,.4)}
.mxa-tile.t40.ini{font-size:19px}
/* balance hero — overlaps the header like Home */
.mxa-bal{position:relative;z-index:2;margin:-56px var(--m-gutter) 0;padding:16px 16px 14px;border-radius:18px;background:var(--paper);box-shadow:0 14px 34px rgba(30,18,6,.16),0 0 0 1px rgba(200,169,94,.22)}
.mxa-bal .k{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-bal .amt{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.mxa-bal .amt b{font-family:var(--font-display);font-size:44px;font-weight:500;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.mxa-bal .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--paper-line)}
.mxa-bal .row div span{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.mxa-bal .row div b{display:block;margin-top:3px;font-family:var(--mxa-ui);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.mxa-bal .src{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:10px;font-weight:600;color:var(--fg-2)}
.mxa-bal .src i{width:7px;height:7px;border-radius:50%;background:var(--success);display:block}
/* invoice row */
.mxa-inv{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;text-decoration:none;color:inherit}
.mxa-inv+.mxa-inv{border-top:1px solid var(--paper-line)}
.mxa-inv .ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--stream);color:var(--fg-2)}
.mxa-inv .ic svg{width:18px;height:18px}
.mxa-inv .m{flex:1;min-width:0}
.mxa-inv .m b{display:block;font-family:var(--mxa-ui);font-size:14.5px;font-weight:600}
.mxa-inv .m span{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-inv .r{display:grid;justify-items:end;gap:4px;flex:none}
.mxa-inv .r b{font-family:var(--mxa-ui);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
/* next shoot card */
.mxa-next{position:relative;z-index:2;margin:-56px var(--m-gutter) 0;display:flex;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--paper);box-shadow:0 14px 34px rgba(30,18,6,.16),0 0 0 1px rgba(200,169,94,.22);text-decoration:none;color:inherit}
.mxa-next .cal{width:58px;flex:none;border-radius:12px;overflow:hidden;text-align:center;box-shadow:0 0 0 1px var(--paper-line)}
.mxa-next .cal span{display:block;padding:3px 0;background:var(--ink);color:var(--ink-fg);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mxa-next .cal b{display:block;padding:5px 0 6px;font-family:var(--font-display);font-size:28px;font-weight:500;line-height:1}
.mxa-next .m{flex:1;min-width:0}
.mxa-next .m small{display:block;font-size:9px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--gold-hover)}
.mxa-next .m b{display:block;margin-top:2px;font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.15}
.mxa-next .m span{display:block;margin-top:3px;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-next>svg{width:18px;height:18px;color:var(--fg-3);flex:none}
.mxa-shortcuts.two{grid-template-columns:repeat(2,1fr)}
.mxa-shortcuts.two a{min-height:0;grid-template-columns:auto 1fr;justify-items:start;align-items:center;padding:12px 14px}
.mxa-shortcuts.two a span{text-align:left}
.mxa-pick.empty{box-shadow:0 0 0 1.5px var(--gold),0 6px 16px rgba(200,169,94,.18)}
.mxa-pick.empty .m b{color:var(--fg-2);font-weight:500}
.mxa-cosimo.off{opacity:.55;pointer-events:none}
/* =================== PART 3c — client reports =================== */
.mxa-live{display:inline-flex;align-items:center;gap:6px}
.mxa-live i{width:8px;height:8px;border-radius:50%;background:#5fd38d;box-shadow:0 0 0 3px rgba(95,211,141,.25);display:block}
.mxa-range{display:flex;gap:8px;align-items:center;margin:14px var(--m-gutter) 0}
.mxa-range .mxa-seg{flex:1;margin:0}
.mxa-range .mxa-sq{border-radius:12px}
/* report index rows */
.mxa-rrow{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;text-decoration:none;color:inherit}
.mxa-rrow+.mxa-rrow{border-top:1px solid var(--paper-line)}
.mxa-rrow .m{flex:1;min-width:0}
.mxa-rrow .m b{display:block;font-family:var(--mxa-ui);font-size:15px;font-weight:600}
.mxa-rrow .m span{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:10.5px;font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-rrow .m span .ok{width:7px;height:7px;border-radius:50%;background:var(--success);display:block}
.mxa-rrow .m span .bad{width:7px;height:7px;border-radius:50%;background:var(--danger);display:block}
.mxa-rrow .r{display:grid;justify-items:end;gap:2px;flex:none}
.mxa-rrow .r b{font-family:var(--font-display);font-size:22px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-rrow .r em{font-style:normal;font-size:10px;font-weight:700;color:var(--success);font-variant-numeric:tabular-nums}
.mxa-rrow .r em.dn{color:var(--danger)}
.mxa-rrow .r .fix{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--danger)}
.mxa-rrow>svg{width:16px;height:16px;flex:none;color:var(--fg-3)}
/* KPI tiles */
.mxa-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px var(--m-gutter) 0}
.mxa-kpi{padding:13px 14px 12px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line)}
.mxa-kpi .k{font-size:9px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-kpi b{display:block;margin-top:6px;font-family:var(--font-display);font-size:30px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-kpi em{display:inline-block;margin-top:6px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--success);font-variant-numeric:tabular-nums}
.mxa-kpi em.dn{color:var(--danger)}
.mxa-kpi svg.sp{display:block;width:100%;height:26px;margin-top:6px}
.mxa-kpi.wide{grid-column:span 2;display:flex;align-items:center;gap:14px}
.mxa-kpi.wide .m{flex:1}
/* Ask Cosimo */
.mxa-ask{margin:14px var(--m-gutter) 0;padding:14px;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(226,185,121,.28),transparent 60%),var(--espresso);color:#fff}
.mxa-ask .h{display:flex;align-items:center;gap:10px}
.mxa-ask .h .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso)}
.mxa-ask .h .ic svg{width:17px;height:17px}
.mxa-ask .h b{font-family:var(--font-display);font-size:20px;font-weight:500}
.mxa-ask .q{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mxa-ask .q button{min-height:34px;padding:0 12px;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(226,185,121,.3);color:#fff;font-family:var(--mxa-ui);font-size:12.5px;cursor:pointer}
.mxa-ask .glass-input{margin-top:12px}
/* connection problem — plain language first, detail tucked away */
.mxa-prob{margin:14px var(--m-gutter) 0;padding:18px 16px 16px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px rgba(184,52,28,.28)}
.mxa-prob .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--danger-bg);color:var(--danger)}
.mxa-prob .ic svg{width:22px;height:22px}
.mxa-prob h3{margin:12px 0 0;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.1}
.mxa-prob p{margin:6px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.mxa-prob ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:c}
.mxa-prob li{display:flex;gap:10px;font-family:var(--mxa-ui);font-size:13px;line-height:1.4;color:var(--fg-1);counter-increment:c}
.mxa-prob li::before{content:counter(c);width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--stream);font-family:var(--font-body);font-size:10px;font-weight:700;color:var(--fg-2)}
.mxa-prob .acts{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}
.mxa-prob .acts .mxa-btn{white-space:nowrap}
.mxa-prob details{margin-top:14px;padding-top:12px;border-top:1px solid var(--paper-line)}
.mxa-prob summary{font-size:10px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2);cursor:pointer;list-style:none}
.mxa-prob summary::-webkit-details-marker{display:none}
/* =================== MODULE 1 — shell & navigation =================== */
/* scrim + bottom sheet — More, Customize nav, action sheets */
.mxa-scrim{position:absolute;inset:0;z-index:20;background:rgba(15,11,7,.46);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mxa-sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:86%;display:flex;flex-direction:column;background:var(--stream);border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(15,11,7,.3);padding-bottom:calc(var(--m-tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 20px)}
.mxa-sheet .grab{width:38px;height:5px;border-radius:3px;background:rgba(30,18,6,.22);margin:9px auto 4px;flex:none}
.mxa-sheet-h{display:flex;align-items:center;gap:10px;padding:8px var(--m-gutter) 12px;flex:none}
.mxa-sheet-h h2{flex:1;margin:0;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.1}
.mxa-sheet-h .x{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);color:var(--fg-1)}
.mxa-sheet-h .x svg{width:15px;height:15px}
.mxa-sheet-body{flex:1;min-height:0;overflow:auto;padding-bottom:6px}
.mxa-sheet-sub{margin:-6px var(--m-gutter) 12px;font-family:var(--mxa-ui);font-size:13px;line-height:1.45;color:var(--fg-2)}
/* More sheet: identity card + icon grid per group */
.mxa-who{display:flex;align-items:center;gap:12px;margin:0 var(--m-gutter);padding:12px;border-radius:16px;background:var(--espresso);color:#fff;text-decoration:none}
.mxa-who .av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso);font-family:var(--font-display);font-size:19px;font-weight:600}
.mxa-who .m{flex:1;min-width:0}
.mxa-who .m b{display:block;font-family:var(--mxa-ui);font-size:15px;font-weight:600}
.mxa-who .m span{display:block;margin-top:2px;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--ink-accent)}
.mxa-who>svg{width:16px;height:16px;color:rgba(255,255,255,.6)}
.mxa-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 var(--m-gutter)}
.mxa-tiles a{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;min-height:76px;padding:10px 2px 8px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:var(--fg-1)}
.mxa-tiles a svg{width:22px;height:22px;color:var(--ink)}
.mxa-tiles a span{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-align:center;line-height:1.2}
.mxa-tiles a i{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-fg);font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mxa-tiles a i.hot{background:var(--danger)}
.mxa-sheet-foot{display:flex;gap:8px;padding:14px var(--m-gutter) 0}
.mxa-sheet-foot .mxa-btn{flex:1}
.mxa-btn.danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px rgba(184,52,28,.35)}
/* Customize nav: live preview of the bar + pin rows */
.mxa-barprev{display:grid;grid-template-columns:repeat(5,1fr);margin:0 var(--m-gutter) 4px;padding:8px 4px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line)}
.mxa-barprev span{display:grid;justify-items:center;gap:4px;padding:4px 0;font-size:9px;font-weight:600;color:var(--fg-2)}
.mxa-barprev span svg{width:20px;height:20px}
.mxa-barprev span.pin{color:var(--ink)}
.mxa-barprev span.empty svg{opacity:.25}
.mxa-barprev span.empty{color:var(--fg-4)}
.mxa-slots{margin:4px var(--m-gutter) 0;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2);text-align:center}
.mxa-pin{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 8px 6px 6px}
.mxa-pin+.mxa-pin{border-top:1px solid var(--paper-line)}
.mxa-pin .grip{width:30px;height:var(--m-touch);flex:none;display:grid;place-items:center;color:var(--fg-3);cursor:grab}
.mxa-pin .grip svg{width:16px;height:16px}
.mxa-pin .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(94,20,24,.07);color:var(--ink)}
.mxa-pin .ic svg{width:17px;height:17px}
.mxa-pin b{flex:1;min-width:0;font-family:var(--mxa-ui);font-size:14.5px;font-weight:600}
.mxa-pin .tag{font-size:9px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-3)}
.mxa-pin .tog{width:var(--m-touch);height:var(--m-touch);flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;cursor:pointer}
.mxa-pin .tog span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.mxa-pin .tog span svg{width:14px;height:14px;stroke-width:2.6}
.mxa-pin .tog.add span{background:var(--success);color:#fff}
.mxa-pin .tog.rem span{background:var(--danger);color:#fff}
.mxa-pin .tog.off span{background:var(--paper-line);color:var(--fg-3)}
.mxa-pin.locked .grip{visibility:hidden}
.mxa-pin.lift{position:relative;z-index:2;margin:0 -4px;border-radius:12px;background:var(--paper);box-shadow:0 10px 24px rgba(30,18,6,.18),0 0 0 1px var(--gold)}
.mxa-group.pins{padding:0 4px}
/* command palette — full screen on mobile */
.mxa-cmd{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--stream)}
.mxa-cmd-top{flex:none;display:flex;align-items:center;gap:10px;padding:10px var(--m-gutter) 12px;background:var(--espresso)}
.mxa-cmd-top .glass-input{flex:1}
.mxa-cmd-top .cancel{min-height:var(--m-touch);padding:0 4px;border:0;background:none;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-accent)}
.mxa-cmd-list{flex:1;overflow:auto;padding-bottom:20px}
.mxa-crow2{display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 14px;text-decoration:none;color:inherit}
.mxa-crow2+.mxa-crow2{border-top:1px solid var(--paper-line)}
.mxa-crow2.on{background:linear-gradient(90deg,rgba(94,20,24,.07),transparent 70%)}
.mxa-crow2 .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(94,20,24,.07);color:var(--ink)}
.mxa-crow2 .ic.gold{background:var(--gold-faint);color:var(--gold-hover)}
.mxa-crow2 .ic svg{width:17px;height:17px}
.mxa-crow2 .ic.av{background:var(--gold-faint);color:var(--fg-1);font-size:13px;font-weight:600;border-radius:50%}
.mxa-crow2 .m{flex:1;min-width:0}
.mxa-crow2 .m b{display:block;font-family:var(--mxa-ui);font-size:14.5px;font-weight:600}
.mxa-crow2 mark{background:rgba(226,185,121,.42);color:inherit;border-radius:2px;padding:0 1px}
.mxa-crow2 .m span{display:block;margin-top:1px;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-crow2 .meta{flex:none;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2)}
/* system feedback: offline bar, toast, dialog */
.mxa-offline{position:absolute;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:8px;padding:38px 16px 10px;background:var(--espresso);color:#fff;font-family:var(--mxa-ui);font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(15,11,7,.3)}
.mxa-offline svg{width:16px;height:16px;color:var(--ink-accent)}
.mxa-offline.on{background:var(--success)}
.mxa-offline.on svg{color:#fff}
.mxa-toast{position:absolute;left:10px;right:10px;top:46px;z-index:41;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:18px;background:rgba(255,253,248,.94);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 14px 34px rgba(15,11,7,.24),0 0 0 1px var(--paper-line)}
.mxa-toast .av{position:relative;width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--gold-faint);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mxa-toast .av .ty{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--ink-accent);box-shadow:0 0 0 2px var(--paper)}
.mxa-toast .av .ty svg{width:10px;height:10px}
.mxa-toast .m{flex:1;min-width:0}
.mxa-toast .m b{display:block;font-family:var(--mxa-ui);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-toast .m span{display:block;font-family:var(--mxa-ui);font-size:12.5px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-toast time{flex:none;align-self:flex-start;font-size:10px;font-weight:600;color:var(--fg-2)}
.mxa-dialog{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);z-index:21;padding:22px 20px 18px;border-radius:24px;background:var(--stream);text-align:center;box-shadow:0 20px 50px rgba(15,11,7,.36)}
.mxa-dialog .ring{position:relative;width:84px;height:84px;margin:0 auto;display:grid;place-items:center}
.mxa-dialog .ring svg.track{position:absolute;inset:0;width:84px;height:84px;transform:rotate(-90deg)}
.mxa-dialog .ring b{font-family:var(--font-display);font-size:32px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-dialog h3{margin:14px 0 0;font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.1}
.mxa-dialog p{margin:6px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.5;color:var(--fg-2)}
.mxa-dialog .acts{display:grid;gap:8px;margin-top:18px}
/* =================== MODULE 2 — auth =================== */
.mxa-auth{position:relative;display:flex;flex-direction:column;height:100%;background:radial-gradient(90% 60% at 50% 18%,rgba(200,169,94,.32),transparent 70%),radial-gradient(70% 50% at 80% 70%,rgba(94,20,24,.45),transparent 70%),var(--espresso);color:#fff;overflow:hidden}
.mxa-auth video,.mxa-auth .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mxa-auth .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,5,.35) 0%,rgba(10,8,5,.15) 30%,rgba(10,8,5,.86) 62%,#0a0805 100%)}
.mxa-auth>*:not(video):not(.poster):not(.shade){position:relative}
.mxa-auth .mxa-status{background:transparent;color:#fff}
.mxa-auth-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 28px 22px;text-align:center}
.mxa-auth-top img{height:64px;width:auto}
.mxa-auth-top .motto{margin-top:14px;font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--ink-accent)}
.mxa-auth-top .motto span{display:block;margin-top:2px;font-family:var(--font-body);font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.7)}
.mxa-auth-card{margin:0 12px 28px;padding:20px 18px 16px;border-radius:24px;background:rgba(255,253,248,.1);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(226,185,121,.28),0 20px 50px rgba(0,0,0,.4)}
.mxa-auth-card h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.05}
.mxa-auth-card h1 em{color:var(--ink-accent);font-weight:500}
.mxa-auth-card .lead{margin:6px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.76)}
.mxa-field{display:grid;gap:6px;margin-top:14px}
.mxa-field label{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.72)}
.mxa-field .in{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(226,185,121,.3);font-family:var(--mxa-ui);font-size:15.5px;color:#fff}
.mxa-field .in.focus{box-shadow:inset 0 0 0 1.5px var(--ink-accent),0 0 0 4px rgba(226,185,121,.14)}
.mxa-field .in .ph{color:rgba(255,255,255,.4)}
.mxa-field .in button{margin-left:auto;width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:rgba(255,255,255,.7)}
.mxa-field .in button svg{width:18px;height:18px}
.mxa-btn.gold{background:linear-gradient(140deg,#e9cc8a,#c8a95e);color:var(--espresso);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.mxa-btn.glass{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(226,185,121,.36)}
.mxa-auth-card .mxa-btn{min-height:50px;font-size:11.5px}
.mxa-auth-acts{display:grid;gap:8px;margin-top:16px}
.mxa-or{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.5)}
.mxa-or i{flex:1;height:1px;background:rgba(226,185,121,.24);display:block}
.mxa-auth-link{display:block;margin-top:12px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-accent);text-decoration:none}
.mxa-auth-foot{margin-top:12px;text-align:center;font-size:10px;color:rgba(255,255,255,.5)}
.mxa-auth-foot a{color:rgba(255,255,255,.7)}
.mxa-banner{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;font-family:var(--mxa-ui);font-size:13px;line-height:1.4}
.mxa-banner svg{width:16px;height:16px;flex:none;margin-top:1px}
.mxa-banner.bad{background:rgba(184,52,28,.22);color:#ffd9d1;box-shadow:inset 0 0 0 1px rgba(240,165,155,.4)}
.mxa-banner.ok{background:rgba(46,125,50,.24);color:#d6f2d8;box-shadow:inset 0 0 0 1px rgba(150,220,155,.4)}
/* Face ID lock */
.mxa-lock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 32px;text-align:center}
.mxa-lock img{height:58px;width:auto;margin-bottom:30px}
.mxa-faceid{position:relative;width:96px;height:96px;display:grid;place-items:center;border-radius:28px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(226,185,121,.3)}
.mxa-faceid svg{width:56px;height:56px;color:var(--ink-accent)}
.mxa-faceid::after{content:"";position:absolute;inset:-8px;border-radius:34px;box-shadow:0 0 0 1px rgba(226,185,121,.16)}
.mxa-lock h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:28px}
.mxa-lock p{margin:-8px 0 0;font-family:var(--mxa-ui);font-size:13.5px;color:rgba(255,255,255,.7)}
.mxa-lock-foot{padding:0 20px 40px;display:grid;gap:8px}
/* light-surface auth (enrol sheet, workspace picker) */
.mxa-ws{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;text-decoration:none;color:inherit}
.mxa-ws+.mxa-ws{border-top:1px solid var(--paper-line)}
.mxa-ws.on{background:linear-gradient(90deg,rgba(94,20,24,.06),transparent 70%)}
.mxa-ws .m{flex:1;min-width:0}
.mxa-ws .m b{display:block;font-family:var(--mxa-ui);font-size:15px;font-weight:600}
.mxa-ws .m span{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.mxa-ws .m span em{font-style:normal;height:20px;padding:0 7px;border-radius:var(--r-pill);display:inline-flex;align-items:center;background:var(--stream);box-shadow:inset 0 0 0 1px var(--paper-line);font-size:10px;font-weight:600;color:var(--fg-2)}
.mxa-ws .m span em.adm{background:var(--ink);box-shadow:none;color:var(--ink-fg)}
.mxa-ws .last{flex:none;font-size:9px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink)}
.mxa-ws>svg{width:16px;height:16px;flex:none;color:var(--fg-3)}
/* password checks */
.mxa-checks{display:grid;gap:6px;margin-top:10px}
.mxa-checks span{display:flex;align-items:center;gap:8px;font-family:var(--mxa-ui);font-size:12.5px;color:rgba(255,255,255,.6)}
.mxa-checks span i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.mxa-checks span.ok{color:#d6f2d8}
.mxa-checks span.ok i{background:var(--success);box-shadow:none}
.mxa-checks span i svg{width:10px;height:10px;stroke-width:3;color:#fff}
.mxa-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.mxa-meter i{height:4px;border-radius:2px;background:rgba(255,255,255,.14);display:block}
.mxa-meter i.on{background:var(--ink-accent)}
.mxa-opt{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(226,185,121,.2);text-decoration:none;color:#fff}
.mxa-opt svg{width:18px;height:18px;color:var(--ink-accent);flex:none}
.mxa-opt .m{flex:1}
.mxa-opt .m b{display:block;font-family:var(--mxa-ui);font-size:13.5px;font-weight:600}
.mxa-opt .m span{display:block;font-family:var(--mxa-ui);font-size:11.5px;color:rgba(255,255,255,.6)}
.mxa-opt>svg:last-child{width:15px;height:15px;color:rgba(255,255,255,.5)}
/* =================== SHARED — content primitives (modules 3–16) =================== */
.mxa-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--stream);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--paper-line)}
.mxa-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mxa-pill.ink{background:rgba(94,20,24,.08);color:var(--ink);box-shadow:none}
.mxa-pill.ok{background:var(--success-bg);color:var(--success);box-shadow:none}
.mxa-pill.warn{background:rgba(235,155,34,.14);color:#9a5d00;box-shadow:none}
.mxa-pill.bad{background:var(--danger-bg);color:var(--danger);box-shadow:none}
.mxa-pill.info{background:rgba(33,76,96,.1);color:#214c60;box-shadow:none}
.mxa-pill.gold{background:var(--gold-faint);color:var(--gold-hover);box-shadow:none}
.mxa-dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;font-family:var(--mxa-ui);font-size:13.5px}
.mxa-dl dt{font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2);padding-top:2px}
.mxa-dl dd{margin:0;color:var(--fg-1);min-width:0}
.mxa-form{display:grid;gap:14px;margin:14px var(--m-gutter) 0}
.mxa-lf{display:grid;gap:6px}
.mxa-lf label{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-lf .in{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line);font-family:var(--mxa-ui);font-size:15px;color:var(--fg-1)}
.mxa-lf .in.ta{align-items:flex-start;min-height:96px;padding-top:12px;line-height:1.45}
.mxa-lf .in .ph{color:var(--fg-4)}
.mxa-lf .in svg{width:17px;height:17px;color:var(--fg-3);margin-left:auto;flex:none}
.mxa-lf .in.focus{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(94,20,24,.08)}
.mxa-lf .help{font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-lf .cnt{justify-self:end;font-size:10px;font-weight:700;color:var(--fg-2);font-variant-numeric:tabular-nums}
.mxa-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mxa-tl{position:relative;margin:0 var(--m-gutter);padding-left:22px}
.mxa-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--paper-line)}
.mxa-tli{position:relative;padding:0 0 14px}
.mxa-tli::before{content:"";position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--paper-line)}
.mxa-tli.done::before{background:var(--gold);box-shadow:none}
.mxa-tli.now::before{background:var(--ink);box-shadow:0 0 0 4px rgba(94,20,24,.14)}
.mxa-tli b{display:block;font-family:var(--mxa-ui);font-size:14px;font-weight:600}
.mxa-tli span{display:block;margin-top:2px;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-file{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px}
.mxa-file+.mxa-file{border-top:1px solid var(--paper-line)}
.mxa-file .th{width:44px;height:44px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--stream);color:var(--fg-2);overflow:hidden}
.mxa-file .th svg{width:20px;height:20px}
.mxa-file .m{flex:1;min-width:0}
.mxa-file .m b{display:block;font-family:var(--mxa-ui);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-file .m span{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--fg-2)}
.mxa-file .mxa-pill{flex:none}
.mxa-upload{display:grid;justify-items:center;gap:6px;margin:10px 0 0;padding:20px 14px;border-radius:14px;background:var(--stream);box-shadow:inset 0 0 0 1.5px var(--paper-line);text-align:center}
.mxa-upload svg{width:24px;height:24px;color:var(--ink)}
.mxa-upload b{font-family:var(--mxa-ui);font-size:14px;font-weight:600}
.mxa-upload span{font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-toggle{width:46px;height:28px;flex:none;border-radius:14px;background:var(--paper-line);position:relative}
.mxa-toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mxa-toggle.on{background:var(--success)}
.mxa-toggle.on::after{left:21px}
.mxa-big{display:grid;gap:4px;margin:14px var(--m-gutter) 0;padding:18px 16px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line)}
.mxa-big small{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-big b{font-family:var(--font-display);font-size:40px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-big span{font-family:var(--mxa-ui);font-size:13px;color:var(--fg-2)}
.mxa-big .mxa-btn{margin-top:10px}
.mxa-confirm{margin-top:12px;padding:12px;border-radius:12px;background:var(--stream);font-family:var(--mxa-ui);font-size:13px;line-height:1.5;color:var(--fg-1)}
.mxa-confirm b{font-weight:600}
/* =================== MODULE 5 — social =================== */
.mxa-ph{display:block;background:linear-gradient(135deg,#d8c9ad,#a8916c 55%,#6f5a3f);position:relative}
.mxa-ph::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 30%,rgba(255,255,255,.35),transparent 70%)}
.mxa-ig{margin:14px var(--m-gutter) 0;border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line)}
.mxa-ig .hd{display:flex;align-items:center;gap:9px;padding:10px 12px}
.mxa-ig .hd b{flex:1;font-family:var(--mxa-ui);font-size:13px;font-weight:600}
.mxa-ig .hd svg{width:16px;height:16px;color:var(--fg-2)}
.mxa-ig .mxa-ph{aspect-ratio:1}
.mxa-ig .cap{padding:10px 12px 12px;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.45;color:var(--fg-1)}
.mxa-ig .cap b{font-weight:600}
.mxa-ig .cap .tags{color:#214c60}
.mxa-nets{display:flex;gap:6px;margin:12px var(--m-gutter) 0;overflow-x:auto;scrollbar-width:none}
.mxa-nets button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border:0;border-radius:var(--r-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line);font-family:var(--mxa-ui);font-size:12.5px;font-weight:600;color:var(--fg-1)}
.mxa-nets button.on{background:var(--ink);color:var(--ink-fg);box-shadow:none}
.mxa-nets button svg{width:15px;height:15px}
.mxa-nets button i{font-style:normal;font-size:10px;color:var(--ink-accent)}
.mxa-cmt{display:flex;gap:10px;padding:12px 14px}
.mxa-cmt+.mxa-cmt{border-top:1px solid var(--paper-line)}
.mxa-cmt .th{width:52px;height:52px;flex:none;border-radius:10px;overflow:hidden}
.mxa-cmt .m{flex:1;min-width:0}
.mxa-cmt .m .w{display:flex;align-items:baseline;gap:6px;font-family:var(--mxa-ui);font-size:13px;font-weight:600}
.mxa-cmt .m .w time{margin-left:auto;font-weight:600;font-size:10.5px;color:var(--fg-2)}
.mxa-cmt .m p{margin:3px 0 0;font-family:var(--mxa-ui);font-size:13.5px;line-height:1.4;color:var(--fg-1)}
.mxa-cmt .m .on{display:block;margin-top:4px;font-size:10.5px;font-weight:600;color:var(--fg-2)}
.mxa-cmt.unread .m .w::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);align-self:center}
.mxa-tool{display:flex;gap:4px;margin:10px var(--m-gutter) 0}
.mxa-tool button{flex:1;display:grid;justify-items:center;gap:3px;min-height:56px;padding:8px 2px;border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.mxa-tool button svg{width:18px;height:18px;color:var(--ink)}
.mxa-tool button.gold svg{color:var(--gold-hover)}
/* overlap a card onto .mxa-head.has-overlap — sits above the header */
.mxa-overlap{position:relative;z-index:1;margin-top:-60px}
/* desktop header primary: oxblood, retiring the copper .ph-btn.primary */
.ph .ph-btn.primary{background:#5e1418;border-color:#5e1418;color:#f6e9e2;box-shadow:0 6px 16px rgba(94,20,24,.24)}
.ph .ph-btn.primary:hover{background:#4a0f13}
.ph .ph-btn.primary svg{color:#e2b979}
/* =================== MODULES 13–16 — billing, contracts, admin, billboards, platform =================== */
.mxa-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mxa-pill.paid{background:var(--success-bg);color:var(--success)}
.mxa-pill.open{background:var(--gold-faint);color:var(--gold-hover)}
.mxa-pill.late{background:var(--danger-bg);color:var(--danger)}
.mxa-pill.draft{background:var(--stream);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--paper-line)}
.mxa-pill.sent{background:rgba(94,20,24,.08);color:var(--ink)}
.mxa-rrow .r .amt{font-family:var(--mxa-ui);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
/* balance hero */
.mxa-bal{margin:14px var(--m-gutter) 0;padding:18px 16px 16px;border-radius:20px;background:radial-gradient(120% 140% at 100% 0%,rgba(226,185,121,.3),transparent 60%),var(--espresso);color:#fff}
.mxa-bal .k{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--ink-accent)}
.mxa-bal b{display:block;margin-top:6px;font-family:var(--font-display);font-size:44px;font-weight:400;line-height:1;font-variant-numeric:lining-nums}
.mxa-bal p{margin:6px 0 0;font-family:var(--mxa-ui);font-size:13px;color:rgba(255,255,255,.74)}
.mxa-bal p em{font-style:normal;color:#f0a59b;font-weight:600}
.mxa-bal .acts{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}
/* line items */
.mxa-lines{margin:0 var(--m-gutter);padding:4px 14px;background:var(--paper);border-radius:16px;box-shadow:0 0 0 1px var(--paper-line)}
.mxa-line{display:flex;gap:12px;padding:12px 0;font-family:var(--mxa-ui);font-size:13.5px}
.mxa-line+.mxa-line{border-top:1px solid var(--paper-line)}
.mxa-line .m{flex:1;min-width:0}
.mxa-line .m b{display:block;font-weight:600}
.mxa-line .m span{display:block;margin-top:2px;font-size:12px;color:var(--fg-2)}
.mxa-line .v{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.mxa-line.tot{font-size:15px}
.mxa-line.tot .m b{font-family:var(--font-display);font-size:20px;font-weight:500}
.mxa-line.tot .v{font-family:var(--font-display);font-size:22px;font-weight:500}
/* light form fields */
.mxa-lf{display:grid;gap:6px;margin:12px var(--m-gutter) 0}
.mxa-lf label{font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-lf .in{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line);font-family:var(--mxa-ui);font-size:15px;color:var(--fg-1)}
.mxa-lf .in.ta{min-height:96px;align-items:flex-start;padding-top:12px;line-height:1.45}
.mxa-lf .in .ph{color:var(--fg-4)}
.mxa-lf .in.focus{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(94,20,24,.08)}
.mxa-lf .hint{font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-lf .in .sfx{margin-left:auto;font-size:11px;font-weight:600;color:var(--fg-3)}
.mxa-confirm{display:flex;gap:10px;align-items:flex-start;margin:14px var(--m-gutter) 0;padding:12px 14px;border-radius:14px;background:var(--danger-bg);font-family:var(--mxa-ui);font-size:13px;line-height:1.4;color:var(--fg-1)}
.mxa-confirm i{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;background:var(--danger);color:#fff}
.mxa-confirm i svg{width:13px;height:13px;stroke-width:3}
/* push preview */
.mxa-pushprev{margin:14px var(--m-gutter) 0;padding:12px;border-radius:18px;background:linear-gradient(160deg,#2a2018,#0f0b07)}
.mxa-pushprev .n{display:flex;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,253,248,.92)}
.mxa-pushprev .n .ap{width:36px;height:36px;flex:none;border-radius:9px;background:var(--espresso);display:grid;place-items:center}
.mxa-pushprev .n .ap img{width:26px;height:auto}
.mxa-pushprev .n .m{flex:1;min-width:0;font-family:var(--mxa-ui)}
.mxa-pushprev .n .m small{display:flex;justify-content:space-between;font-size:10.5px;color:var(--fg-2)}
.mxa-pushprev .n .m b{display:block;margin-top:2px;font-size:13.5px;font-weight:600}
.mxa-pushprev .n .m span{display:block;font-size:13px;color:var(--fg-1)}
.mxa-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px var(--m-gutter) 0}
.mxa-aud button{display:grid;gap:3px;justify-items:center;min-height:68px;padding:10px 4px;border:0;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);font-family:var(--font-body);cursor:pointer}
.mxa-aud button b{font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1;color:var(--fg-1)}
.mxa-aud button span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.mxa-aud button.on{background:var(--ink);box-shadow:none}
.mxa-aud button.on b{color:var(--ink-accent)}
.mxa-aud button.on span{color:var(--ink-fg)}
/* contract signing */
.mxa-doc{margin:14px var(--m-gutter) 0;padding:18px 16px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);font-family:var(--font-display);font-size:16px;line-height:1.55;color:var(--fg-1)}
.mxa-doc h4{margin:0 0 6px;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-doc p{margin:0 0 10px}
.mxa-doc .fade{height:48px;margin:-48px -16px 0;position:relative;background:linear-gradient(transparent,var(--paper))}
.mxa-sig{position:relative;margin:12px var(--m-gutter) 0;height:150px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.mxa-sig svg.ink{position:absolute;left:20px;top:24px;width:250px;height:90px;color:var(--fg-1)}
.mxa-sig .line{position:absolute;left:18px;right:18px;bottom:34px;border-top:1px dashed var(--border-strong)}
.mxa-sig .lab{position:absolute;left:18px;bottom:12px;font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-2)}
.mxa-sig .clr{position:absolute;right:10px;top:10px;min-height:32px;padding:0 10px;border:0;border-radius:var(--r-pill);background:var(--stream);font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.mxa-signsteps{display:flex;gap:6px;margin:14px var(--m-gutter) 0}
.mxa-signsteps span{flex:1;display:grid;gap:5px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);text-align:center}
.mxa-signsteps span::before{content:"";height:4px;border-radius:2px;background:var(--paper-line)}
.mxa-signsteps span.done{color:var(--fg-2)}
.mxa-signsteps span.done::before{background:var(--gold)}
.mxa-signsteps span.now{color:var(--ink)}
.mxa-signsteps span.now::before{background:var(--ink)}
/* billboards */
.mxa-board{display:block;margin:0 var(--m-gutter) 10px;border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line);text-decoration:none;color:inherit}
.mxa-board .art{position:relative;height:118px;background:linear-gradient(135deg,#2a1d12,#5e1418 55%,#c8a95e);display:flex;align-items:flex-end;padding:12px 14px;color:#fff}
.mxa-board .art .hl{font-family:var(--font-display);font-size:22px;font-weight:500;line-height:1.05;max-width:70%}
.mxa-board .art .live{position:absolute;top:10px;right:10px}
.mxa-board .meta{display:flex;align-items:center;gap:12px;padding:12px 14px}
.mxa-board .meta .m{flex:1;min-width:0}
.mxa-board .meta .m b{display:block;font-family:var(--mxa-ui);font-size:14.5px;font-weight:600}
.mxa-board .meta .m span{display:block;margin-top:2px;font-family:var(--mxa-ui);font-size:12px;color:var(--fg-2)}
.mxa-board .meta .r{text-align:right}
.mxa-board .meta .r b{display:block;font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.mxa-board .meta .r span{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.mxa-slug{display:flex;align-items:center;gap:10px;margin:12px var(--m-gutter) 0;padding:10px 10px 10px 14px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--paper-line)}
.mxa-slug code{flex:1;min-width:0;font-family:var(--mxa-ui);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxa-slug code span{color:var(--fg-3);font-weight:500}
.mxa-bars{display:flex;align-items:flex-end;gap:5px;height:90px;margin-top:12px}
.mxa-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(var(--gold),rgba(200,169,94,.4));display:block}
.mxa-bars i.hi{background:linear-gradient(var(--ink),rgba(94,20,24,.5))}
.mxa-bars-x{display:flex;gap:5px;margin-top:5px}
.mxa-bars-x span{flex:1;text-align:center;font-size:9px;font-weight:700;color:var(--fg-3)}
/* =================== PRODUCTION INTEGRATION ===================
The handoff prototype drew a fake iOS status bar (.mxa-status, 34px).
The real native wrapper (and mobile web) has a true device status bar,
so production screens OMIT .mxa-status and instead let the espresso app
bar extend up under the notch via the safe-area inset. The bottom tab
bar's safe area is already handled by maestrox-mobile.css (--m-tabbar-safe). */
.mxa:not(:has(.mxa-status)) .mxa-bar{
height:auto;
min-height:52px;
padding-top:calc(env(safe-area-inset-top, 0px) + 6px);
padding-bottom:4px;
}
/* The .mxa shell owns the full viewport height; it sits inside the normal
page body, so pin it to the dynamic viewport and let its own flex children
(bar / scroll / tabbar) divide the space. */
.mxa{min-height:100dvh}
/* A bare .mxa (no .mxa-screen / .mxa-lite) is used only as a token-carrying
wrapper for a standalone .mxa-head band on pages that are NOT the full
fixed-overlay shell (e.g. the social calendar / composer / brief wizard
headers, where the body is a shared partial). Those must NOT inherit the
full-viewport height, or they leave a huge empty gap below the header. */
.mxa:not(.mxa-screen):not(.mxa-lite){min-height:0;height:auto}
.mxa-me{border:0;cursor:pointer;font-family:var(--font-display)}
/* ---- App-shell screens (.mxa-screen) — a full-viewport mobile layer.
On desktop the .mxa screen is hidden and the page's existing desktop
markup (tagged [data-deskonly]) renders as before. On mobile the .mxa
screen covers the web chrome (grid, alert bars, sidebar toggle) as an
opaque fixed layer; the layout's own fixed .m-tabbar (z-index 1000)
floats above it at the bottom, so the shell reuses the real, dynamic
tab bar instead of drawing its own. The scroll area pads its bottom so
the last row clears that tab bar. ---- */
.mxa-screen{display:none}
@media (max-width:767px){
.mxa-screen{
display:flex;
position:fixed;
inset:0;
height:100dvh;
z-index:900;
}
[data-deskonly]{display:none !important}
}
.mxa-screen .mxa-scroll{
padding-bottom:calc(var(--m-tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 18px);
}
/* ── Social composer — hide the .ph header's DUPLICATED crumb / org-tile /
title on mobile (the espresso .mxa-head band carries them now); .ph-actions
— the only save/publish/recall/delete controls — stays visible. This mirrors
the ≤720 block in composer.css, but lives HERE in app.css because app.css is
re-fetched on every deploy (it changes constantly) whereas the 94 KB,
page-scoped composer.css is served `immutable` for 30 days and can sit
cache-stale on a device at an unchanged ?v=. Duplicating the hide in the
always-fresh file guarantees the double-header is gone even when the device
is still holding an old composer.css. ≤720 matches the .mobile-only band so
there is never a width where BOTH the band and the title are hidden. */
@media (max-width:720px){
.composer .ph-crumb,
.composer > .ph .ph-row > .ph-tile,
.composer > .ph .ph-row > .ph-titlestack{ display:none !important; }
.composer > .ph{ padding-top:0; }
}
/* ── iOS focus-zoom belt-and-suspenders ────────────────────────────────────
The app layout sets user-scalable=no, which stops iOS from zooming a focused
field — but mobile SAFARI (the web, not the Capacitor app) ignores
user-scalable, and zooms into any text field whose font-size is < 16px. Pin
every text-entry control to 16px on phones so Safari-web never focus-zooms
either. Non-text controls (checkbox/radio/range/color/file) are excluded —
font-size is meaningless on them and 16px could disturb their box. */
@media (max-width:767px){
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea,
[contenteditable],
.discussion-editable{ font-size:16px !important; }
}
/* ── Standalone .mxa-head band → full-bleed + flush (match the .mxa-screen
headers). Pages whose body is a single shared JS form/partial can't be a
mobile-only .mxa-screen overlay (that would duplicate the body), so they
render the espresso header as a band in normal flow inside .mx2-main — which
insets it by .mx2-main's mobile padding (56px+safe top, 16px+safe sides), so
it floats as a card with a cream gap above instead of reading as one
continuous espresso region under the app bar like every overlay screen.
Break it back out. Covers BOTH band shapes: .mobile-only>.mxa>.mxa-head
(composer / new / brand-profile) and bare .mxa-head.mobile-only (campaigns
calendar / import review). The 100vw + (50%−50vw) full-bleed needs no
knowledge of the side padding; −(56px+safe) top cancels .mx2-main's legacy
hamburger clearance so the band sits flush under the fixed .mxa-lite app bar.
Scoped ≤720 to match the .mobile-only band's own visibility breakpoint. */
@media (max-width:720px){
.mobile-only > .mxa > .mxa-head,
.mxa-head.mobile-only{
box-sizing:border-box;
width:100vw;
margin-left:calc(50% - 50vw);
position:relative;
}
/* Make app-bar → band read as ONE continuous espresso region (the overlay-
screen look) WITHOUT moving the band. .mx2-main's legacy top padding leaves
a cream gap above the band; rather than pull the band up with a negative
margin (which slides it behind the fixed app bar — fragile, depends on the
exact bar height), just paint that gap espresso with a pseudo-element that
bleeds generously upward. Any overpaint lands behind the fixed, opaque app
bar (z-index 995) and is invisible, so the fill height needs no measuring. */
.mobile-only > .mxa > .mxa-head::before,
.mxa-head.mobile-only::before{
content:"";
position:absolute;
left:0; right:0; bottom:100%;
height:160px;
background:var(--espresso);
pointer-events:none;
}
}
/* On-brand form controls on mobile: native checkboxes/radios default to iOS
blue — tint them oxblood so composer toggles ("This is a story", "Tailor
caption per network", etc.) match the design system. And keep the inline "?"
field-help a 16px circle: it's a