/* CRM + Bot design system — modern, clean, simple.
   One palette, one radius scale, soft shadows, generous whitespace. */

/* Live App 0.112: self-hosted brand fonts (design-mockups/fonts). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Inter-400.260c81a4759b.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Inter-500.260c81a4759b.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Inter-600.260c81a4759b.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Inter-700.260c81a4759b.woff2") format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Sora-600.fc575ebf6f7c.woff2") format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Sora-700.fc575ebf6f7c.woff2") format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url("fonts/Sora-800.fc575ebf6f7c.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/JetBrainsMono-500.b636a65da4f0.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/JetBrainsMono-600.b636a65da4f0.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/JetBrainsMono-700.b636a65da4f0.woff2") format('woff2')}
:root{
  /* alpha 0.13 design tokens: ONE accent (--brand — each org can
     override it from Settings → Branding; base.html injects the
     override), deep neutrals, one radius scale, one soft shadow
     scale, one spacing rhythm, one type scale. --blue/--blue-d are
     aliases of the brand so every component that ever used "blue"
     follows the org's colour. */
  --brand:#e85d1f;
  --brand-d:color-mix(in srgb, var(--brand) 74%, #04231c);
  --brand-soft:color-mix(in srgb, var(--brand) 10%, #ffffff);
  --ink:#16233a; --ink2:#223354; --mut:#5b6b84; --faint:#8494a7;
  --line:#dfe5ee; --bg:#f3f5f9; --card:#ffffff;
  --blue:var(--brand); --blue-d:var(--brand-d);
  --green:#16a34a; --red:#dc2626; --amber:#f59e0b;
  --r-sm:10px; --r:16px; --r-lg:18px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.05);
  --shadow-md:0 4px 14px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --shadow-lg:0 20px 45px rgba(16,24,40,.18);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --font:"Inter","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --accent:#e85d1f; --accent2:#ff8a3d; --accent-h:#c74e15; --accent-ink:#c24e12; --accent-soft:#fdf0e9;
  --navy:#0a1120; --navy-panel:#111c33; --panel2:#eef1f6; --line2:#c6d0df;
  --line-dark:#223354; --ink-dark:#eef2fa; --muted-dark:#93a1bd; --peach:#ffab7a;
  --live:#2fbf71; --green-ink:#177245; --green-soft:#e6f7ee;
  --red-soft:#fdf1f1; --red-dark:#ff8787;
  --gold-ink:#946106; --gold-soft:#fdf6e0; --info-ink:#2f5d8a; --info-soft:#eaf1f8;
  --sh:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.05);
  --font-d:"Sora","Inter",sans-serif; --font-m:"JetBrains Mono",monospace;
  --fs-sm:.83rem; --fs:.9375rem; --fs-lg:1.05rem; --fs-xl:1.38rem;
  /* Redesign R0 (0.145) — design-system freeze v1 settlements,
     extracted from this served CSS and reconciled in code:
     D7 base type = 15px: --fs (.9375rem) is the single base-size
     token; body consumes it and nothing else sets a base size.
     D8 info colour = --info-ink #2f5d8a / --info-soft #eaf1f8
     (one info token; the Files-v2 mock blue was never adopted).
     Greens: --live #2fbf71 is the live/in signal green (dots,
     presence, pulse); --green is the success/action green and
     is single-sourced — components reference var(--green),
     never the raw hex. */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);
  background:var(--bg);color:var(--ink);font-size:var(--fs);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--brand-soft)}

/* ---------- App layout ---------- */
.layout{display:flex;min-height:100vh;min-height:100dvh}
.side{width:212px;flex-shrink:0;background:linear-gradient(180deg,#0b1120,#0f172a);color:#e2e8f0;
  padding:22px 14px;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column}
.side .brand{font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.01em;padding:0 8px}
.side .sub{color:var(--faint);font-size:.78rem;margin:2px 0 18px;padding:0 8px}
.side a{display:flex;gap:9px;align-items:center;color:#cbd5e1;padding:9px 10px;border-radius:9px;
  margin-bottom:2px;font-size:.93rem;font-weight:500}
.side a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side .user{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:var(--faint)}
/* Live App 0.04 (ui-fluid-004): no fixed width cap — the content
   area fills the screen next to the rail at every size, with a
   wider gutter on very large monitors (media rule at the end of
   this file). min-width:0 lets wide grids/tables shrink-wrap
   into the flex row instead of overflowing it. */
.main{flex:1;padding:28px 32px 20px;min-width:0;width:100%}
h1{font-size:var(--fs-xl);font-weight:750;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:var(--fs-lg);font-weight:700;margin:26px 0 10px;letter-spacing:-.01em}
.sub{color:var(--mut);margin:0 0 18px;font-size:.94rem}
.appfoot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--mut);font-size:.78rem;line-height:1.55}
.appfoot a{color:var(--mut);text-decoration:underline}

/* ---------- Components ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .n{font-size:1.5rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .l{color:var(--mut);font-size:.83rem;margin-top:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top}
th{background:#fafbfc;color:var(--mut);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#fafbfc}
.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.due{color:var(--red);font-weight:700}.ok{color:var(--green);font-weight:600}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.col{background:#eef1f5;border-radius:var(--r);padding:10px;min-width:190px}
.col h3{font-size:.88rem;margin:2px 0 10px;color:#334155}
.lead{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:8px;
  font-size:.88rem;box-shadow:var(--shadow)}
.lead b{display:block;margin-bottom:2px}.lead .c{color:var(--mut);font-size:.8rem}
.btn{display:inline-block;background:var(--blue);color:#fff;border:1px solid var(--blue);
  padding:9px 16px;border-radius:10px;cursor:pointer;font-size:.92rem;font-weight:600;line-height:1.2;box-shadow:var(--shadow)}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);text-decoration:none}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:#f1f5f9}
.btn.sm{padding:5px 11px;font-size:.8rem;border-radius:8px}
.btn.green{background:var(--green);border-color:var(--green)}.btn.red{background:var(--red);border-color:var(--red)}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;font-size:.95rem;
  width:100%;background:var(--card);color:var(--ink);font-family:inherit}
input[type="checkbox"],input[type="radio"]{width:auto;padding:0;flex-shrink:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent)}
label{font-size:.85rem;color:#334155;display:block;margin:10px 0 4px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msg{background:#dcfce7;border:1px solid #86efac;padding:10px 14px;border-radius:10px;margin-bottom:12px}
.msg.warning{background:#fef3c7;border-color:#fcd34d}
.msg.error{background:#fee2e2;border-color:#fca5a5}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.badge{background:#e8edf3;color:#475569;border-radius:99px;padding:2px 10px;font-size:.76rem;font-weight:700}
.badge.ok{background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#92400e}
.searchbar{display:flex;gap:8px;margin-bottom:14px}.searchbar input{flex:1}
.muted{color:var(--mut)}
.inlineform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inlineform input{flex:1;min-width:120px;width:auto}

/* ---------- Tab bar (sheet tabs) ---------- */
.tabbar{display:flex;flex-wrap:wrap;gap:3px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:0 0 20px;box-shadow:var(--shadow)}
.tabbar .tab{padding:7px 14px;border-radius:9px;color:var(--mut);text-decoration:none;
  font-size:.9rem;font-weight:600;white-space:nowrap}
