/* WHITE GOLD MEDIA CRM — Visual & Motion System (Phase 5X)
 * ──────────────────────────────────────────────────────────────
 * Full cream canvas. Black reserved for ink + the single dashboard
 * hero band. Coral is the action colour. Gold reserved for brand
 * moments (logo, section underlines, ghost-button borders,
 * in-production badges, hero cap).
 *
 * 12-hat-reviewed: brand, motion, typography, UX-writing, frontend,
 * PHP-integration, mobile, a11y, performance, QA, scope, strategy.
 * ──────────────────────────────────────────────────────────────*/

/* ── ROOT TOKENS — locked palette ─────────────────────────────*/
:root{
  /* Canvas + chrome */
  --wgm-cream:        #FAF6EF;
  --wgm-chrome:       #F5EFE4;
  --wgm-sand:         #E8D5B7;
  --wgm-white:        #FFFFFF;

  /* Ink */
  --wgm-ink:          #0A0A0A;
  --wgm-ink-muted:    #5F5E5A;
  --wgm-ink-subtle:   #B4B2A9;
  /* Ink-on-dark — for text rendered over dark inline backgrounds (#111113, #1a1a1d, etc.)
     Used by pricing-engine number inputs and dropdowns that have hardcoded dark backgrounds. */
  --wgm-ink-on-dark:  #F4F0E6;

  /* Brand */
  --wgm-gold:         #C9A961;
  --wgm-gold-soft:    rgba(201,169,97,0.6);
  --wgm-gold-bg:      rgba(201,169,97,0.10);

  /* Action */
  --wgm-coral:        #FF6B5B;
  --wgm-coral-deep:   #C04430;      /* destructive confirm only */
  --wgm-coral-glow:   rgba(255,107,91,0.15);
  --wgm-coral-bg:     rgba(255,107,91,0.08);

  /* Support */
  --wgm-peach:        #FFB088;
  --wgm-peach-text:   #4A1B0C;
  --wgm-peach-bg:     rgba(255,176,136,0.20);

  /* Semantic */
  --wgm-sage:         #8FA68E;
  --wgm-sage-text:    #FFFFFF;
  --wgm-sage-bg:      rgba(143,166,142,0.18);

  /* Motion */
  --ease-out-quart:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:         150ms;
  --dur-med:          300ms;
  --dur-slow:         420ms;

  /* Shape */
  --r-sm: 6px;
  --r:    10px;
  --rlg:  14px;
  --rxl:  18px;

  /* Shadow — warm tints instead of grey */
  --shadow-sm:  0 1px 2px rgba(74,27,12,.06);
  --shadow:     0 2px 6px rgba(74,27,12,.07), 0 1px 2px rgba(74,27,12,.04);
  --shadow-lg:  0 10px 30px rgba(74,27,12,.10), 0 3px 8px rgba(74,27,12,.06);
  --shadow-xl:  0 20px 50px rgba(74,27,12,.12), 0 6px 16px rgba(74,27,12,.08);

  /* ── Legacy aliases (keeps existing class references working) ── */
  --ink:       var(--wgm-ink);
  --ink2:      #2a2824;
  --ink3:      var(--wgm-ink-muted);
  --ink4:      var(--wgm-ink-subtle);
  --gold:      var(--wgm-gold);
  --gold2:     #D8BA75;
  --gold-bg:   var(--wgm-gold-bg);
  --surface:   var(--wgm-white);
  --surface2:  var(--wgm-cream);
  --surface3:  var(--wgm-chrome);
  --border:    rgba(232,213,183,0.55);
  --border2:   var(--wgm-sand);
  --green:     var(--wgm-sage);
  --green-bg:  var(--wgm-sage-bg);
  --red:       var(--wgm-coral);
  --red-bg:    var(--wgm-coral-bg);
  --amber:     var(--wgm-gold);
  --amber-bg:  var(--wgm-gold-bg);
  --blue:      #6B8BB0;       /* muted warm blue, stays honest */
  --blue-bg:   rgba(107,139,176,0.10);
  --purple:    #A88CC7;
  --purple-bg: rgba(168,140,199,0.10);
  --teal:      #6FA89E;
  --teal-bg:   rgba(111,168,158,0.10);
}

/* ── RESET ────────────────────────────────────────────────────*/
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--wgm-cream);
  color:var(--wgm-ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.brand,.ft-display{
  font-family:'Fraunces','Playfair Display',Georgia,serif;
  font-weight:500;
  letter-spacing:-0.01em;
}
h1,.ft-display.lg{font-variation-settings:"opsz" 48}
button{cursor:pointer;font-family:'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
::selection{background:var(--wgm-peach);color:var(--wgm-peach-text)}

/* Scrollbars — warm */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--wgm-sand);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--wgm-ink-subtle)}

/* Focus rings — coral glow replaces browser outline everywhere */
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px var(--wgm-coral-glow); border-radius:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  box-shadow:0 0 0 3px var(--wgm-coral-glow);
}

/* ── MOTION — keyframes + classes + reduced-motion ───────────*/
@keyframes wgm-fade-up{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes wgm-toast-in{0%{opacity:0;transform:translate3d(0,-18px,0)scale(.97)}60%{opacity:1;transform:translate3d(0,3px,0)scale(1.01)}100%{opacity:1;transform:translate3d(0,0,0)scale(1)}}
@keyframes wgm-toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes wgm-badge-pulse{0%,100%{opacity:1}50%{opacity:.66}}
@keyframes wgm-skeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}

.wgm-reveal{opacity:0}
.wgm-reveal.in{animation:wgm-fade-up var(--dur-med) var(--ease-out-quart) forwards}
.wgm-route-fade{animation:wgm-fade-up var(--dur-med) var(--ease-out-quart)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .wgm-reveal{opacity:1}
}

/* ── LOGIN ───────────────────────────────────────────────────*/
#login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--wgm-cream);padding:1.5rem;position:relative;overflow:hidden;
}
#login-screen::before{
  content:'';position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,var(--wgm-peach-bg) 0%,transparent 70%);
  top:-140px;right:-160px;pointer-events:none;
}
#login-screen::after{
  content:'';position:absolute;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,var(--wgm-gold-bg) 0%,transparent 70%);
  bottom:-100px;left:-80px;pointer-events:none;
}
.login-card{
  background:var(--wgm-white);
  border:1px solid var(--wgm-sand);
  border-radius:20px;padding:2.5rem;width:100%;max-width:420px;
  box-shadow:var(--shadow-xl);position:relative;z-index:1;
}
.login-logo{text-align:center;margin-bottom:2rem}
.login-wordmark{
  font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:500;
  color:var(--wgm-ink);letter-spacing:-.6px;font-variation-settings:"opsz" 48;
}
.login-wordmark span{color:var(--wgm-gold);font-style:italic}
.login-tagline{
  font-size:10px;color:var(--wgm-ink-muted);letter-spacing:.14em;
  text-transform:uppercase;margin-top:6px;font-weight:500;
}
.login-label{font-size:10px;font-weight:600;color:var(--wgm-ink-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;margin-top:4px}
.login-input{
  width:100%;padding:12px 16px;border-radius:10px;
  border:1px solid var(--wgm-sand);background:var(--wgm-cream);
  color:var(--wgm-ink);font-size:14px;font-family:'DM Sans',sans-serif;
  margin-bottom:12px;outline:none;transition:border-color var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart);
}
.login-input:focus{border-color:var(--wgm-coral);box-shadow:0 0 0 3px var(--wgm-coral-glow)}
.login-input::placeholder{color:var(--wgm-ink-subtle)}
.login-btn{
  width:100%;padding:14px;border-radius:10px;border:none;
  background:var(--wgm-coral);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.04em;transition:transform var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart);
  min-height:44px;
}
@media (hover:hover){.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,91,.25)}}
.login-btn:active{transform:scale(.98)}
.login-btn:disabled{opacity:.55;cursor:not-allowed}
.login-err{font-size:12px;color:var(--wgm-coral-deep);text-align:center;margin-top:10px;min-height:16px}
.login-link{font-size:12px;color:var(--wgm-ink-muted);text-align:center;margin-top:14px;cursor:pointer;transition:color var(--dur-fast)}
.login-link:hover{color:var(--wgm-ink)}

/* ── APP SHELL ────────────────────────────────────────────────*/
#app{display:none;min-height:100vh;flex-direction:column;background:var(--wgm-cream)}
#app.visible{display:flex}

/* Top bar — cream, ink text, sand hairline. No dark chrome. */
.topbar{
  background:var(--wgm-chrome);
  height:56px;display:flex;align-items:center;padding:0 22px;gap:14px;
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--wgm-sand);
  flex-shrink:0;
}
.topbar-brand{
  font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;
  color:var(--wgm-ink);flex:1;letter-spacing:-.3px;font-variation-settings:"opsz" 48;
}
.topbar-brand span{color:var(--wgm-gold);font-style:italic}
.role-pill{
  font-size:10px;font-weight:600;padding:4px 11px;border-radius:99px;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--wgm-peach-bg);color:var(--wgm-peach-text);
}
.topbar-actions{display:flex;gap:6px;align-items:center}
.topbar-btn{
  font-size:11px;color:var(--wgm-ink-muted);padding:6px 12px;border-radius:8px;
  border:1px solid var(--wgm-sand);background:transparent;
  transition:all var(--dur-fast) var(--ease-out-quart);min-height:36px;
}
.topbar-btn:hover{color:var(--wgm-ink);background:var(--wgm-white);border-color:var(--wgm-ink-subtle)}
.layout{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── SIDEBAR — chrome + peach active ─────────────────────────*/
.sidebar{
  width:224px;background:var(--wgm-chrome);
  border-right:1px solid var(--wgm-sand);
  display:flex;flex-direction:column;padding:14px 0;flex-shrink:0;overflow-y:auto;
}
.nav-section{
  font-size:10px;font-weight:600;color:var(--wgm-ink-muted);
  letter-spacing:.12em;text-transform:uppercase;padding:14px 20px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--wgm-ink);
  transition:background var(--dur-fast) var(--ease-out-quart),transform var(--dur-fast) var(--ease-out-quart);
  border-left:3px solid transparent;margin:1px 0;min-height:44px;
}
.nav-item:hover{background:rgba(255,255,255,.5);transform:translateX(1px)}
.nav-item.active{
  background:var(--wgm-peach-bg);
  color:var(--wgm-peach-text);
  border-left-color:var(--wgm-peach);
  font-weight:600;
}
.nav-item .ni{font-size:13px;opacity:.7;flex-shrink:0}
.nav-item.active .ni{opacity:1}
.nav-item .badge-count{
  margin-left:auto;background:var(--wgm-coral);color:#fff;
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;
}
.nav-divider{height:1px;background:var(--wgm-sand);margin:8px 0}

/* ── MAIN ─────────────────────────────────────────────────────*/
.main{flex:1;overflow-y:auto;padding:22px;background:var(--wgm-cream);min-height:0}

/* Page header ------------------------------------------------*/
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.page-title{
  font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:500;
  color:var(--wgm-ink);line-height:1.15;letter-spacing:-.02em;
  font-variation-settings:"opsz" 48;
}
.page-sub{font-size:13px;color:var(--wgm-ink-muted);margin-top:4px;line-height:1.5}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Section title — the carry-through pattern -----------------*/
.section-title,.table-title,.fin-title{
  display:inline-block;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  color:var(--wgm-ink);text-transform:uppercase;letter-spacing:.1em;
  padding-bottom:3px;margin-bottom:14px;
  border-bottom:2px solid var(--wgm-gold);
}

/* ── BUTTONS — coral primary, gold-bordered ghost, sand tertiary */
.btn{
  padding:10px 18px;border-radius:10px;font-size:12px;font-weight:600;
  border:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart),background var(--dur-fast) var(--ease-out-quart);
  min-height:44px;min-width:44px;justify-content:center;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Primary — coral */
.btn-primary,.btn-gold{
  background:var(--wgm-coral);color:#fff;
  box-shadow:0 2px 6px rgba(255,107,91,.20);
}
@media (hover:hover){.btn-primary:hover,.btn-gold:hover{background:#FF5847;transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,107,91,.28)}}

/* Ghost — gold border, ink text */
.btn-ghost{
  background:transparent;color:var(--wgm-ink);
  border:1px solid var(--wgm-gold);
}
@media (hover:hover){.btn-ghost:hover{background:var(--wgm-gold-bg);transform:translateY(-1px)}}

/* Tertiary — sand border, quieter */
.btn-tertiary{
  background:transparent;color:var(--wgm-ink);
  border:1px solid var(--wgm-sand);
}
@media (hover:hover){.btn-tertiary:hover{background:var(--wgm-white);border-color:var(--wgm-ink-subtle)}}

/* Danger — deep coral for destructive */
.btn-danger{
  background:transparent;color:var(--wgm-coral-deep);
  border:1px solid rgba(192,68,48,.30);
}
@media (hover:hover){.btn-danger:hover{background:rgba(192,68,48,.08);border-color:var(--wgm-coral-deep)}}

.btn-sm{padding:7px 14px;font-size:11px;min-height:36px}
.btn-xs{padding:4px 10px;font-size:10px;border-radius:7px;min-height:28px;min-width:28px}

/* Inline select */
.inline-select{
  font-size:11px;padding:5px 26px 5px 10px;border-radius:7px;
  border:1px solid var(--wgm-sand);background:var(--wgm-white);
  color:var(--wgm-ink);outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235F5E5A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.inline-select:focus{border-color:var(--wgm-coral);box-shadow:0 0 0 3px var(--wgm-coral-glow)}

/* Dropdown menu helpers */
.dropdown-menu{display:none!important}
.dropdown-menu.open{display:block!important;background:var(--wgm-white)!important;border:1px solid var(--wgm-sand)!important;box-shadow:var(--shadow-lg)!important}

/* ── KPI CARDS ───────────────────────────────────────────────*/
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin-bottom:20px}
.kpi-card{
  background:var(--wgm-white);border-radius:var(--rlg);
  padding:16px 18px;border:1px solid var(--wgm-sand);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart);
}
@media (hover:hover){.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.kc-label{font-size:10px;font-weight:600;color:var(--wgm-ink-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.kc-val{
  font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:500;
  color:var(--wgm-ink);line-height:1;font-variation-settings:"opsz" 48;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;
}
.kc-sub{font-size:11px;color:var(--wgm-ink-muted);margin-top:6px}
.kpi-card.green .kc-val{color:var(--wgm-sage)}
.kpi-card.gold  .kc-val{color:var(--wgm-gold)}
.kpi-card.red   .kc-val{color:var(--wgm-coral)}
.kpi-card.blue  .kc-val{color:var(--blue)}

/* ── TABLE CARD ──────────────────────────────────────────────*/
.table-card{
  background:var(--wgm-white);border-radius:var(--rlg);
  border:1px solid var(--wgm-sand);box-shadow:var(--shadow-sm);
  overflow:hidden;margin-bottom:16px;
  transition:box-shadow var(--dur-fast) var(--ease-out-quart);
}
@media (hover:hover){.table-card:hover{box-shadow:var(--shadow)}}
.table-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--wgm-sand);
  gap:10px;flex-wrap:wrap;
}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:var(--wgm-chrome)}
th{
  padding:11px 14px;text-align:left;font-size:10px;font-weight:700;
  color:var(--wgm-ink-muted);letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--wgm-sand);white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid rgba(232,213,183,.5);color:var(--wgm-ink);vertical-align:middle}
tbody tr{transition:background var(--dur-fast) var(--ease-out-quart)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--wgm-chrome)}
.td-main{font-weight:500;color:var(--wgm-ink);font-size:13px}
.td-sub{font-size:10px;color:var(--wgm-ink-muted);margin-top:2px}

/* ── SEARCH INPUT ────────────────────────────────────────────*/
.search-input{
  padding:8px 14px;border-radius:9px;
  border:1px solid var(--wgm-sand);background:var(--wgm-white);
  font-size:12px;color:var(--wgm-ink);outline:none;width:200px;
  font-family:'DM Sans',sans-serif;
  transition:border-color var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart);
  min-height:36px;
}
.search-input:focus{border-color:var(--wgm-coral);box-shadow:0 0 0 3px var(--wgm-coral-glow)}
.search-input::placeholder{color:var(--wgm-ink-subtle)}