.tabbar .tab:hover{background:#f1f5f9;color:var(--ink);text-decoration:none}
.tabbar .tab.on{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
/* alpha 0.52: settings tab panels — the settings router toggles
   [hidden]; with JS off every panel stays stacked and visible. */
.settingspanel[hidden]{display:none!important}
.segbar{display:inline-flex;gap:3px;background:#eef1f5;border-radius:10px;padding:3px;margin:0 0 14px}
.segbar .seg{padding:6px 13px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:.88rem;font-weight:600}
.segbar .seg:hover{color:var(--ink);text-decoration:none}
.segbar .seg.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

/* ---------- Sheet grids + inline editing ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.toolbar input[type=search]{flex:1;min-width:180px}
.savestate{font-size:.85rem;font-weight:600}
.gridwrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  max-height:72vh;box-shadow:var(--shadow)}
table.grid{border-collapse:collapse;width:100%;font-size:.88rem;border:0;box-shadow:none;border-radius:0}
table.grid th{position:sticky;top:0;background:#fafbfc;text-align:left;padding:9px 11px;
  border-bottom:1px solid var(--line);white-space:nowrap;z-index:1;text-transform:none;letter-spacing:0;font-size:.85rem;color:#334155}
table.grid td{border-bottom:1px solid #eef0f4;padding:0;vertical-align:middle}
table.grid td.ops{width:36px;text-align:center;background:#fafbfc}
table.grid td.money{padding:0 6px}
table.grid input.cell, table.grid select.cell{width:100%;min-width:110px;border:0;background:transparent;
  padding:8px 11px;font:inherit;color:inherit;border-radius:0;box-shadow:none}
table.grid input.cell.sm{width:100%;min-width:80px}
table.grid input.cell.money{text-align:right;font-variant-numeric:tabular-nums}
table.grid input.cell:focus, table.grid select.cell:focus{outline:2px solid var(--blue);outline-offset:-2px;background:#eef4ff;box-shadow:none}
table.grid tr:hover td{background:#fafbfc}
.rowdel{border:0;background:none;color:var(--red);cursor:pointer;font-size:.95rem;padding:4px 6px;opacity:.75}
.rowdel:hover{opacity:1}

/* ---------- Login ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,#173f77 0%,#0f2a52 48%,#0a1c38 100%)}
.login-wrap{width:100%;max-width:340px;background:rgba(255,255,255,.97);border-radius:18px;
  padding:28px 26px 22px;box-shadow:var(--shadow-lg);text-align:center;backdrop-filter:blur(6px)}
.login-wrap h1{font-size:1.3rem;margin:0}
.login-wrap .sub{margin:4px 0 8px;font-size:.88rem}
.login-wrap form{text-align:left}
.login-wrap label{margin-top:12px}
.login-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:9px 12px;border-radius:10px;font-size:.88rem;margin-top:10px;text-align:left}
.login-foot{margin-top:14px;font-size:.76rem;color:var(--mut)}
/* 0.01: login consent block, remember/trust row, What's-New panel, footer row */
#consentBlock{margin-top:6px}
.consent-row{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;margin-top:10px;cursor:pointer;text-align:left}
.consent-row input{margin-top:3px;flex-shrink:0}
.login-opts{display:flex;gap:18px;flex-wrap:wrap}
.login-opts .consent-row{margin-top:12px;align-items:center}
.login-opts .consent-row input{margin-top:0}
.login-notes{width:100%;max-width:340px;margin-top:16px;background:rgba(255,255,255,.97);border-radius:18px;padding:16px 20px 10px;box-shadow:0 18px 44px rgba(2,6,23,.13);text-align:left}
.login-notes h2{font-size:.95rem;margin:0 0 4px}
.login-note{border-top:1px solid var(--line);padding:8px 0}
.login-note-head{margin:0 0 2px;font-size:.9rem}
.login-note-body{font-size:.85rem;color:#334155}
.login-side .login-foot{margin-top:16px;text-align:center;color:#64748b;font-size:.85rem}
.login-side .login-foot a{color:#64748b}

/* ---------- Avatars & settings ---------- */
.avatar-face{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;font-size:1.35rem;background:#ffedd5;border:1px solid var(--line);flex-shrink:0}
.avatar-face.sm{width:30px;height:30px;font-size:1rem}
.avatar-grid{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.avatar-opt{cursor:pointer;margin:0}
.avatar-opt input{position:absolute;opacity:0;width:auto}
.avatar-opt .avatar-face{transition:transform .12s ease, box-shadow .12s ease}
.avatar-opt input:checked + .avatar-face{box-shadow:0 0 0 3px var(--blue);transform:scale(1.1)}
.avatar-opt input:focus-visible + .avatar-face{box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 35%, #ffffff)}

/* ---------- Job page ---------- */
.jobhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.trackerbar{display:flex;gap:14px;flex-wrap:wrap;align-items:end;padding:14px 18px}
.trackerbar label{margin:0;flex:1;min-width:130px}
.trackerbar .btn{align-self:center}
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow)}
.stat .sv{font-size:1.3rem;font-weight:750;font-variant-numeric:tabular-nums;display:block}
.stat .sl{color:var(--mut);font-size:.82rem}
.stat input.textin{border:0;padding:0;font:inherit;font-weight:750;width:100%;background:transparent}
.stat input.textin:focus{box-shadow:none;outline:2px solid var(--blue);border-radius:6px}
.comment{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid #eef0f4}
.comment:last-child{border-bottom:0}
.comment.mentioned{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--brand) 65%, transparent);padding-left:8px}
.comment:target{background:color-mix(in srgb, var(--brand) 8%, transparent);border-radius:8px}
.comment .cbody{flex:1;min-width:0}
.comment .meta{font-size:.78rem;color:var(--mut);margin-bottom:2px}
.taskrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #eef0f4}
.taskrow:last-of-type{border-bottom:0}
.taskrow .ttitle{flex:1}
.taskrow.done .ttitle{color:var(--faint);text-decoration:line-through}
.taskcheck{background:none;border:0;font-size:1.1rem;cursor:pointer;padding:2px;color:var(--ink)}
.taskrow .tdue{font-size:.8rem;color:var(--mut)}
.taskrow .tdue.overdue{color:var(--red);font-weight:700}

/* ---------- Sidebar search ---------- */
.side-search{padding:0 2px 12px}
.side-search input{width:100%;padding:8px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);color:#fff;font-size:.85rem}
.side-search input::placeholder{color:rgba(255,255,255,.55)}
.side-search input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}

/* ---------- Team chat ---------- */
.chatlayout{display:grid;grid-template-columns:252px 1fr;gap:16px;align-items:start}
.rooms .room{display:block;padding:8px 10px;border-radius:9px;color:inherit;text-decoration:none;font-weight:600}
.rooms .room:hover{background:#f1f5f9;text-decoration:none}
.rooms .room.on{background:var(--brand-soft);color:var(--blue-d)}
.person{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:.88rem}
.person .pname{flex:1}
.person .plabel{color:var(--mut);font-size:.78rem}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.online{background:#22c55e}.dot.away{background:var(--amber)}.dot.offline{background:#cbd5e1}
.chatpane{display:flex;flex-direction:column;height:70vh}
.msglist{flex:1;overflow-y:auto;padding:6px 2px}
.chatmsg{display:flex;gap:8px;margin:10px 0;align-items:flex-start}
.chatmsg .bubble{background:#f1f5f9;border-radius:14px;padding:8px 13px;max-width:78%}
.chatmsg.mine{flex-direction:row-reverse}
.chatmsg.mine .bubble{background:#dbeafe}
.chatmsg .meta{font-size:.75rem;color:var(--mut);margin-bottom:2px}
.chatform{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.chatform input{flex:1}

/* ---------- Leads polish ---------- */
.lead.stale{border-left:4px solid var(--amber)}

/* ---------- Fox pet widget ---------- */
.pet-root{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pet-btn{position:relative;width:60px;height:60px;border-radius:50%;border:1px solid #fed7aa;background:#fff7ed;
  box-shadow:0 12px 28px rgba(16,24,40,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:background .15s ease}
/* alpha 0.42: the fox-replied dot on the launcher (pet.js shows it
   when a reply lands with the panel closed; opening clears it). */
.pet-dot{position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;
  background:#f59e0b;border:2px solid #fff;box-shadow:0 1px 4px rgba(16,24,40,.35)}
.pet-dot[hidden]{display:none}
.pet-btn:hover{background:#ffedd5}
.pet-btn:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 35%, #ffffff);outline-offset:2px}
.pet-panel{width:430px;max-width:calc(100vw - 32px);height:min(640px, calc(100vh - 120px));background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}
.pet-panel[hidden]{display:none}
.pet-head{display:flex;align-items:center;gap:10px;background:var(--navy,#0f2a52);color:#fff;padding:11px 14px}
.pet-head-fox{background:#fff7ed;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.pet-head-txt{flex:1;display:flex;flex-direction:column;line-height:1.25}
.pet-head-txt span{font-size:.76rem;color:#cbd5e1}
.pet-x{background:none;border:none;color:#cbd5e1;font-size:1rem;cursor:pointer;padding:6px;border-radius:6px}
.pet-x:hover{color:#fff;background:#1e293b}
.pet-log{flex:1;overflow-y:auto;padding:14px;background:#f5f6f7;display:flex;flex-direction:column;gap:9px}
.pet-msg{display:flex}
.pet-msg.me{justify-content:flex-end}
.pet-bubble{max-width:85%;padding:9px 13px;border-radius:10px;font-size:.95rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.pet-msg.me .pet-bubble{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.pet-msg.bot .pet-bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.pet-flagrow{margin:2px 0 6px}
.pet-flag{background:none;border:none;color:var(--mut);font-size:.78rem;cursor:pointer;padding:2px 4px}
.pet-flag:hover{color:#b91c1c}
.pet-flag.done{color:var(--green);cursor:default}
.pet-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0}
.pet-chip{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:4px 11px;font-size:.8rem;font-weight:600;cursor:pointer}
.pet-chip:hover{background:#eef2f7}
.pet-form{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.pet-form input{flex:1;font-size:.95rem}
.pet-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  .pet-btn{transition:none}
}
/* ---------- lifecycle stepper (job page) ---------- */
.stepper{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow)}
.stepper .step{flex:1;text-align:center;padding:7px 4px;font-size:.8rem;font-weight:600;color:var(--faint);
  border-radius:8px;white-space:nowrap}
.stepper .step.on{background:var(--blue);color:#fff}
.stepper .step.holdon{background:#fef3c7;color:#92400e;flex:0 0 auto;padding:7px 12px}
.stepper .step.done{background:var(--brand-soft);color:var(--blue-d)}

/* ---------- WeChat-style chat ---------- */
.avatar-face.sq{border-radius:9px}
.timediv{text-align:center;color:var(--mut);font-size:.75rem;margin:14px 0 4px}
.recallnote{text-align:center;color:var(--mut);font-size:.78rem;margin:8px 0}
.pingline{text-align:center;margin:8px 0}
.pingline-in{display:inline-block;background:#f1f5f9;color:var(--mut);
  border-radius:99px;padding:2px 12px;font-size:.78rem}
.chatmsg .bubblewrap{display:flex;flex-direction:column;max-width:78%}
.chatmsg.mine .bubblewrap{align-items:flex-end}
.chatmsg .bubble{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;max-width:100%}
.chatmsg.mine .bubble{background:#fde8dc;border-color:#f3c39b;color:var(--ink)}
.chatmsg.mentioned .bubble{box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent)}
.chatmsg .meta{font-size:.75rem;color:var(--mut);margin:0 0 3px 2px}
.mention{color:var(--blue-d);font-weight:700;background:color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius:6px;padding:0 4px}
.chatmsg.mine .mention{color:#065f46;background:rgba(6,95,70,.12)}
.recallform{margin-top:2px}
.recallbtn{background:none;border:0;color:var(--mut);font-size:.75rem;cursor:pointer;padding:0}
.recallbtn:hover{color:var(--red)}
.chatform textarea{flex:1;resize:none}
.convolist{padding:8px}
.convo{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;color:inherit}
.convo:hover{background:#f1f5f9;text-decoration:none}
.convo.on{background:#e8effe}
.convo-ic{font-size:1.3rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#eef1f5;border-radius:10px;flex-shrink:0}
.convo-main{flex:1;min-width:0}
.convo-top{display:flex;justify-content:space-between;gap:8px;font-size:.92rem}
.convo-time{color:var(--mut);font-size:.75rem;white-space:nowrap}
.convo-prev{display:block;color:var(--mut);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge.redb{background:var(--red);color:#fff}

/* ---------- visual month calendar ---------- */
.calhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.calhead h1{margin:0}
.calgrid{border-collapse:separate;border-spacing:4px;width:100%;table-layout:fixed}
.calgrid th{background:transparent;color:var(--mut);text-align:center;padding:4px}
.calgrid td{background:var(--card);border:1px solid var(--line);border-radius:10px;vertical-align:top;
  width:14.28%;height:104px;padding:6px;overflow:hidden}
.calgrid td.empty{background:transparent;border:0}
.calday{font-weight:700;font-size:.86rem;color:var(--mut)}
.calday.today{background:var(--blue);color:#fff;border-radius:999px;width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center}
.calev{display:block;font-size:.74rem;line-height:1.35;margin-top:3px;color:var(--ink);
  background:var(--brand-soft);border-radius:6px;padding:2px 5px}
a.calev:hover{background:color-mix(in srgb, var(--brand) 18%, #ffffff);text-decoration:none}

/* ---------- brand ---------- */
.side .brand{display:flex;align-items:center;gap:10px}
.side .brand em{font-style:normal;color:var(--amber)}
.logo-mark{flex-shrink:0;border-radius:9px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.login-logo{display:flex;justify-content:center;margin-bottom:6px}
.login-logo .logo-mark{width:52px;height:52px}

/* ---------- dashboard v11 ---------- */
.dash-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
/* alpha 0.42: the Today header info strip (replaces the greeting) —
   one slim wrapping row of live-fact chips. */
.today-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.strip-date{font-weight:600}
.strip-chips{display:flex;flex-wrap:wrap;gap:6px}
.statchip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid var(--line);
  border-radius:999px;font-size:.82rem;color:inherit;text-decoration:none;background:#fff}
.statchip:hover{border-color:var(--brand)}
button.statchip{font:inherit;cursor:pointer}
.alt-lang{margin-top:10px}
.alt-lang summary{cursor:pointer;color:#64748b;font-size:.9rem}
.dash-hero h1{margin-bottom:4px}
.cards.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpis .kpi{display:flex;gap:12px;align-items:center;text-align:left;min-width:0}
.kpis .kic{font-size:1.35rem;background:var(--brand-soft);border-radius:12px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* alpha 0.35: the value column may shrink (min-width:0) and the
   number sizes itself to the viewport, so a long money figure can
   never clip mid-digit or squeeze its label off the card. The full
   exact figure always renders — money is never abbreviated. */
.kpis .kt{flex:1 1 auto;min-width:0}
.kpis .n{font-size:clamp(1.18rem,.95rem + .9vw,1.55rem);line-height:1.15}
.kpis .n.money{font-size:clamp(1.02rem,.86rem + .8vw,1.38rem);
  letter-spacing:-.02em;white-space:nowrap}
.kpis .kpi.wide{grid-column:span 2}
.kpis .l{line-height:1.3;overflow-wrap:break-word}
.kpis a.kpi{text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.kpis a.kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--brand) 45%, #ffffff);
  box-shadow:0 8px 20px rgba(15,23,42,.10)}
.kpis a.kpi:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.alertpanel{background:#fffbeb;border:1px solid #fde68a;border-radius:14px;padding:14px 18px;margin:16px 0 4px}
.alertpanel h2{margin:0 0 8px;color:#92400e;font-size:1.05rem}
.alertpanel p{margin:6px 0}
.timeline .trow{display:flex;gap:12px;align-items:center;padding:8px 6px;border-radius:10px;color:inherit}
.timeline .trow:hover{background:#f1f5f9;text-decoration:none}
.datebadge{background:var(--nav,#0f2a52);background:#0f2a52;color:#fff;border-radius:10px;width:48px;
  padding:5px 0;text-align:center;flex-shrink:0;line-height:1.1}
.datebadge b{display:block;font-size:1.05rem}
.datebadge i{font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#93c5fd}
.tmain{min-width:0}
.prow{margin:7px 0}
.actrow{display:flex;gap:10px;align-items:flex-start;margin:9px 0}
.actrow .avatar-face{margin-top:1px}

/* Calendar CRUD (v14) */
.calcell-head{display:flex;justify-content:space-between;align-items:center}
.caladd{border:1px solid var(--line);background:#fff;border-radius:999px;width:22px;height:22px;line-height:1;font-size:.9rem;color:var(--blue);cursor:pointer;padding:0}
.caladd:hover{background:#dbeafe}
button.calev{border:0;text-align:left;width:100%;cursor:pointer;font:inherit;background:#fef3c7;border-radius:6px;padding:1px 5px}
button.calev:hover{background:#fde68a}
.calev .aud{color:var(--mut);font-size:.7rem}
.calmodal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:1400;padding:16px}
.calmodal.open{display:flex}
.calmodal-card{background:#fff;border-radius:14px;max-width:430px;width:100%;padding:20px;max-height:90vh;overflow:auto}
.calmodal-card h2{margin:0 0 10px}
.calmodal-card label{display:block;font-size:.82rem;color:var(--mut);margin:10px 0 4px}
.calmodal-card input,.calmodal-card select,.calmodal-card textarea{width:100%}

/* ---------- v25 polish: active nav, focus, mobile tables ---------- */
.side a.on{background:color-mix(in srgb, var(--brand) 42%, transparent);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.side a:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 35%, #ffffff);outline-offset:1px}
td,th{font-variant-numeric:tabular-nums}
.langswitch{display:flex;gap:6px;align-items:center;padding:8px 10px 2px;font-size:.8rem}
.langswitch button{background:none;border:1px solid rgba(255,255,255,.25);color:#cbd5e1;border-radius:7px;
  padding:3px 9px;cursor:pointer;font:inherit}
.langswitch button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}

/* ==== v27: organized nav, apps hub, my day, production cards ==== */
.navsec{margin:16px 10px 4px;font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#94a3b8}
.side a .badge.redb{background:var(--red);color:#fff}
.appssec{font-size:1rem;margin:20px 0 8px;color:var(--ink)}
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.appcard{display:flex;flex-direction:column;gap:3px;background:var(--card,#fff);
  border:1px solid var(--line);border-radius:14px;padding:16px;color:inherit;
  transition:transform .12s, box-shadow .12s}
.appcard:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,42,82,.10)}
.appcard .appic{font-size:1.7rem}
.appcard b{font-size:1rem}
.appcard small{color:var(--mut);line-height:1.35}
.myday{border-left:4px solid var(--blue);margin-bottom:16px}
.myrow{margin:5px 0;font-size:.94rem}
.toolbar{display:flex;gap:8px;align-items:center;margin:10px 0 14px;flex-wrap:wrap}


/* ==== v29: scrollable grouped sidebar, more-modules fold, mobile shell ==== */
.sidenav{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;padding-right:2px}
.sidenav::-webkit-scrollbar{width:6px}
.sidenav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.navmore{margin-top:2px}
.navmore summary{cursor:pointer;color:#cbd5e1;padding:9px 10px;border-radius:9px;font-size:.93rem;font-weight:500;list-style:none}
.navmore summary::-webkit-details-marker{display:none}
.navmore summary:hover{background:rgba(255,255,255,.08);color:#fff}
.navmore summary .marr{display:inline-block;transition:transform .15s ease}
.navmore[open ] summary .marr{transform:rotate(90deg)}
/* ---- v34 mail layout (Gmail-style rail + list) ---- */
.mailwrap{display:flex;gap:16px;align-items:flex-start}
.mailrail{width:184px;flex-shrink:0;display:flex;flex-direction:column;gap:4px}
.mfolder{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:9px;color:inherit;font-weight:500}
.mfolder:hover{background:#f1f5f9;text-decoration:none}
.mfolder.on{background:var(--ink);color:#fff}
.mfolder .mcount{margin-left:auto;color:var(--mut);font-size:.8rem}
.mfolder.on .mcount{color:#cbd5e1}
.mobilebar{display:none}


/* ---- v35 mail three-pane + bulk + undo bar + avatar img ---- */
img.avatar-face{object-fit:cover;padding:0}
.avatar-face.lg{width:64px;height:64px;font-size:1.6rem}
/* Live App 0.04 (ui-mail-004): the panes flex with the window —
   folder rail fixed, message list takes a flexible share, the
   reading pane takes the rest (the list used to cap at 400px
   inside a capped page, leaving a dead zone on wide monitors).
   The reading pane's own text measure stays capped at 80ch so
   lines never stretch wall-to-wall. */
.mailwrap3{display:grid;grid-template-columns:190px minmax(330px,1.1fr) 1.9fr;gap:16px;align-items:start}
.mailwrap3 .mailrail{width:auto}
.mailpane .mailtext{max-width:80ch}
.maillist{min-width:0}
.mailpane{min-width:0;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:2px;scrollbar-width:thin}
.mrow.sel{background:#eff6ff}
.bulkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bulkbar select{width:auto}
/* ---- alpha 0.35: email tidy — one spacing rhythm for the two
   toolbar rows, the bulk row grouped on its own surface, folder
   names ellipsize instead of wrapping (counts stay right), and
   the reading pane's message actions as ONE flex row (the old
   wrapper was a <p> around <form>s — invalid nesting, so the
   browser broke the row into a ragged column). ---- */
.maillist .searchbar{margin-bottom:10px;align-items:center}
.maillist .bulkbar{background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:6px 8px;margin-bottom:10px}
.mfname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mfolder .mcount{flex-shrink:0}
.mfolder .badge{flex-shrink:0}
.mactions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-top:12px}
.mactions form{display:flex;margin:0}
.mhead{overflow-wrap:anywhere}
.mailtext a{overflow-wrap:anywhere}
.mailframe{max-width:100%}
.undobar{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:80;background:#0f172a;color:#fff;padding:10px 16px;border-radius:12px;display:flex;gap:12px;align-items:center;box-shadow:0 12px 32px rgba(2,6,23,.35)}

/* ---- v35 login hero (Chinese SaaS split layout, dynamic) ---- */
.login-shell{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh}
.login-hero{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:52px 48px;background:#0b1120}
.login-hero .hero-bg{position:absolute;inset:0;background:linear-gradient(155deg,#1b478a 0%,#0f2a52 46%,#081831 100%)}
.login-hero .hero-shade{position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,17,32,.25) 0%,rgba(11,17,32,.55) 55%,rgba(11,17,32,.88) 100%)}
.login-hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.login-hero .blob.b1{width:420px;height:420px;background:#b45309;top:-120px;right:-80px;animation:blobFloat 17s ease-in-out infinite alternate}
.login-hero .blob.b2{width:340px;height:340px;background:#1d4ed8;bottom:-100px;left:-60px;animation:blobFloat 23s ease-in-out infinite alternate-reverse}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-46px,34px) scale(1.12)}}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.login-hero .hero-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;position:absolute;top:40px;left:48px;z-index:2}
.login-hero h2{font-size:2rem;line-height:1.25;margin:0 0 10px;letter-spacing:-.01em;color:#fff}
.login-hero p{color:rgba(255,255,255,.82);margin:0;max-width:44ch;line-height:1.65}
.login-side{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f6f8fb;padding:28px 20px}
.login-side .login-wrap{box-shadow:0 18px 44px rgba(2,6,23,.13)}

@media (prefers-reduced-motion: reduce){
  .login-hero .hero-bg,.login-hero .blob{animation:none}
}
/* ---- v35 workbench quick tiles ---- */
.quicktiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:16px 0 4px}
.quicktiles a{display:flex;flex-direction:column;gap:5px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:inherit;font-weight:600;font-size:.9rem;box-shadow:var(--shadow)}
.quicktiles a:hover{text-decoration:none;border-color:color-mix(in srgb, var(--brand) 40%, #ffffff);background:var(--brand-soft)}
.quicktiles .qi{font-size:1.3rem}

/* ---- v38 settings About ---- */
.kvtable{border-collapse:collapse}
.kvtable td{padding:5px 14px 5px 0;vertical-align:top}

/* ==== v40: WeCom / DingTalk pattern — icon rail, list+pane, flat panes ====
   White panes on light grey, hairline dividers, 8px radii, one navy
   accent, no heavy shadows. Restyle only — every class name above keeps
   working; the v39.1 checkbox fix (input:not([type=checkbox])) stands. */
:root{
  --bg:#f0f2f5; --line:#e3e6ea; --r:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --navy:#0f2a52;
}
body{background:var(--bg)}
.btn{border-radius:8px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{border-radius:8px}
th{background:#f7f8fa}
.card,.kpi,.stat{box-shadow:var(--shadow)}

/* ---- far-left nav rail (alpha 0.04.1: two-column tile grid) ----
   The 108px icon rail became a 228px rail: brand + profile + search
   stack full-width on top, then the module nav (.sidenav — the
   rail's scroller) is a two-per-row TILE grid: icon over label,
   ~68px targets (was ~52px), group headers and the More fold
   spanning both columns. Badges pin to the tile's top-right. */
.side{width:228px;padding:16px 12px 12px;background:var(--navy);align-items:stretch}
.side .brand{justify-content:flex-start;padding:0 4px}
.side .sub{display:block;margin:3px 0 14px;padding:0 4px}
/* 0.01 (item 8): the brand block (logo + wordmark + org name) is
   one link home — same hover affordance as .rail-me below it. */
.side a.brandlink{display:block;text-decoration:none;color:inherit;
  border-radius:10px}
.side a.brandlink:hover{background:rgba(255,255,255,.07);
  text-decoration:none}
.side a.brandlink:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}
.rail-me{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 2px 12px;margin:2px 0 8px;border-bottom:1px solid rgba(255,255,255,.13);
  border-radius:0}
.rail-me:hover{background:rgba(255,255,255,.07);text-decoration:none}
.rail-me .avatar-face{width:46px;height:46px;font-size:1.4rem}
.rail-me-name{font-size:.8rem;font-weight:600;color:#e2e8f0;max-width:196px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-search{padding:0 0 10px}
.side-search input{padding:8px 11px;font-size:.85rem;text-align:left;border-radius:8px}
.sidenav{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
/* Live App 0.04: group headers sit on the tile grid — same left
   inset as a tile's content edge, one rhythm above every group. */
.sidenav .navsec{grid-column:1/-1;margin:14px 4px 2px}
.sidenav .navmore{grid-column:1/-1}
.tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.side a{flex-direction:column;gap:2px;align-items:center;text-align:center;
  padding:8px 2px;font-size:1.5rem;line-height:1.15;border-radius:8px;position:relative}
/* Live App 0.04 (ui-tiles-004): ONE tile geometry for every nav
   item — same height, same padding, the icon in a fixed 30px
   centred box (.ic) so glyphs of different native sizes line up
   across the whole grid, and the label on ONE line with an
   ellipsis. The old two-line clamp clipped long labels (e.g.
   "Inventory & assets") against the tile's bottom edge, and a
   one-line vs two-line label left the icons sitting at
   different heights from row to row. */
.sidenav a{justify-content:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);padding:8px 4px;margin-bottom:0;
  gap:4px}
.sidenav a{height:78px}
.sidenav a .ic{display:flex;align-items:center;justify-content:center;
  width:100%;height:30px;flex-shrink:0;font-size:1.42rem;line-height:1}
.sidenav a .lbl{display:block;width:100%;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sidenav a:hover{background:rgba(255,255,255,.12);color:#fff}
.side a .lbl{font-size:.69rem;font-weight:600;line-height:1.2}
.sidenav a .lbl{font-size:.75rem;line-height:1.25}
.side a.on{background:rgba(59,130,246,.30);box-shadow:none;color:#fff}
.sidenav a.on{background:color-mix(in srgb, var(--brand) 48%, transparent);border-color:color-mix(in srgb, var(--brand) 60%, #ffffff)}
.side .badge{position:absolute;top:4px;right:5px;padding:1px 6px;font-size:.62rem}
.navsec{margin:12px 2px 1px;font-size:.68rem;text-align:left;letter-spacing:.06em}
.navmore summary{display:flex;flex-direction:row;align-items:center;gap:6px;
  text-align:left;font-size:.88rem;font-weight:600;padding:9px 8px;border-radius:8px}
/* Live App 0.04: the bottom block (log out + language) spans the
   same inner width as the tile grid above it — no side insets. */
.side .user{border-top:1px solid rgba(255,255,255,.13);padding:10px 0 0;text-align:center}
.side .user .btn{width:100%;padding:7px 4px;font-size:.78rem;border-radius:7px}
.langswitch{flex-direction:column;align-items:stretch;padding:8px 0 0;gap:4px}
.langswitch select{width:100%}
.langswitch button{padding:3px 4px;font-size:.66rem;text-align:center}

/* ---- list + pane (Messages goes full WeCom) ---- */
.chat-title{font-size:1.15rem;margin-bottom:12px}
.chatlayout{grid-template-columns:300px 1fr;gap:14px}
.convcol{padding:6px 4px 10px;display:flex;flex-direction:column;overflow:hidden}
.convsec{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);padding:11px 10px 3px}
.convsec-team{display:flex;align-items:center;gap:8px}
.testtoggle{margin-left:auto;display:flex;align-items:center;gap:5px;
  font-weight:600;letter-spacing:0;text-transform:none;font-size:.72rem;
  color:var(--mut);cursor:pointer;white-space:nowrap}
.testtoggle input{margin:0;cursor:pointer}
.convcol .convolist{padding:0 2px}
.convcol .convo{border-radius:8px;padding:9px 8px}
.convcol .convo.on{background:var(--brand-soft)}
.convo-av{position:relative;flex-shrink:0;display:flex}
.convo-av .avatar-face{width:40px;height:40px;font-size:1.2rem}
.convo-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border:2px solid #fff}
.convcol .person{padding:5px 10px}
.dm-link{margin-left:auto;text-decoration:none;font-size:.95rem}
.dm-link:hover{text-decoration:none;transform:scale(1.15)}
.chatpane{padding:0;overflow:hidden;height:calc(100vh - 172px);min-height:460px}
/* alpha 0.04.2: embedded estimator pages — the iframe owns the whole
   content area and scrolls itself, so the shell adds no second
   scrollbar. Height maths mirrors .chatpane. */
.estwrap{height:calc(100vh - 172px);min-height:460px;display:flex;flex-direction:column}
.estframe{flex:1;width:100%;min-height:0;border:0;border-radius:12px;background:#fff;display:block}
.estempty{margin:auto;text-align:center;padding:32px 40px}
.chathead{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:#fff}
.chathead-main{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.chathead-main .muted{font-size:.78rem}
.memberstrip{margin-left:auto;display:flex;align-items:center;flex-shrink:0}
.memberstrip .avatar-face{margin-left:-8px;border:2px solid #fff;width:30px;height:30px}
.memberstrip .avatar-face:first-child{margin-left:0}
.chatpane .msglist{background:#f5f6f7;padding:10px 14px}
.chatpane .chatform{padding:12px 14px;background:#fff;margin:0}
.chathint{font-size:.72rem;padding:0 14px 10px;margin:0;background:#fff}

/* ---- directory (members page) group sections ---- */
table.grid tr.dirgroup td{background:#eef1f5;font-weight:800;font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;color:#475569;padding:8px 12px}

/* ---- workbench home ---- */
.wb-hero h1{font-size:1.5rem}
.wb-tiles{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin:14px 0 18px}
.wb-tiles a{align-items:center;text-align:center;padding:16px 12px;gap:7px;border-radius:8px}
.wb-tiles .qi{font-size:1.7rem}
.myday{background:#fff}



/* ---- v41: in-Hub calls (WebRTC, user to user) ---- */
.callbtns{display:flex;gap:6px;flex-shrink:0}
.callbtn{font-size:1rem;line-height:1;padding:6px 10px}
.callcard{position:fixed;top:74px;right:18px;z-index:90;display:flex;align-items:center;
  gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;box-shadow:0 16px 40px rgba(2,6,23,.28);max-width:calc(100vw - 36px);
  animation:callring .5s ease-in-out infinite alternate}
.callcard[hidden]{display:none}
@keyframes callring{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.callcard-av{font-size:1.9rem}
.callcard-main{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.callcard-main .muted{font-size:.78rem}
.callpanel{position:fixed;left:20px;bottom:20px;z-index:90;width:min(400px,calc(100vw - 40px));
  background:#0f172a;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(2,6,23,.4);color:#fff}
.callpanel[hidden]{display:none}
.callvideos{position:relative;background:#0f172a;min-height:120px;
  display:flex;align-items:center;justify-content:center}
.callpanel.voice .callvideos video{display:none}
.callpanel.voice .callvideos{min-height:110px}
#callRemoteVideo{width:100%;max-height:300px;display:block;background:#000}
#callLocalVideo{position:absolute;right:10px;bottom:10px;width:104px;border-radius:8px;
  border:2px solid rgba(255,255,255,.65);background:#000}
.callpanel-av{width:76px;height:76px;font-size:2.2rem}
.callpanel.video .callpanel-av{display:none}
.callpanel-bar{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);
  padding:10px 12px}
.callpanel-main{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.callpanel-main .muted{font-size:.78rem}
#callMute.off{opacity:.45;text-decoration:line-through}


/* ---- v41.1: chat send box + emoji picker ---- */
.emojiwrap{position:relative;align-self:flex-end}
.emojibtn{font-size:1.15rem;line-height:1;padding:8px 9px}
.emojipanel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;width:292px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 32px rgba(2,6,23,.18);padding:8px;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emojipanel[hidden]{display:none}
.emojiitem{border:0;background:transparent;font-size:1.22rem;line-height:1.5;
  border-radius:6px;cursor:pointer;padding:2px 0}
.emojiitem:hover{background:#eef2f7}

/* v42.1 password show/hide toggle */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:44px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.05rem;padding:4px 6px;line-height:1}

/* ---- alpha 0.02: ONE toast system (UI audit #1) — Django messages,
   @mentions and client-side feedback all render through CRM_TOAST
   (toast.js) as .toast cards in #crmToasts. Errors are RED. ---- */
/* p129: the stack moved from bottom-center to top-right, beside
   the bell — feedback lands where the eye already checks. */
.toasts{position:fixed;top:12px;right:16px;z-index:1500;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:100%;
  background:#fff;border:1px solid #dbe2ec;border-left:4px solid var(--blue);
  border-radius:10px;box-shadow:0 10px 30px rgba(15,30,60,.22);
  padding:10px 12px;cursor:default;animation:toastIn .18s ease-out}
.toast.out{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.toast-success{border-left-color:var(--green);background:#f0fdf4}
.toast-error{border-left-color:var(--red);background:#fef2f2}
.toast-warning{border-left-color:var(--amber);background:#fffbeb}
.toast-info,.toast-debug{border-left-color:var(--blue);background:#eff6ff}
.toast-ic{font-size:1rem;line-height:1.4;flex-shrink:0}
.toast-txt{flex:1;min-width:0;font-size:.9rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.toast-act{flex-shrink:0;align-self:center}
.toast-x{flex-shrink:0;background:none;border:0;color:var(--mut);cursor:pointer;
  font-size:.85rem;padding:2px 4px;line-height:1}
.toast-x:hover{color:var(--ink)}
.toast[href],.toast.clickable{cursor:pointer}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- alpha 0.02: ONE confirm/dialog pattern (calmodal-style) ---- */
.crmmodal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;
  align-items:center;justify-content:center;z-index:1400;padding:16px}
.crmmodal.open{display:flex}
.crmmodal-card{background:#fff;border-radius:14px;max-width:430px;width:100%;
  padding:20px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)}
.crmmodal-card h2{margin:0 0 10px;font-size:1.05rem}
.crmmodal-card label{display:block;font-size:.82rem;color:var(--mut);margin:10px 0 4px;font-weight:600}
.crmmodal-card input,.crmmodal-card select,.crmmodal-card textarea{width:100%}
.crmmodal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ---- alpha 0.02: notification center + stepper buttons + misc ---- */
.dayhead{font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);padding:14px 16px 4px}
.notifrow{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.notifrow.unread{background:#fffbeb}
.notifrow .ntxt{flex:1;min-width:0}
.notifrow.unread .ntxt{font-weight:700}
.notifrow .ntime{color:var(--mut);font-size:.75rem;white-space:nowrap}
.stepper button.step{border:0;font:inherit;cursor:pointer;background:none}
.stepper button.step:not(.on):hover{background:#eef2f7;color:var(--ink)}
.stepper button.step.on{cursor:default}
.stepper button.step.done{background:var(--brand-soft)}
.card[id]{scroll-margin-top:14px}
.prodprog{display:flex;gap:6px;align-items:center}
.prodprog select.cell{min-width:118px}
.prodprog .pct{width:62px;min-width:62px;text-align:right}

/* ---- v43: @mention picker in the chat composer ---- */
.mentionwrap{position:relative;flex:1;display:flex;min-width:0}
.mentionwrap textarea{flex:1;width:100%}
.mentionpop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;width:280px;
  max-height:min(400px,60vh);overflow-y:auto;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 12px 32px rgba(2,6,23,.18);padding:4px}
.mentionpop[hidden]{display:none}
.mentionitem{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:7px 9px;border-radius:6px;font-size:.92rem;color:var(--ink)}
.mentionitem .muted{font-size:.76rem}
.mentionitem.on,.mentionitem:hover{background:#eef2f7}
.mentionitem .avatar-face{flex-shrink:0}
/* alpha 0.34: comms pack — convo pin toggles, group pickers, DM seen */
.convorow{position:relative;display:flex;align-items:stretch}
.convorow .convo{flex:1;min-width:0}
.convpin{display:flex;align-items:center}
.convpin-btn{background:none;border:0;cursor:pointer;font-size:.8rem;line-height:1;
  padding:4px 5px;border-radius:6px;opacity:.28;filter:grayscale(1)}
.convorow:hover .convpin-btn{opacity:.75}
.convpin-btn.on{opacity:1;filter:none}
.convpin-btn:hover{background:#eef2f7}
.convsec-add{background:none;border:0;cursor:pointer;color:var(--mut);
  font-size:.85rem;line-height:1;padding:0 4px;border-radius:6px;float:right}
.convsec-add:hover{background:#eef2f7;color:var(--ink)}
.grouppick{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.grouppick-row{display:flex;align-items:center;gap:8px;padding:5px 6px;
  border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--ink)}
.grouppick-row:hover{background:#f1f5f9}
.grouppick-row input{width:auto;flex-shrink:0}
.groupmembers{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.groupmember-row{display:flex;align-items:center;gap:8px;padding:5px 6px}
.groupmember-row form{margin-left:auto}
.groupmember-name{font-size:.92rem}
.grouprename{display:flex;gap:8px;align-items:center}
.grouprename input{flex:1}
.seenline{font-size:.72rem;color:var(--mut);text-align:right;margin-top:2px;
  padding-right:2px;letter-spacing:.02em}

/* ---- v43: email reading + list density ---- */
.mailtext{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  line-height:1.65;font-size:.93rem;color:var(--ink2)}
.mrow{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;
  border-bottom:1px solid var(--line)}
.mrow .mmain{flex:1;min-width:0;color:inherit;display:flex}
.mrow .mmain:hover{text-decoration:none}
.mrow .mtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mrow .mline1{display:flex;align-items:center;gap:6px;min-width:0}
.mrow .mfrom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow.unread .mfrom{font-weight:700}
.mrow .udot{width:8px;height:8px;border-radius:50%;background:var(--blue);
  flex-shrink:0}
.mrow .mdate{margin-left:auto;color:var(--mut);font-size:.78rem;white-space:nowrap;
  flex-shrink:0}
.mrow .msubj{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:.92rem}
.mrow.unread .msubj{font-weight:700}
.mrow .msnip{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--mut);font-size:.83rem}
.mrow.sel{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--blue)}
.mrow:hover{background:#f7f9fc}
.mrow.sel:hover{background:color-mix(in srgb, var(--brand) 14%, #ffffff)}

/* ---- alpha 0.38: email polish — status chip instead of the header
   paragraph, selection-only bulk bar, collapsible folder rail,
   unread accent bar, one-line pane subject, slim convert strip,
   dimmed zero counts, sender avatars ---- */
.mailchip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:5px 8px 5px 14px;margin:0 0 12px;font-size:.9rem}
.mailchip .mcaddr{font-weight:600}
.mailchip .mcwhen{color:var(--mut);font-size:.85rem}
.mailchip .mcsync{margin-left:auto;display:flex}
.mailchip .mcsync button{border-radius:999px;width:30px;height:30px;
  padding:0;font-size:1rem;line-height:1}
.bulkbar[hidden]{display:none!important}
.mficon{flex-shrink:0}
.mfolder .mcount.zero{opacity:.35}
.mailwrap3.rail-min{grid-template-columns:52px minmax(340px,1.1fr) 1.9fr}
.mailwrap3.rail-min .mailrail .mfname,
.mailwrap3.rail-min .mailrail .mcount,
.mailwrap3.rail-min .mailrail .badge,
.mailwrap3.rail-min .mailrail .navsec,
.mailwrap3.rail-min .mailrail .mcbtn{display:none}
.mailwrap3.rail-min .mailrail .mfolder{justify-content:center;padding:8px 4px}
.mailwrap3.rail-min .mailrail > a.btn{text-align:center;padding-left:0;padding-right:0}
.mailwrap3.rail-min #railToggle{transform:scaleX(-1)}
@media (max-width:1100px){
  .mailwrap3.rail-min{grid-template-columns:52px 1fr}
}
@media (max-width:960px){
  .mailwrap3.rail-min .mailrail .mfname,
  .mailwrap3.rail-min .mailrail .mcount,
  .mailwrap3.rail-min .mailrail .mcbtn{display:inline}
  .mailwrap3.rail-min .mailrail .mfolder{justify-content:center;padding:8px 10px}
}
.mrow.unread{box-shadow:inset 3px 0 0 var(--blue)}
.mrow .mclip{color:var(--mut);font-size:.85em;flex-shrink:0}
.panesubj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;font-size:1.25rem}
.panesubj.open{white-space:normal;overflow:visible}
.mavatar{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--brand-soft);
  color:var(--ink);font-weight:700;font-size:.8rem;margin-right:7px;
  vertical-align:-7px;flex-shrink:0}
.mailconvert{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:6px 10px;margin-top:10px}
.mailconvert form{display:flex;margin:0}
.mailconvert .mcv-label{font-weight:600;font-size:.85rem;color:var(--mut)}
.mailconvert .mcv-sep{width:1px;align-self:stretch;background:var(--line);
  margin:2px 2px}
.scq{border-radius:999px;width:28px;height:28px;padding:0;font-weight:700}

/* v43.1 language dropdown (rail) */
.langswitch select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#e2e8f0;border-radius:7px;padding:4px 3px;font-size:.74rem;width:100%;cursor:pointer;font-family:inherit}
.langswitch select option{color:#111;background:#fff}

/* alpha 0.02: filter/anchor chips (notifications filters, settings nav) */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:99px;
  background:#fff;color:var(--ink);font-size:.85rem;font-weight:600;text-decoration:none}
.chip:hover{background:#eef2f7;text-decoration:none}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* Live App 0.55: levels chip (rail identity), profile progress
   bar and the member badge — reuse the chip/bar visual language. */
.lvl-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:#fdf3d7;color:var(--ink);font-size:.7rem;font-weight:700;border:1px solid var(--line);white-space:nowrap}
.lvl-bar{height:12px;border-radius:8px;background:var(--wash);border:1px solid var(--line);overflow:hidden}
.lvl-bar>span{display:block;height:100%;background:var(--amber);border-radius:8px}
.lvl-member{display:inline-block;padding:1px 8px;border-radius:99px;background:#fdf3d7;color:var(--ink);font-size:.72rem;font-weight:700;border:1px solid var(--line)}
.lvl-toast{border-color:var(--amber)}

/* ---- alpha 0.03: quick replies, fox cards ---- */
/* alpha 0.04: quick replies left the composer row for a vertical
   rail at the far right edge of the chat pane (Mark's layout call).
   The composer row is emoji + input + mic + Send again. On phones
   the rail becomes a horizontal scroll strip under the composer —
   the simplest adaptation that keeps every label reachable. */
.chatbody{display:flex;gap:0;flex:1;min-height:0}
.loadearlierbar{text-align:center;padding:6px 0 0}
.chatmain{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.chatmain .msglist{flex:1;min-height:0}
.quickrail{width:138px;flex:0 0 138px;border-left:1px solid var(--line);
  padding:10px 8px;display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;background:#fbfcfd}
.quickrail-items{display:flex;flex-direction:column;gap:6px}
.quickrail .quickbtn{white-space:normal;text-align:left;width:100%;line-height:1.3}
.quickrail .quickedit{align-self:flex-start}

.foxaction{margin:8px 0 4px;padding:11px 13px;border:1px solid var(--amber);
  border-radius:10px;background:#fffbeb;max-width:92%}
.foxaction.resolved{border-color:var(--line);background:#f8fafc}
.foxaction-sum{font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.foxaction-btns{display:flex;gap:8px;margin-top:9px}

/* ---- alpha 0.04: pins, quote-reply, reactions, voice, share ---- */
.pinbar{display:flex;align-items:center;gap:8px;padding:6px 14px;
  background:#fffbeb;border-bottom:1px solid var(--line);font-size:.84rem}
.pinbar-main{flex:1;min-width:0;display:flex;gap:6px;align-items:center;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);
  font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinbar-x{background:none;border:0;cursor:pointer;color:var(--mut);font-size:.9rem}
.replybar{display:flex;align-items:center;gap:8px;margin:0 14px;
  padding:7px 10px;background:#f1f5f9;border:1px solid var(--line);
  border-bottom:0;border-radius:9px 9px 0 0;font-size:.83rem}
.replybar-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.replybar-x{background:none;border:0;cursor:pointer;color:var(--mut)}
/* Live App 0.01: display:flex above overrides the hidden
   attribute — the empty reply bar rendered as a blank strip
   over the composer. Same guard pattern as .bulkbar[hidden]. */
.replybar[hidden]{display:none!important}
.quoteblock{display:block;width:100%;text-align:left;background:#f8fafc;
  border:0;border-left:3px solid var(--blue);border-radius:6px;
  padding:5px 9px;margin:0 0 5px;cursor:pointer;font:inherit;
  font-size:.8rem;color:var(--mut)}
.quoteblock b{color:var(--ink);margin-right:6px}
.quoteblock span{overflow-wrap:anywhere}
.chatmsg.flash .bubble{box-shadow:0 0 0 3px rgba(245,158,11,.55)}
.reactbar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.reactbar:empty{display:none}
.reactchip{background:#f1f5f9;border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font-size:.78rem;cursor:pointer;line-height:1.5}
.reactchip.mine{background:#dbeafe;border-color:var(--blue);font-weight:700}
/* alpha 0.09: announcements — amber accent in the amber already
   used for jump-flashes; the ack bar sits under the bubble like
   the reaction bar. */
.chatmsg.announcement .bubble{border-left:4px solid #f59e0b;background:#fffbeb}
.chatmsg.mine.announcement .bubble{background:#fef3c7;border-color:#f59e0b}
.ackbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;
  font-size:.8rem}
.announce-badge{background:#f59e0b;color:#fff;border-radius:999px;
  padding:1px 8px;font-weight:700;font-size:.72rem;line-height:1.6}
.ackdone{color:var(--mut)}
.ackstats{color:var(--mut)}
.announcetoggle{display:flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:.8rem;color:var(--mut);cursor:pointer}
.announcetoggle input{accent-color:#f59e0b}
.msgtools{display:flex;align-items:center;gap:10px;margin-top:3px}
.msgtool{background:none;border:0;color:var(--mut);font-size:.75rem;
  cursor:pointer;padding:0}
.msgtool:hover{color:var(--ink)}
.msgtools .recallform{margin-top:0}
.reactaddwrap{position:relative;display:inline-flex}
.reactpop{position:absolute;bottom:130%;left:0;z-index:30;display:flex;gap:2px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:4px;box-shadow:var(--shadow-lg)}
.reactpop[hidden]{display:none}
.reactpick{background:none;border:0;font-size:1.05rem;cursor:pointer;
  padding:3px 5px;border-radius:7px}
.reactpick:hover{background:#f1f5f9}
.voicebubble{display:flex;align-items:center;gap:8px}
.voicebubble audio{height:36px;max-width:230px}
.voicedur{font-size:.78rem;color:var(--mut)}
.transcript{margin-top:5px;font-size:.86rem;background:#f8fafc;
  border:1px solid var(--line);border-radius:9px;padding:7px 10px;max-width:100%}
.transbtn{background:none;border:0;color:var(--blue);font-size:.78rem;
  cursor:pointer;padding:2px 0 0;font-weight:600}
.translation{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line)}
.micbtn{font-size:1.05rem}
.recbar{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.recbar[hidden]{display:none}
.callpanel.peer-sharing{width:min(720px,calc(100vw - 40px))}
.callpanel.peer-sharing #callRemoteVideo{max-height:56vh}
#callShare.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pingmodal.atcursor{align-items:flex-start;justify-content:flex-start;
  background:rgba(15,23,42,.18)}
.pingmodal.atcursor .pingwheel-card{position:absolute;margin:0}
.langswitch-settings select{max-width:320px}

/* =====================================================================
   alpha 0.04.1 — CONSOLIDATED RESPONSIVE SECTION
   Every width-based @media rule in the app lives HERE, in descending
   breakpoint order. Four generations of scattered mobile patches
   (v25 / v27 / v29 / v40 + alpha 0.02–0.04) were merged into this one
   section (mobile audit 2026-10-23) — add new responsive rules here,
   nowhere else. (prefers-reduced-motion blocks stay with their
   components; they are not width rules.)
   Breakpoints: 1250 mail squeeze · 860 mobile shell (top strip +
   bottom tab bar) · 800 stacked forms · 760 compact density ·
   640 card grids + stacked boards.
   ===================================================================== */

/* list/detail back controls — desktop never shows them */
.chatback{display:none;align-items:center;gap:2px;flex-shrink:0;
  font-weight:700;color:var(--ink);font-size:1rem;text-decoration:none;
  padding:6px 10px 6px 0}
.chatback:hover{text-decoration:none;color:var(--blue-d)}
.mailback{display:none;align-items:center;font-weight:700;color:var(--ink);
  font-size:.95rem;text-decoration:none;margin-bottom:10px}
.mailback:hover{text-decoration:none;color:var(--blue-d)}

@media (max-width:1250px){
  /* mail three-pane squeeze: reading pane drops below rail + list */
  .mailwrap3{grid-template-columns:184px 1fr}
  .mailpane{grid-column:1/-1;max-height:none}
}

@media (max-width:860px){
  /* --- shell: rail becomes a top strip, bottom tab bar appears --- */
  .layout{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;
    padding:10px 14px;gap:8px;background:var(--navy)}
  .side .sub,.sidenav,.side-search{display:none}
  .side .brand{padding:0;font-size:1rem;min-width:0;flex:0 1 auto}
  .side .brand svg{flex:0 0 auto}
  .side .brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* alpha 0.04.3: the profile stays IN the strip as a compact chip
     (avatar + name in a row) instead of vanishing / rendering as the
     rail's tall column; the logout button may never be crushed into
     a vertical character-by-character pill — the brand text
     ellipsises first, the buttons simply do not shrink. */
  .side .rail-me{display:flex;flex-direction:row;align-items:center;gap:7px;
    padding:4px 6px;margin:0;flex:0 1 auto;min-width:0}
  .side .rail-me .avatar-face{width:30px;height:30px;font-size:1rem}
  /* Live App 0.101 (polish round 2, #3): the name text truncated
     to "T.." in the strip — avatar + level chip carry identity on
     phones, the name goes. */
  .side .rail-me-name{display:none}
  .side .user{margin:0 0 0 auto;border-top:0;padding:0;display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
  .side .user>form{flex:0 0 auto}
  .side .user .btn{white-space:nowrap}
  /* M-02 (shipped 0.04): the language switcher stayed in the strip,
     squeezed to a ~34px clipped glyph.
     Live App 0.101 (polish round 2, #3): out of the strip —
     language lives in Settings (the Language card) on phones. */
  .side .user .langswitch{display:none}
  .side .user .langswitch select{width:100%}
  .side .user form{margin-top:0 !important}
  .main{padding:18px 14px 96px}
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mobilebar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--mut);
    font-size:.68rem;font-weight:600;padding:5px 0 3px;border-radius:9px;position:relative;
    min-height:48px;justify-content:center}
  .mobilebar a:hover{text-decoration:none}
  .mobilebar a.on{color:var(--ink);background:#eef2f7}
  .mobilebar .tic{font-size:1.18rem;line-height:1.1}
  /* Live App 0.101 (polish round 2, #7): the bottom-nav count
     badge was the full-size .badge pill straddling the nav edge —
     it now takes the same compact count treatment as the bell
     badge (1px 6px padding, .62rem, hairline shadow). */
  .mobilebar .badge{position:absolute;top:-3px;right:calc(50% - 20px);
    padding:1px 6px;font-size:.62rem;line-height:1.3;min-width:17px;
    text-align:center;box-shadow:0 1px 4px rgba(16,24,40,.35)}
  .pet-root{bottom:calc(84px + env(safe-area-inset-bottom)) !important}

  /* safety net for the whole M-01 defect class: no page-level
     sideways scroll, ever — wide things scroll inside their own
     wrapper or clip. `clip` (not hidden) creates no scroll
     container, so sticky children keep working. */
  body{overflow-x:hidden;overflow-x:clip}

  /* M-11: 16px form text stops Android browsers zooming on focus
     (grid cell inputs keep their inherit sizing via font:inherit). */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}

  /* M-10: touch targets — small controls grow inside this block only */
  .btn.sm{padding:8px 13px;min-height:36px}
  .rowdel{padding:9px 10px;font-size:1.05rem}
  .caladd{width:30px;height:30px;font-size:1rem}

  /* M-07: grid pages lose the 72vh inner scroll box — the page is
     the one vertical scroll; the wrapper keeps horizontal scroll,
     with the first column pinned so row identity survives a swipe. */
  .gridwrap{max-height:none}
  .gridwrap table.grid th:first-child,
  .gridwrap table.grid td:first-child{position:sticky;left:0;z-index:2;background:#fff}
  .gridwrap table.grid th:first-child{z-index:3;background:#fafbfc}

  /* 0.17 (daily-test M4): the Settings control-panel matrices are
     checkbox grids, not data sheets — at phone width they squeeze
     to fit instead of clipping: tight cells, small headers, and
     the Area column wraps instead of forcing the width. */
  .cp-matrix table.grid{font-size:.8rem}
  .cp-matrix table.grid th{padding:5px 2px;font-size:.68rem;text-align:center;
    white-space:normal;word-break:break-word;line-height:1.15}
  .cp-matrix table.grid td{padding:2px;text-align:center}
  .cp-matrix table.grid th:first-child,
  .cp-matrix table.grid td:first-child{white-space:normal;text-align:left;
    min-width:70px;max-width:100px;padding:6px 7px;word-break:normal}

  /* --- mail: folder rail becomes a chip row (v34 behaviour) --- */
  .mailwrap{flex-direction:column}
  .mailrail{flex-direction:row;flex-wrap:wrap;width:100%}
  .mailrail .mfolder{flex:1;justify-content:center}
  .mailrail form{flex:1}

  /* --- M-05: mail list/detail switch — with a thread open, ONLY
     the reading pane shows, with a back link; otherwise list only. */
  .mailwrap3{grid-template-columns:1fr}
  .mailwrap3 .mailpane{max-height:none;overflow:visible;padding-right:0}
  .mailwrap3.has-sel .mailrail,
  .mailwrap3.has-sel .maillist{display:none}
  .mailwrap3:not(.has-sel) .mailpane{display:none}
  .mailback{display:inline-flex}
  .undobar{bottom:92px}

  /* --- M-03: chat list/detail switch — one side at a time, the
     visible side owns the viewport height (no 58vh cap, no nested
     scroll); .chat-open is driven by the #chat hash in messages.html. */
  /* Live App 0.18 (P0 UX #5): the -176px constant predates the fox
     command bar + page heading that now sit above the chat — the
     pane ran ~100px past the fold and the composer + quick rail
     slid under the fixed bottom nav. -294px = measured chrome
     above the layout (215) + the mobile bar (~70) + slack. */
  .chatlayout{grid-template-columns:1fr;align-items:stretch;height:calc(100dvh - 294px)}
  .chatlayout .convcol{height:100%;min-height:0;overflow-y:auto}
  .chatlayout .chatpane{height:100%;min-height:0}
  /* Live App 0.18 (P0 UX #5): the composer row could not fit a
     phone — emoji + mic + attach + the announcement toggle + Send
     are ~300px of fixed items, so the flex textarea was crushed
     to 0px wide and no message could be typed. The toggle now
     wraps to its own line, the icon buttons slim down, and the
     textarea keeps a guaranteed usable width. */
  .chatpane .chatform{flex-wrap:wrap}
  .chatpane .chatform .mentionwrap{flex:1 1 110px;min-width:110px}
  .chatpane .chatform .btn{flex:0 0 auto}
  .chatpane .chatform .btn.ghost{padding:8px 10px}
  .chatlayout.chat-open .convcol{display:none}
  .chatlayout:not(.chat-open) .chatpane{display:none}
  /* alpha 0.04.2: estimator iframe under the mobile shell — same
     viewport maths as .chatlayout (tab bar + margins accounted). */
  .estwrap{height:calc(100dvh - 176px);min-height:0}
  /* alpha 0.04.3: full-bleed frame on phones — the desktop card
     radius clipped the hosted page's corners/edges at phone width. */
  .estframe{border-radius:0}
  .chatpane .msglist{max-height:none}
  .chatback{display:inline-flex}
  .memberstrip{display:none}

  /* --- login: hero collapses to a banner --- */
  .login-shell{grid-template-columns:1fr}
  .login-side{order:-1}
  .login-hero{min-height:210px;padding:26px 22px}
  .login-hero .hero-brand{top:20px;left:22px}
  .login-hero h2{font-size:1.4rem}
  .login-side{padding:22px 14px 30px}

  /* --- calls: card + panel clear the strip and the tab bar --- */
  .callcard{top:64px;right:10px;left:10px}
  .callpanel{left:10px;bottom:76px}

  /* alpha 0.13: on phones the command bar was a fox button — the
     input and Ask button hid, leaving an empty pill.
     Live App 0.101 (polish round 2, #2): the bar is a compact,
     tappable ask FIELD instead — input and Ask stay visible and
     the pill stretches across the bar next to the bell. */
  .topbar{padding:6px 0 8px}
  .foxcmd{flex:1 1 auto;min-width:0;padding:4px 4px 4px 11px}
  .foxcmd .foxcmd-ic{font-size:1.1rem}
  .foxcmd .foxcmd-go{padding:6px 13px}
  .brand-logo{max-height:30px;max-width:110px}
}

@media (max-width:800px){
  .grid2{grid-template-columns:1fr}
}

@media (max-width:760px){
  .main{padding-bottom:120px}
  h1{font-size:1.22rem}
  .cards{grid-template-columns:1fr 1fr}
  .stepper{overflow-x:auto;flex-wrap:nowrap}
  /* M-08: plain tables scroll inside their own block, and TEXT
     CELLS WRAP (the old rule nowrap'd everything, so scroll width
     was set by the longest sentence). Headers and money/dates keep
     nowrap; real content drives the remaining width. */
  table:not(.grid):not(.calgrid){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table:not(.grid):not(.calgrid) th{white-space:nowrap}
  table:not(.grid):not(.calgrid) td{white-space:normal}
  table:not(.grid):not(.calgrid) td.money{white-space:nowrap}
  /* M-09: calendar events can no longer spill out of their cell */
  .calgrid td{height:74px}
  .calev{font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* p129: toasts sit at the top on phones too (under the topbar,
     clear of the bottom tab bar by construction) */
  .toasts{top:10px;left:12px;right:12px;width:auto}
  /* ping wheel shrinks to phone size */
  .pingwheel{width:290px;height:290px}
  .pingslice{width:68px;height:68px;margin:-34px 0 0 -34px}
  .pingslice:nth-child(1){transform:rotate(0deg) translate(104px) rotate(0deg)}
  .pingslice:nth-child(2){transform:rotate(45deg) translate(104px) rotate(-45deg)}
  .pingslice:nth-child(3){transform:rotate(90deg) translate(104px) rotate(-90deg)}
  .pingslice:nth-child(4){transform:rotate(135deg) translate(104px) rotate(-135deg)}
  .pingslice:nth-child(5){transform:rotate(180deg) translate(104px) rotate(-180deg)}
  .pingslice:nth-child(6){transform:rotate(225deg) translate(104px) rotate(-225deg)}
  .pingslice:nth-child(7){transform:rotate(270deg) translate(104px) rotate(-270deg)}
  .pingslice:nth-child(8){transform:rotate(315deg) translate(104px) rotate(-315deg)}
  /* quick replies (alpha 0.04): on phones the chat pane's right
     rail becomes a horizontal scroll strip under the composer */
  .chatbody{flex-direction:column}
  .quickrail{width:auto;flex:0 0 auto;border-left:0;border-top:1px solid var(--line);
    flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;padding:8px 10px}
  .quickrail-items{flex-direction:row}
  .quickrail .quickbtn{white-space:nowrap;width:auto}
}

@media (max-width:640px){
  /* production card view (v27 pattern, kept) */
  table.pcards, table.pcards tbody, table.pcards tr, table.pcards td{display:block;width:100%}
  table.pcards tr{background:var(--card,#fff);border:1px solid var(--line);
    border-radius:12px;margin:0 0 12px;padding:10px 12px}
  table.pcards tr:first-child{display:none}
  table.pcards td{border:none!important;padding:5px 0;display:flex;gap:10px;align-items:center}
  table.pcards td::before{content:attr(data-label);font-size:.72rem;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;color:#64748b;min-width:74px}
  table.pcards td input.cell{flex:1;font-size:1rem;padding:9px}
  /* M-01 (shipped 0.04, kept): the card view drops the scroll
     container ONLY on Production — every other grid page keeps its
     overflow:auto wrapper at phone widths. */
  .gridwrap.production-gridwrap{overflow:visible}
  /* M-06: the leads board stacks its five stages vertically —
     no more 950px of sideways swipe with no affordance. */
  .board{grid-template-columns:1fr;overflow-x:visible;padding-bottom:0}
  .board .col{min-width:0}
  /* M-12: fox panel height now accounts for the mobile top strip
     as well as the tab bar it already cleared. */
  .pet-panel{width:calc(100vw - 32px);height:min(640px,calc(100dvh - 168px))}
}

/* ---- alpha 0.05: Members directory cards ---- */
.dirgroup-h{font-size:1rem;margin:1.1rem 0 .5rem}
.dircards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.dircard{border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem;background:var(--card,#fff)}
.dircard-top{display:flex;align-items:center;gap:.55rem}
.dircard-top .avatar-face{width:40px;height:40px;font-size:1.25rem}
.dircard-top .dot{margin-left:-.9rem;margin-top:1.6rem;flex:none}
.dircard-id{display:flex;flex-direction:column;min-width:0}
.dircard-id b{font-size:.95rem}
.dircard-id .muted{font-size:.78rem}
.dircard-status{margin-top:.45rem;font-size:.88rem}
.dircard-presence{font-size:.78rem;margin-top:.15rem}
.dircard-actions{margin-top:.55rem;display:flex;gap:.4rem;align-items:center}

/* ---- alpha 0.05: rail status picker ---- */
/* Live App 0.04: the status picker spans the rail's full inner
   width, on the same edges as the search box below it (it used
   to cap at 180px and float centred — visibly off-grid). */
.rail-status{padding:2px 0 8px;text-align:center}
.rail-status-line{font-size:.78rem;color:#cbd5e1;margin-bottom:4px}
.rail-status select{width:100%;padding:7px 8px;font-size:.85rem;
  border-radius:8px;background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.18)}
.rail-status select option{color:#0f172a}
@media (max-width:860px){.rail-status{display:none}}
.pstatus{font-size:.8rem;color:var(--mut,#64748b)}
.dm-status{color:var(--ink)}

/* ---- alpha 0.05: login news slideshow ---- */
.newsbox{position:relative;z-index:2;height:47%;min-height:230px;border-radius:18px;
  overflow:hidden;background:rgba(2,6,23,.45);box-shadow:0 18px 44px rgba(2,6,23,.35)}
.news-slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .7s ease;color:#fff;text-decoration:none}
.news-slide.on{opacity:1;pointer-events:auto}
.news-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-cap{position:absolute;inset:auto 0 0 0;padding:44px 22px 20px;display:flex;
  flex-direction:column;gap:6px;background:linear-gradient(180deg,transparent,rgba(2,6,23,.88))}
.news-kicker{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fbbf24}
.news-title{font-size:clamp(1.25rem,2.1vw,1.8rem);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.news-dots{position:absolute;top:12px;right:14px;display:flex;gap:6px;z-index:3}
.news-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45)}
.news-dot.on{background:#fbbf24}
@media (max-width:860px){.newsbox{min-height:190px}}
@media (prefers-reduced-motion: reduce){.news-slide{transition:none}}

/* alpha 0.11: receipt inbox */
.dropzone{display:flex;gap:14px;align-items:center;border:2px dashed var(--line);
  border-radius:var(--r);padding:18px;cursor:pointer;background:#fafbfc}
.dropzone.over{border-color:var(--blue);background:var(--brand-soft)}
.inbox-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);flex:none}
.inbox-thumb.lg{width:96px;height:96px}
.inbox-tile{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;flex:none;border-radius:10px;background:#e8edf3;
  color:#475569;font-weight:800;font-size:.8rem;letter-spacing:.05em}
.inbox-tile.lg{width:96px;height:96px}
.amt{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.08rem}
.unc-field input,.unc-field select{border-color:var(--amber);background:#fffbeb}
.unc-dot{color:var(--amber)}
.pillrow .pill{text-decoration:none}
.pillrow .pill.on{background:var(--ink);color:#fff}

/* ---- alpha 0.13: whitelabel brand, fox command bar, Today home ----
   The shell lift: org logo in the rail, a sticky command bar whose
   pill follows --brand, and the Today page's block layout. Numeric
   runs use .num (tables already set tabular-nums globally in v25). */
.num{font-variant-numeric:tabular-nums}
.brand-logo{max-height:38px;max-width:148px;object-fit:contain;border-radius:6px}
.brand-logo-preview{max-height:64px;max-width:240px;object-fit:contain;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;background:#fff}
.topbar{position:sticky;top:0;z-index:100;padding:10px 0 12px;margin:-10px 0 4px;
  display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.foxcmd{display:flex;align-items:center;gap:var(--sp-2);max-width:660px;
  background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:5px 5px 5px 14px;box-shadow:var(--shadow)}
.foxcmd:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent)}
.foxcmd-ic{background:none;border:0;cursor:pointer;font-size:1.05rem;
  line-height:1;padding:0;flex-shrink:0}
.foxcmd input{flex:1;min-width:0;width:auto;border:0;background:transparent;
  padding:5px 0;box-shadow:none}
.foxcmd input:focus{border:0;box-shadow:none}
.foxcmd-go{border-radius:99px;flex-shrink:0}

/* ---- alpha 0.35: Today header. The fox command bar becomes one
   calm brand-tinted banner aligned to the page grid, and the
   greeting row tightens. Scoped to .main-today, which only the
   dashboard sets (base.html mainclass block) — the bar's markup,
   submit behaviour and every other page are untouched. ---- */
/* Live App 0.101 (polish round 2, #15): the Today topbar/foxcmd
   overrides are GONE — the Fox ask bar now uses the one standard
   composition on every page (compact pill + bell at the right of
   the sticky topbar). The .main-today scope keeps only the page's
   own hero/card treatment below. */
.main-today .dash-hero{align-items:center;margin:2px 2px 12px}
.main-today .dash-hero h1{font-size:1.32rem;margin:0 0 2px}
.main-today .dash-hero .sub{color:var(--mut)}
.card.attn{border-left:4px solid var(--amber)}
.stagestrip-card{margin-top:14px;padding:12px 18px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.stagestrip{display:flex;gap:6px;flex-wrap:wrap}
.stagechip{background:var(--brand-soft);border:1px solid var(--line);
  border-radius:99px;padding:3px 11px;font-size:.82rem;font-weight:600}
.stagechip b{font-weight:800}
.today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;align-items:start;margin-top:14px}
.today-grid .card{margin-bottom:0}

/* ---- alpha 0.39: whatsnew plugin (Today card, log page, dot) ----
   Ordinary release notes are a calm card, never a blocker; the
   amber left edge + 📰 header keep it findable without shouting.
   The sidebar dot is the quiet "something new is waiting" marker. */
.whatsnew-card{border-left:4px solid var(--amber);margin-bottom:14px}
.wn-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:6px}
.wn-note{padding:8px 0;border-top:1px solid var(--line)}
.wn-note:first-of-type{border-top:none}
.wn-meta{margin:0 0 2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wn-title{margin:0;font-weight:700}
.wn-bullets{margin:4px 0 2px;padding-left:20px}
.wn-bullets li{margin:2px 0}
.wn-imp-tag{color:#b45309;font-weight:700;font-size:.8rem}
.wn-important{border-left:4px solid var(--amber)}
.wn-gotit-form{margin-top:10px;display:flex;align-items:center;gap:12px}
.wn-loglink{font-size:.85rem}
.wn-optout-form{margin:0}
.wn-optout{background:none;border:none;padding:0;cursor:pointer;
  color:var(--mut);font-size:.8rem;text-decoration:underline}
.wn-optout:hover{color:var(--ink)}
.wn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--amber);margin-left:6px;vertical-align:middle}
.wn-log-note{margin-bottom:12px}
.beta-banner{}

/* alpha 0.54: drag & drop (CRM_DRAG pointer engine + dropzones) */
.drag-handle{cursor:grab;touch-action:none;color:var(--mut);user-select:none;
  -webkit-user-select:none;padding:2px 5px;font-size:.85rem;line-height:1}
.drag-handle:active{cursor:grabbing}
.drag-src{opacity:.35}
.drag-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.92;
  box-shadow:0 10px 28px rgba(15,23,42,.28);margin:0!important}
.drag-chip{background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;font-size:.86rem;width:auto!important;
  max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drag-ph{background:color-mix(in srgb, var(--brand) 10%, #ffffff);
  border:1.5px dashed var(--brand);border-radius:10px;list-style:none}
tr.drag-ph{background:none;border:0}
tr.drag-ph td{border-top:1.5px dashed var(--brand);
  border-bottom:1.5px dashed var(--brand);background:
  color-mix(in srgb, var(--brand) 10%, #ffffff);padding:0}
.drag-over{outline:2px solid var(--brand);outline-offset:-2px}
td.drag-over{background:var(--brand-soft)!important}
.ditem[data-drag],button.calev[data-drag]{cursor:grab}
.ditem[data-drag]:active,button.calev[data-drag]:active{cursor:grabbing}
/* generic drop zones (dropzone.js) around existing file inputs */
.dzone{border:1.5px dashed transparent;border-radius:10px;padding:4px 6px;
  transition:border-color .12s, background .12s}
.dzone.over{border-color:var(--blue);background:var(--brand-soft)}
.dz-names{display:block;color:var(--mut);font-size:.8rem;margin-top:3px}
/* projects stage kanban: nine columns, closed stages slim + muted */
.board.pboard{grid-template-columns:repeat(9,minmax(175px,1fr))}
.board .col.closed{background:#e8ebef;min-width:130px;opacity:.85}
.lead .po{font-variant-numeric:tabular-nums}
/* chat image messages + composer staging */
.chatimg{display:block;max-width:280px;max-height:280px;width:auto;
  border-radius:8px}
.imgstage{display:flex;gap:10px;align-items:center;padding:8px 10px;
  border:1px dashed var(--brand);border-radius:10px;margin:0 0 8px;
  background:var(--brand-soft)}
.imgstage img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.imgstage .nm{flex:1;min-width:0;font-size:.85rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.imgstage[hidden]{display:none!important}

/* ---- alpha 0.66: three-layer nav (filter + collapsible groups) ---- */
.navfilter{padding:0 0 8px}
.navfilter input{width:100%;padding:7px 10px;font-size:.85rem;border-radius:8px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.sidenav details.navgroup{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sidenav details.navgroup summary{grid-column:1/-1;cursor:pointer;list-style:none}
.sidenav details.navgroup summary::-webkit-details-marker{display:none}
.sidenav details.navgroup summary::after{content:" ▾";color:#94a3b8}
.sidenav details.navgroup:not([open]) summary::after{content:" ▸"}
.hub-tabs{margin-bottom:14px}
@media print{.hub-tabs,.navfilter{display:none!important}}

/* ---- Live App 0.04 (ui-fluid-004): wide-monitor gutter ----
   Marker: ui-polish-004. On very wide screens the fluid shell
   gets a deeper gutter so content does not hug the edges. */
@media (min-width:1800px){.main{padding:34px 48px 26px}}

/* ---- Live App 0.07: Today rhythm + sheet tables ----
   Today: one uniform 14px vertical rhythm between sections and
   the attention card directly under the hero; grid2 column
   headings share a top edge. Additive only — no block, id or
   context changes. */
.main-today .dash-hero{margin:2px 2px 14px}
.main-today .card.attn{margin:0 0 14px}
.main-today .alertpanel{margin:14px 0 0}
.main-today .grid2{margin-top:14px}
.main-today .grid2>div>h2:first-child{margin-top:0}
/* Sheet tables (Projects / Production): dense master-sheet feel,
   sticky header, zebra rows. Scoped to .sheet so the global .grid
   styles other pages depend on are untouched. */
.gridwrap.sheetwrap{max-height:calc(100vh - 240px);overflow:auto}
table.grid.sheet{font-size:.86rem}
table.grid.sheet th{padding:4px 8px}
table.grid.sheet td{padding:4px 8px}
table.grid.sheet input.cell,table.grid.sheet select.cell{padding:2px 4px}
table.grid.sheet thead th{position:sticky;top:0;background:#fafbfc;z-index:2}
table.grid.sheet tbody tr:nth-child(even) td{background:#f7f9fc}
table.grid.sheet td.num{text-align:right}
table.grid.sheet tfoot td{font-weight:700;border-top:2px solid var(--line);
  background:#fafbfc}
/* 0.07 beta-verification fix: the Projects/Production filter bar
   wrapped to two rows and flex-stretch made every control row-tall;
   centre the bar and let the search box keep a usable width. */
.searchbar{align-items:center}
.searchbar input[name="q"]{min-width:170px}

/* ---- Live App 0.12: nav rail redesign + master-sheet row colours ----
   Nav: every tile now lives in a .navgrid (two equal columns,
   minmax(0,1fr) so a long label can never stretch a column) and
   shares ONE height / padding / icon box whether it sits in
   layer 1, a collapsible group, or the All & settings block. The
   old layout leaned on <details> being the grid container, which
   some browsers lay out as a single column — tiles came out
   different widths from group to group. */
@media (min-width:861px){.sidenav{display:block}}
.navgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sidenav a{height:76px;min-width:0}
.sidenav details.navgroup{display:block}
.sidenav details.navgroup .navgrid{margin-top:2px}
.sidenav .navsec{margin:14px 4px 6px}
/* Master-sheet row colours (NEWOOD_PO_Tracker_26 conditional
   formats, read live 2026-10-25): balance $0 -> grey text
   (finished); paid > 0 with a balance left -> cream #FFF1CC
   (part-paid); balance due, nothing paid -> pale pink #FFE5E5.
   The classes are rendered for money roles only. */
table.grid.sheet tbody tr.row-done td,
table.grid.sheet tbody tr.row-done td a{color:#999}
table.grid.sheet tbody tr.row-done td input.cell,
table.grid.sheet tbody tr.row-done td select.cell{color:#999}
table.grid.sheet tbody tr.row-partial td{background:#FFF1CC}
table.grid.sheet tbody tr.row-due td{background:#FFE5E5}

/* ---- Live App 0.13: filter bars wrap instead of crushing ----
   .searchbar never wrapped, so on the crowded Projects bar the
   flex row squeezed the ghost buttons (Active only / Board view)
   down to one-character-wide vertical strips. Buttons now keep
   their natural width, selects may shrink, and the column-picker
   group takes a wrapped row of its own when space runs out. */
.searchbar{flex-wrap:wrap;row-gap:8px}
.searchbar .btn{flex:0 0 auto;white-space:nowrap}
.searchbar select{flex:0 1 auto;min-width:0}
.searchbar .colpick{flex:1 1 280px}

/* ---- Live App 0.15: in-call device selects + mic meter ---- */
.callsel{max-width:118px;font-size:12px;padding:3px 6px}
.callmeter{display:inline-block;width:44px;height:8px;
  background:var(--line);border-radius:4px;overflow:hidden;
  vertical-align:middle}
.callmeter>span{display:block;height:100%;width:0;background:var(--green);
  transition:width .12s}
.callpanel-av.speaking{box-shadow:0 0 0 3px var(--green);border-radius:50%}


/* ---- Live App 0.16 (matrix gate): the mobile top strip fits ----
   The cross-role/device matrix (Mark's standing gate) measured a
   421px layout on a 390px phone: the strip's chip, user block and
   language switcher were all flex:0 0 auto / min-width:96, so
   their minimums summed past the viewport and every page scrolled
   sideways. They may shrink now (the name already ellipsises). */

/* Live App 0.20: per-page help ("?" in the page header area). */
.helpbar{display:flex;justify-content:flex-end;margin:0 0 2px}
.helpbtn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:var(--card,#fff);color:var(--mut);font-weight:700;cursor:pointer;line-height:1}
.helpbtn:hover{color:var(--ink);border-color:var(--mut)}
.help-panel{position:fixed;top:58px;right:18px;z-index:1200;width:min(360px,calc(100vw - 24px));background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(10,20,40,.22);padding:14px 16px}
.help-panel .help-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.help-panel p{margin:6px 0;font-size:.92rem;line-height:1.45}
.help-x{border:0;background:none;cursor:pointer;color:var(--mut);font-size:1rem;padding:2px 4px}
@media (max-width:640px){.help-panel{top:52px;right:12px}}

/* Live App 0.20: TO DO LIST board (Today). */
.todo-list{display:flex;flex-direction:column}
.todo{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-top:1px solid var(--line)}
.todo:first-child{border-top:0}
.todo .todo-main{flex:1;min-width:0}
.todo .todo-body{line-height:1.45;overflow-wrap:anywhere}
.todo .todo-meta{font-size:.78rem;margin-top:2px}
.todo.done .todo-body{color:var(--faint);text-decoration:line-through}
.todo.mentioned{box-shadow:inset 3px 0 0 var(--brand)}
.todo:target{background:color-mix(in srgb, var(--brand) 10%, transparent);border-radius:8px}
.todo-check{margin:0}
.todo-box{border:0;background:none;font-size:1.15rem;cursor:pointer;padding:1px 3px;line-height:1.2}
.todo-box.off{cursor:default;opacity:.55}
.todo-del{border:0;background:none;color:var(--red);cursor:pointer;opacity:.7;padding:3px 5px}
.pochip{display:inline-block;background:color-mix(in srgb, var(--brand) 12%, #fff);border:1px solid var(--line);border-radius:999px;padding:0 9px;font-size:.85em;font-weight:600;text-decoration:none;white-space:nowrap}

/* ---- Live App 0.21: announcement panel, fox typing, Today polish ----
   Marker: ui-ann-021. */
/* The pinned announcement: a plain card with a brand-blue left
   edge (the amber edge stays reserved for "needs attention"). */
.ann-panel{border-left:4px solid var(--brand)}
.ann-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ann-title{font-weight:700;font-size:1.02rem;margin-bottom:4px}
.ann-body{line-height:1.65}
.ann-meta{margin-top:8px;font-size:.82rem}
.ann-panel form{margin-top:12px}
.ann-panel form p{margin:0 0 8px}
.ann-panel form input[type="text"],.ann-panel form textarea{width:100%;box-sizing:border-box}
/* Fox typing indicator: three bouncing dots (foxchat.js). */
.fox-typing{display:inline-flex;gap:4px;padding:2px 0;vertical-align:middle}
.fox-typing i{width:7px;height:7px;border-radius:50%;background:#9aa7b8;display:block;animation:foxtype 1.1s infinite ease-in-out}
.fox-typing i:nth-child(2){animation-delay:.15s}
.fox-typing i:nth-child(3){animation-delay:.3s}
@keyframes foxtype{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion: reduce){.fox-typing i{animation:none;opacity:.7}}
/* Today polish (Mark: "main page looks a bit off"): the exceptions
   panel trades its cream/amber box for the attention card's
   treatment, so the page reads as one family of white cards; and
   every top-level Today card joins the page's uniform 14px rhythm
   (the .card default is 16px). Cosmetics only, .main-today-scoped. */
.main-today .alertpanel{background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber)}
.main-today .alertpanel h2{color:inherit}
.main-today>.card{margin-bottom:14px}
/* The wide balance tile's number carried the global .money
   table utility (text-align:right), so the amount floated to
   the tile's right edge, disconnected from its left-aligned
   label, while every sibling tile stacks number-over-label on
   the left. Line it up with its siblings. */
.kpis .kpi.wide .n.money{text-align:left}

/* ---- Live App 0.40: comms hub (the corner panel) ----
   The pet panel grows views: a conversation list (Fox pinned on
   top — just another user), the fox thread, and human threads
   rendered from the same _msg_rows fragment as the full page. */
/* the fox-reply dot moves to the launcher's top-LEFT (rule above);
   the top-right corner now carries the chat unread count. */
.comms-badge{position:absolute;top:-4px;right:-6px;z-index:2;
  box-shadow:0 1px 4px rgba(16,24,40,.35)}
.comms-badge[hidden]{display:none}
.comms-view{display:flex;flex-direction:column;flex:1;min-height:0}
.comms-view[hidden]{display:none}
.comms-list{flex:1;overflow-y:auto;padding:8px;min-height:0}
.comms-row{width:100%;text-align:left;background:none;border:0;
  font:inherit;cursor:pointer;color:inherit}
.comms-row.unread .convo-prev{color:var(--ink);font-weight:600}
.comms-foxrow{border-bottom:1px solid var(--line);border-radius:0;
  margin-bottom:6px;padding-bottom:12px}
.comms-foxav{flex-shrink:0}
.comms-foxdot{width:9px;height:9px;border-radius:50%;
  background:#f59e0b;display:inline-block;flex-shrink:0}
.comms-foxdot[hidden]{display:none}
.comms-pinmark{font-size:.72rem}
.comms-loading{padding:14px}
.comms-pinbtn{font-size:.95rem;opacity:.5}
.comms-pinbtn.on{opacity:1;background:var(--brand-soft)}
.comms-back{font-size:1.6rem;line-height:1;padding:2px 9px}
.comms-fullview{text-decoration:none;display:flex;align-items:center;
  font-size:1.05rem}
.comms-earlier{padding:8px 14px 0;text-align:center;background:#f5f6f7}
.comms-msgs{flex:1;overflow-y:auto;padding:10px 12px;
  background:#f5f6f7;min-height:0}
/* Full-view-only tools stay in the full view: reply / react-add /
   pin / recall forms and the remind button are hidden in the
   panel (their hx targets and handlers live on the room page).
   Reaction chips and the announcement Confirm button DO work in
   the panel (pet.js wires both). */
.comms-panel .comms-msgs .msgtools{display:none}
.comms-panel .comms-msgs .remindbtn{display:none}
/* Phones: the pop-up goes full-screen — the composer is never
   covered and the thread gets the whole display. The root lifts
   above the mobile tab bar (both sat at z-index 60; the bar won
   on DOM order and painted over the composer's strip). */
@media (max-width:640px){
  .pet-root{z-index:70}
  .pet-panel{position:fixed;inset:0;width:100%;max-width:100%;
    height:100dvh;max-height:none;border-radius:0;border:0}
}


/* ---- Live App 0.42: the top-right bell (R2) ----
   System events moved out of the menu into a pop-up that mirrors
   the bottom-right comms pop-up: a round button in the topbar,
   a navy-headed card under it, the same notifrow rows as the
   full view. Phones get a full-width sheet under the top edge. */
.bell-root{margin-left:auto;position:relative;flex-shrink:0}
.bell-btn{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:50%;width:40px;height:40px;font-size:1.05rem;cursor:pointer;
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
  padding:0;color:inherit}
.bell-badge{position:absolute;top:-4px;right:-6px;z-index:2;
  padding:1px 6px;font-size:.62rem;line-height:1.3;min-width:17px;
  text-align:center;box-shadow:0 1px 4px rgba(16,24,40,.35)}
.bell-badge[hidden]{display:none}
.bell-pop{position:absolute;right:0;top:calc(100% + 8px);width:380px;
  max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.22);
  z-index:65;overflow:hidden;text-align:left}
.bell-pop[hidden]{display:none}
.bell-list{max-height:min(480px,62vh);overflow-y:auto;padding:6px 0}
.bell-day{padding:10px 16px 2px}
.bell-foot{display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .bell-pop{position:fixed;left:8px;right:8px;top:52px;width:auto;
    max-width:none}
  .bell-list{max-height:68vh}
}


/* ---- Live App 0.43: comms panel v2 — two-pane messenger ----
   The WeChat desktop pattern (Mark, 2026-10-27): formerly dark
   chrome, conversation list | thread side by side, other-party
   bubbles dark with white text on the left, own bubbles green
   on the right, a green accent, red unread badges. All
   artwork is our own SVG / unicode glyphs. The retired Messages
   page's tools (msgtools, remind) are VISIBLE in-panel now — the
   0.40 hide rules above are overridden at the end of this block.
   Live App 0.116: this whole block was re-skinned from the dark
   WeChat chrome to the settled design system (light A tokens,
   brand-orange accents and own-bubbles) — same classes, same
   geometry; the Messages page (back in 0.116) shares the rows. */
.wx-launcher{background:var(--brand);border:0;box-shadow:0 10px 26px rgba(232,93,31,.38)}
.wx-launcher:hover{background:#d14d06}
.wx-launcher:focus-visible{outline:3px solid rgba(232,93,31,.45);outline-offset:2px}
.wx-badge{background:#fa5151;top:-2px;right:-2px}
.pet-panel.wx-panel{position:relative;flex-direction:row;width:min(430px,calc(100vw - 32px));
  height:min(660px,calc(100vh - 196px));background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(16,24,40,.25)}
.wx-listpane{width:268px;flex-shrink:0;background:#f8fafc;display:flex;
  flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.wx-listtools{display:flex;align-items:center;gap:8px;padding:12px 48px 8px 10px}
.wx-search{flex:1;display:flex;align-items:center;gap:6px;background:#eef1f5;
  border-radius:8px;padding:6px 9px;color:var(--mut);min-width:0}
.wx-search input{flex:1;background:none;border:0;color:var(--ink);font:inherit;
  font-size:.85rem;min-width:0;padding:0}
.wx-search input:focus{outline:none}
.wx-search input::placeholder{color:var(--faint)}
.wx-plus{background:none;border:0;color:var(--mut);font-size:1.05rem;cursor:pointer;
  width:28px;height:28px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.wx-plus:hover{background:#e8edf3;color:var(--ink)}
.wx-plus.comms-pinbtn{opacity:.45;font-size:.9rem}
.wx-plus.comms-pinbtn.on{opacity:1;background:var(--brand-soft);color:var(--brand)}
.wx-list{flex:1;overflow-y:auto;padding:0;min-height:0;background:#f8fafc}
.wx-list .wx-row{display:flex;gap:10px;align-items:center;width:100%;
  padding:10px 12px;background:none;border:0;border-radius:0;font:inherit;
  cursor:pointer;color:var(--ink);text-align:left;box-sizing:border-box}
.wx-list .wx-row:hover{background:#edf1f6;text-decoration:none}
.wx-list .wx-row.on{background:var(--brand-soft)}
.wx-list .convo-top b{color:var(--ink);font-weight:600}
.wx-list .convo-prev{color:var(--mut)}
.wx-list .wx-row.unread .convo-prev{color:var(--ink)}
.wx-list .convo-time{color:var(--faint)}
.wx-list .wx-count{color:var(--faint);font-size:.8rem}
.wx-list .convo-ic{background:#e8edf3;border-radius:8px;color:#475569}
.wx-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.wx-unread{background:#fa5151}
.wx-muteic{font-size:.72rem;opacity:.75}
.wx-row-btns{display:none;gap:2px}
.wx-row:hover .wx-row-btns{display:flex}
.wx-iconbtn{background:none;border:0;color:#8494a7;cursor:pointer;font-size:.85rem;
  padding:4px 6px;border-radius:5px;line-height:1}
.wx-iconbtn:hover{background:#e8edf3;color:var(--ink)}
.wx-iconbtn.lg{font-size:1.05rem;padding:6px 8px}
.wx-iconbtn.on{color:var(--brand)}
.wx-iconbtn[disabled]{opacity:.35;cursor:not-allowed}
.wx-list .comms-foxrow{border-bottom:1px solid var(--line);margin-bottom:0;
  padding-bottom:10px}
.wx-threadpane{flex:1;display:flex;flex-direction:column;min-width:0;
  background:#fff;min-height:0}
.wx-empty{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:var(--faint);font-size:.9rem}
.wx-empty[hidden]{display:none}
.wx-threadhead{display:flex;align-items:center;gap:8px;padding:10px 48px 10px 14px;
  background:#fff;border-bottom:1px solid var(--line);min-height:56px;
  box-sizing:border-box}
.wx-head-txt{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wx-head-txt b{color:var(--ink);font-size:1rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.wx-head-txt span{font-size:.74rem;color:var(--mut)}
.wx-head-actions{display:flex;gap:2px;align-items:center}
.wx-back{display:none;background:none;border:0;color:var(--ink);font-size:1.7rem;
  cursor:pointer;line-height:1;padding:2px 8px}
.wx-x{background:none;border:0;color:var(--mut);font-size:.95rem;cursor:pointer;
  padding:6px;border-radius:6px}
.wx-x:hover{color:var(--ink);background:#eef1f5}
.wx-threadhead .wx-x{display:none}
.wx-foxav{background:#fff7ed}
.wx-pinbar{display:flex;align-items:center;gap:8px;background:#fffbeb;
  border-bottom:1px solid #fde9c0;padding:7px 14px;font-size:.82rem;color:var(--ink)}
.wx-pinbar[hidden]{display:none}
.wx-pinbar-main{flex:1;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:0}
.wx-pinbar-x{background:none;border:0;color:var(--mut);cursor:pointer}
.comms-earlier{background:#f6f8fa;padding:8px 14px 0}
.wx-earlierbtn{background:#fff;color:var(--mut);border:1px solid var(--line);
  border-radius:99px;padding:4px 14px;font-size:.8rem;cursor:pointer}
.wx-earlierbtn:hover{color:var(--ink)}
.wx-msgs{flex:1;overflow-y:auto;padding:12px 16px;background:#f6f8fa;min-height:0}
.wx-msgs .timediv{color:var(--faint)}
.wx-msgs .recallnote{color:var(--faint)}
.wx-msgs .chatmsg .meta{color:var(--mut)}
.wx-msgs .chatmsg .bubble{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:10px}
.wx-msgs .chatmsg.mine .bubble{background:#fde8dc;border-color:#f3c39b;color:var(--ink)}
.wx-msgs .chatmsg.announcement .bubble{background:#fffbeb;
  border-left:4px solid #f59e0b}
.wx-msgs .chatmsg.mine.announcement .bubble{background:#fffbeb;
  border-left:4px solid #f59e0b}
.wx-msgs .quoteblock{background:#eef2f7;color:var(--ink2);
  border-left:3px solid var(--brand)}
.wx-msgs .seenline{color:var(--faint)}
.wx-msgs .transcript{color:var(--mut)}
.wx-msgs .transbtn{color:var(--brand)}
.wx-msgs .reactchip{background:#fff;border-color:var(--line);color:var(--ink)}
.wx-msgs .reactchip.mine{border-color:var(--brand);color:var(--brand)}
.wx-msgs .ackbar{background:#fffbeb;border:1px solid #fde9c0;border-radius:7px;
  padding:6px 8px}
.wx-msgs .filelink{color:inherit;text-decoration:none;display:flex;
  align-items:center;gap:8px}
.wx-msgs .filesize{color:var(--mut);font-size:.75rem}
.wx-msgs .chatmsg.mine .filesize{color:#9a3412}
.wx-msgs .voicebubble audio{width:210px;height:34px}
.wx-flash .bubble{box-shadow:0 0 0 3px rgba(245,158,11,.6)}
.wx-quickrail{display:flex;align-items:center;gap:6px;background:#fff;
  border-top:1px solid var(--line);padding:6px 12px}
.wx-quickrail[hidden]{display:none}
.wx-quickitems{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;flex:1;scrollbar-width:none}
.wx-quickbtn{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:99px;white-space:nowrap;
  padding:3px 11px;font-size:.8rem;cursor:pointer}
.wx-quickbtn:hover{border-color:var(--brand);color:var(--brand)}
.wx-replybar,.wx-imgstage,.wx-recbar{display:flex;align-items:center;gap:8px;
  background:#f8fafc;color:var(--ink);padding:7px 14px;font-size:.83rem;
  border-top:1px solid var(--line)}
.wx-replybar[hidden],.wx-imgstage[hidden],.wx-recbar[hidden]{display:none}
.wx-replybar-txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-imgstage img{width:40px;height:40px;object-fit:cover;border-radius:6px}
.wx-imgstage-nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-recdot{width:9px;height:9px;border-radius:50%;background:#fa5151;
  animation:wxblink 1s infinite}
@keyframes wxblink{50%{opacity:.25}}
.wx-composer{background:#fff;border-top:1px solid var(--line);padding:6px 12px 10px;
  display:flex;flex-direction:column}
.wx-toolbar{display:flex;align-items:center;gap:4px;position:relative}
.wx-tool{background:none;border:0;font-size:1.12rem;cursor:pointer;padding:5px 7px;
  border-radius:6px;color:#64748b;line-height:1;display:inline-flex;align-items:center}
.wx-tool:hover{background:#eef1f5;color:var(--ink)}
.wx-tool[hidden]{display:none}
.wx-toolwrap{position:relative;display:inline-flex}
.wx-emojipanel{position:absolute;bottom:calc(100% + 8px);left:0;width:308px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;z-index:5;
  box-shadow:0 10px 28px rgba(16,24,40,.18)}
.wx-emojipanel[hidden]{display:none}
.wx-emojiitem{background:none;border:0;font-size:1.15rem;cursor:pointer;
  padding:5px;border-radius:6px}
.wx-emojiitem:hover{background:#eef1f5}
.wx-announce{margin-left:auto;color:var(--mut);font-size:.8rem;display:flex;
  align-items:center;gap:5px;cursor:pointer}
.wx-announce[hidden]{display:none}
.wx-mentionwrap{position:relative}
.wx-mentionpop{position:absolute;bottom:calc(100% + 30px);left:-140px;width:230px;
  max-height:min(400px,60vh);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px;z-index:6;
  box-shadow:0 10px 28px rgba(16,24,40,.18);display:flex;flex-direction:column}
.wx-mentionpop[hidden]{display:none}
.wx-mentionitem{display:flex;justify-content:space-between;gap:8px;background:none;
  border:0;color:var(--ink);font:inherit;font-size:.85rem;padding:6px 8px;border-radius:6px;
  cursor:pointer;text-align:left}
.wx-mentionitem.on,.wx-mentionitem:hover{background:#eef1f5}
.wx-mentionsub{color:var(--mut);font-size:.75rem}
.wx-composer textarea{background:none;border:0;color:var(--ink);font:inherit;
  font-size:.93rem;resize:none;padding:6px 2px;min-height:44px}
.wx-composer textarea:focus{outline:none}
.wx-composer-foot{display:flex;align-items:center;justify-content:space-between}
.wx-hint{color:var(--faint);font-size:.72rem}
.wx-send{background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:6px 22px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  margin-left:auto}
.wx-send:hover{background:#d14d06}
.wx-log{background:#f6f8fa}
.wx-log .pet-msg.bot .pet-bubble{background:#fff;border:1px solid var(--line);color:var(--ink)}
.wx-log .pet-msg.me .pet-bubble{background:#fde8dc;color:var(--ink)}
.wx-chips{background:#fff;padding:8px 14px 0}
.wx-chips .pet-chip{background:#fff;border:1px solid var(--line);color:var(--ink)}
.wx-chips .pet-chip:hover{background:var(--brand-soft)}
.wx-foxform{background:#fff;border-top:1px solid var(--line)}
.wx-foxform input{background:#fff;border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:8px 10px}
.wx-modal{position:absolute;inset:0;background:rgba(15,23,42,.45);display:flex;
  align-items:center;justify-content:center;z-index:8;border-radius:10px}
.wx-modal[hidden]{display:none}
.wx-modal-card{background:#fff;color:var(--ink);border-radius:12px;padding:18px;
  width:min(420px,calc(100% - 32px));max-height:86%;overflow-y:auto;
  box-shadow:0 18px 44px rgba(16,24,40,.3)}
.wx-modal-card h3{margin:0 0 12px;font-size:1rem}
.wx-field{display:block;color:var(--mut);font-size:.82rem;margin:10px 0}
.wx-field input[type="text"]{width:100%;box-sizing:border-box;background:#fff;
  border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 10px;
  font:inherit;margin-top:5px}
.wx-modal-card textarea{width:100%;box-sizing:border-box;background:#fff;
  border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 10px;font:inherit}
.wx-picklist{max-height:220px;overflow-y:auto;margin-top:6px;display:flex;
  flex-direction:column;gap:2px}
.wx-pickrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
  color:var(--ink);font-size:.88rem;cursor:pointer}
.wx-pickrow:hover{background:#eef1f5}
.wx-memberrow{display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:6px}
.wx-memberrow:hover{background:#f1f5f9}
.wx-membername{flex:1;color:var(--ink);font-size:.9rem}
.wx-rename-row{display:flex;gap:8px}
.wx-rename-row input{flex:1}
.wx-modal-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.wx-modal-err{color:#dc2626;font-size:.83rem}
.wx-modal-note{color:var(--mut);font-size:.82rem;margin-top:0}
.wx-btn{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:7px 16px;font:inherit;font-size:.87rem;cursor:pointer}
.wx-btn.green{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.wx-btn.ghost{background:none}
.wx-btn.sm{padding:4px 10px;font-size:.8rem}
/* 0.43: the panel now wires EVERY row tool — undo the 0.40 hides. */
.comms-panel .comms-msgs .msgtools{display:flex}
.comms-panel .comms-msgs .remindbtn{display:inline-flex}
.wx-msgs .msgtools{gap:2px}
.wx-msgs .msgtool{background:none;color:#8494a7}
.wx-msgs .msgtool:hover{color:var(--ink)}
@media (max-width:640px){
  /* position:fixed + inset:0 must be restated at THIS specificity:
     the wx panel rule above outranks the old base mobile rule, and
     an in-flow 100dvh panel inside the bottom-anchored pet-root
     pushes its own head off the top of the screen. */
  .pet-panel.wx-panel{position:fixed;inset:0;width:100%;max-width:100%;
    height:100dvh;max-height:none;border-radius:0;border:0}
  .wx-listpane{width:100%;border-right:0}
  .wx-threadpane{display:none}
  .wx-panel.wx-show-thread .wx-listpane{display:none}
  .wx-panel.wx-show-thread .wx-threadpane{display:flex}
  .wx-back{display:block}
  .wx-threadhead .wx-x{display:block}
  .wx-hint{display:none}
}

/* ---------- Live App 0.52: clock-in punch surface + punch IPs ----------
   The employee punch card is phone-first: one state line, one big
   button. In the hr lists the punch IP sits small and quiet beside
   its time — colour carries the flags only: red = the punch came
   from off the company LAN; the morning in-time is amber inside
   the grace window and red past it (the out-time is never
   coloured). */
.punchcard{padding:20px 16px;text-align:center;margin-bottom:16px}
.punchstate{font-size:1.12rem;font-weight:600;margin:0 0 6px}
.punchstate .ptime{font-size:1.5rem;font-weight:800}
.punchsub{color:var(--mut);margin:0 0 14px}
.punchbtn{display:block;width:100%;max-width:420px;margin:0 auto;padding:17px 20px;
  font-size:1.22rem;font-weight:700;border-radius:var(--r);cursor:pointer;color:#fff;
  background:var(--green);border:1px solid var(--green)}
.punchbtn.out{background:var(--ink2);border-color:var(--ink2)}
.punchbtn:active{transform:translateY(1px)}
.punchip{font-size:.76em;color:var(--mut);white-space:nowrap}
.punchip.off{color:var(--red);font-weight:600}
.late-grace{color:var(--amber);font-weight:700}
.late-late{color:var(--red);font-weight:700}

/* Live App 0.53: leads bulk delete (the .bulkbar layout is shared) */
.lead-check,#bulkAll{width:20px;height:20px;flex:none}

/* Live App 0.56: engagement layer — tier avatar frames (CSS only,
   one ring per LoL tier, Challenger animated), flame chips, badge
   chips, quest rows, leaderboard avatars. */
.avatar-face.lvl-frame{box-shadow:0 0 0 2px #8a8178,0 0 0 4px rgba(0,0,0,.08)}
.avatar-face.lvl-frame-iron{box-shadow:0 0 0 2px #6f675f,0 0 0 4px rgba(0,0,0,.08)}
.avatar-face.lvl-frame-bronze{box-shadow:0 0 0 2px #b08d57,0 0 0 4px rgba(176,141,87,.25)}
.avatar-face.lvl-frame-silver{box-shadow:0 0 0 2px #b9bec9,0 0 0 4px rgba(185,190,201,.3)}
.avatar-face.lvl-frame-gold{box-shadow:0 0 0 2px #e3b341,0 0 0 5px rgba(227,179,65,.35),0 0 10px rgba(227,179,65,.45)}
.avatar-face.lvl-frame-platinum{box-shadow:0 0 0 2px #57c7b8,0 0 0 5px rgba(87,199,184,.3),0 0 10px rgba(87,199,184,.4)}
.avatar-face.lvl-frame-emerald{box-shadow:0 0 0 3px #2ecc71,0 0 0 6px rgba(46,204,113,.3),0 0 12px rgba(46,204,113,.45)}
.avatar-face.lvl-frame-diamond{box-shadow:0 0 0 3px #6ec6ff,0 0 0 6px rgba(110,198,255,.35),0 0 14px rgba(110,198,255,.55)}
.avatar-face.lvl-frame-master{box-shadow:0 0 0 3px #b06ee8,0 0 0 6px rgba(176,110,232,.35),0 0 14px rgba(176,110,232,.55)}
.avatar-face.lvl-frame-grandmaster{box-shadow:0 0 0 3px #e84f4f,0 0 0 6px rgba(232,79,79,.35),0 0 16px rgba(232,79,79,.6)}
.avatar-face.lvl-frame-challenger{box-shadow:0 0 0 3px #ffb300,0 0 0 6px rgba(255,179,0,.4),0 0 18px rgba(255,140,0,.7);animation:lvlchal 1.6s ease-in-out infinite alternate}
@keyframes lvlchal{from{box-shadow:0 0 0 3px #ffb300,0 0 0 6px rgba(255,179,0,.35),0 0 12px rgba(255,140,0,.5)}to{box-shadow:0 0 0 3px #ff8f00,0 0 0 7px rgba(255,179,0,.5),0 0 22px rgba(255,140,0,.85)}}
.flame-chip{display:inline-block;padding:0 7px;border-radius:99px;background:#fff1e6;color:#b34a12;font-size:.74rem;font-weight:700;border:1px solid #f3c39a;white-space:nowrap;vertical-align:middle}
.badge-chip{display:inline-block;padding:1px 8px;border-radius:99px;background:#eef6ee;color:var(--ink);font-size:.74rem;font-weight:600;border:1px solid var(--line);white-space:nowrap}
.quest-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.quest-label{flex:0 1 240px;font-weight:600}
.quest-bar{flex:1 1 auto}
.quest-meta{flex:0 0 auto;font-size:.82rem;white-space:nowrap}
.lb-av{display:inline-block;vertical-align:middle;margin-right:2px}

/* ---- Live App 0.59: ONE layer scale (stacking contexts, root level) ----
   page content / sticky chrome ... < 60
   corner chat panel (.pet-root) .. 60 (phones 70)
   undo bar ........................ 80
   call card / call panel .......... 90
   top bar + bell popover .......... 100  (.topbar is a stacking context:
   sticky + backdrop-filter, so .bell-pop's own z-index only counts
   inside it; the bar's level IS the popover's level. 0.56 bug: the bar
   sat at 45, under the chat panel at 60, and the popover went with it.)
   page-help panel ................. 1200
   modals / confirms (.crmmodal,
   .calmodal) ...................... 1400
   toasts (never covered) .......... 1500
   drag ghost ...................... 9999
   Phones (<=640px) are the one exception: the chat panel goes
   full-screen and covers the bell button itself, so the bar drops
   back under the panel there (z-index 40) -- the popover-over-panel
   state is unreachable on a phone, and a full-screen panel must
   never have the sticky bar painted across it. */

/* ---- Live App 0.59: the universal close-X standard ----
   Every dismissible floating surface carries its close X at its
   TOP-RIGHT corner, with one consistent ~32px hit area. (Menus and
   pickers -- emoji, @mentions, reactions -- are transient: they
   close on selection / outside click / Esc and are not surfaces.
   Timed bars and call cards dismiss through their own action
   buttons and are likewise out of scope.) */
.wx-panel-x{position:absolute;top:8px;right:8px;z-index:6;width:32px;
  height:32px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:0;color:#c9c9c9;font-size:1rem;
  cursor:pointer;border-radius:8px;line-height:1}
.wx-panel-x:hover{color:var(--ink);background:#eef1f5}
@media (max-width:640px){
  /* phones show one pane at a time: in the list state the panel X
     overlays the list tools row -- keep the pin button clear of it */
  .wx-listtools{padding-right:48px}
}
@media (max-width:640px){
  .topbar{z-index:40}
}
.crmmodal-card{position:relative}
.calmodal-card{position:relative}
.modal-x{position:absolute;top:8px;right:8px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;background:none;
  border:0;color:var(--mut);font-size:1.05rem;cursor:pointer;
  border-radius:8px;line-height:1;z-index:2}
.modal-x:hover{color:var(--ink);background:rgba(15,23,42,.06)}
.wx-modal-card{position:relative}
.wx-modal-x{position:absolute;top:6px;right:6px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;background:none;
  border:0;color:#c9c9c9;font-size:1rem;cursor:pointer;border-radius:8px;
  line-height:1}
.wx-modal-x:hover{color:#fff;background:#3a3a3a}
.pet-x{min-width:32px;min-height:32px;display:inline-flex;
  align-items:center;justify-content:center}
.toast-x{min-width:30px;min-height:30px;display:inline-flex;
  align-items:center;justify-content:center}
.help-x{min-width:30px;min-height:30px}

/* ---- Live App 0.60: the Today rebuild ----
   Company data first, in less space: slim expandable
   announcement strip, stage chips without a card, the
   two-column work grid, compact to-dos, the punch row, and
   ALL game content as one 4-tile strip at the bottom. */
.ann-strip{background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:12px;
  padding:8px 14px;margin:0 0 12px}
.ann-strip summary{cursor:pointer;display:flex;gap:8px;
  align-items:baseline;list-style:none;white-space:nowrap;
  overflow:hidden}
.ann-strip summary::-webkit-details-marker{display:none}
.ann-strip .ann-strip-body{overflow:hidden;text-overflow:ellipsis;
  min-width:0}
.ann-strip .ann-strip-meta{flex-shrink:0}
.ann-strip .ann-body{margin-top:8px}
.ann-strip form{margin-top:12px}
.ann-strip form p{margin:0 0 8px}
.ann-strip form input[type="text"],.ann-strip form textarea{
  width:100%;box-sizing:border-box}
.stagestrip-wrap{display:flex;gap:6px;align-items:center;
  flex-wrap:wrap;padding:2px 2px 0;margin:0 0 12px}
a.stagechip{color:inherit;text-decoration:none}
a.stagechip:hover{border-color:var(--brand)}
.dash-cols{display:grid;grid-template-columns:minmax(0,2fr)
  minmax(0,1fr);gap:14px;align-items:start}
.dash-main,.dash-side{min-width:0}
@media (max-width:900px){.dash-cols{grid-template-columns:1fr}}
.todo-compose{display:flex;gap:8px;align-items:flex-start}
.todo-compose .mentionwrap{flex:1;min-width:0}
.todo-clamp{display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.todo-more{margin-top:6px}
.todo-more summary{cursor:pointer;color:var(--brand);
  font-size:.85rem;list-style:none}
.todo-more summary::-webkit-details-marker{display:none}
.more-link{display:block;margin-top:6px;font-size:.85rem}
.punchrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.punchrow-state{flex:1;min-width:200px}
.punchrow form{margin:0}
.punchrow .punchbtn{width:auto;display:inline-block;
  padding:14px 30px;font-size:1.05rem;margin:0}
a.cashlink{color:inherit;text-decoration:none}
a.cashlink:hover b{text-decoration:underline}
.games-strip{display:flex;gap:10px;flex-wrap:wrap;
  padding:10px 14px;align-items:stretch}
.gtile{flex:1 1 170px;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;min-width:150px}
a.gtile{color:inherit;text-decoration:none;display:block}
.gtile .gt{font-size:.8rem;color:var(--mut);margin-bottom:3px}
.gtile .gv{font-weight:600}
.gtile .lvl-bar{height:6px;margin-top:5px}
.gtile .qline{font-size:.82rem;display:flex;
  justify-content:space-between;gap:6px}
.card h2 .right{float:right}

/* ---- Live App 0.60: floating-panel WIDTH caps ----
   Mark's rule: floating things stay small. 0.59 set the layer
   scale, the universal top-right X and the chat panel's height
   cap — all untouched here; this block only bounds WIDTH on
   desktop (chat panel ~400px; the bell popover already ships
   at 380px) and switches the messages panel to its one-pane
   layout at the capped width (pet.js toggles .wx-show-thread
   by state, not by viewport, so the panes follow the panel).
   Phones keep the shipped 0.59 full-screen panel. */
@media (min-width:641px){
  .pet-panel{width:min(400px,calc(100vw - 32px))}
  .pet-panel.wx-panel{width:min(430px,calc(100vw - 32px))}
}
.wx-listpane{width:100%;border-right:0}
.wx-threadpane{display:none}
.wx-panel.wx-show-thread .wx-listpane{display:none}
.wx-panel.wx-show-thread .wx-threadpane{display:flex}
.wx-back{display:block}

/* ---- Hotfix batch 2026-10-28: compact + clear (items 1b, 2b,
   3, 4, 5, 6) — Mark's rule: the app must be simple to use and
   display compact; a box earns its area from what's in it. ---- */
/* item 6: login consent — the missed-tick highlight (the error
   line itself reuses .login-error). */
#consentBlock.consent-miss{background:#fef2f2;border:1px solid #fca5a5;
  border-radius:10px;padding:2px 10px 8px}
/* item 1b: attention rows are short one-liners — two columns on
   wide screens so the card fits its content, one when narrow. */
.attn-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
.attn-rows .myrow{margin:4px 0}
@media (max-width:760px){.attn-rows{grid-template-columns:1fr}}
/* item 2b: production summary chips. */
.prodsum{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.prodsum-chip{border:1px solid var(--line);border-radius:999px;
  padding:2px 10px;font-size:.85rem;background:#fafbfc}
/* item 3: HR files — the person cell of the dense list. */
.hr-who{display:flex;gap:8px;align-items:center}
/* Live App 0.88 (G5): HR files list density pass — rows match
   the Projects/Customers sheet density (tighter cell padding,
   smaller avatar) without removing any information. */
.hr-list td{vertical-align:middle;padding:3px 8px}
.hr-list th{padding:3px 8px}
.hr-list .hr-who{gap:6px}
.hr-list .avatar-face.sm{width:24px;height:24px;font-size:.85rem}
/* item 4: the punch card sizes to its content (state line + one
   button), and no-punch days collapse behind one summary line. */
.punchcard{max-width:430px}
details.emptydays{margin:0 0 14px}
details.emptydays>summary{cursor:pointer;color:var(--mut);
  font-size:.9rem;padding:8px 4px;list-style:none}
details.emptydays>summary::-webkit-details-marker{display:none}
details.emptydays>summary::before{content:"▸ "}
details.emptydays[open ]>summary::before{content:"▾ "}
details.emptydays>summary:hover{color:var(--ink)}
/* item 5: Settings density — same cards, tighter rhythm. Layout
   only: no setting's behaviour, gate or default changes. */
.settingspanel .card{padding:14px 16px;margin-bottom:10px}
.settingspanel .card h2{font-size:1.02rem;margin-bottom:6px}
.settingspanel table th,.settingspanel table td{padding:6px 10px}
.settings-tabs{margin-bottom:12px}
.settings-tabs .tab{padding:5px 11px;font-size:.86rem}

/* ---- Live App 0.78: dashboard hierarchy + sizing (Group 2) ----
   .main-today-scoped only. Company/business data keeps the prime
   positions and full card treatment; the games strip — already
   the last block on the page — is compacted to a secondary strip
   so levels/quests/flames never rival business cards in area.
   Side-column cards size tighter to their short content. */
.main-today .games-strip{padding:8px 10px;gap:8px;margin-top:10px}
.main-today .games-strip .gtile{flex:1 1 150px;padding:6px 8px}
.main-today .games-strip .gt{font-size:.75rem;margin-bottom:2px}
.main-today .games-strip .gv{font-size:.9rem}
.main-today .games-strip .qline{font-size:.78rem}
.main-today .dash-side>.card{padding:14px 16px}
.main-today #todayPunch{padding:14px 18px}
.main-today #todaySnapshot{margin-bottom:2px}

/* ---- Live App 0.81: keyboard shortcuts overlay + UI polish ----
   Overlay sits below .crmmodal (1400) and toasts (1500), above the
   corner panels. Polish items are single-purpose overrides; each is
   marked with the defect it fixes. */
.sc-overlay{position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.sc-overlay[hidden]{display:none}
.sc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);width:min(430px,100%);padding:18px 20px 12px;max-height:80vh;overflow:auto}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sc-head b{font-size:1.02rem}
.sc-x{border:0;background:none;cursor:pointer;font-size:1rem;color:var(--mut);padding:4px 6px}
.sc-x:hover{color:var(--ink)}
.sc-row{display:flex;align-items:center;gap:14px;padding:7px 0;border-bottom:1px solid #f1f5f9}
.sc-row:last-child{border-bottom:0}
.sc-keys{flex:0 0 118px;color:var(--mut);font-size:.82rem}
.sc-keys kbd{background:#f8fafc;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:1px 7px;font-family:inherit;font-size:.8rem;color:var(--ink)}
.sc-desc{font-size:.9rem}
/* polish: grid date cells never wrap mid-date (uneven row heights) */
table.grid td.nowrap{white-space:nowrap}
/* polish: dashboard KPI cards keep one width on every row
   (auto-fit collapsed the empty tracks and stretched row 2) */
.cards.kpis{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
/* polish: sidebar search placeholder was 55% white on white-tinted
   glass — the box read as empty */
.side-search input::placeholder{color:rgba(255,255,255,.78)}
/* polish: file inputs join the form language (Settings avatar
   upload showed the raw OS control) */
input[type="file"]{padding:7px 9px;background:var(--card);cursor:pointer}
input[type="file"]::file-selector-button{font:inherit;font-size:.85rem;cursor:pointer;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:5px 11px;margin-right:10px}
input[type="file"]::file-selector-button:hover{background:#f1f5f9}
@media (max-width:640px){
  /* polish: hub tabs scroll sideways instead of wrapping one
     orphan tab onto a second row */
  .tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar .tab{flex:0 0 auto}
  /* polish: the job stepper clipped its last step at 390px —
     steps now wrap four to a row */
  .stepper .step{flex:1 1 25%;min-width:0}
}

/* ---- Live App 0.82: DASHBOARD FLAGSHIP (.main-today scoped) ----
   One card system for Today: uniform padding / radius / border /
   shadow tokens, a 14px spacing rhythm, and a clear type ladder
   (page title, card titles, big numbers, consequence lines).
   Business data stays largest and first; the games strip keeps
   its compact 0.78 treatment at the bottom. */
.main-today .dash-hero{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:16px 20px;margin:0 0 14px;align-items:center}
.main-today .dash-title{font-size:1.55rem;font-weight:800;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 6px}
.main-today .card{border-radius:var(--r-lg);padding:18px 20px}
.main-today .dash-side>.card{padding:18px 20px}
.main-today .card-title{font-size:1.02rem;font-weight:700;
  letter-spacing:-.01em;margin:0 0 10px}
.main-today .dash-main>.card,.main-today .dash-side>.card{margin-bottom:14px}
.main-today .dash-main>.card:last-child,
.main-today .dash-side>.card:last-child{margin-bottom:0}
.main-today .card.attn{border-left:4px solid #f59e0b}
.main-today .card.attn.clear{border-left-color:var(--green)}
.main-today .attn-rows .myrow{padding:6px 8px;border-radius:8px}
.main-today .attn-rows .myrow:hover{background:#f8fafc}
.main-today .attn-more{margin:8px 0 0;font-size:.82rem}
.main-today .myrow{margin:0;padding:5px 0}
.main-today .cards.kpis{gap:14px}
.main-today .kpis .kpi{border-radius:var(--r-lg);padding:16px 18px}
.main-today .money-fine{font-size:.76rem;color:var(--mut);margin:8px 2px 0}
.main-today .stagestrip-wrap{background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:10px 14px;margin:10px 0 14px}
.main-today .teamrow{display:flex;justify-content:space-between;gap:10px}
.main-today .grid2{gap:14px}
@media (max-width:640px){
  .main-today .dash-hero{padding:14px 16px}
  .main-today .dash-title{font-size:1.35rem}
  .main-today .card{padding:14px 16px}
  .main-today .dash-side>.card{padding:14px 16px}
  .main-today .cards.kpis{grid-template-columns:1fr 1fr}
  .main-today .kpis .kpi{padding:12px 14px;gap:8px}
  .main-today .kpis .kic{width:38px;height:38px;font-size:1.1rem;
    border-radius:10px}
  .main-today .kpis .kpi.wide{grid-column:span 2}
}

/* Live App 0.84: levels bands — Starter frame + dashboard band note */
.avatar-face.lvl-frame-starter{box-shadow:0 0 0 2px #a8a29e,0 0 0 4px rgba(0,0,0,.06)}
.games-strip .band-note{flex:1 1 100%;font-size:.78rem}
.games-strip .band-note button{background:none;border:0;color:inherit;cursor:pointer;font-size:.78rem;padding:0 2px}

/* =====================================================================
   Live App 0.101 — polish round 2 (QA audit fixes)
   ===================================================================== */
/* #6: the chat launcher hides while its own panel is open (pet.js
   toggles .pet-open on the root) — it used to float over the panel
   and over sticky action rails. visibility keeps the root's layout
   so the panel does not jump. */
.pet-root.pet-open .pet-btn{visibility:hidden}

/* #8: the round-1 ::file-selector-button rule DID apply (verified
   by computed style) but white-on-white read as the raw OS control.
   The button now takes the primary brand treatment so it is
   unmistakably part of the form language. */
input[type="file"]::file-selector-button{background:var(--brand);
  border-color:var(--brand);color:#fff;font-weight:600}
input[type="file"]::file-selector-button:hover{background:var(--brand);
  filter:brightness(1.15)}

/* #12a: the comms search input was hijacked by the global form
   rule (two :not()s outrank the .wx-search selector) and rendered
   as a big white form field inside the dark panel. Restore the
   dark, quiet field. */
.pet-panel .wx-search input{background:transparent;border:0;
  box-shadow:none;padding:0;font-size:.85rem;color:#eee;
  appearance:none;-webkit-appearance:none}
.pet-panel .wx-search input:focus{border:0;box-shadow:none}

/* #10: payroll — pager never splits; wide tables get a standard
   scroll container instead of running under the page edge. */
.payroll-pager{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%}

/* #9: Projects filters collapse behind a toggle on phones */
.filters-toggle{display:none}

/* #13: login What's New collapses behind a disclosure on phones */
.login-notes-toggle{display:none}
/* #13b: the hero tagline anchors under the brand (flex-end put it
   at the bottom of a taller-than-viewport hero = invisible). */
.login-hero .hero-tag{position:absolute;top:118px;left:48px;
  right:48px;max-width:520px;z-index:2}

@media (max-width:860px){
  .login-hero .hero-tag{top:64px;left:22px;right:22px}
  .login-hero .hero-tag p{display:none}
  /* #5: module tab strips scroll sideways with a right-edge fade
     cue instead of clipping the last tab mid-character. */
  .tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar .tab{flex:0 0 auto}
  /* #9 */
  .filters-toggle{display:inline-flex}
  .searchbar.filters-closed .fx{display:none !important}
  .fx-saved.filters-closed{display:none}
  /* #13 */
  .login-notes-toggle{display:inline-flex;margin-top:14px}
  .login-notes{display:none}
  .login-notes.open{display:block}
}

@media (max-width:640px){
  /* #4: the projects board becomes a snap-scrolling column strip
     (one stage column per swipe) instead of a 1560px blowout. */
  .board.pboard{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:82vw;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:10px}
  .board.pboard .col{scroll-snap-align:start;min-width:0}
  /* #10: fade cue on scrollable payroll tables */
  .tablewrap{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  .paytable{min-width:620px}
  /* #12b: panel header gets air at the top; the X clearance stays */
  .wx-listtools{padding:16px 48px 10px 12px}
}

/* ============================================================
   Live App 0.109 — Hybrid dashboard (Mockup A layout + Mockup C
   summary line and ranked queue) + the bounded shell item.
   Compact end of the UI standard: dense-but-breathing, sections
   collapse fully when empty, no dead space on desktop or 390px.
   ============================================================ */

/* --- dashboard frame --- */
.dash109{display:flex;flex-direction:column;gap:14px;max-width:1220px}
.dash109 .card{margin:0}
.d109-h{font-size:.92rem;font-weight:650;margin:0 0 6px;display:flex;align-items:baseline;gap:10px}
.d109-hlink{margin-left:auto;font-size:.8rem;font-weight:550}
.d109-dateline{color:var(--mut);font-size:.85rem}
.d109-summary{font-size:1.06rem;line-height:1.4;margin:-6px 0 0;letter-spacing:-.005em}
.d109-summary .d109-owed{font-size:1.55rem;font-weight:750;letter-spacing:-.02em;white-space:nowrap}
.d109-summary .d109-od{color:#c92a2a;font-weight:650;white-space:nowrap}
.d109-sep{color:var(--faint);padding:0 3px}
.d109-guide{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;box-shadow:var(--shadow)}
.d109-guide p{margin:0 0 8px}
.d109-guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.d109-ann-post{margin:0}
.d109-calm{margin:0;color:var(--mut);font-size:.95rem}

/* --- money block (Mockup A): hero top-left biggest --- */
.d109-money{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:14px 34px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px 14px;box-shadow:var(--shadow)}
.d109-owed-label{font-size:.83rem;color:var(--mut);font-weight:550}
.d109-owed-hero{font-size:2.6rem;font-weight:750;letter-spacing:-.03em;line-height:1.05;margin:1px 0 3px}
.d109-owed-ctx{font-size:.8rem;color:var(--mut);margin-bottom:4px}
.d109-overdue{padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
.d109-od-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.d109-od-t{font-size:.83rem;font-weight:650}
.d109-od-amt{color:#c92a2a;font-weight:700;font-size:.95rem}
.d109-od-n{color:var(--mut);font-size:.78rem}
.d109-od-row{display:flex;align-items:baseline;gap:10px;padding:3px 0}
.d109-od-name{font-weight:600;font-size:.86rem;color:var(--ink)}
.d109-od-days{color:#c92a2a;font-size:.78rem;font-weight:600;white-space:nowrap}
.d109-od-row-amt{margin-left:auto;font-weight:650;font-size:.86rem}
.d109-od-more{font-size:.78rem;color:var(--mut);padding-top:2px}
.d109-money-side{display:flex;flex-direction:column}
.d109-fig{padding:9px 0 8px;border-bottom:1px solid var(--line)}
.d109-fig:first-child{padding-top:2px}
.d109-fig:last-child{border-bottom:none}
.d109-fig-v{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.d109-fig-k{font-size:.83rem;font-weight:600}
.d109-fig-c{font-size:.78rem;color:var(--mut);margin-top:1px}
.d109-fig-quiet{display:flex;flex-direction:column;gap:3px}

/* --- ranked queue (Mockup C discipline) --- */
.d109-queue{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 18px 8px;box-shadow:var(--shadow)}
.d109-qrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.d109-qrow:first-of-type{border-top:none}
.d109-qtxt{font-size:.92rem}
.d109-qact{margin-left:auto;flex:0 0 auto}
.d109-qmore{font-size:.8rem;margin:4px 0 6px}

/* --- today: the widest block --- */
.d109-today{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 18px 10px;box-shadow:var(--shadow)}
.d109-tgroup{margin-top:6px}
.d109-glabel{font-size:.74rem;font-weight:650;color:var(--mut);margin-bottom:1px}
.d109-trow{display:flex;align-items:center;gap:12px;padding:6px 0;border-top:1px solid #eef1f5}
.d109-tgroup .d109-trow:first-of-type{border-top:none}
.d109-ttime{flex:0 0 52px;font-size:.83rem;font-weight:600;color:var(--mut)}
.d109-twhat{font-size:.9rem}
.d109-tbadge{margin-left:auto;flex:0 0 auto}
.d109-emptyline{margin:2px 0 4px}

/* --- team chip strip --- */
.d109-team{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 18px 11px;box-shadow:var(--shadow)}
.d109-teamline{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.83rem}
.d109-tgrp>b{font-weight:650;margin-right:7px}
.d109-twho{color:var(--mut)}
.d109-twho b{color:var(--ink);font-weight:600}
.d109-tsep{color:var(--faint);padding:0 3px}
.d109-late{color:#d9480f;font-weight:650}

/* --- proportional stage bar --- */
.d109-pipeline{padding:0 2px}
.d109-bar{display:flex;height:24px;border-radius:7px;overflow:hidden;gap:2px}
.d109-seg{display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:.74rem;font-weight:650;min-width:26px}
.d109-seg.s1{background:#8fa9c0}.d109-seg.s2{background:#7494ae}.d109-seg.s3{background:#6486a3}
.d109-seg.s4{background:#527691}.d109-seg.s5{background:#42688a}.d109-seg.s6{background:#335b7d}
.d109-seg.s7{background:#2a4f70}.d109-seg.s8{background:#21425f}.d109-seg.s9{background:#173c5c}
.d109-bar-legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font-size:.78rem;color:var(--mut)}
.d109-bar-legend b{color:var(--ink);font-weight:650}

/* --- quiet secondary row --- */
.d109-secondary{display:flex;gap:10px;flex-wrap:wrap}
.d109-small{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;font-size:.83rem;color:var(--mut);text-decoration:none;box-shadow:var(--shadow)}
.d109-small b{color:var(--ink);font-weight:700;font-size:.95rem;margin-right:5px}
a.d109-small:hover{border-color:color-mix(in srgb, var(--brand) 40%, #ffffff)}
.d109-upcoming{margin:0}

/* --- 390px: same order, stacked, no dead slabs --- */
@media (max-width:760px){
  .dash109{gap:10px}
  .d109-summary{font-size:.98rem}
  .d109-summary .d109-owed{font-size:1.3rem}
  .d109-money{grid-template-columns:1fr;gap:4px;padding:14px 16px 10px}
  .d109-owed-hero{font-size:2.1rem}
  .d109-fig{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .d109-fig-v{font-size:1.1rem}
  .d109-queue,.d109-today,.d109-team{padding-left:14px;padding-right:14px}
  .d109-qrow{flex-wrap:wrap;gap:6px 10px}
  .d109-qact{margin-left:0}
  .d109-trow{flex-wrap:wrap;gap:3px 10px}
  .d109-tbadge{margin-left:62px}
  .d109-secondary{flex-direction:column;gap:8px}
  .d109-small{display:block}
}

/* Live App 0.110 — dashboard customise sheet (item 14) */
.dashcust-link{text-align:right;margin:0 0 6px}
.dashcust .custrow{display:flex;align-items:center;gap:10px;
 padding:9px 4px;border-bottom:1px solid var(--line,#e3e7ee)}
.dashcust .custrow:last-of-type{border-bottom:none}
.dashcust .custname{display:flex;align-items:center;gap:8px;
 flex:1;font-weight:600}
.dashcust .custlock{font-size:12px;color:var(--muted,#667);
 white-space:nowrap}
.dashcust .custmoves{display:flex;gap:6px;white-space:nowrap}
.dashcust .custfoot{margin-top:12px;display:flex;gap:8px}
.dashcust .locksheet td,.dashcust .locksheet th{text-align:left}
@media (max-width:480px){.dashcust .custrow{flex-wrap:wrap}
 .dashcust .custmoves{margin-left:auto}}

/* ============================================================
   Live App 0.112 — Foxuma Design System, Wave 1 (SETTLED spec:
   DESIGN-SYSTEM.md). Working face = A "Lark Calm" (light rail +
   cards, soft shadow); dashboard money = B's one DARK hero card;
   login brand side = C "Arco Glow" treatment, form side light.
   This block is appended last in app.css: it re-skins only —
   no layout/behaviour rules above are removed.
   ============================================================ */
h1,h2,h3{font-family:var(--font-d),"Inter",sans-serif}
.num{font-variant-numeric:tabular-nums lining-nums}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
:focus-visible{outline:3px solid rgba(232,93,31,.55);outline-offset:2px}
::selection{background:var(--accent-soft)}

/* ---------- buttons / cards / forms / tables (spec §3) ---------- */
.btn{border-radius:10px;box-shadow:var(--sh)}
.btn.ghost{border-color:var(--line2)}
.btn.ghost:hover{background:var(--panel2)}
.card{border-radius:16px;box-shadow:var(--sh)}
.kpi{border-radius:16px;box-shadow:var(--sh)}
.stat{border-radius:16px;box-shadow:var(--sh)}
.stat .sv{font-family:var(--font-d),sans-serif}
table{border-radius:16px;box-shadow:var(--sh)}
th{background:var(--panel2)}
tbody tr:hover td{background:#fdf8f4}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{border-color:var(--line2);border-radius:10px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,93,31,.25)}
.badge{background:var(--panel2);color:var(--mut)}
.badge.ok{background:var(--green-soft);color:var(--green-ink)}
.badge.warn{background:var(--gold-soft);color:var(--gold-ink)}
.msg{background:var(--green-soft);border-color:#bfe9d2}
.msg.warning{background:var(--gold-soft);border-color:#efdfae}
.msg.error{background:var(--red-soft);border-color:#f3c2c2}
.crmmodal{background:rgba(10,17,32,.55)}
.crmmodal-card{border-radius:18px;box-shadow:0 24px 64px rgba(2,6,18,.35)}
.segbar{background:var(--panel2)}
.tabbar{background:var(--card)}
.tabbar .tab.on{background:var(--ink);color:#fff}
.gridwrap,.sheetwrap{border-radius:16px}

/* ---------- toasts: dark pills (spec §3.7) ---------- */
.toast{background:var(--navy-panel);border:1px solid var(--line-dark);
  border-left:3px solid var(--accent);border-radius:12px;
  box-shadow:0 10px 30px rgba(2,6,18,.18)}
.toast-success{border-left-color:var(--live);background:var(--navy-panel)}
.toast-error{border-left-color:var(--red-dark);background:var(--navy-panel)}
.toast-warning{border-left-color:#ffcf6b;background:var(--navy-panel)}
.toast-info,.toast-debug{border-left-color:var(--peach);background:var(--navy-panel)}
.toast .toast-txt{color:var(--ink-dark)}
.toast .toast-txt b{color:#fff}
.toast-x{color:var(--muted-dark)}
.toast-x:hover{color:#fff}
.toast-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px;background:var(--peach)}
.td-success{background:var(--live)}.td-error{background:var(--red-dark)}
.td-warning{background:#ffcf6b}.td-info{background:var(--peach)}

/* ---------- shell: A light icon rail (spec §4.1) ---------- */
.ric{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side{background:#fff;color:var(--ink);border-right:1px solid var(--line);
  width:240px;padding:16px 12px 14px}
.side .brand{font-family:var(--font-d),sans-serif;font-weight:700;color:var(--ink)}
.side .sub{color:var(--mut)}
.brandlink:hover{text-decoration:none}
.logo-mark{border-radius:10px}
.side .rail-me{display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;text-align:left;color:var(--ink)}
.side .rail-me:hover{background:var(--panel2);text-decoration:none}
.side .rail-me .avatar-face{width:32px;height:32px;border-radius:50%;font-size:1rem;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.side .rail-me-name{font-weight:600;color:var(--ink);font-size:.92rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pres-dot{width:9px;height:9px;border-radius:50%;margin-left:auto;flex:0 0 auto;
  align-self:center;background:#cbd5e1;box-shadow:0 0 0 3px var(--panel2)}
.pres-online{background:var(--live);box-shadow:0 0 0 3px var(--green-soft)}
.pres-lunch{background:#e8a13d}.pres-away{background:var(--faint)}.pres-dnd{background:var(--red)}
.side .rail-status{margin:2px 0 8px}
.side .rail-status select,.side .langswitch select{width:100%;background:var(--panel2);
  border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:6px 8px;font-size:.83rem}
.side .side-search{position:relative;margin:0 0 6px;padding:0}
.side .side-search .search-ic{position:absolute;left:9px;top:50%;
  transform:translateY(-50%);width:15px;height:15px;color:var(--faint);pointer-events:none}
.side .side-search input{width:100%;background:var(--panel2);
  border:1px solid var(--line);color:var(--ink);border-radius:10px;
  padding:7px 10px 7px 31px;font-size:.85rem}
.side .side-search input::placeholder{color:var(--faint)}
.side .side-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,93,31,.25)}
.side .user{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;
  display:flex;flex-direction:column;gap:8px;color:var(--mut)}
.signout-btn{display:flex;align-items:center;gap:8px;justify-content:center;width:100%}
.side .user .signout-btn{background:#fff;border:1px solid var(--line2);color:var(--ink)}
.side .user .signout-btn:hover{background:var(--panel2);color:var(--ink)}
.signout-btn .ric{width:15px;height:15px}
@media (min-width:761px){
  .sidenav{display:block}
  .sidenav .navgrid{display:flex;flex-direction:column;gap:2px}
  .sidenav .navsec,.sidenav summary.navsec{font-size:.68rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
    margin:16px 10px 5px;padding:0}
  .sidenav summary.navsec{cursor:pointer;list-style:none}
  .sidenav summary.navsec::-webkit-details-marker{display:none}
  .side .sidenav a{display:flex;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:11px;
    height:auto;padding:8px 10px;border:0;border-radius:10px;background:transparent;
    color:var(--mut);font-size:.93rem;font-weight:500;text-align:left}
  .side .sidenav a .ric{color:var(--faint)}
  .side .sidenav a .lbl{display:inline;width:auto;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;font-size:.93rem;line-height:1.3}
  .side .sidenav a:hover{background:var(--panel2);color:var(--ink);text-decoration:none}
  .side .sidenav a:hover .ric{color:var(--mut)}
  .side .sidenav a.on{background:var(--accent-soft);color:var(--ink);font-weight:600;
    box-shadow:inset 3px 0 0 var(--accent)}
  .side .sidenav a.on .ric{opacity:1;color:var(--accent)}
  .side .sidenav a .badge{margin-left:auto}
}
/* Live App 0.117 (hotfix): the icon rail is the COMPACT nav style
   at every desktop width. Before, this block was keyed to the
   761–1100px viewport band, so on a wide monitor Compact (228px
   labelled rows) and Classic (292px labelled rows) looked the
   same and the preference appeared to do nothing. The block is
   now scoped to the non-Classic shell: Compact = this rail;
   Classic keeps the wide labelled bar (0.112 block above) at
   every width ≥761px. Mobile (≤760px) is untouched. */
@media (min-width:761px){
  .side:not(.side-classic){width:64px;padding:14px 8px}
  .side:not(.side-classic) .sub,.side:not(.side-classic) .rail-me-name,
  .side:not(.side-classic) .pres-dot,.side:not(.side-classic) .rail-status,
  .side:not(.side-classic) .side-search,
  .side:not(.side-classic) .sidenav .navsec,
  .side:not(.side-classic) .sidenav a .lbl,
  .side:not(.side-classic) .sidenav a .badge,
  .side:not(.side-classic) .user .langswitch{display:none}
  .side:not(.side-classic) .sidenav a{justify-content:center;padding:9px 0}
  .side:not(.side-classic) .brandlink .brand span{display:none}
  .side:not(.side-classic) .signout-btn{font-size:0;gap:0}
}
/* top chrome: fox ask bar */
.foxcmd-ic{color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.foxglyph{width:20px;height:20px;flex:0 0 auto}
/* mobile bottom bar: Lucide glyphs, A skin */
.mobilebar{background:#fff;border-top:1px solid var(--line)}
.mobilebar a .tic{display:flex;align-items:center;justify-content:center}
.mobilebar a .tic .ric{width:21px;height:21px;color:var(--faint)}
.mobilebar a.on{background:var(--accent-soft);color:var(--accent-ink)}
.mobilebar a.on .tic .ric{color:var(--accent)}

/* ---------- dashboard: A skin + B dark money hero (spec §5.2) ---------- */
.dash109{max-width:1280px}
.d109-dateline{color:var(--mut)}
.d109-summary .d109-owed{font-family:var(--font-d),sans-serif}
.d109-summary .d109-od{color:var(--red)}
.d109-guide{border-radius:16px;box-shadow:var(--sh)}
.d109-money{background:var(--navy-panel);border:1px solid var(--line-dark);
  border-radius:18px;padding:22px 24px;color:var(--ink-dark);
  box-shadow:0 10px 30px rgba(2,6,18,.14)}
.d109-owed-label{font-family:var(--font-m),monospace;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--peach)}
.d109-owed-hero{font-family:var(--font-d),sans-serif;color:#fff;font-size:3rem;font-weight:700}
.d109-owed-ctx{color:var(--muted-dark)}
.d109-overdue{border-top:1px solid var(--line-dark)}
.d109-od-t{color:#fff}
.d109-od-amt{color:var(--red-dark)}
.d109-od-n{color:var(--muted-dark)}
.d109-od-name{color:#fff}
.d109-od-name:hover{color:var(--peach)}
.d109-od-days{color:var(--red-dark)}
.d109-od-row-amt{color:#fff}
.d109-od-more{color:var(--muted-dark)}
.d109-od-more a{color:var(--peach)}
.d109-fig{border-bottom:1px solid var(--line-dark)}
.d109-fig-v{font-family:var(--font-d),sans-serif;color:#fff}
.d109-fig-k{color:var(--ink-dark)}
.d109-fig-c{color:var(--muted-dark)}
.d109-fig-c a{color:var(--peach)}
.d109-queue,.d109-today,.d109-team{border-radius:16px;box-shadow:var(--sh);border-color:var(--line)}
.d109-qrow{border-top-color:var(--line)}
.d109-trow{border-top-color:#eef2f6}
.d109-late{color:var(--gold-ink)}
.d109-small{border-radius:12px;box-shadow:var(--sh)}
@media (max-width:760px){
  .d109-money{grid-template-columns:1fr;padding:18px}
  .d109-owed-hero{font-size:2.4rem}
}

/* ---------- LOGIN 0.112: C brand side + A light form side ---------- */
.lg112-shell{min-height:100vh;min-height:100dvh;display:flex;align-items:stretch;
  justify-content:center;padding:40px 24px;background:var(--bg)}
.lg112-brand{width:520px;flex:0 1 520px;background:var(--navy);color:var(--ink-dark);
  border-radius:24px 0 0 24px;padding:38px 42px;display:flex;flex-direction:column;
  overflow:hidden;position:relative;box-shadow:var(--sh)}
.lg112-brand::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 340px at 12% 0%,rgba(232,93,31,.18),transparent 62%)}
.lg112-brand::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(147,161,189,.13) 1px,transparent 1.4px);
  background-size:22px 22px}
.lg112-brand>*{position:relative;z-index:1}
.lg112-bp-top{display:flex;align-items:center;gap:10px}
.lg112-bp-top .lg112-bname{font-family:var(--font-d),sans-serif;font-weight:700;
  font-size:1.15rem;color:#fff;letter-spacing:-.01em}
.lg112-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;
  height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent2),var(--accent))}
.lg112-mid{margin-top:56px}
.lg112-kick{font-family:var(--font-m),monospace;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--peach)}
.lg112-kick.sm{font-size:.64rem}
.lg112-headline{font-family:var(--font-d),sans-serif;font-size:2.85rem;line-height:1.08;
  letter-spacing:-.03em;font-weight:700;color:#fff;margin:14px 0}
.lg112-sub{color:var(--muted-dark);font-size:.95rem;max-width:340px;margin:0}
.lg112-vig{margin-top:34px;background:var(--navy-panel);border:1px solid var(--line-dark);
  border-radius:18px;padding:18px 20px}
.lg112-vig-head{display:flex;justify-content:space-between;align-items:center}
.lg112-vig-live{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;
  font-weight:600;color:#7fe0ab;background:#12291d;padding:2px 9px;border-radius:999px}
.lg112-pulse{width:8px;height:8px;border-radius:50%;background:var(--live);
  display:inline-block;animation:lg112pl 2.4s ease-out infinite}
@keyframes lg112pl{0%{box-shadow:0 0 0 0 rgba(47,191,113,.45)}
  70%{box-shadow:0 0 0 7px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.lg112-vig-money{font-family:var(--font-d),sans-serif;font-size:1.7rem;font-weight:700;
  color:#fff;margin:12px 0 10px}
.lg112-vig-money span{font-family:var(--font),sans-serif;font-size:.8rem;
  font-weight:500;color:var(--muted-dark)}
.lg112-vig-row{display:flex;align-items:center;gap:9px;font-size:.84rem;color:#c6cede;
  padding:6px 0;border-top:1px solid rgba(34,51,84,.7)}
.lg112-vig-row b{margin-left:auto;color:#fff;font-weight:600;font-size:.8rem;white-space:nowrap}
.lg112-vdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.lg112-vdot.r{background:var(--red-dark)}.lg112-vdot.o{background:var(--accent2)}
.lg112-vdot.g{background:var(--live)}
.lg112-bp-foot{margin-top:auto;padding-top:32px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-size:.76rem;color:var(--muted-dark)}
.lg112-status{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#7fe0ab;white-space:nowrap}
.lg112-formside{width:460px;flex:0 1 460px;background:#fff;border-radius:0 24px 24px 0;
  box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;
  padding:38px 44px;overflow-y:auto}
.lg112-formside .login-wrap{max-width:372px;width:100%;background:transparent;
  box-shadow:none;border-radius:0;padding:0;text-align:left;backdrop-filter:none}
.lg112-formside .login-logo{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.lg112-formside h2.lg112-signin{font-size:1.45rem;font-weight:700;letter-spacing:-.015em;margin:2px 0 4px}
.lg112-formside .login-wrap label{font-size:.84rem;font-weight:600;margin:16px 0 6px}
.lg112-formside .login-wrap input:not([type="checkbox"]){height:44px;border-radius:11px;padding:0 40px 0 13px}
.lg112-formside .login-wrap .btn[type="submit"]{padding:12px;font-size:.95rem;border-radius:12px}
.lg112-formside .login-error{background:var(--red-soft);border:1px solid #f3c2c2;
  color:#8f1d1d;border-radius:11px}
.lg112-formside .consent-miss{outline:2px solid var(--red);outline-offset:4px;border-radius:8px}
.lg112-formside .login-notes{max-width:372px;width:100%;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh);border-radius:16px}
.lg112-formside .login-notes-toggle{margin-top:16px}
.lg112-notes-ic{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--accent)}
.lg112-formside .login-foot{color:var(--mut)}
.lg112-formside footer.login-foot{margin-top:auto;padding-top:22px;text-align:center}
@media (prefers-reduced-motion:reduce){.lg112-pulse{animation:none}}
@media (max-width:860px){
  .lg112-shell{padding:0;flex-direction:column;justify-content:flex-start}
  .lg112-brand{width:100%;flex:none;border-radius:0;padding:24px 22px 26px}
  .lg112-mid{margin-top:26px}
  .lg112-headline{font-size:2rem}
  .lg112-vig{display:none}
  .lg112-bp-foot{padding-top:20px}
  .lg112-formside{width:100%;flex:none;border-radius:0;box-shadow:none;padding:24px 22px 34px}
  .login-notes{display:none}
  .login-notes.open{display:block}
}

/* ZH kickers: no Latin tracking/uppercase transforms (spec §7). */
html[lang^="zh"] .lg112-kick,html[lang^="zh"] .d109-owed-label,
html[lang^="zh"] .sidenav .navsec{letter-spacing:.02em;text-transform:none}
html[lang^="zh"] body{line-height:1.65}
/* ---------- 0.112 fix round (beta shot review) ---------- */
.foxcmd-ic{background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#fff;border-radius:50%;width:34px;height:34px;padding:0;border:none;cursor:pointer}
.foxcmd-ic .foxglyph{width:19px;height:19px}
.lg112-formside .login-logo{justify-content:flex-start;text-align:left}
@media (min-width:761px){
  .sidenav{flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin}
}
@media (max-width:760px){
  .side .user{flex-direction:row;align-items:center}
  .side .user .signout-btn{width:auto}
}
/* 0.112 rail density: daily core + settings fit at 1000px. */
.side{padding:14px 12px 12px}
.side .sub{margin:2px 0 10px}
.side .rail-status{margin:0 0 6px}
.side .side-search{margin:0 0 4px}
@media (min-width:761px){
  .sidenav .navsec,.sidenav summary.navsec{margin:12px 10px 4px}
  .side .sidenav a{padding:7px 10px}
}
/* ---------- 0.112 amendments: back button + lightbox ---------- */
.backbtn{display:inline-flex;align-items:center;gap:2px;background:var(--card);
  border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:6px 12px 6px 8px;font:600 .85rem var(--font);cursor:pointer;
  box-shadow:var(--sh-sm);flex:none}
.backbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.backbtn .ric{width:16px;height:16px}
.backbtn[hidden]{display:none}
.lbx{position:fixed;inset:0;z-index:3200;background:rgba(10,17,32,.88);
  display:flex;align-items:center;justify-content:center}
.lbx[hidden]{display:none}
.lbx-img{max-width:92vw;max-height:88vh;border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);transition:transform .15s}
.lbx-x,.lbx-nav{position:absolute;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.lbx-x{top:14px;right:14px}
.lbx-nav{top:50%;transform:translateY(-50%)}
.lbx-prev{left:14px}.lbx-next{right:14px}
.lbx-x .ric,.lbx-nav .ric{width:20px;height:20px}
.lbx-nav[hidden]{display:none}
.lbx-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#fff;font:600 .85rem var(--font-m)}
/* ---------- 0.112 amendments: Classic nav + fluid dashboard grid ---------- */
@media (min-width:761px){
  .side.side-classic{width:292px}
  .side.side-classic .brand{font-size:1.3rem}
  .side.side-classic .sidenav a{padding:9px 12px;font-size:.95rem;gap:12px}
  .side.side-classic .sidenav .ric{width:20px;height:20px}
  .side.side-classic .sidenav .navsec,.side.side-classic .sidenav summary.navsec{margin:12px 10px 5px}
  .side.side-classic .rail-me-name{font-size:.97rem}
  .side.side-classic .side-search input{padding:9px 12px 9px 34px}
}
.dash109{max-width:none}
.dash109>.card{padding:14px 16px}
.d109-queue{padding:14px 16px}
.d109-money{padding:18px 20px}
@media (min-width:1280px){
  .dash109{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-flow:dense;align-items:stretch}
  .dash109>*{grid-column:span 6;min-width:0}
  .dash109>.d109-dateline,.dash109>.ann-strip,.dash109>.d109-pipeline,
  .dash109>.d109-secondary,.dash109>.d109-upcoming{grid-column:span 12}
  .dash109>.d109-money{grid-column:span 7}
  .dash109>.d109-queue{grid-column:span 5}
  .dash109>.d109-today{grid-column:span 5}
  .dash109>.d109-team{grid-column:span 7}
}

/* ---- Live App 0.116: message tools stay quiet ----
   Reply / react / pin / recall used to sit as always-on text links
   under every bubble. Now they fade in when the row is hovered or
   focused (and stay fully visible on touch screens). */
@media (hover:hover){
  .wx-msgs .msgtools,.msgpane .msgtools{opacity:0;transition:opacity .15s}
  .wx-msgs .chatmsg:hover .msgtools,.wx-msgs .chatmsg:focus-within .msgtools,
  .msgpane .chatmsg:hover .msgtools,.msgpane .chatmsg:focus-within .msgtools{opacity:1}
}
.seenline .ticks{color:var(--brand);letter-spacing:-2px;margin-right:2px}
.support-av{background:#fff7ed;color:#c2410c;display:inline-flex;align-items:center;justify-content:center}
.convo-ic .ric{width:19px;height:19px}
.convo-ic.support{background:#fff7ed;color:#c2410c}
.flame-chip .ric{width:12px;height:12px;vertical-align:-2px;color:#ea580c}
.announce-badge .ric{width:13px;height:13px;vertical-align:-2px}
.wx-tool .ric,.wx-iconbtn .ric,.wx-plus .ric{width:17px;height:17px}
.wx-iconbtn.lg .ric{width:19px;height:19px}
.msgtool .ric{width:13px;height:13px;vertical-align:-2px}
.fileic .ric{width:15px;height:15px;vertical-align:-3px}
.pet-chip .ric{width:13px;height:13px;vertical-align:-2px}
.wx-announce .ric{width:14px;height:14px;vertical-align:-2px}
.wx-muteic .ric{width:13px;height:13px;vertical-align:-2px}

/* ---- Live App 0.116: the Messages page ----
   The full-page size of the comms experience: same rows, same
   bubbles, same composer behaviour as the corner panel. Left =
   the shared conversation list (search, Support first, pinned,
   latest activity); right = the open thread. One tidy row of
   quick replies above the composer. */
.msgpage{display:grid;grid-template-columns:324px minmax(0,1fr);gap:0;
  height:calc(100dvh - 148px);min-height:420px;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.msglistpane{background:#f8fafc;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.msglist-head{display:flex;align-items:center;gap:8px;padding:14px 14px 8px}
.msglist-head h1{font-size:1.12rem;margin:0;flex:1}
.msgsearch{margin:0 14px 8px;display:flex;align-items:center;gap:6px;
  background:#eef1f5;border-radius:8px;padding:6px 9px;color:var(--mut)}
.msgsearch input{flex:1;background:none;border:0;color:var(--ink);
  font:inherit;font-size:.88rem;min-width:0;padding:0}
.msgsearch input:focus{outline:none}
.msgrows{flex:1;overflow-y:auto;min-height:0}
.msgrows .wx-row{display:flex;gap:10px;align-items:center;width:100%;
  padding:10px 14px;background:none;border:0;font:inherit;cursor:pointer;
  color:var(--ink);text-align:left;box-sizing:border-box;text-decoration:none}
.msgrows .wx-row:hover{background:#edf1f6;text-decoration:none}
.msgrows .wx-row.on{background:var(--brand-soft)}
.msgrows .convo-top b{color:var(--ink);font-weight:600}
.msgrows .convo-prev{color:var(--mut)}
.msgrows .wx-row.unread .convo-prev{color:var(--ink)}
.msgrows .convo-time{color:var(--faint)}
.msgrows .wx-count{color:var(--faint);font-size:.8rem}
.msgrows .convo-ic{background:#e8edf3;border-radius:8px;color:#475569}
.msgrows .convo-ic.support{background:#fff7ed;color:#c2410c}
.msgpane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
.msgmain{flex:1;min-height:0;display:flex;flex-direction:column}
.msgpane-head{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--line);min-height:57px;box-sizing:border-box}
.msgpane-head .avatar-face{flex-shrink:0}
.msgpane-title{flex:1;min-width:0;line-height:1.25}
.msgpane-title b{display:block;color:var(--ink);font-size:1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgpane-title span{font-size:.76rem;color:var(--mut)}
.msgpane-actions{display:flex;gap:2px;align-items:center}
.msgback{display:none;background:none;border:0;color:var(--ink);
  font-size:1.55rem;cursor:pointer;line-height:1;padding:2px 8px 2px 0}
.msgmemberstrip{display:flex;align-items:center}
.msgmemberstrip .avatar-face{margin-left:-6px;border:2px solid #fff}
.msgpinbar{display:flex;align-items:center;gap:8px;background:#fffbeb;
  border-bottom:1px solid #fde9c0;padding:7px 16px;font-size:.83rem;color:var(--ink)}
.msgpinbar[hidden]{display:none}
.msgpinbar-main{flex:1;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:0}
.msgpinbar-x{background:none;border:0;color:var(--mut);cursor:pointer}
.msgscroll{flex:1;overflow-y:auto;background:#f6f8fa;padding:12px 18px;min-height:0}
.msgloadbar{text-align:center;padding:2px 0 8px}
.msgquickrow{display:flex;align-items:center;gap:6px;padding:7px 14px;
  border-top:1px solid var(--line);background:#fff}
.msgquickitems{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  flex:1;scrollbar-width:none}
.msgquickitems::-webkit-scrollbar{display:none}
.msgquickbtn{background:#fff;border:1px solid var(--line);color:var(--ink);
  border-radius:99px;padding:4px 12px;font-size:.82rem;cursor:pointer;white-space:nowrap}
.msgquickbtn:hover{border-color:var(--brand);color:var(--brand)}
.msgreplybar,.msgimgstage,.msgrecbar{display:flex;align-items:center;gap:8px;
  background:#f8fafc;color:var(--ink);padding:7px 16px;font-size:.84rem;
  border-top:1px solid var(--line)}
.msgreplybar[hidden],.msgimgstage[hidden],.msgrecbar[hidden]{display:none}
.msgreplybar-txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgimgstage img{width:40px;height:40px;object-fit:cover;border-radius:6px}
.msgimgstage .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgcomposer{border-top:1px solid var(--line);background:#fff;padding:6px 14px 10px;
  display:flex;flex-direction:column}
.msgtoolbar{display:flex;align-items:center;gap:4px;position:relative}
.msgtool-btn{background:none;border:0;color:#64748b;cursor:pointer;
  padding:5px 7px;border-radius:6px;line-height:1;display:inline-flex;align-items:center}
.msgtool-btn:hover{background:#eef1f5;color:var(--ink)}
.msgtool-btn .ric{width:17px;height:17px}
.msgannounce{margin-left:auto;color:var(--mut);font-size:.8rem;display:flex;
  align-items:center;gap:5px;cursor:pointer}
.msgannounce .ric{width:14px;height:14px}
.msgcomposer textarea{background:none;border:0;color:var(--ink);font:inherit;
  font-size:.95rem;resize:none;padding:6px 2px;min-height:44px;width:100%;
  box-sizing:border-box}
.msgcomposer textarea:focus{outline:none}
.msgcomposer-foot{display:flex;align-items:center;justify-content:space-between}
.msghint{color:var(--faint);font-size:.72rem}
.msgsend{background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:7px 24px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.msgsend:hover{background:#d14d06}
.msgempty{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;color:var(--faint);font-size:.92rem;padding:24px;text-align:center}
.msgmentionwrap{position:relative;flex:1;display:flex}
.msgmentionpop{position:absolute;bottom:calc(100% + 6px);left:0;width:250px;
  max-height:min(400px,60vh);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px;z-index:6;
  box-shadow:0 10px 28px rgba(16,24,40,.18);display:flex;flex-direction:column}
.msgmentionpop[hidden]{display:none}
.msgemojipanel{position:absolute;bottom:calc(100% + 8px);left:0;width:308px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;z-index:5;
  box-shadow:0 10px 28px rgba(16,24,40,.18)}
.msgemojipanel[hidden]{display:none}
.msgemojiitem{background:none;border:0;font-size:1.15rem;cursor:pointer;
  padding:5px;border-radius:6px}
.msgemojiitem:hover{background:#eef1f5}
.msgrecdot{width:9px;height:9px;border-radius:50%;background:#fa5151;
  animation:wxblink 1s infinite}
@media (max-width:900px){
  .msgpage{grid-template-columns:264px minmax(0,1fr)}
}
@media (max-width:760px){
  .msgpage{grid-template-columns:1fr;height:calc(100dvh - 132px)}
  .msglistpane{border-right:0}
  .msgpage.has-active .msglistpane{display:none}
  .msgpane{display:none}
  .msgpage.has-active .msgpane{display:flex}
  .msgback{display:block}
  .msghint{display:none}
}

/* ---------- p127: nav collapse button + drag-to-reorder ----------
   Behaviour-only additions: no existing nav rule above changes.
   The collapse button flips the same .side-classic class the
   Profile.nav_style preference renders (Settings radio = the
   other writer). It shows only where the desktop shell layout is
   unambiguous (>=861px); below that the rail is the mobile top
   strip / tab bar and the Settings radio remains the toggle.
   In Classic it pins to the nav's top-right corner; in Compact
   it sits as a centred chip under the brand mark, pointing the
   way it will expand. Drag affordances: grab cursor, a lifted
   dragged row, and an accent insertion line at the drop slot. */
.navcollapse{display:none}
@media (min-width:861px){
  .navcollapse{display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;padding:0;border-radius:8px;cursor:pointer;
    background:transparent;border:1px solid var(--line);color:var(--mut)}
  .navcollapse:hover{background:var(--panel2);color:var(--ink)}
  .navcollapse:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 35%, #ffffff);outline-offset:1px}
  .navcollapse .ric{width:16px;height:16px;transition:transform .15s ease}
  .side.side-classic .navcollapse{position:absolute;top:16px;right:12px;z-index:5}
  .side:not(.side-classic) .navcollapse{align-self:center;margin:0 0 6px;flex:0 0 auto}
  .side:not(.side-classic) .navcollapse .ric{transform:rotate(180deg)}
  [data-navbox] > a[data-navitem]{cursor:grab;-webkit-touch-callout:none}
  [data-navbox] > a.navdragging{cursor:grabbing;opacity:.9;position:relative;z-index:6;
    background:var(--panel2);box-shadow:0 10px 24px rgba(2,6,18,.25)}
  [data-navbox] > a.navdrop-before{box-shadow:inset 0 3px 0 var(--accent)}
  [data-navbox] > a.navdrop-after{box-shadow:inset 0 -3px 0 var(--accent)}
  [data-navbox] > a.navdrop-before.on{box-shadow:inset 0 3px 0 var(--accent),inset 3px 0 0 var(--accent)}
  [data-navbox] > a.navdrop-after.on{box-shadow:inset 0 -3px 0 var(--accent),inset 3px 0 0 var(--accent)}
}
@media (prefers-reduced-motion: reduce){
  .navcollapse .ric{transition:none}
}

/* ---------- p129: motion & feedback wave ----------
   Subtle, fast (<=200ms), reduced-motion safe. Consistency only:
   no colour changes, no layout changes. */

/* Modals: backdrop fades in, the card rises a few px. Applies to
   the one confirm/dialog pattern and the calendar modal, which
   share the .open toggle. */
@keyframes crmFadeIn{from{opacity:0}to{opacity:1}}
@keyframes crmCardIn{from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}}
.crmmodal.open,.calmodal.open{animation:crmFadeIn .18s ease-out}
.crmmodal.open .crmmodal-card,.calmodal.open .calmodal-card{
  animation:crmCardIn .18s ease-out}

/* The comms/Fox panel fades + settles when it opens (it toggles
   [hidden], so the animation restarts on every open). */
@keyframes petIn{from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}}
.pet-panel{animation:petIn .18s ease-out}

/* Buttons: a 1px press so taps visibly land. */
.btn{transition:transform .12s ease}
.btn:active{transform:translateY(1px)}

/* Skeleton shimmer for slow panel loads (Fox history). Static
   under reduced motion. */
.skel{border-radius:10px;min-height:34px;
  background:linear-gradient(100deg,#e8ecf1 40%,#f5f7fa 50%,#e8ecf1 60%);
  background-size:200% 100%;animation:skelShimmer 1.15s linear infinite}
@keyframes skelShimmer{from{background-position:120% 0}to{background-position:-80% 0}}
.skel-row{display:flex;flex-direction:column;gap:8px;padding:2px 0}

/* Thin scrollbars on the scrolling panes that did not have them
   (the nav rail and mail pane already carry their own). */
.pet-log,.comms-list,.comms-msgs,.msglist,.grouppick{
  scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.28) transparent}
.pet-log::-webkit-scrollbar,.comms-list::-webkit-scrollbar,
.comms-msgs::-webkit-scrollbar,.msglist::-webkit-scrollbar,
.grouppick::-webkit-scrollbar{width:6px;height:6px}
.pet-log::-webkit-scrollbar-thumb,.comms-list::-webkit-scrollbar-thumb,
.comms-msgs::-webkit-scrollbar-thumb,.msglist::-webkit-scrollbar-thumb,
.grouppick::-webkit-scrollbar-thumb{background:rgba(15,23,42,.28);
  border-radius:3px}
.pet-log::-webkit-scrollbar-track,.comms-list::-webkit-scrollbar-track,
.comms-msgs::-webkit-scrollbar-track,.msglist::-webkit-scrollbar-track,
.grouppick::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion: reduce){
  .crmmodal.open,.calmodal.open,.crmmodal.open .crmmodal-card,
  .calmodal.open .calmodal-card,.pet-panel{animation:none}
  .skel{animation:none}
  .btn{transition:none}
  .toast{animation:none}
  .toast.out{transition:none}
}

/* ---------- p134: Messages opens BIG + full-page polish ----------
   The full-page Messages view is the default chat surface again
   (pet.js/context carry the entry changes). This section is the
   page's finish pass, inside the existing tokens only: switch
   skeleton, row feedback, a capped bubble measure, day-divider
   chips, a growing composer and small-screen tightening. The
   corner panel's geometry is untouched. */

/* Thread-switch skeleton (markup injected by msgpage.js; the
   .skel block itself is p129's, reused as-is). */
.msgskel{display:flex;flex-direction:column;gap:10px;padding:2px 0}
.msgskel .skel{min-height:36px}
.msgskel .skel.mine{align-self:flex-end}

/* Conversation rows: visible hover/focus feedback (the rows are
   focusable divs — a keyboard user needs the focus ring). */
.msgrows .wx-row{transition:background .12s ease}
.msgrows .wx-row:focus-visible{outline:3px solid
  color-mix(in srgb, var(--brand) 35%, #ffffff);outline-offset:-3px}
.msgrows-noresults{padding:14px;color:var(--mut);font-size:.88rem;
  text-align:center;margin:0}

/* Day/time dividers read as quiet centred chips on the page. */
.msgpane .timediv{width:fit-content;margin:14px auto 6px;
  padding:2px 10px;background:#e8edf3;border-radius:99px}

/* Bubbles keep a readable measure on wide panes instead of
   stretching with the window (page only — the panel keeps its
   own measure). */
.msgpane .chatmsg .bubblewrap{max-width:min(75%,680px)}

/* Composer: the textarea auto-grows in JS; this is the matching
   cap + scroll backstop, and Send gets the p129 press. */
.msgcomposer textarea{max-height:150px;overflow-y:auto}
.msgsend{transition:transform .12s ease,background .12s ease}
.msgsend:active{transform:translateY(1px)}

/* The emoji grid can never push past a small screen. */
.msgemojipanel{width:min(308px,calc(100vw - 40px))}

/* the member face strip is decorative — cap it so a big org can
   never squeeze the room title, and drop it entirely on phones
   (members stay reachable via the group Members button) */
.msgmemberstrip{max-width:38vw;overflow:hidden;flex-shrink:1}
@media (max-width:760px){
  .msgscroll{padding:10px 12px}
  .msgmemberstrip{display:none}
}
@media (prefers-reduced-motion: reduce){
  .msgrows .wx-row,.msgsend{transition:none}
}

/* ---- p139: Messages as a large popup overlay (msgpopup.js).
   The overlay hosts the page's own .msgpage markup, so these
   rules only frame it: window chrome, sizing, stacking and the
   full-screen small-viewport form. z-index 1200 sits above the
   shell, the corner panel (60/70) and the call cards (90), and
   below the app modals (1400), toasts (1500) and the image
   viewer (3200) — surfaces the popup itself can open. While the
   popup is open the page underneath is scroll-locked and the
   corner launcher/panel are hidden, so nothing can overlap the
   composer (the FAB-over-Send collision on the old page view). */
.msgpop{position:fixed;inset:0;z-index:1200;display:flex;
  align-items:center;justify-content:center}
.msgpop[hidden]{display:none}
.msgpop-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}
.msgpop-window{position:relative;width:min(1120px,94vw);
  height:min(780px,90vh);background:#fff;border-radius:16px;
  box-shadow:0 24px 70px rgba(2,6,23,.42);display:flex;
  flex-direction:column;overflow:hidden}
.msgpop-bar{display:flex;align-items:center;gap:8px;flex:none;
  padding:8px 10px 8px 16px;background:#f8fafc;
  border-bottom:1px solid var(--line)}
.msgpop-title{flex:1;font-weight:700;color:var(--ink)}
.msgpop-x{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:0;border-radius:9px;background:none;
  color:var(--mut);cursor:pointer}
.msgpop-x:hover{background:#edf1f6;color:var(--ink)}
.msgpop-x .ric{width:18px;height:18px}
.msgpop-body{flex:1;min-height:0;display:flex}
.msgpop-body .msgpage{flex:1;min-width:0;height:auto;min-height:0;
  border:0;border-radius:0}
html.msgpop-open{overflow:hidden}
.msgpop-open .pet-root{visibility:hidden}
@media (max-width:760px){
  .msgpop-window{width:100vw;height:100dvh;border-radius:0}
}

/* ---- p142: Messages window FLOATS (non-modal, msgpopup.js).
   Mark (2026-10-29 20:07): with the chat window open you can
   still interact with the CRM — move between tabs and chat at
   the same time. These rules override the p139 overlay frame
   above: the root no longer covers the viewport (pointer
   events pass through everything except the window itself),
   there is no backdrop and no scroll lock, and the window is
   positioned absolutely — centred by default, explicitly
   placed once dragged (position persists per user). Stacking
   is unchanged: z-index 1200, above page content and the
   corner panel (60/70) and call cards (90), below the app
   modals / confirm dialogs (1400), toasts (1500) and the
   image viewer (3200). */
.msgpop{position:fixed;inset:0;z-index:1200;display:block;
  pointer-events:none}
.msgpop[hidden]{display:none}
.msgpop-backdrop{display:none}
.msgpop-window{pointer-events:auto;position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.msgpop-window.msgpop-placed{transform:none}
html.msgpop-open{overflow:visible}
.msgpop-open .pet-root{visibility:visible}
.msgpop-bar{cursor:grab;touch-action:none;-webkit-user-select:none;
  user-select:none}
.msgpop-bar:active{cursor:grabbing}
html.msgpop-drag,html.msgpop-drag *{user-select:none!important}
.msgpop-window.msgpop-min{height:auto}
.msgpop-min .msgpop-body{display:none}
@media (max-width:760px){
  .msgpop-window{left:0;top:0;transform:none}
  .msgpop-bar{cursor:default}
}
/* ==== p141b: project files card (SPEC-V2) ==== */
.pfx .pf-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.pfx .pf-files{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;background:#fff}
.pfx .pf-files.pf-over{outline:2px solid var(--brand);outline-offset:-2px}
.pfx .pf-currentset{border-bottom:1px solid var(--line);background:#fbfcfe;padding:12px 16px 13px}
.pfx .pf-cshead{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.pfx .pf-cshead b{font-size:.83rem;letter-spacing:.01em}
.pfx .pf-cshead .muted{font-size:.78rem}
.pfx .pf-tiles{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.pfx .pf-tiles::-webkit-scrollbar{display:none}
.pfx .pf-tile{flex:0 0 168px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;display:block}
.pfx .pf-tile:hover{border-color:#f0b98f}
.pfx .pf-tile:focus-visible,.pfx .pf-frow2 a:focus-visible,.pfx .pf-frow:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pfx .pf-timg{height:86px;background:#eef2f8;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #edf1f6;overflow:hidden}
.pfx .pf-timg img{width:100%;height:100%;object-fit:cover}
.pfx .pf-tico{font-size:30px}
.pfx .pf-tmeta{padding:7px 9px 8px;display:block}
.pfx .pf-tname{font-size:.8rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere;display:block}
.pfx .pf-tsub{font-size:.72rem;color:var(--mut);margin-top:2px;display:block}
.pfx .pf-recent{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px dashed #e6ebf2;font-size:.78rem;color:var(--mut)}
.pfx .pf-recent b{color:var(--ink2);font-weight:600}
.pfx .pf-who{color:var(--ink2);font-weight:600}
.pfx .pf-bdg{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:2px 8px;vertical-align:2px;white-space:nowrap}
.pfx .pf-bdg.cur{background:var(--green-bg);color:var(--green-d)}
.pfx .pf-bdg.ver{background:#eef2f8;color:var(--mut);font-weight:600;letter-spacing:0}
.pfx .pf-bdg.old{background:var(--amber-bg);color:var(--amber)}
.pfx .pf-panes{display:flex;min-height:340px}
.pfx .pf-rail{width:232px;flex:0 0 232px;border-right:1px solid var(--line);padding:12px 10px;background:#fbfcfe;display:flex;flex-direction:column}
.pfx .pf-frow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;color:var(--ink2);font-size:.83rem;cursor:pointer}
.pfx .pf-frow:hover{background:#f0f3f8}
.pfx .pf-frow.on{background:var(--brand-soft);color:var(--brand-d);font-weight:600}
.pfx .pf-frow .pf-cnt{margin-left:auto;color:var(--faint);font-size:.78rem;font-weight:400}
.pfx .pf-rail .pf-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.pfx .pf-fhint{font-size:.72rem;color:var(--faint);padding:0 9px 6px;line-height:1.35}
.pfx .pf-meter{height:6px;border-radius:3px;background:#e8edf4;overflow:hidden;margin:6px 0 4px}
.pfx .pf-meter i{display:block;height:100%;background:var(--brand);border-radius:3px}
.pfx .pf-main{flex:1;min-width:0;padding:14px 16px}
.pfx .pf-crumbs{color:var(--mut);font-size:.83rem}
.pfx .pf-crumbs b{color:var(--ink);font-weight:600}
.pfx .pf-chips{display:none;gap:8px;overflow-x:auto;padding:6px 0 2px;scrollbar-width:none}
.pfx .pf-chips::-webkit-scrollbar{display:none}
.pfx .pf-chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.83rem;min-height:40px;display:inline-flex;align-items:center;cursor:pointer;color:var(--ink2)}
.pfx .pf-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pfx .pf-srch{display:flex;gap:8px;align-items:center;margin:10px 0 4px;flex-wrap:wrap}
.pfx .pf-sbox{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;background:#fff;color:var(--faint)}
.pfx .pf-sbox input{border:0;outline:0;flex:1;font:inherit;font-size:.83rem;color:var(--ink);background:transparent;min-width:0}
.pfx .pf-sbox kbd{font-family:inherit;font-size:.72rem;color:var(--faint);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:#fbfcfe}
.pfx .pf-srch select{font:inherit;font-size:.8rem;border:1px solid var(--line);border-radius:9px;padding:6px 8px;background:#fff;color:var(--ink2);width:auto;flex:0 0 auto}
.pfx .pf-autoname{display:flex;align-items:center;gap:8px}
.pfx .pf-autoname input{flex:1;width:auto;min-width:0}
.pfx .pf-tchip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.8rem;cursor:pointer;color:var(--ink2)}
.pfx .pf-tchip:hover{border-color:#f0b98f}
.pfx .pf-tchip.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.pfx .pf-viewtog{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pfx .pf-viewtog a{padding:6px 11px;font-size:.8rem;color:var(--mut);text-decoration:none;background:#fff}
.pfx .pf-viewtog a.on{background:var(--brand-soft);color:var(--brand-d);font-weight:600}
.pfx .pf-upbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.pfx .pf-foldertools{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.pfx .pf-frow2{display:flex;align-items:center;gap:12px;padding:9px 8px;border-bottom:1px solid #edf1f6;color:inherit;position:relative}
.pfx .pf-frow2:last-child{border-bottom:0}
.pfx .pf-frow2:hover{background:#fafbfd}
.pfx .pf-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--line);flex:0 0 48px;background:#eef2f8}
.pfx .pf-fico{width:48px;height:48px;border-radius:8px;background:var(--brand-soft);display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 48px}
.pfx .pf-fmeta{flex:1;min-width:0}
.pfx .pf-fname{font-weight:550;overflow-wrap:anywhere;display:block}
.pfx .pf-fname a{color:inherit;text-decoration:none}
.pfx .pf-fname a:hover{text-decoration:underline}
.pfx .pf-fname .pf-bdg{margin-left:7px}
.pfx .pf-fsub{color:var(--mut);font-size:.8rem;margin-top:1px;display:block}
.pfx .pf-iconbtn{border:1px solid var(--line);background:#fff;border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);font-size:15px;text-decoration:none;flex:0 0 auto}
.pfx .pf-iconbtn:hover{border-color:#f0b98f}
.pfx [hidden]{display:none!important}
.pfx .pf-grid{display:flex;flex-wrap:wrap;gap:12px;padding:8px 0}
.pfx .pf-gtile{flex:0 0 148px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.pfx .pf-gtile a{text-decoration:none;color:inherit;display:block}
.pfx .pf-gtile:hover{border-color:#f0b98f}
.pfx .pf-gimg{height:96px;background:#eef2f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pfx .pf-gimg img{width:100%;height:100%;object-fit:cover}
.pfx .pf-gtile .pf-tname{padding:7px 9px 0}
.pfx .pf-gtile .pf-tsub{padding:0 9px 8px}
.pfx .pf-queue{border:1px solid #f3ddcd;background:#fffaf6;border-radius:10px;padding:10px 12px;margin:10px 0}
.pfx .pf-qhead{font-size:.78rem;font-weight:700;color:var(--brand-d);letter-spacing:.02em;margin-bottom:4px}
.pfx .pf-qrow{display:flex;align-items:center;gap:10px;font-size:.83rem;padding:5px 0;flex-wrap:wrap}
.pfx .pf-qn{flex:0 1 260px;overflow-wrap:anywhere}
.pfx .pf-qbar{flex:1;min-width:80px;height:6px;background:#f3ddcd;border-radius:3px;overflow:hidden}
.pfx .pf-qbar i{display:block;height:100%;background:var(--brand)}
.pfx .pf-ok{color:var(--green);font-weight:600}
.pfx .pf-bad{color:var(--red);font-weight:600}
.pfx .pf-dedup{color:var(--blue);font-weight:600}
.pfx .pf-retry{border:1px solid var(--red);color:var(--red);background:#fff;border-radius:8px;padding:4px 12px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.pfx .pf-qx{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:13px;padding:2px 6px}
.pfx .pf-sheet{border:1px solid var(--line);background:#fbfcfe;border-radius:10px;padding:10px 12px;margin:10px 0}
.pfx .pf-sheetrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.83rem}
.pfx .pf-sheetrow input{flex:1;min-width:160px;font:inherit;font-size:.83rem;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.pfx .pf-menu{position:absolute;right:8px;top:44px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.12);padding:5px;min-width:190px}
.pfx .pf-menu button{display:flex;width:100%;gap:8px;align-items:center;border:0;background:transparent;font:inherit;font-size:.83rem;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--ink2);text-align:left}
.pfx .pf-menu button:hover{background:#f0f3f8}
.pfx .pf-veil{position:absolute;inset:0;background:rgba(253,240,233,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:5;text-align:center;padding:20px}
.pfx .pf-veil-big{font-size:1.3rem;font-weight:700;color:var(--brand-d)}
.pfx .pf-veil-safe{font-size:.83rem;color:var(--mut);line-height:1.5}
.pfx .pf-modal{position:fixed;inset:0;z-index:200}
.pfx .pf-modal-bg{position:absolute;inset:0;background:rgba(16,24,40,.45)}
.pfx .pf-prevwrap{position:relative;display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;max-width:1060px;margin:4vh auto;max-height:92vh}
.pfx .pf-prevmain{flex:1;min-width:0;display:flex;flex-direction:column}
.pfx .pf-prevhead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pfx .pf-pn{font-weight:650;font-size:1.05rem;overflow-wrap:anywhere}
.pfx .pf-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;z-index:2}
.pfx .pf-prevbody{background:#eef1f6;padding:18px;display:flex;justify-content:center;overflow:auto}
.pfx .pf-prevbody img{max-width:100%;max-height:62vh;background:#fff}
.pfx .pf-prevbody iframe{width:100%;height:62vh;border:1px solid #d5dce8;background:#fff}
.pfx .pf-hist{width:264px;flex:0 0 264px;border-left:1px solid var(--line);background:#fbfcfe;padding:14px;overflow:auto}
.pfx .pf-hist h3{margin:0 0 10px;font-size:.83rem;letter-spacing:.02em}
.pfx .pf-vrow{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;background:#fff}
.pfx .pf-vrow.cur{border-color:#bfe6cc;background:var(--green-bg)}
.pfx .pf-vt{display:flex;align-items:center;gap:7px;font-weight:650;font-size:.83rem}
.pfx .pf-vs{font-size:.76rem;color:var(--mut);margin-top:2px;line-height:1.4}
.pfx .pf-va{margin-top:5px;font-size:.78rem}
.pfx .pf-va a{color:var(--brand-d);font-weight:600;text-decoration:none}
.pfx .pf-supbanner{display:flex;gap:10px;align-items:flex-start;background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:10px;padding:11px 13px;font-size:.83rem}
.pfx .pf-actionbar{display:none}
.pfx .pf-capture{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:14px;background:#fff}
.pfx .pf-autoname{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-top:12px;font-size:.83rem;background:#fbfcfe;flex-wrap:wrap}
.pfx .pf-autoname input{flex:1;min-width:180px;font:inherit;font-size:.83rem;border:0;background:transparent;font-weight:600}
.pfx .pf-destrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pfx .pf-note{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-top:12px;font:inherit;font-size:.83rem}
.pfx .pf-saveline{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.8rem;color:var(--mut)}
@media (max-width:760px){
  .pfx .pf-panes{flex-direction:column;min-height:0}
  .pfx .pf-rail{display:none}
  .pfx .pf-chips{display:flex}
  .pfx .pf-prevwrap{flex-direction:column;margin:2vh 8px;max-height:94vh}
  .pfx .pf-hist{width:auto;flex:none;border-left:0;border-top:1px solid var(--line)}
  .pfx .pf-tile{flex-basis:150px}
  .pfx .pf-actionbar{display:flex;gap:10px;padding:12px 0 2px;position:sticky;bottom:0;background:#fff}
  .pfx .pf-actionbar .btn{flex:1;min-height:52px}
  .pfx .pf-sbox kbd{display:none}
  .pfx .pf-main{padding:12px}
}
/* ==== p141b: end project files card ==== */

/* ==== p143 sorter ==== */
/* Smart Upload / AI Sorter (UX v2, approved demo files2-sorter).
   Class names and layout are the demo's own; colours ride the
   app tokens. */
.sortdrop{border:2px dashed #f0b98f;background:#fffaf6;border-radius:14px;padding:26px 20px;text-align:center;cursor:pointer}
.sortdrop.over{border-color:var(--brand);background:var(--brand-soft)}
.sortdrop .big{font-size:1.2rem;font-weight:700;color:var(--brand-d)}
.sortdrop .sub{color:var(--mut);font-size:var(--fs-sm);margin-top:5px;line-height:1.5}
.sortdrop .paths{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.streamtag{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;border-radius:999px;padding:4px 12px}
.streamtag.fin{background:var(--blue-bg);color:var(--blue)}
.streamtag.proj{background:var(--brand-soft);color:var(--brand-d)}
.sortgroup{margin-top:18px}
.sortgroup .sghead{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.sortgroup .sghead h3{margin:0;font-size:var(--fs)}
.pcard{display:flex;gap:13px;border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:10px;background:#fff;align-items:flex-start}
.pcard.low{border-color:var(--amber-line);background:#fffdf8}
.pcard .thumb{width:58px;height:58px;flex-basis:58px}
.pcard .fico{width:58px;height:58px;flex-basis:58px;font-size:24px}
.pmeta{flex:1;min-width:0}
.pdest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:var(--fs-sm)}
.pdest .arrow{color:var(--faint)}
.pdest .dest{font-weight:650;color:var(--ink)}
.conf{font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.conf.hi{background:var(--green-bg);color:var(--green-d)}
.conf.md{background:#eef2f8;color:var(--mut)}
.conf.lo{background:var(--amber-bg);color:var(--amber)}
.fields{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:7px;font-size:.82rem;color:var(--ink2)}
.fields b{font-weight:650}
.fields .unc{color:var(--amber);font-weight:700}
.checkline{margin-top:6px;font-size:.8rem;display:flex;gap:7px;align-items:flex-start;line-height:1.45}
.checkline.okk{color:var(--green-d)}
.checkline.warn{color:var(--amber)}
.pactions{display:flex;flex-direction:column;gap:7px;flex:0 0 auto}
.btn.confirm{background:var(--green)}
.btn.change{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:600}
.bulkbar{display:flex;align-items:center;gap:12px;background:#16233a;color:#dbe4f2;border-radius:12px;padding:11px 15px;margin-top:14px;font-size:var(--fs-sm);flex-wrap:wrap}
.bulkbar .btn{background:var(--green)}
.bulkbar .mut{color:#93a5c0}
.sorter-health{display:none;border:1px solid var(--amber-line);background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:10px 13px;margin-top:12px;font-size:var(--fs-sm)}
.sorter-health.on{display:block}
.changeform{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;display:none}
.changeform.on{display:block}
.changeform .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px}
.changeform label{font-size:.78rem;color:var(--mut);display:block}
.changeform input,.changeform select{width:100%;margin-top:3px}
.changeform .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (max-width:760px){
  .pcard{flex-wrap:wrap}
  .pactions{flex-direction:row;flex-wrap:wrap}
}