/* ── BADGES ──────────────────────────────────────────────────*/
.badge{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;
  font-size:10px;font-weight:500;white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;
}
.b-green{background:var(--wgm-sage-bg);color:var(--wgm-sage)}
.b-red  {background:var(--wgm-coral-bg);color:var(--wgm-coral-deep)}
.b-amber,.b-gold{background:var(--wgm-gold-bg);color:var(--wgm-gold)}
.b-blue {background:var(--blue-bg);color:var(--blue)}
.b-purple{background:var(--purple-bg);color:var(--purple)}
.b-teal {background:var(--teal-bg);color:var(--teal)}
.b-grey {background:var(--wgm-sand);color:var(--wgm-ink-muted)}
.b-ink  {background:var(--wgm-ink);color:var(--wgm-cream)}
.b-peach{background:var(--wgm-peach);color:var(--wgm-peach-text)}
.b-coral{background:var(--wgm-coral);color:#fff}
.b-sage {background:var(--wgm-sage);color:var(--wgm-sage-text)}

/* Attention pulse — only when an item needs action */
.badge.needs-action{animation:wgm-badge-pulse 2s ease-in-out infinite}

/* ── CONFIRMATION DIALOG ─────────────────────────────────────*/
.confirm-overlay{
  position:fixed;inset:0;z-index:10000;background:rgba(10,10,10,.45);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out-quart);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.confirm-overlay.open{opacity:1}
.confirm-dialog{
  background:var(--wgm-white);border:1px solid var(--wgm-sand);
  border-radius:var(--rxl);padding:26px;max-width:420px;width:90%;
  box-shadow:var(--shadow-xl);
  transform:scale(.96) translateY(8px);transition:transform var(--dur-med) var(--ease-out-quart);
}
.confirm-overlay.open .confirm-dialog{transform:scale(1) translateY(0)}
.confirm-title{
  font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:500;
  margin-bottom:10px;color:var(--wgm-ink);letter-spacing:-.01em;
}
.confirm-msg{font-size:13px;color:var(--wgm-ink-muted);line-height:1.55;margin-bottom:22px}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.confirm-dialog .btn-danger{background:var(--wgm-coral-deep);color:#fff;border:none}
.confirm-dialog .btn-danger:hover{background:#A0351F}
.confirm-dialog .btn-warning{background:var(--wgm-gold);color:var(--wgm-ink);border:none}
.confirm-dialog .btn-warning:hover{filter:brightness(1.05)}
.confirm-dialog .btn-primary{background:var(--wgm-coral);color:#fff;border:none}

/* ── REQUIRED FIELD INDICATOR ───────────────────────────────*/
.required::after{content:' *';color:var(--wgm-coral);font-weight:700}

/* ── STAGE BADGES — warm palette mapping ────────────────────*/
.stage{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:99px;
  font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
}
.stage::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.s-enquiry   {background:var(--wgm-coral-bg);color:var(--wgm-coral-deep)}.s-enquiry::before   {background:var(--wgm-coral)}
.s-quote     {background:var(--wgm-gold-bg); color:var(--wgm-gold)}      .s-quote::before     {background:var(--wgm-gold)}
.s-awaiting  {background:var(--wgm-gold-bg); color:var(--wgm-gold)}      .s-awaiting::before  {background:var(--wgm-gold)}
.s-confirmed {background:var(--wgm-peach-bg);color:var(--wgm-peach-text)}.s-confirmed::before {background:var(--wgm-peach)}
.s-planning  {background:var(--wgm-peach-bg);color:var(--wgm-peach-text)}.s-planning::before  {background:var(--wgm-peach)}
.s-shoot     {background:var(--wgm-gold-bg); color:var(--wgm-gold)}      .s-shoot::before     {background:var(--wgm-gold)}
.s-post      {background:var(--wgm-gold-bg); color:var(--wgm-gold)}      .s-post::before      {background:var(--wgm-gold)}
.s-ready     {background:var(--wgm-sage-bg); color:var(--wgm-sage)}      .s-ready::before     {background:var(--wgm-sage)}
.s-delivered {background:var(--wgm-sage-bg); color:var(--wgm-sage)}      .s-delivered::before {background:var(--wgm-sage)}

/* List-row treatment: 3px stage-coloured left border on white cards.
   Apply .row-stage + one of .row-s-new/.row-s-quoted/.row-s-approved/
   .row-s-production/.row-s-complete to any <tr> / .list-row.                */
.row-stage{border-left:3px solid transparent}
.row-s-new       {border-left-color:var(--wgm-coral)}
.row-s-quoted    {border-left-color:var(--wgm-gold)}
.row-s-approved  {border-left-color:var(--wgm-peach)}
.row-s-production{border-left-color:var(--wgm-gold)}
.row-s-complete  {border-left-color:var(--wgm-sage)}

/* ── KANBAN ──────────────────────────────────────────────────
   Phase 5Y — Was grid+overflow-x; on phones the grid silently collapsed
   each column to ~zero width and caused letter-per-line wrap. Flex with
   flex-shrink:0 keeps columns readable and triggers horizontal scroll
   on narrow viewports. scroll-snap-type:x proximity gives a tidy swipe. */
.kanban{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity
}
.kanban-col{
  flex:1 0 280px;max-width:380px;
  background:var(--wgm-chrome);border-radius:var(--rlg);padding:12px;
  min-height:200px;border:1px solid var(--wgm-sand);
  scroll-snap-align:start
}
@media (max-width:640px){
  .kanban-col{flex:0 0 280px}
}
.kanban-col-hdr{
  font-size:10px;font-weight:700;color:var(--wgm-ink);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;border-bottom:2px solid var(--wgm-gold);
}
.kanban-col-hdr .cnt{background:var(--wgm-white);border-radius:99px;padding:2px 8px;font-size:10px;color:var(--wgm-ink-muted)}
.kanban-card{
  background:var(--wgm-white);border-radius:10px;padding:12px;margin-bottom:8px;
  border:1px solid var(--wgm-sand);box-shadow:var(--shadow-sm);
  cursor:pointer;transition:transform var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart);
  border-left:3px solid var(--wgm-gold);
}
@media (hover:hover){.kanban-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}}
.kc-ref    {font-size:10px;font-weight:600;color:var(--wgm-ink-muted);margin-bottom:4px}
.kc-name   {font-family:'Fraunces',Georgia,serif;font-size:15px;font-weight:500;color:var(--wgm-ink);margin-bottom:4px;letter-spacing:-.01em;font-variation-settings:"opsz" 24}
.kc-service{font-size:11px;color:var(--wgm-ink-muted)}

/* ── KANBAN — DRAG STATES (Session 2a) ──────────────────────*/
/* Source card while dragging: dim in place */
.kanban-chosen{opacity:.55;filter:saturate(.7)}
/* Floating clone under cursor: lift + slight tilt + deep shadow */
.kanban-drag{
  transform:rotate(1.8deg) scale(1.03)!important;
  box-shadow:0 18px 36px -12px rgba(10,10,10,.22), 0 4px 10px rgba(10,10,10,.08)!important;
  border-left-color:var(--wgm-coral)!important;
  cursor:grabbing;
}
/* Ghost placeholder left in the list */
.kanban-ghost{
  opacity:.35;background:var(--wgm-sand)!important;
  border:1px dashed var(--wgm-gold)!important;
  box-shadow:none!important;
  color:transparent;
}
.kanban-ghost *{visibility:hidden}
/* Drop-snap: brief spring settle after drop lands */
.kanban-just-dropped{
  animation:wgm-drop-snap .36s cubic-bezier(.22,1,.36,1) both;
  box-shadow:0 6px 14px rgba(201,169,97,.28)!important;
  border-left-color:var(--wgm-gold)!important;
}
@keyframes wgm-drop-snap{
  0%  {transform:scale(1.04) rotate(.8deg)}
  55% {transform:scale(.98) rotate(0)}
  100%{transform:scale(1) rotate(0)}
}

/* ── TASK BOARD ──────────────────────────────────────────────*/
.task-list{display:flex;flex-direction:column;gap:5px}
.task-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--wgm-white);border:1px solid var(--wgm-sand);
  transition:background var(--dur-fast) var(--ease-out-quart);
}
.task-item:hover{background:var(--wgm-chrome)}
.task-item.done{opacity:.55}
.task-check{
  width:20px;height:20px;border-radius:5px;border:2px solid var(--wgm-sand);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast) var(--ease-out-quart);margin-top:1px;background:var(--wgm-white);
}
.task-check.checked{background:var(--wgm-sage);border-color:var(--wgm-sage);color:#fff;font-size:10px}
.task-content{flex:1;min-width:0}
.task-title{font-size:13px;color:var(--wgm-ink);line-height:1.45}
.task-item.done .task-title{text-decoration:line-through;color:var(--wgm-ink-muted)}
.task-meta{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.task-priority{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.04em;text-transform:uppercase}
.tp-low{background:var(--wgm-sage-bg);color:var(--wgm-sage)}
.tp-medium{background:var(--wgm-gold-bg);color:var(--wgm-gold)}
.tp-high{background:var(--wgm-peach-bg);color:var(--wgm-peach-text)}
.tp-urgent{background:var(--wgm-coral-bg);color:var(--wgm-coral-deep)}
.task-due{font-size:10px;color:var(--wgm-ink-muted)}
.task-due.overdue{color:var(--wgm-coral-deep);font-weight:600}
.task-assignee{font-size:10px;color:var(--wgm-ink-muted)}
.milestone-item{border-left:3px solid var(--wgm-gold);padding-left:12px;margin-bottom:7px}
.milestone-item .task-title{font-weight:500;font-family:'Fraunces',Georgia,serif;font-size:14px;letter-spacing:-.01em}

/* ── CHAT ────────────────────────────────────────────────────*/
.chat-wrap{display:flex;flex-direction:column;height:340px;background:var(--wgm-chrome);border-radius:var(--rlg);overflow:hidden;border:1px solid var(--wgm-sand)}
.chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.chat-msg{display:flex;flex-direction:column;max-width:78%}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg.theirs{align-self:flex-start;align-items:flex-start}
.chat-bubble{padding:9px 13px;border-radius:14px;font-size:12px;line-height:1.5;word-break:break-word}
.chat-msg.mine .chat-bubble{background:var(--wgm-coral);color:#fff;border-bottom-right-radius:3px}
.chat-msg.theirs .chat-bubble{background:var(--wgm-white);color:var(--wgm-ink);border:1px solid var(--wgm-sand);border-bottom-left-radius:3px}
.chat-meta-line{font-size:10px;color:var(--wgm-ink-muted);margin-top:3px;padding:0 4px}
.chat-input-row{display:flex;gap:7px;padding:10px;border-top:1px solid var(--wgm-sand);background:var(--wgm-white)}
.chat-input{flex:1;padding:9px 14px;border-radius:99px;border:1px solid var(--wgm-sand);background:var(--wgm-white);font-size:12px;font-family:'DM Sans',sans-serif;outline:none;color:var(--wgm-ink)}
.chat-input:focus{border-color:var(--wgm-coral);box-shadow:0 0 0 3px var(--wgm-coral-glow)}
.chat-send{width:36px;height:36px;border-radius:50%;border:none;background:var(--wgm-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--dur-fast) var(--ease-out-quart);flex-shrink:0}
.chat-send:hover{transform:scale(1.05)}
.chat-send:active{transform:scale(.96)}

/* ── MODAL ───────────────────────────────────────────────────*/
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,10,10,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:50px 16px 16px;overflow-y:auto;
}
.modal-overlay.open{display:flex;animation:wgm-fade-up var(--dur-med) var(--ease-out-quart)}
.modal{
  background:var(--wgm-white);border-radius:var(--rxl);width:100%;max-width:580px;
  box-shadow:var(--shadow-xl);position:relative;border:1px solid var(--wgm-sand);
}
.modal-hdr{padding:22px 24px 0;display:flex;align-items:center;justify-content:space-between}
.modal-title{
  font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;
  color:var(--wgm-ink);letter-spacing:-.01em;font-variation-settings:"opsz" 48;
}
.modal-close{width:32px;height:32px;border-radius:8px;border:none;background:var(--wgm-chrome);font-size:16px;color:var(--wgm-ink-muted);display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast)}
.modal-close:hover{background:var(--wgm-sand);color:var(--wgm-ink)}
.modal-body{padding:18px 24px;overflow-y:auto;max-height:65vh}
.modal-footer{padding:16px 24px;border-top:1px solid var(--wgm-sand);display:flex;gap:8px;justify-content:flex-end;background:var(--wgm-chrome);border-bottom-left-radius:var(--rxl);border-bottom-right-radius:var(--rxl)}

/* ── FORM ────────────────────────────────────────────────────*/
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
.form-group label{
  font-size:10px;font-weight:700;color:var(--wgm-ink-muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.form-group input,.form-group select,.form-group textarea{
  padding:10px 12px;border-radius:9px;
  border:1px solid var(--wgm-sand);background:var(--wgm-white);
  color:var(--wgm-ink);font-size:13px;font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) var(--ease-out-quart);
  width:100%;min-height:40px;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--wgm-coral);box-shadow:0 0 0 3px var(--wgm-coral-glow);
}
.form-group textarea{resize:vertical;min-height:80px}
.form-hint{font-size:10px;color:var(--wgm-ink-muted);margin-top:2px}
.ref-popover{background:var(--wgm-gold-bg);border:1px solid rgba(201,169,97,.3);border-radius:10px;padding:12px 14px;margin-top:8px}
.ref-popover-label{font-size:10px;font-weight:700;color:var(--wgm-gold);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}

/* ── FINANCE PANELS ──────────────────────────────────────────*/
.fin-section{background:var(--wgm-white);border-radius:var(--rlg);padding:20px;margin-bottom:14px;border:1px solid var(--wgm-sand);box-shadow:var(--shadow-sm)}
.fin-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fin-kpi{background:var(--wgm-chrome);border-radius:10px;padding:14px;border:1px solid var(--wgm-sand)}
.fk-label{font-size:10px;color:var(--wgm-ink-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.fk-val{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-.01em;font-variation-settings:"opsz" 36;font-variant-numeric:tabular-nums lining-nums}
.fk-g .fk-val{color:var(--wgm-sage)}
.fk-gold .fk-val{color:var(--wgm-gold)}
.fk-r .fk-val{color:var(--wgm-coral)}
.fk-b .fk-val{color:var(--blue)}
.fin-table{width:100%;border-collapse:collapse;font-size:12px}
.fin-table th{padding:9px 12px;font-size:10px;font-weight:700;color:var(--wgm-ink-muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--wgm-sand);text-align:left}
.fin-table td{padding:9px 12px;border-bottom:1px solid rgba(232,213,183,.4);color:var(--wgm-ink)}

/* Finance sub-tabs */
.fin-tab{
  padding:8px 14px;border-radius:8px;border:1px solid transparent;
  background:transparent;font-size:11px;font-weight:600;color:var(--wgm-ink-muted);
  cursor:pointer;transition:all var(--dur-fast);
}
.fin-tab:hover{color:var(--wgm-ink);background:var(--wgm-chrome)}
.fin-tab.active{color:var(--wgm-ink);background:var(--wgm-white);border-color:var(--wgm-gold);box-shadow:var(--shadow-sm)}

/* ── DOCUMENT PREVIEW — cream with gold brand moments ───────*/
.doc-preview{background:var(--wgm-white);border-radius:var(--rlg);border:1px solid var(--wgm-sand);box-shadow:var(--shadow-lg);max-width:680px;margin:0 auto;color:var(--wgm-ink)}
.doc-preview .doc-body{color:var(--wgm-ink)}
.doc-hdr{padding:22px 26px;border-bottom:1px solid var(--wgm-sand);display:flex;justify-content:space-between;align-items:flex-start}
.doc-brand{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:500;color:var(--wgm-ink);font-variation-settings:"opsz" 48}
.doc-brand span{color:var(--wgm-gold);font-style:italic}
.doc-brand-sub{font-size:10px;color:var(--wgm-ink-muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.doc-brand-contact{font-size:11px;color:var(--wgm-ink-muted);margin-top:10px;line-height:1.6}
.doc-type-area{text-align:right}
.doc-type-name{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:500;letter-spacing:-.01em;font-variation-settings:"opsz" 48}
.doc-type-ref{font-size:11px;color:var(--wgm-ink-muted);margin-top:3px;font-family:'JetBrains Mono',monospace}
.doc-type-meta{font-size:11px;color:var(--wgm-ink-muted);margin-top:10px;line-height:1.6}
.doc-meta{padding:18px 26px;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-bottom:1px solid var(--wgm-sand)}
.doc-meta-lbl{font-size:10px;color:var(--wgm-ink-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.doc-meta-val{font-size:13px;line-height:1.55;color:var(--wgm-ink)}
.doc-items{width:100%;border-collapse:collapse}
.doc-items th{background:var(--wgm-chrome);padding:11px 26px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--wgm-ink-muted);text-align:left}
.doc-items td{padding:12px 26px;border-bottom:1px solid rgba(232,213,183,.5)}
.doc-totals{padding:18px 26px;background:var(--wgm-chrome);display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.doc-trow{display:flex;justify-content:space-between;width:320px;font-size:12px}
.doc-trow .dl{color:var(--wgm-ink-muted)}
.doc-trow .dv{font-weight:600}
.doc-trow.grand{border-top:2px solid var(--wgm-gold);padding-top:10px;margin-top:6px;font-size:14px}
.doc-trow.grand .dl,.doc-trow.grand .dv{color:var(--wgm-ink);font-weight:700}

/* ── DASHBOARD HERO BAND — the ONE dark editorial moment ────*/
.dash-hero{
  background:var(--wgm-ink);color:var(--wgm-cream);
  margin:-22px -22px 22px;          /* full-bleed over .main padding */
  padding:38px 36px 32px;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(201,169,97,.15);
}
.dash-hero-cap{
  font-size:11px;font-weight:600;color:var(--wgm-gold);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
}
.dash-hero-greet{
  font-family:'Fraunces',Georgia,serif;font-size:34px;font-weight:400;
  line-height:1.15;letter-spacing:-.015em;color:var(--wgm-cream);
  font-variation-settings:"opsz" 48;
}
.dash-hero-greet .name{color:var(--wgm-peach);font-style:italic}
.dash-hero-sub{font-size:12px;color:var(--wgm-ink-subtle);margin-top:10px;line-height:1.55}
.dash-hero-hair{
  position:absolute;right:32px;bottom:28px;width:40px;height:1px;
  background:var(--wgm-gold-soft);pointer-events:none;
}
@media (max-width:640px){
  .dash-hero{padding:28px 20px 24px;margin:-22px -22px 18px}
  .dash-hero-greet{font-size:26px}
  .dash-hero-hair{display:none}
}

/* ── ALERTS ──────────────────────────────────────────────────*/
.alert{padding:11px 14px;border-radius:10px;font-size:12px;line-height:1.5;margin:10px 0;border:1px solid}
.alert.a-amber{background:var(--wgm-gold-bg);border-color:rgba(201,169,97,.35);color:var(--wgm-ink)}
.alert.a-red  {background:var(--wgm-coral-bg);border-color:rgba(255,107,91,.35);color:var(--wgm-coral-deep)}
.alert.a-green{background:var(--wgm-sage-bg);border-color:rgba(143,166,142,.35);color:var(--wgm-sage)}
.alert.a-blue {background:var(--blue-bg);border-color:rgba(107,139,176,.35);color:var(--blue)}

/* ── TOASTS ──────────────────────────────────────────────────*/
.toast-wrap{position:fixed;top:18px;right:18px;z-index:10001;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 36px)}
.toast{
  pointer-events:auto;background:var(--wgm-white);color:var(--wgm-ink);
  border:1px solid var(--wgm-sand);border-radius:12px;padding:12px 16px;
  font-size:13px;line-height:1.45;box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;min-width:260px;max-width:380px;
  animation:wgm-toast-in var(--dur-med) var(--ease-out-quart);
}
.toast.success{border-color:rgba(143,166,142,.5)}
.toast.success::after,.toast.error::after,.toast.info::after,.toast.warn::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  transform-origin:left center;
  animation:wgm-toast-progress 4s linear forwards;
}
.toast.success::after{background:var(--wgm-sage)}
.toast.error{border-color:rgba(255,107,91,.5);color:var(--wgm-coral-deep)}
.toast.error::after{background:var(--wgm-coral)}
.toast.info{border-color:var(--wgm-sand);color:var(--wgm-ink-muted)}
.toast.info::after{background:var(--wgm-ink-subtle)}
.toast.warn{border-color:rgba(201,169,97,.5)}
.toast.warn::after{background:var(--wgm-gold)}

/* ── SKELETON — warm sand, not grey ─────────────────────────*/
.skeleton{
  background:linear-gradient(90deg,var(--wgm-chrome) 0%,var(--wgm-sand) 50%,var(--wgm-chrome) 100%);
  background-size:200% 100%;
  animation:wgm-skeleton 1.4s ease-in-out infinite;
  border-radius:8px;min-height:14px;
}
.skel-line{height:12px;border-radius:6px;margin:6px 0}
.skel-line.short{width:40%}
.skel-line.med  {width:66%}
.skel-line.long {width:88%}

/* ── EMPTY STATES ────────────────────────────────────────────*/
.empty-state{text-align:center;padding:60px 20px;color:var(--wgm-ink-muted)}
.empty-shape{
  width:96px;height:96px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--wgm-peach) 0%,var(--wgm-peach-bg) 80%);
  opacity:.75;
}
.empty-title{
  font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;
  color:var(--wgm-ink);margin-bottom:8px;letter-spacing:-.01em;
}
.empty-msg{font-size:13px;line-height:1.55;max-width:380px;margin:0 auto 18px}
.empty-action{display:inline-block}

/* ── LOADING OVERLAY ─────────────────────────────────────────*/
#loading-overlay{position:fixed;inset:0;background:rgba(250,246,239,.8);backdrop-filter:blur(6px);z-index:9999;display:none;align-items:center;justify-content:center}
#loading-overlay.visible{display:flex}
.loading-card{background:var(--wgm-white);border:1px solid var(--wgm-sand);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg);font-size:12px;color:var(--wgm-ink-muted)}
.loading-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--wgm-sand);border-top-color:var(--wgm-coral);
  animation:wgm-spin 0.8s linear infinite;
}
@keyframes wgm-spin{to{transform:rotate(360deg)}}

/* ── API BAR ─────────────────────────────────────────────────*/
#api-bar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--wgm-coral);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease-out-quart);z-index:9998}
#api-bar.loading{transform:scaleX(.6);animation:wgm-api-bar 1.5s ease-in-out infinite}
@keyframes wgm-api-bar{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(.85)}}

/* ── DROPDOWN MENU — cream refresh ──────────────────────────*/
.dropdown-menu.open>div{color:var(--wgm-ink)}
.dropdown-menu.open>div:hover{background:var(--wgm-chrome)!important;color:var(--wgm-ink)}

/* ── RESPONSIVE — mobile (iOS Safari first) ──────────────────*/
@media (max-width:820px){
  .sidebar{position:fixed;left:0;top:56px;bottom:0;transform:translateX(-100%);transition:transform var(--dur-med) var(--ease-out-quart);z-index:99;box-shadow:var(--shadow-xl)}
  .sidebar.open{transform:translateX(0)}
  .main{padding:18px}
  .page-title{font-size:22px}
  .form-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:1fr}
}
@media (max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .kpi-card{padding:14px}
  .kc-val{font-size:22px}
  .topbar{padding:0 14px}
}

/* Safe-area for iOS notch/home-indicator */
@supports(padding:max(0px)){
  .topbar{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  .main{padding-bottom:max(22px,env(safe-area-inset-bottom))}
}

/* Reduce motion: neutralise hover lifts + kanban tilt/snap (Session 2a) */
@media (prefers-reduced-motion: reduce){
  .btn:hover,.kpi-card:hover,.kanban-card:hover,.table-card:hover{transform:none!important}
  .kanban-drag,.kanban-just-dropped{transform:none!important;animation:none!important}
}

/* ── DOC VIEW-MODE ADJUSTMENTS (in-CRM printable preview) ───*/
.doc-preview .doc-hdr{background:var(--wgm-cream)}

/* ═══════════════════════════════════════════════════════════
 * SESSION 2a HOTFIX — COMPAT BLOCK
 * Restores 128 legacy class rules that were dropped from the
 * Session 1 rewrite. Legacy var(--surface/ink/border/etc.)
 * tokens are aliased to the new cream palette at :root, so
 * these rules inherit the refresh automatically. Any remaining
 * hard-coded dark colours below have been remapped to ink/cream.
 * ═══════════════════════════════════════════════════════════ */

/* ── ALERT BANNERS ───────────────────────────────────────────*/
.alert-banner{border-radius:var(--r);padding:10px 14px;font-size:12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;line-height:1.5;border:1px solid}
.alert-amber{background:var(--wgm-gold-bg);border-color:rgba(201,169,97,.35);color:var(--wgm-ink)}
.alert-red  {background:var(--wgm-coral-bg);border-color:rgba(255,107,91,.35);color:var(--wgm-coral-deep,var(--wgm-coral))}
.alert-green{background:var(--wgm-sage-bg);border-color:rgba(143,166,142,.35);color:var(--wgm-sage)}
.alert-blue {background:var(--blue-bg);border-color:rgba(107,139,176,.35);color:var(--blue)}

/* ── CALENDAR ───────────────────────────────────────────────*/
.cal-wrap{background:var(--wgm-white);border-radius:var(--rlg);border:1px solid var(--wgm-sand);box-shadow:var(--shadow-sm);overflow:hidden}
.cal-hdr{background:var(--wgm-chrome);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--wgm-sand)}
.cal-month{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;color:var(--wgm-ink);letter-spacing:-.01em;font-variation-settings:"opsz" 36}
.cal-nav{display:flex;gap:6px}
.cal-nav-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--wgm-sand);background:var(--wgm-white);color:var(--wgm-ink);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.cal-nav-btn:hover{background:var(--wgm-cream);border-color:var(--wgm-gold)}
.cal-today-btn{padding:5px 12px;border-radius:8px;border:1px solid var(--wgm-gold);background:transparent;color:var(--wgm-ink);font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.cal-today-btn:hover{background:var(--wgm-gold-bg)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day-hdr{padding:9px 4px;text-align:center;font-size:10px;font-weight:700;color:var(--wgm-ink-muted);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--wgm-sand);background:var(--wgm-cream)}
.cal-cell{min-height:92px;padding:5px;border-right:1px solid rgba(232,213,183,.5);border-bottom:1px solid rgba(232,213,183,.5);background:var(--wgm-white);position:relative}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.other-month{background:var(--wgm-cream)}
.cal-cell.other-month .cal-date-num{color:var(--wgm-ink-subtle)}
.cal-cell.today{background:var(--wgm-gold-bg)}
.cal-cell.today .cal-date-num{background:var(--wgm-gold);color:var(--wgm-ink);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:700}
.cal-date-num{font-size:11px;font-weight:500;color:var(--wgm-ink);margin-bottom:3px;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.cal-event{font-size:9px;font-weight:600;padding:2px 5px;border-radius:4px;margin-bottom:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.cal-event:hover{opacity:.82}
.ev-shoot      {background:rgba(255,176,136,.22);color:var(--wgm-coral-deep,#b8472f)}
.ev-plan       {background:rgba(168,140,199,.18);color:#7654a3}
.ev-deliver    {background:var(--wgm-sage-bg);color:var(--wgm-sage)}
.ev-followup   {background:var(--wgm-gold-bg);color:#876e2d}
.ev-meeting    {background:var(--blue-bg);color:var(--blue)}
.ev-studio     {background:rgba(45,180,170,.16);color:#1f7872}
.ev-retainer   {background:rgba(168,140,199,.18);color:#7654a3}
.ev-mktdeadline{background:rgba(232,121,249,.16);color:#a63cb5}
.ev-task       {background:var(--wgm-gold-bg);color:#876e2d}
.ev-deposit    {background:var(--wgm-coral-bg);color:var(--wgm-coral-deep,#b8472f)}
.ev-balance    {background:var(--wgm-sage-bg);color:var(--wgm-sage)}
/* Phase 5Z — fix mismatched class names + add new event-type categories */
.ev-deposit_due{background:var(--wgm-coral-bg);color:var(--wgm-coral-deep,#b8472f)}
.ev-balance_due{background:var(--wgm-sage-bg);color:var(--wgm-sage)}
.ev-client_promise{background:rgba(201,168,76,.16);color:#876e2d;font-weight:700}
.ev-deliverable{background:rgba(45,180,170,.12);color:#1f7872}
.ev-other      {background:var(--wgm-cream);color:var(--wgm-ink-muted)}
.ev-planning   {background:rgba(168,140,199,.18);color:#7654a3}
.cal-extra{font-size:9px;color:var(--wgm-ink-muted);padding:1px 3px}
.cal-legend{display:flex;flex-wrap:wrap;gap:10px;padding:10px 16px;border-top:1px solid var(--wgm-sand);background:var(--wgm-cream)}
.cal-leg{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--wgm-ink-muted)}
.cal-leg-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}

/* ── BANK STATEMENT ROW ─────────────────────────────────────*/
.bank-row{display:grid;grid-template-columns:100px 1fr 80px 90px 100px;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);align-items:center;font-size:12px;color:var(--wgm-ink)}
.bank-row:hover{background:var(--wgm-cream)}
.bank-row.reconciled{opacity:.5}
.bank-credit{color:var(--wgm-sage);font-weight:600;font-variant-numeric:tabular-nums}
.bank-debit {color:var(--wgm-coral);font-weight:600;font-variant-numeric:tabular-nums}

/* ── NOTIFICATIONS ─────────────────────────────────────────*/
.notif-btn{position:relative}
.notif-btn .notif-dot{position:absolute;top:2px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--wgm-coral);display:none}
.notif-btn .notif-dot.show{display:block}
#notif-panel{position:fixed;top:58px;right:16px;width:380px;max-height:500px;background:var(--wgm-white);border-radius:var(--rlg);border:1px solid var(--wgm-sand);box-shadow:0 18px 42px -14px rgba(10,10,10,.18),0 3px 10px rgba(10,10,10,.06);z-index:210;display:none;flex-direction:column;overflow:hidden}
#notif-panel.open{display:flex}
.notif-hdr{padding:14px 18px;border-bottom:1px solid var(--wgm-sand);display:flex;align-items:center;justify-content:space-between;background:var(--wgm-cream)}
.notif-hdr-title{font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:500;color:var(--wgm-ink);letter-spacing:-.01em}
.notif-list{flex:1;overflow-y:auto;padding:6px}
.notif-item{display:flex;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}
.notif-item:hover{background:var(--wgm-cream)}
.notif-item.unread{background:var(--wgm-gold-bg)}
.notif-item.sev-critical{border-left-color:var(--wgm-coral)}
.notif-item.sev-warning {border-left-color:var(--wgm-gold)}
.notif-item.sev-action  {border-left-color:var(--blue)}
.notif-item.sev-info    {border-left-color:var(--wgm-sage)}
.notif-icon{font-size:16px;flex-shrink:0;margin-top:2px}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:12px;color:var(--wgm-ink);line-height:1.5}
.notif-meta{display:flex;align-items:center;gap:6px;margin-top:3px}
.notif-time{font-size:10px;color:var(--wgm-ink-muted)}
.notif-sev{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px}
.notif-sev.s-critical{background:var(--wgm-coral);color:#fff}
.notif-sev.s-warning {background:var(--wgm-gold);color:var(--wgm-ink)}
.notif-sev.s-action  {background:var(--blue);color:#fff}
.notif-cat{font-size:9px;color:var(--wgm-ink-subtle);text-transform:uppercase;letter-spacing:.05em}
.notif-filters{display:flex;gap:0;padding:0 8px;border-bottom:1px solid var(--wgm-sand);overflow-x:auto;background:var(--wgm-white)}
.notif-filters button{padding:8px 11px;font-size:10px;font-weight:500;color:var(--wgm-ink-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.notif-filters button.active{color:var(--wgm-ink);font-weight:700;border-bottom-color:var(--wgm-gold)}
.notif-empty{text-align:center;padding:40px;font-size:12px;color:var(--wgm-ink-muted)}

/* ── CLIENT DETAIL ─────────────────────────────────────────*/
.client-detail{display:grid;grid-template-columns:290px 1fr;gap:18px}
.client-sidebar{background:var(--wgm-white);border-radius:var(--rlg);border:1px solid var(--wgm-sand);padding:22px;box-shadow:var(--shadow-sm);position:sticky;top:12px;height:fit-content}
.client-avatar{width:66px;height:66px;border-radius:50%;background:var(--wgm-gold-bg);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:500;color:var(--wgm-gold);margin:0 auto 14px;border:1px solid rgba(201,169,97,.4)}
.client-name{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;color:var(--wgm-ink);text-align:center;letter-spacing:-.01em}
.client-company{font-size:12px;color:var(--wgm-ink-muted);text-align:center;margin-top:3px}
.client-meta{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.client-meta-row{display:flex;justify-content:space-between;font-size:12px;gap:8px}
.client-meta-label{color:var(--wgm-ink-muted)}
.client-meta-val{color:var(--wgm-ink);font-weight:500;text-align:right;word-break:break-word}
.client-tabs{display:flex;gap:0;border-bottom:1px solid var(--wgm-sand);margin-bottom:14px;overflow-x:auto}
.client-tab{font-size:12px;font-weight:500;padding:9px 14px;cursor:pointer;color:var(--wgm-ink-muted);border-bottom:2px solid transparent;white-space:nowrap}
.client-tab.active{color:var(--wgm-ink);border-bottom-color:var(--wgm-gold);font-weight:600}
.client-tab:hover{color:var(--wgm-ink)}
@media(max-width:768px){.client-detail{grid-template-columns:1fr}.client-sidebar{position:static}}

/* ── CLIENT TIMELINE ───────────────────────────────────────*/
.timeline{padding:0 4px}
.tl-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;position:relative}
.tl-item:last-child{border-bottom:none}
.tl-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.tl-icon.doc {background:var(--blue-bg);color:var(--blue)}
.tl-icon.pay {background:var(--wgm-sage-bg);color:var(--wgm-sage)}
.tl-icon.fu  {background:var(--wgm-gold-bg);color:var(--wgm-gold)}
.tl-icon.del {background:var(--purple-bg);color:var(--purple)}
.tl-icon.proj{background:rgba(45,180,170,.14);color:#1f7872}
.tl-icon.note{background:var(--wgm-cream);color:var(--wgm-ink-muted)}
.tl-body{flex:1;min-width:0}
.tl-title{font-weight:500;color:var(--wgm-ink);margin-bottom:2px}
.tl-sub{color:var(--wgm-ink-muted);font-size:11px}
.tl-date{font-size:10px;color:var(--wgm-ink-muted);white-space:nowrap;flex-shrink:0;padding-top:2px}

/* ── ACTIVITY FEED ─────────────────────────────────────────*/
.activity-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.ad-create{background:var(--wgm-sage)}
.ad-update{background:var(--blue)}
.ad-delete{background:var(--wgm-coral)}
.ad-login {background:var(--purple)}
.activity-text{font-size:12px;color:var(--wgm-ink);line-height:1.5}
.activity-time{font-size:10px;color:var(--wgm-ink-muted);margin-top:2px}

/* ── RETAINER CARD ─────────────────────────────────────────*/
.retainer-card{background:var(--wgm-white);border-radius:var(--rlg);border:1px solid var(--wgm-sand);padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.ret-name{font-family:'Fraunces',Georgia,serif;font-size:15px;font-weight:500;color:var(--wgm-ink);letter-spacing:-.01em}
.ret-service{font-size:11px;color:var(--wgm-ink-muted);margin-top:3px}
.ret-amount{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;color:var(--wgm-sage);text-align:right;font-variant-numeric:tabular-nums lining-nums}
.ret-renewal{font-size:10px;color:var(--wgm-ink-muted);text-align:right;margin-top:3px}
@media(max-width:768px){.retainer-card{grid-template-columns:1fr}.ret-amount,.ret-renewal{text-align:left}}

/* ── GLOBAL SEARCH (Cmd+K) ─────────────────────────────────*/
#search-overlay{position:fixed;inset:0;background:rgba(10,10,10,.45);backdrop-filter:blur(6px);z-index:250;display:none;align-items:flex-start;justify-content:center;padding:80px 16px 16px}
#search-overlay.open{display:flex}
.search-modal{background:var(--wgm-white);border-radius:20px;width:100%;max-width:560px;box-shadow:0 24px 48px -16px rgba(10,10,10,.28),0 4px 12px rgba(10,10,10,.08);overflow:hidden;border:1px solid var(--wgm-sand)}
.search-modal-input{width:100%;padding:17px 22px;border:none;border-bottom:1px solid var(--wgm-sand);font-size:15px;font-family:'DM Sans',sans-serif;color:var(--wgm-ink);background:var(--wgm-white);outline:none}
.search-modal-input::placeholder{color:var(--wgm-ink-muted)}
.search-results{max-height:420px;overflow-y:auto;padding:8px}
.search-results:empty::after{content:'Type to search clients, projects, documents…';display:block;text-align:center;padding:34px;color:var(--wgm-ink-muted);font-size:13px}
.sr-group{font-size:10px;font-weight:700;color:var(--wgm-ink-muted);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px 4px}
.sr-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .12s}
.sr-item:hover{background:var(--wgm-cream)}
.sr-item .sr-icon{font-size:14px;opacity:.6;flex-shrink:0}
.sr-item .sr-title{font-size:13px;font-weight:500;color:var(--wgm-ink)}
.sr-item .sr-sub{font-size:11px;color:var(--wgm-ink-muted)}
.sr-item .sr-badge{margin-left:auto}
.sr-item.sr-active{background:var(--wgm-cream);outline:1px solid var(--wgm-gold)}
.search-hint{font-size:10px;color:var(--wgm-ink-muted);text-align:center;padding:9px;border-top:1px solid var(--wgm-sand);background:var(--wgm-cream)}

/* ── SIDEBAR TOGGLE (mobile) ───────────────────────────────*/
.sidebar-toggle{display:none;width:36px;height:36px;border:1px solid var(--wgm-sand);border-radius:8px;background:transparent;color:var(--wgm-ink);font-size:18px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}

/* ── DOC PREVIEW — MISSING PIECES (pay schedule, bank, terms, footer, actions) ─*/
.doc-actions{display:flex;gap:8px;margin-bottom:14px;max-width:700px;margin-left:auto;margin-right:auto;flex-wrap:wrap}
.doc-paysched{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.doc-pay-box{border-radius:10px;padding:13px;border:1px solid transparent}
.doc-pay-box.dep{background:var(--wgm-gold-bg);border-color:rgba(201,169,97,.28)}
.doc-pay-box.bal{background:var(--wgm-sage-bg);border-color:rgba(143,166,142,.28)}
.doc-pay-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.doc-pay-box.dep .doc-pay-lbl{color:#876e2d}
.doc-pay-box.bal .doc-pay-lbl{color:var(--wgm-sage)}
.doc-pay-amount{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;color:var(--wgm-ink);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.doc-pay-due{font-size:10px;color:var(--wgm-ink-muted);margin-top:3px}
.doc-bank{background:var(--wgm-cream);border-radius:10px;padding:14px;margin-bottom:14px;border:1px solid var(--wgm-sand)}
.doc-bank-title{font-size:9px;font-weight:700;color:var(--wgm-ink-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.doc-bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.doc-bank-item .dbl{font-size:10px;color:var(--wgm-ink-muted);margin-bottom:1px}
.doc-bank-item .dbv{font-size:12px;font-weight:600;color:var(--wgm-ink)}
.doc-ect{background:var(--wgm-gold-bg);border:1px solid rgba(201,169,97,.4);border-radius:8px;padding:10px 12px;font-size:10px;color:#876e2d;line-height:1.6;margin-bottom:12px}
.doc-terms-title{font-size:9px;font-weight:700;color:var(--wgm-ink-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.doc-terms ol{padding-left:16px}
.doc-terms li{font-size:10px;color:var(--wgm-ink-muted);line-height:1.7;margin-bottom:2px}
.doc-footer{background:var(--wgm-cream);padding:11px 32px;display:flex;justify-content:space-between;font-size:10px;color:var(--wgm-ink-muted);border-top:1px solid var(--wgm-sand)}
@media(max-width:768px){.doc-paysched,.doc-bank-grid{grid-template-columns:1fr}.doc-actions{flex-wrap:wrap}}

/* ── SETTINGS SIDEBAR (compat w/ legacy tokens) ────────────*/
.settings-sidebar{background:var(--wgm-white)!important;border:1px solid var(--wgm-sand)!important;border-radius:10px;position:sticky;top:12px;max-height:calc(100vh - 40px);overflow-y:auto}

/* ── MOBILE BITS for restored classes (parity w/ live) ─────*/
@media(max-width:768px){
  .sidebar-toggle{display:flex}
  .sidebar-backdrop{display:none;position:fixed;inset:0;top:52px;background:rgba(10,10,10,.25);z-index:140}
  .sidebar-backdrop.open{display:block}
  .cal-cell{min-height:64px}
  .cal-event{font-size:8px;padding:1px 3px}
  .cal-grid{font-size:11px}
  #notif-panel{width:calc(100vw - 32px);right:16px}
}
/* Phase 5Z D16 — phone view: switch from text labels to colored dot strip.
   At 360px the date cells are ~50px wide; text labels are unreadable. Dots
   convey activity-by-category; tapping the cell opens the full day list. */
@media(max-width:480px){
  .cal-cell{min-height:52px;padding:3px}
  .cal-date-num{font-size:10px;width:18px;height:18px}
  .cal-event{
    font-size:0;padding:0;margin-bottom:2px;
    height:5px;border-radius:3px;display:inline-block;width:14px;
    margin-right:2px;text-overflow:clip;white-space:nowrap;
    /* Phase 5Z post-ship fix: on phone, dots are visual-only. Tap passes
       through to the cell so the day list opens on EVERY tap, every time.
       The individual-event detail is one tap away from inside the list. */
    pointer-events:none;cursor:default
  }
  .cal-extra{display:none}
  .cal-cell{display:flex;flex-direction:column;align-items:flex-start}
  .cal-cell > .cal-event{display:inline-block}
}
/* ── WHATSAPP INLINE BUTTON ─────────────────────────────────*/
.wa-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;background:rgba(37,211,102,.14);color:#1a8f49;font-size:10px;font-weight:600;border:none;transition:background .15s;cursor:pointer}
.wa-btn:hover{background:rgba(37,211,102,.24)}
/* ═══ END SESSION 2a HOTFIX ═══════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * CLARITY LAYER — Bloom-grade hierarchy in WGM brand
 * ────────────────────────────────────────────────────────────
 * Reusable primitives that any page or document can opt into.
 * Goal: more whitespace, fewer borders, single-action hierarchy,
 * sticker-style chips for taxonomy, big numbers + small labels.
 * Locked tokens only (cream / Fraunces / gold / coral / sage).
 * ════════════════════════════════════════════════════════════ */

/* ── HERO BLOCK ────────────────────────────────────────────
 * Cream-on-cream page header. Massive Fraunces title with
 * a single supporting line. Use instead of .page-header
 * when a section deserves room to breathe.                   */
.clarity-hero{padding:36px 4px 28px;margin-bottom:20px;border-bottom:1px solid var(--wgm-sand)}
.clarity-hero .eyebrow{
  font-size:11px;font-weight:700;color:var(--wgm-gold);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
  display:inline-block;padding-bottom:5px;border-bottom:2px solid var(--wgm-gold)
}
.clarity-hero h1{
  font-family:'Fraunces',Georgia,serif;font-size:46px;font-weight:400;
  line-height:1.04;letter-spacing:-.02em;color:var(--wgm-ink);
  font-variation-settings:"opsz" 96;margin-bottom:14px;max-width:18ch
}
.clarity-hero h1 em{color:var(--wgm-coral);font-style:italic;font-weight:500}
.clarity-hero .lede{
  font-size:15px;color:var(--wgm-ink-muted);line-height:1.55;max-width:62ch;
  font-weight:400
}
@media(max-width:640px){
  .clarity-hero{padding:24px 2px 20px}
  .clarity-hero h1{font-size:32px}
  .clarity-hero .lede{font-size:13px}
}

/* ── STICKER CHIPS ─────────────────────────────────────────
 * Bloom-style rotated pill labels for taxonomy and context.
 * Five flavours mapped to brand tokens. Use as <span class="chip chip-coral">. */
.chip{
  display:inline-block;padding:5px 11px;border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;
  transform:rotate(-1.5deg);transform-origin:center;
  transition:transform var(--dur-fast,180ms) var(--ease-out-quart,cubic-bezier(.22,1,.36,1));
  white-space:nowrap;line-height:1.2
}
.chip + .chip{margin-left:8px;transform:rotate(1.2deg)}
.chip + .chip + .chip{transform:rotate(-.8deg)}
.chip:hover{transform:rotate(0) scale(1.04)}
.chip-coral{background:var(--wgm-coral);color:#fff}
.chip-gold {background:var(--wgm-gold);color:var(--wgm-ink)}
.chip-sage {background:var(--wgm-sage);color:#fff}
.chip-blue {background:var(--blue);color:#fff}
.chip-ink  {background:var(--wgm-ink);color:var(--wgm-cream)}
.chip-soft {background:var(--wgm-chrome);color:var(--wgm-ink);border:1px solid var(--wgm-sand)}

/* ── KPI HERO STRIP ────────────────────────────────────────
 * Replaces dark "stats band" patterns. Cream-on-white card
 * with three or four big-number cells, each numeral large
 * Fraunces with a tiny ALL-CAPS label below.                 */
.clarity-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--wgm-sand);
  border-radius:14px;overflow:hidden;
  border:1px solid var(--wgm-sand);box-shadow:var(--shadow-sm);
  margin-bottom:24px
}
.clarity-stat{padding:20px 22px;background:var(--wgm-white)}
.clarity-stat .lbl{
  font-size:10px;font-weight:700;color:var(--wgm-ink-muted);
  letter-spacing:.10em;text-transform:uppercase;margin-bottom:8px
}
.clarity-stat .val{
  font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:400;
  line-height:1;letter-spacing:-.01em;color:var(--wgm-ink);
  font-variation-settings:"opsz" 48;font-variant-numeric:tabular-nums lining-nums
}
.clarity-stat .sub{font-size:11px;color:var(--wgm-ink-muted);margin-top:6px}
.clarity-stat.is-recommended{background:var(--wgm-gold-bg)}
.clarity-stat.is-recommended .val{color:var(--wgm-gold)}
.clarity-stat.is-warn{background:var(--wgm-coral-bg)}
.clarity-stat.is-warn .val{color:var(--wgm-coral-deep,var(--wgm-coral))}

/* ── SECTION CARD ──────────────────────────────────────────
 * Soft white card with generous padding and no harsh borders.
 * Use for grouping form sections instead of bordered panels. */
.clarity-card{
  background:var(--wgm-white);border-radius:16px;
  padding:24px 28px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 4px 16px -8px rgba(10,10,10,.06);
  border:1px solid rgba(232,213,183,.45)
}
.clarity-card-h{
  display:flex;align-items:baseline;gap:14px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--wgm-sand)
}
.clarity-card-h h3{
  font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;
  letter-spacing:-.01em;color:var(--wgm-ink);
  font-variation-settings:"opsz" 32
}
.clarity-card-h .hint{font-size:12px;color:var(--wgm-ink-muted);font-weight:400}

/* ── CHOICE TILES ──────────────────────────────────────────
 * Replaces gray-on-gray icon-only category buttons with
 * legible tiles. Active state earns the coral accent.        */
.clarity-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.clarity-tile{
  background:var(--wgm-white);border:1px solid var(--wgm-sand);
  border-radius:12px;padding:18px 20px;cursor:pointer;
  transition:all var(--dur-fast,180ms) var(--ease-out-quart,cubic-bezier(.22,1,.36,1));
  display:flex;flex-direction:column;gap:6px;text-align:left
}
.clarity-tile:hover{border-color:var(--wgm-gold);background:var(--wgm-cream);transform:translateY(-1px)}
.clarity-tile.is-active{
  border-color:var(--wgm-coral);background:var(--wgm-coral-bg);
  box-shadow:0 0 0 2px rgba(255,107,91,.12)
}
.clarity-tile .icon{font-size:22px;line-height:1}
.clarity-tile .ttl{
  font-family:'Fraunces',Georgia,serif;font-size:15px;font-weight:500;
  color:var(--wgm-ink);letter-spacing:-.01em;font-variation-settings:"opsz" 24
}
.clarity-tile .meta{font-size:11px;color:var(--wgm-ink-muted)}

/* ── Q & A BLOCK ───────────────────────────────────────────
 * For empty states, onboarding, help. Coral accent rule on
 * the left, ALL-CAPS sectioning, Fraunces Q + DM Sans A.     */
.clarity-faq{display:grid;grid-template-columns:200px 1fr;gap:48px;margin:32px 0}
.clarity-faq-eyebrow{
  font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:500;
  color:var(--wgm-ink);letter-spacing:-.01em;line-height:1.2;
  border-top:2px solid var(--wgm-coral);padding-top:14px;
  font-variation-settings:"opsz" 36
}
.clarity-faq-list .qa{margin-bottom:22px}
.clarity-faq-list .qa:last-child{margin-bottom:0}
.clarity-faq-list .q{
  font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:500;
  color:var(--wgm-ink);margin-bottom:8px;letter-spacing:-.005em;
  font-variation-settings:"opsz" 24
}
.clarity-faq-list .a{font-size:13px;color:var(--wgm-ink-muted);line-height:1.65;max-width:64ch}
@media(max-width:768px){.clarity-faq{grid-template-columns:1fr;gap:18px}}

/* ── PRIMARY CTA ───────────────────────────────────────────
 * Single big coral button, used sparingly — once per surface. */
.clarity-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 28px;border-radius:12px;border:none;
  background:var(--wgm-coral);color:#fff;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 6px 18px -6px rgba(255,107,91,.45);
  transition:transform var(--dur-fast,180ms) var(--ease-out-quart,cubic-bezier(.22,1,.36,1)),
             box-shadow var(--dur-fast,180ms) var(--ease-out-quart,cubic-bezier(.22,1,.36,1))
}
.clarity-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(255,107,91,.55)}
.clarity-cta:active{transform:translateY(0)}
.clarity-cta .arrow{transition:transform var(--dur-fast,180ms)}
.clarity-cta:hover .arrow{transform:translateX(4px)}

/* ── SERVICES & PRICING — surgical clarity overrides ───────
 * The Pricing Engine emits its rate strip with INLINE styles
 * (background:var(--surface1,#111113)). We target that exact
 * inline pattern via attribute substring match to lift the
 * dark band into the cream surface without touching JS.       */
.main [style*="--surface1,#111113"],
.main [style*="surface1,#111113"]{
  background:var(--wgm-white) !important;
  border:1px solid var(--wgm-sand) !important;
  border-bottom-color:var(--wgm-sand) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow-sm) !important;
  color:var(--wgm-ink) !important;
  margin-bottom:16px
}
/* Lift the inline label colors inside that band into ink-muted
 * so the cream background reads correctly.                    */
.main [style*="surface1,#111113"] [style*="color:#e8e6e1"],
.main [style*="surface1,#111113"] [style*="color:#c8c5be"]{
  color:var(--wgm-ink) !important
}
.main [style*="surface1,#111113"] [style*="color:#8a8880"]{
  color:var(--wgm-ink-muted) !important
}
/* Rate cells: lift their tinted-on-dark backgrounds into
 * subtler cream-on-white tiles.                               */
.main [style*="surface1,#111113"] [style*="rgba(231,76,60"]{
  background:var(--wgm-coral-bg) !important;
  border-color:rgba(255,107,91,.25) !important
}
.main [style*="surface1,#111113"] [style*="rgba(243,156,18"]{
  background:var(--wgm-gold-bg) !important;
  border-color:rgba(201,169,97,.25) !important
}
.main [style*="surface1,#111113"] [style*="rgba(52,152,219"]{
  background:var(--blue-bg) !important;
  border-color:rgba(107,139,176,.25) !important
}
.main [style*="surface1,#111113"] [style*="rgba(201,168,76"]{
  background:var(--wgm-gold-bg) !important;
  border-color:rgba(201,169,97,.35) !important
}

/* The Pricing Engine's task-table dropdowns hard-code a dark
 * background. Shift them into white-on-cream so they don't
 * read as orphan pieces of the dark theme.                    */
.main select[style*="background:#1a1a1d"],
.main select[style*="background:#1a1a1d"]:focus{
  background:var(--wgm-white) !important;
  color:var(--wgm-ink) !important;
  border:1px solid var(--wgm-sand) !important
}

/* ── HORIZONTAL META RULE ──────────────────────────────────
 * For separating sections without using a thick line — uses
 * a faint gradient that fades to nothing at the edges.       */
.clarity-rule{
  height:1px;border:none;
  background:linear-gradient(to right,transparent,var(--wgm-sand),transparent);
  margin:28px 0
}

/* ── PRINT MODE FOR DOCUMENTS ──────────────────────────────
 * doc.php applies its own scoped styles inline; this is a
 * safety net for any in-CRM print path that emits clarity
 * primitives.                                                */
@media print{
  .clarity-hero,.clarity-card,.clarity-stats,.clarity-faq{break-inside:avoid}
  .clarity-cta{display:none}
}
/* ═══ END CLARITY LAYER ═══════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
 * INLINE-STYLE OVERRIDE LAYER — cream alignment for surfaces
 * authored against the original dark theme. CSS-only, no JS
 * touches. Targets exact inline-style substrings emitted by
 * documents.js + settings.js so the bookings team sees
 * cream-consistent modals and form fields immediately.
 *
 * Phase preservation: 5M (status pipeline), 5N (revisions),
 * 5Q (credit notes), 5R (payment audit) all untouched —
 * this layer only flips presentation, never behaviour.
 * ════════════════════════════════════════════════════════════ */

/* ── (A) DARK INLINE BACKGROUNDS → CREAM SURFACES ─────────── */
/* Form fields (select / input / textarea) authored as dark.
 * On cream surfaces they read as black holes; the prior color
 * flip put ink-black text on the dark bg → unreadable.
 * Flip background to white so existing ink text is legible.
 *
 * Phase 6C.1 — added #1a1a2a (manual-edit state) and #1a1a1d
 * to this list. Without them, typing into a minutes input
 * triggered the manual-mode highlight whose dark blue
 * background read as "everything turning black" against the
 * cream page. Now all four dark-input variants render the
 * same cream surface; visual state is conveyed by the BORDER
 * (blue for manual / locked) rather than the background.     */
.main [style*="background:#111113"],
.main [style*="background: #111113"],
.main [style*="background:#0d0d10"],
.main [style*="background: #0d0d10"],
.main [style*="background:#1a1a2a"],
.main [style*="background: #1a1a2a"],
.main [style*="background:#1a1a1d"],
.main [style*="background: #1a1a1d"]{
  background:var(--wgm-white) !important;
  color:var(--wgm-ink) !important
}

/* Modal containers (shoot-type, deliverables, scenario picker)
 * authored with dark shells. Flip to white so the cream theme
 * is consistent.                                              */
.main [style*="background:#1a1a1d"],
.main [style*="background: #1a1a1d"]{
  background:var(--wgm-white) !important;
  color:var(--wgm-ink) !important
}

/* Confirm dialogs (revise, share-doc, void-payment).
 * These keep their accent borders (purple / gold) which read
 * fine on white.                                              */
.main [style*="background:#18181b"],
.main [style*="background: #18181b"]{
  background:var(--wgm-white) !important;
  color:var(--wgm-ink) !important;
  box-shadow:0 18px 42px -14px rgba(10,10,10,.18),
             0 4px 12px rgba(10,10,10,.06) !important
}

/* When a flipped element wraps an inner select/input, push the
 * inner field to the same cream-aligned palette.              */
.main [style*="background:#111113"] select,
.main [style*="background:#1a1a1d"] select,
.main [style*="background:#1a1a1d"] input,
.main [style*="background:#1a1a1d"] textarea{
  background:var(--wgm-white) !important;
  color:var(--wgm-ink) !important
}

/* ── (B) INVISIBLE WHITE-ALPHA BORDERS → VISIBLE SAND ──────── */
/* The original dark theme used translucent white borders to
 * carve cards out of the surface. On cream they vanish, killing
 * card edges and dropdown affordances. Map to sand.            */
.main [style*="border:1px solid rgba(255,255,255,.06)"],
.main [style*="border:1px solid rgba(255,255,255,.07)"],
.main [style*="border:1px solid rgba(255,255,255,.08)"],
.main [style*="border:1px solid rgba(255,255,255,.1)"],
.main [style*="border:1px solid rgba(255,255,255,.12)"],
.main [style*="border:1px solid rgba(255,255,255,.15)"],
.main [style*="border:1px solid rgba(255,255,255,.18)"]{
  border-color:var(--wgm-sand) !important
}
.main [style*="border:1px dashed rgba(255,255,255,.1)"],
.main [style*="border:1px dashed rgba(255,255,255,.15)"],
.main [style*="border:1px dashed rgba(255,255,255,.18)"]{
  border-color:var(--wgm-sand) !important;
  border-style:dashed !important
}

/* ── (C) MODAL WIDTH SAFETY — never exceed viewport ──────── */
/* CSS min() lets the modal keep its design width on desktop
 * while shrinking to viewport-minus-padding on phone/tablet.
 * Targets every fixed max-width emitted in inline modal styles. */
.main [style*="max-width:520px"],
.main [style*="max-width: 520px"]{max-width:min(520px,calc(100vw - 32px)) !important}
.main [style*="max-width:540px"],
.main [style*="max-width: 540px"]{max-width:min(540px,calc(100vw - 32px)) !important}
.main [style*="max-width:640px"],
.main [style*="max-width: 640px"]{max-width:min(640px,calc(100vw - 32px)) !important}
.main [style*="max-width:700px"],
.main [style*="max-width: 700px"]{max-width:min(700px,calc(100vw - 32px)) !important}
.main [style*="max-width:780px"],
.main [style*="max-width: 780px"]{max-width:min(780px,calc(100vw - 32px)) !important}
.main [style*="max-width:820px"],
.main [style*="max-width: 820px"]{max-width:min(820px,calc(100vw - 32px)) !important}

/* Modal overlays that wrap fixed-width children — tighten side
 * padding so the inner shell can use the calc() above.        */
.main [style*="position:fixed"][style*="z-index:9999"]{
  padding:16px !important
}

/* ── (D) MOBILE READABILITY BUMPS (surgical) ─────────────── */
/* Most 8-10px text is uppercase eyebrow/badge — leave alone.
 * Only bump non-uppercase 9-10px text inside table cells and
 * meta-rows where it functions as body content.               */
@media (max-width:640px){
  .main td[style*="font-size:9px"],
  .main td[style*="font-size:10px"]{font-size:11px !important}
  /* Inputs/selects inside flipped cards — make the touch target
   * a touch larger on phone for tappability.                   */
  .main [style*="background:#111113"] input,
  .main [style*="background:#1a1a1d"] input,
  .main [style*="background:#111113"] select,
  .main [style*="background:#1a1a1d"] select{
    min-height:36px !important
  }
}
/* ═══ END INLINE-STYLE OVERRIDE LAYER ═════════════════════ */


/* ════════════════════════════════════════════════════════════
 * MOBILE BLOCKERS — TARGETED HOTFIX
 * Stage 1.1 smoke-test surfaced 6 production blockers.
 * CSS-only. Phases 5M / 5N / 5Q / 5R untouched.
 * ════════════════════════════════════════════════════════════ */

/* ── (A) MOBILE SIDEBAR — restore slide-in (was dropped in Session 1 rewrite) */
@media (max-width:768px){
  /* Layout flips column so .main no longer shares row width with .sidebar */
  .layout{flex-direction:column;position:relative;overflow:visible}

  /* Sidebar becomes a fixed off-canvas panel */
  .sidebar{
    position:fixed !important;
    left:-280px;top:56px;bottom:0;width:264px;
    z-index:150;
    background:var(--wgm-chrome);
    border-right:1px solid var(--wgm-sand);
    transition:left .25s var(--ease-out-quart,cubic-bezier(.22,1,.36,1));
    overflow-y:auto;flex-direction:column;padding:14px 0;
    box-shadow:6px 0 24px rgba(10,10,10,.10)
  }
  .sidebar.open{left:0}

  /* Tap targets — bigger nav items on touch */
  .sidebar .nav-item{min-height:48px;padding:12px 20px}

  /* .main now takes full width below the topbar */
  .main{width:100%;padding:14px;min-height:0}

  /* Hamburger visible (also restated for safety in case earlier rule lost specificity) */
  .sidebar-toggle{display:flex !important}

  /* Backdrop covers .main while sidebar is open — taps it to close */
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;top:56px;
    background:rgba(10,10,10,.32);z-index:140
  }
  .sidebar-backdrop.open{display:block}
}

/* ── (B) DEFENSIVE OVERFLOW CONTAINMENT ───────────────────── */
html,body{max-width:100vw;overflow-x:hidden}
#app{max-width:100vw;overflow-x:hidden}

/* Topbar must not push the page wider than viewport */
.topbar{min-width:0;overflow:hidden}
.topbar-brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{flex-shrink:0;min-width:0}

/* On phones, drop the brand wordmark to reclaim space — keep hamburger + role pill + actions */
@media (max-width:480px){
  .topbar{padding:0 12px;gap:8px}
  .topbar-brand{font-size:14px;max-width:120px}
  .role-pill{display:none}
  /* Keep only essential topbar buttons; non-essential hidden via existing rule
   * — verified in earlier compat block. Add safety here too: */
  .topbar-btn{padding:6px 10px;font-size:11px}
}
/* iPhone SE / very narrow */
@media (max-width:380px){
  .topbar-brand{display:none}
}

/* ── (C) MODAL MOBILE FIT — base .modal class ─────────────── */
@media (max-width:640px){
  .modal{
    max-width:calc(100vw - 24px) !important;
    width:100% !important;
    margin:0 auto;
    border-radius:16px 16px 0 0
  }
  .modal-overlay{padding:8vh 0 0;align-items:flex-end}
  .modal-body{max-height:72vh}
  .modal-hdr,.modal-body,.modal-footer{padding-left:18px;padding-right:18px}
  .form-grid{grid-template-columns:1fr}
}

/* ── (D) PRICING BUILDER FIELD READABILITY ────────────────── */
/* Override layer flips dark backgrounds → white; force ink text on
 * every form field inside those flipped surfaces so any leftover
 * inline `color:#e8e6e1` literal becomes readable on white.       */
.main [style*="background:#111113"] input,
.main [style*="background:#111113"] select,
.main [style*="background:#111113"] textarea,
.main [style*="background:#1a1a1d"] input,
.main [style*="background:#1a1a1d"] select,
.main [style*="background:#1a1a1d"] textarea,
.main [style*="background:#18181b"] input,
.main [style*="background:#18181b"] select,
.main [style*="background:#18181b"] textarea,
.main input[style*="background:#111113"],
.main select[style*="background:#111113"],
.main textarea[style*="background:#111113"],
.main input[style*="background:#1a1a1d"],
.main select[style*="background:#1a1a1d"],
.main textarea[style*="background:#1a1a1d"]{
  background:var(--wgm-white) !important;
  color:var(--wgm-ink) !important;
  border-color:var(--wgm-sand) !important
}
/* Catch the literal "color:#e8e6e1" / "#c8c5be" / "#8a8880" left
 * inside JS template ternaries — these were authored as muted
 * white text on dark; on white surfaces they become invisible.   */
.main [style*="color:#e8e6e1"]{color:var(--wgm-ink) !important}
.main [style*="color:#c8c5be"]{color:var(--wgm-ink) !important}
.main [style*="color:#8a8880"]{color:var(--wgm-ink-muted) !important}

/* Greyed/disabled rows — bump from .5 → .7 minimum so they remain
 * visibly disabled but still readable on cream.                   */
.main [style*="opacity:.5"]:not(button):not(.kanban-ghost){opacity:.7 !important}
.main [style*="opacity:.55"]:not(button):not(.kanban-ghost){opacity:.7 !important}
.main [style*="opacity:.6"]:not(button):not(.kanban-ghost){opacity:.72 !important}

/* ── (E) LEGACY #TOAST POSITIONING (restore visibility) ──── */
/* index.html ships <div id="toast"></div> at body root; ui.js's
 * toast() sets className='toast show <type>'. Session 1 dropped
 * the positioning rules for this element, so it rendered at the
 * end of body flow — invisible. Restore fixed top-right anchor.  */
#toast{
  position:fixed;top:18px;right:18px;z-index:10001;
  display:none;max-width:calc(100vw - 36px);
  background:var(--wgm-white);color:var(--wgm-ink);
  border:1px solid var(--wgm-sand);border-radius:12px;
  padding:12px 18px;font-size:13px;line-height:1.45;font-weight:500;
  box-shadow:var(--shadow-lg);min-width:240px;pointer-events:auto
}
#toast.show{
  display:block;
  animation:wgm-toast-in var(--dur-med,200ms) var(--ease-out-quart,cubic-bezier(.22,1,.36,1))
}
#toast.success{border-color:rgba(143,166,142,.5);color:var(--wgm-sage)}
#toast.error  {border-color:rgba(192,68,48,.4);color:var(--wgm-coral-deep,var(--wgm-coral))}
#toast.warning,#toast.warn{border-color:var(--wgm-gold);color:var(--wgm-ink)}
#toast.info   {border-color:var(--wgm-sand);color:var(--wgm-ink)}
@media (max-width:640px){
  #toast{top:auto;bottom:18px;right:12px;left:12px;max-width:none}
}
/* ═══ END MOBILE BLOCKERS — TARGETED HOTFIX ═══════════════ */