/* public/app.css */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* The HTML `hidden` attribute must always win — #view-login / .app-shell set an
   explicit display:flex, which would otherwise override the UA [hidden] rule and
   leave the login view visible after show('shell'). Keep this above those rules. */
[hidden]{display:none !important;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:15px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--white);border-bottom:1px solid var(--border)}
.wordmark{font-weight:700;letter-spacing:2px;font-size:16px}
.view{max-width:500px;margin:0 auto;padding:24px 20px}
.login-title{font-size:22px;font-weight:700;margin:8px 0}
.login-sub{color:var(--text2);margin:0 0 20px}
.login-error{color:var(--red);font-weight:600}
.shell-note{color:var(--text2)}
.btn{background:var(--blue);color:var(--white);border:none;border-radius:var(--r-lg);padding:12px 20px;font:inherit;font-weight:600;cursor:pointer}

/* ============================================================
   PHASE-1a SHELL / NAV / CARD / PLACEHOLDER STYLES
   All values via var(--…) tokens — no literal hex/size outside :root.
   ============================================================ */

/* ---- Login container ---- */
#view-login{display:flex;flex-direction:column;min-height:100dvh;}
.login-body{max-width:var(--app-max-w);margin:0 auto;padding:24px var(--page-pad-x);}

/* ---- App shell wrapper ---- */
.app-shell{
  display:flex;flex-direction:column;
  min-height:100dvh;max-width:var(--app-max-w);
  margin:0 auto;
  background:var(--bg);
  position:relative;
}

/* ---- Desktop presentation: phone-first app framed on a backdrop ----
   On a phone the app is full-screen. On a wider screen, give the page a
   soft backdrop and frame the 500px app rail (side hairlines + soft shadow)
   so it reads as an intentional phone app, not a narrow page in blank space. */
@media (min-width:560px){
  body{background:var(--surface-tint);}
  #view-login,.app-shell{
    background:var(--bg);
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    box-shadow:var(--shadow-lg);
  }
}

/* ---- App header ---- */
.app-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--page-pad-x);
  background:var(--white);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  position:sticky;top:0;z-index:var(--z-header);
}
.hdr-l{display:flex;align-items:center;gap:6px;min-width:0;}
.hdr-r{display:flex;align-items:center;gap:4px;flex-shrink:0;}
/* Wordmark stays on one line (V10 suite-header parity); compact enough to fit the phone width with the full control cluster. */
.app-title{font-weight:700;letter-spacing:0.5px;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- Icon button (header) ---- */
.icon-btn{
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--card);border:none;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text2);
}
.icon-btn:hover{color:var(--text);}

/* Language toggle inside shell header — old flat rules removed; see suite-header block below */

/* ---- Screen container ---- */
.screen{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  background:var(--bg);
  padding:0 0 var(--nav-h);
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none;}

/* ---- Page visibility ---- */
.page{display:none;}

/* ---- Bottom navigation ---- */
.bottom-nav{
  flex-shrink:0;
  height:var(--nav-h);
  border-top:1px solid var(--border);
  background:var(--white);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding-bottom:6px;
  z-index:var(--z-nav);
  position:sticky;bottom:0;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:none;border:none;cursor:pointer;
  color:var(--text2);padding:6px 4px;
  font-family:inherit;
}
.nav-item .nav-icon{display:flex;}
.nav-item .nav-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;}
.nav-item.active{color:var(--blue);}
.nav-item.active .nav-label{font-weight:700;}
.nav-item--disabled{opacity:.4;cursor:not-allowed;}
.nav-item--disabled:hover{color:var(--text2);}

/* ---- Subhead bar ---- */
.bv-subhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 20px 8px;
}
.bv-subhead .sh-left{font-size:11px;font-weight:500;color:var(--text2);}
.bv-subhead .sh-right{font-size:11px;color:var(--text2);font-variant-numeric:tabular-nums;}

/* ---- Placeholder screen (rule 13 — never blank) ---- */
.bv-placeholder{
  display:flex;align-items:center;justify-content:center;
  padding:48px var(--page-pad-x);
  color:var(--text3);
  font-size:13px;
  font-weight:500;
}
.bv-placeholder p{margin:0;}

/* ---- Card (V10 hairline card) ---- */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:0 var(--page-pad-x) 10px;
}
.card-flat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:0 var(--page-pad-x) 10px;
}

/* ---- Row (client list item) ---- */
.row{
  display:flex;gap:10px;align-items:center;
  padding:14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.row.tall{padding:14px 14px;}
.row-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.row-head{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-sub{font-size:11.5px;color:var(--text2);}
.row-stat{text-align:right;flex-shrink:0;min-width:60px;}
.row-stat-num{font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--text);}
.row-stat-lbl{font-size:9.5px;color:var(--text2);font-weight:500;margin-top:1px;letter-spacing:0.2px;}
.row-stat-qualifier{font-size:9.5px;color:var(--text2);font-weight:500;margin-top:1px;letter-spacing:0.2px;}

/* ---- Avatar ---- */
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--avatar-bg);color:var(--white);
  font-size:13px;font-weight:700;letter-spacing:0.5px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.avatar.gray{background:var(--card);color:var(--text);}

/* ---- Eyebrow / section label ---- */
.eye{
  font-size:11px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--text2);
  padding:14px 20px 8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}

/* ============================================================
   PHASE-1a CLIENTS SEARCH SCREEN
   ============================================================ */

/* ---- Search bar ---- */
.clients-search-bar{
  padding:var(--space-3) var(--page-pad-x) var(--space-1);
}
.clients-search-input{
  width:100%;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font:inherit;
  background:var(--white);
  color:var(--text);
  outline:none;
  box-shadow:none;
  -webkit-appearance:none;
}

/* ---- Results list ---- */
.clients-list{
  list-style:none;margin:0;
  padding:var(--page-pad-x);
  display:flex;flex-direction:column;gap:var(--space-2);
}

/* ---- Client row (tappable) ---- */
.client-row{cursor:pointer;}

/* ---- Chevron ---- */
.chev{
  flex-shrink:0;
  color:var(--text3);
  font-size:16px;
  line-height:1;
}

/* ============================================================
   PHASE-1a CLIENT CARD SCREEN
   ============================================================ */

/* ---- Identity header ---- */
.card-card-header{
  padding:var(--space-5) var(--page-pad-x) var(--space-4);
}
.card-identity-row{
  display:flex;align-items:center;gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.avatar-lg{
  width:52px;height:52px;
  font-size:18px;letter-spacing:0.5px;
}
.card-name-block{flex:1;min-width:0;}
.card-client-name{
  font-size:20px;font-weight:700;
  color:var(--text);
  margin:0 0 var(--space-1);
  letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-chips-row{
  display:flex;flex-wrap:wrap;gap:var(--space-1);
}
.chip{
  display:inline-flex;align-items:center;
  padding:2px var(--space-2);
  border-radius:var(--radius-full);
  font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
}
.chip-global{
  background:var(--blue-tint);color:var(--blue);
}
.chip-loc{
  background:var(--card);color:var(--text2);
}
/* ---- Stat strip (analytics) ---- */
.card-stat-strip{
  display:flex;gap:0;
  padding:var(--space-3) var(--page-pad-x);
  margin:0 var(--page-pad-x) var(--space-3);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.card-stat{
  flex:1;text-align:center;
  padding:var(--space-2) var(--space-1);
}
.card-stat:not(:last-child){
  border-right:1px solid var(--border);
}
.tnum{font-variant-numeric:tabular-nums;}

/* ---- Visit timeline ---- */
.card-visits-list{
  list-style:none;margin:0;
  padding:0 var(--page-pad-x) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.card-visit-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);
  margin:0;
}
.card-visit-inner{flex:1;min-width:0;}

/* ============================================================
   MONE FAB + BOTTOM SHEET
   ============================================================ */

.mone-fab{
  position:fixed;
  bottom:calc(var(--nav-h) + var(--space-4));
  right:var(--space-4);
  width:52px;height:52px;
  border-radius:50%;
  /* Canonical Moné treatment (matches the CS app + the CRM mockup spec): white disc,
     hairline border, flat Lotus-Pink mark via currentColor. */
  background:var(--white);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--mone-pink);
  box-shadow:var(--shadow-lg);
  z-index:calc(var(--z-sheet) - 1);
  transition:transform 0.15s ease;
}
.mone-fab:active{transform:scale(0.93);}

.mone-overlay{
  position:fixed;inset:0;
  background:var(--scrim);
  z-index:var(--z-sheet);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.mone-overlay.mone-visible{
  opacity:1;
  pointer-events:auto;
}

.mone-sheet{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--white);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  z-index:calc(var(--z-sheet) + 1);
  max-height:80dvh;
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform 0.25s ease;
  padding:0 0 var(--space-6);
}
.mone-sheet.mone-visible{transform:translateY(0);}

.mone-sheet-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5) var(--page-pad-x) var(--space-3);
  border-bottom:1px solid var(--border);
}
.mone-sheet-title{
  font-size:18px;font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
}
.mone-close-btn{
  width:var(--tap-target);height:var(--tap-target);
  border:none;background:none;cursor:pointer;
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
}

.mone-rows{
  list-style:none;margin:0;
  padding:var(--space-3) 0 0;
}
.mone-row{
  display:flex;align-items:flex-start;
  gap:var(--space-3);
  padding:var(--space-3) var(--page-pad-x);
}
.mone-row-icon{
  flex-shrink:0;
  width:36px;height:36px;
  background:var(--tint);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--mone-pink);
}
.mone-row-body{flex:1;min-width:0;}
.mone-row-title{
  font-size:13px;font-weight:600;
  color:var(--text);margin:0 0 2px;
}
.mone-row-desc{
  font-size:12px;color:var(--text2);
  margin:0;line-height:1.4;
}

.mone-ask-area{
  padding:var(--space-4) var(--page-pad-x) 0;
}
.mone-ask-input{
  width:100%;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font:inherit;font-size:14px;
  background:var(--card);color:var(--text2);
  outline:none;-webkit-appearance:none;
  cursor:not-allowed;
}

.mone-privacy{
  font-size:11px;color:var(--text3);
  text-align:center;
  padding:var(--space-3) var(--page-pad-x) 0;
  margin:0;
}

/* ============================================================
   MERGE REVIEW SCREEN
   ============================================================ */

/* ---- Evidence row (name + gender match) ---- */
.merge-card .mp-evi{
  display:flex;align-items:center;gap:var(--space-1);
  flex-wrap:wrap;
  font-size:11px;
  margin-bottom:var(--space-1);
}
.merge-card .mp-evi .ev-k{
  color:var(--text2);font-weight:600;
}
.merge-card .mp-evi .ev-v{
  color:var(--green);font-weight:600;
}

/* ---- Two-panel grid ---- */
.merge-grid{
  display:grid;
  grid-template-columns:1fr var(--space-8) 1fr;
  gap:0;
  align-items:center;
  margin:var(--space-3) 0;
}

/* ---- Panel (record A / record B) ---- */
.merge-panel{
  background:var(--tint);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  padding:var(--space-3);
}
.merge-panel .mp-row{
  font-size:11px;
  margin-top:var(--space-1);
  color:var(--text2);
}
.merge-panel .mp-row b{
  color:var(--text);
  font-weight:600;
}

/* ---- Source badge (Record A / Record B label) ---- */
.merge-src{
  font-size:9px;
  font-weight:700;
  letter-spacing:0.5px;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-xs);
  display:inline-block;
  margin-bottom:var(--space-2);
  text-transform:uppercase;
}
.src-neutral{
  background:var(--card);
  color:var(--text2);
}

/* ---- Centre glyph column ---- */
.merge-mid{
  display:flex;align-items:center;justify-content:center;
}
.merge-mid-well{
  width:var(--space-8);height:var(--space-8);
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);
}

/* ---- Action buttons row ---- */
.merge-actions{
  display:flex;gap:var(--space-2);
  margin-top:var(--space-3);
}
.btn-merge-approve{
  flex:1;
  background:var(--blue);
  color:var(--white);
  border:none;
  border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);
  font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;
  min-height:var(--tap-target);
}
.btn-merge-approve:active{opacity:.85;}
.btn-merge-reject{
  flex:1;
  background:var(--card);
  color:var(--text2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);
  font:inherit;font-size:13px;font-weight:500;
  cursor:pointer;
  min-height:var(--tap-target);
}
.btn-merge-reject:active{opacity:.85;}

/* ---- Merge list wrapper ---- */
.merge-list{
  padding:0 0 var(--space-6);
}

/* ============================================================
   ME SCREEN
   ============================================================ */

/* ---- Profile section ---- */
.me-screen{
  padding:var(--space-5) 0 var(--space-6);
}
.me-profile{
  padding:0 var(--page-pad-x) var(--space-5);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--space-3);
}
.me-name{
  font-size:20px;font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
  margin-bottom:var(--space-1);
}

/* ---- Manager actions list ---- */
.me-actions{
  list-style:none;margin:0;
  padding:0 var(--page-pad-x);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.me-badge{
  font-size:12px;font-weight:700;
  color:var(--blue);
  margin-left:auto;
  margin-right:var(--space-2);
}

/* ---- Desktop: confine the position:fixed Moné FAB + sheet + scrim to the phone rail ----
   These MUST come AFTER the base .mone-* rules above: media queries add no specificity, so
   source order decides — placed earlier, the base `right:var(--space-4)` would win and the
   FAB would float on the blank backdrop. (50vw − half-rail) = the centered rail's inner edge. */
@media (min-width:560px){
  .mone-fab{ right:calc(50vw - (var(--app-max-w) / 2) + var(--space-4)); }
  .mone-overlay,
  .mone-sheet{
    left:calc(50vw - (var(--app-max-w) / 2));
    right:calc(50vw - (var(--app-max-w) / 2));
  }
}

/* ── Suite header: View-As + globe lang pill + notif badge + avatar (V10 S523 port) ── */
.header-view-as-select{font-size:11px;font-weight:600;padding:5px 18px 5px 8px;border:1px solid var(--border);border-radius:var(--radius-full);background-color:var(--white);color:var(--text);cursor:pointer;max-width:112px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 7px center;}
.header-view-as-select[hidden]{display:none;}
.lang-toggle{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:var(--radius-full);padding:3px 4px 3px 7px;height:34px;background:var(--white);box-sizing:border-box;flex-shrink:0;}
.lang-toggle .lang-globe{color:var(--text2);flex-shrink:0;}
.lang-seg{display:flex;background:var(--surface-tint);border-radius:var(--radius-full);overflow:hidden;}
.lang-seg button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--text2);padding:5px 8px;cursor:pointer;border-radius:var(--radius-full);}
.lang-seg button.on{background:var(--text);color:var(--white);}
.notif-bell{position:relative;}
.notif-badge{position:absolute;top:0;right:0;min-width:15px;height:15px;padding:0 3px;background:var(--red);color:var(--white);border-radius:var(--radius-full);font-size:10px;font-weight:700;line-height:15px;text-align:center;box-sizing:border-box;}
.notif-badge[hidden]{display:none;}
.header-avatar-circle{width:34px;height:34px;border-radius:50%;background:var(--avatar-bg);border:0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-mid);cursor:pointer;flex-shrink:0;}

/* ============================================================
   LOG SERVICE SCREEN
   ============================================================ */

/* ---- Wrapper ---- */
.log-service-wrap{
  padding-bottom:var(--space-8);
}

/* ---- Client context strip ---- */
.log-client-strip{
  margin-top:var(--space-3);
}
.log-client-row{
  display:flex;align-items:center;gap:var(--space-3);
}
.log-client-name{
  font-size:16px;font-weight:700;color:var(--text);
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.log-client-appt{
  font-size:12px;color:var(--text2);
  margin-top:var(--space-2);
}

/* ---- Chips row (service type, zone) ---- */
.chips-row{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  padding:0 var(--page-pad-x) var(--space-3);
}
.chip-toggle{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text2);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.2px;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full);
  transition:background 0.12s,color 0.12s,border-color 0.12s;
}
.chip-toggle.active{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
}

/* ---- Staff chip ---- */
.chip-staff{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  background:var(--tint);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-size:12px;font-weight:600;color:var(--text2);
}
.chip-staff-you{
  background:var(--blue-tint);
  border-color:var(--blue);
  color:var(--blue);
}

/* ---- Product chip ---- */
.chip-product{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  background:var(--tint);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  font-size:12px;font-weight:600;color:var(--text2);
}

/* ---- Chip remove button ---- */
.chip-remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  background:none;border:none;cursor:pointer;
  color:var(--text3);
  padding:0;
  border-radius:50%;
}
.chip-remove:hover{color:var(--text);}

/* ---- Ghost / outline button ---- */
.btn-ghost{
  background:none;border:1px dashed var(--border);
  color:var(--text2);
  border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);
  font:inherit;font-size:13px;font-weight:500;
  cursor:pointer;
  margin:0 var(--page-pad-x) var(--space-2);
  display:inline-block;
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}

/* ---- Products / staff card ---- */
.log-products-card,
.log-staff-card,
.log-memo-card{
  position:relative;
}
.log-products-search,
.log-staff-input{
  width:100%;
}

/* ---- Typeahead results ---- */
.gte-search-wrap{
  position:relative;
}
.gte-results{
  position:absolute;
  top:100%;left:0;right:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  z-index:var(--z-sheet);
  max-height:200px;
  overflow-y:auto;
}
.gte-result-row{
  display:flex;flex-direction:column;
  padding:var(--space-2) var(--space-3);
  cursor:pointer;
  border-bottom:1px solid var(--border-soft);
  gap:2px;
}
.gte-result-row:last-child{border-bottom:none;}
.gte-result-row:hover{background:var(--tint);}
.gte-result-name{
  font-size:13px;font-weight:600;color:var(--text);
}
.gte-result-meta{
  font-size:11px;color:var(--text2);
}
.gte-no-match{
  color:var(--text3);font-style:italic;cursor:default;
}
.gte-no-match:hover{background:none;}

/* ---- Copy last visit (formula eyebrow action) ---- */
.log-copy-last{
  display:inline-flex;align-items:center;gap:var(--space-1);
  background:none;border:none;cursor:pointer;
  color:var(--blue);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:0.3px;
  text-transform:none;
  padding:0;
}
.log-copy-last:active{opacity:.7;}

/* ---- Formula section ---- */
.formula-bowl-card{
  margin-top:var(--space-2);
}
.formula-bowl-card.bowl-error{
  border-color:var(--red);
}
.formula-bowl-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-3);
}
.formula-bowl-title{
  font-size:14px;font-weight:700;color:var(--text);
}
.formula-field-wrap{
  margin-bottom:var(--space-2);
}
.formula-input{
  width:100%;
}
.formula-shades-eye,
.formula-zone-eye{
  padding:var(--space-2) 0 var(--space-1);
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--text2);
}
.formula-shades-list{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.formula-shade-row{
  display:flex;align-items:center;gap:var(--space-2);
}
.formula-shade-code{
  flex:2;
}
.formula-shade-grams{
  flex:1;
  min-width:0;
}
.formula-shade-remove{
  flex-shrink:0;
}
.formula-add-shade{
  margin:0 0 var(--space-2);
  font-size:12px;
  padding:var(--space-1) var(--space-2);
}
.formula-dev-row{
  display:flex;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.formula-dev-label{
  font-size:11px;font-weight:600;color:var(--text2);
  flex-shrink:0;min-width:72px;
}
.formula-dev-vol,
.formula-dev-pct{
  flex:1;min-width:0;
}
.formula-zone-chips{
  padding:0 0 var(--space-2);
}

/* ---- Memo ---- */
.log-memo-ta,
.log-result-note{
  width:100%;
  border:none;
  background:none;
  font:inherit;font-size:14px;
  color:var(--text);
  resize:vertical;
  outline:none;
  min-height:80px;
  display:block;
}
.log-mic-btn{
  margin-top:var(--space-2);
  color:var(--text2);
}
.log-mic-active{
  color:var(--red);
}

/* ---- Save bar ---- */
.log-save-bar{
  padding:var(--space-3) var(--page-pad-x) var(--space-5);
  position:sticky;bottom:var(--nav-h);
  background:var(--bg);
  border-top:1px solid var(--border);
  z-index:var(--z-nav);
}
.log-save-btn{
  width:100%;
  background:var(--blue);
  color:var(--white);
  border:none;
  border-radius:var(--radius-sm);
  padding:var(--space-3);
  font:inherit;font-size:15px;font-weight:700;
  cursor:pointer;
  min-height:var(--tap-target);
  letter-spacing:0.2px;
}
.log-save-btn:active{opacity:.85;}

/* ---- Toast ---- */
.toast-success,
.toast-error{
  position:fixed;
  bottom:calc(var(--nav-h) + var(--space-12));
  left:50%;
  transform:translateX(-50%);
  padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-full);
  font-size:13px;font-weight:600;
  z-index:var(--z-toast);
  white-space:nowrap;
  box-shadow:var(--shadow-md);
  pointer-events:none;
}
.toast-success{
  background:var(--green);
  color:var(--white);
}
.toast-error{
  background:var(--red);
  color:var(--white);
}

/* ---- Input shared ---- */
.input{
  display:block;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font:inherit;font-size:14px;
  background:var(--white);
  color:var(--text);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.input:focus{
  border-color:var(--blue);
}


/* ============================================================
   PHASE-2 CLIENT CARD — FORMULA + PRODUCTS + LOG BAR
   ============================================================ */

/* ---- "logged in app" badge ---- */
.card-visit-crm-badge{
  padding:var(--space-1) 0 var(--space-2);
}
.chip-crm{
  background:var(--green-tint);
  color:var(--green);
}

/* ---- Section eyebrow inside a visit card ---- */
.card-visit-section-eye{
  padding:var(--space-2) 0 var(--space-1);
  font-size:10px;
}

/* ---- Formula bowl (card-flat inside the visit row) ---- */
.card-visit-bowl{
  margin:var(--space-1) 0 var(--space-2);
}
.card-bowl-hdr{
  margin-bottom:var(--space-1);
}
.card-bowl-title{
  font-size:13px;font-weight:700;color:var(--text);
}
.card-bowl-shades{
  display:flex;flex-wrap:wrap;gap:var(--space-1);
  margin-bottom:var(--space-1);
}
.card-bowl-shade{
  font-family:var(--font-mono);
  font-size:13px;font-weight:600;
  color:var(--text);
  background:var(--tint);
  border-radius:var(--radius-xs);
  padding:2px var(--space-2);
}
.card-bowl-row{
  font-size:12px;color:var(--text2);
  margin-top:var(--space-1);
}

/* ---- Result / outcome note ---- */
.card-visit-note{
  padding:var(--space-2) 0 0;
}
.card-visit-note-lbl{
  font-weight:700;color:var(--text2);
}

/* ---- Chips inside a visit card ---- */
.card-visit-chips{
  padding:0 0 var(--space-2);
}
.chip-product-used,
.chip-product-purchased{
  background:var(--card);
  color:var(--text2);
}

/* ---- Memo block ---- */
.card-visit-memo{
  padding:var(--space-2) 0 var(--space-1);
  border-top:1px solid var(--border-soft);
  margin-top:var(--space-2);
}
.card-visit-memo-text{
  font-size:13px;color:var(--text);
  margin:0 0 var(--space-1);
  line-height:1.5;
}
.card-visit-memo-foot{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:11px;color:var(--text2);
}
.card-visit-memo-mic{
  display:inline-flex;align-items:center;
  color:var(--text3);
}
.card-visit-memo-attr{
  font-size:11px;color:var(--text2);
}

/* ---- Log new service sticky bar ---- */
.card-log-bar{
  padding:var(--space-3) var(--page-pad-x) var(--space-5);
  position:sticky;bottom:var(--nav-h);
  background:var(--bg);
  border-top:1px solid var(--border);
  z-index:var(--z-nav);
}
.card-log-btn{
  width:100%;
  background:var(--blue);
  color:var(--white);
  border:none;
  border-radius:var(--radius-sm);
  padding:var(--space-3);
  font:inherit;font-size:15px;font-weight:700;
  cursor:pointer;
  min-height:var(--tap-target);
  letter-spacing:0.2px;
}
.card-log-btn:active{opacity:.85;}

/* ---- Offline sync strip ---- */
/* Shown while CRM_OFFLINE.pendingCount() > 0.
   Calm tint — NOT red. Full-width bar just above the bottom nav. */
.offline-strip{
  position:fixed;
  bottom:var(--nav-h);
  left:0;right:0;
  max-width:var(--app-max-w);
  margin:0 auto;
  background:var(--tint);
  color:var(--text2);
  font-size:12px;font-weight:500;
  text-align:center;
  padding:var(--space-1) var(--space-4);
  border-top:1px solid var(--border);
  z-index:calc(var(--z-toast) - 1);
  pointer-events:none;
}

/* ---- Phase 3: Photo thumbnails, tag chips, lightbox ---- */
.card-photo-row{display:flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-2) 0;}
.card-photo-tile{display:flex;flex-direction:column;gap:var(--space-1);}
.card-photo-tile-label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.4px;}
.card-photo-thumb{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;cursor:pointer;background:var(--avatar-bg);}
.card-photo-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1);}
.ai-pin{font-size:10px;font-weight:700;color:var(--blue);background:var(--blue-tint);border-radius:var(--r-xs);padding:1px 5px;margin-left:var(--space-1);}
.photo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);width:100%;aspect-ratio:1;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--fill-tint);color:var(--text2);cursor:pointer;}
.photo-lightbox{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:calc(var(--z-sheet) + 2);}
.photo-lightbox img{max-width:92%;max-height:92%;border-radius:var(--r-sm);}

/* ---- Merge Review — confidence chips, evidence & low-confidence toggle ---- */
.merge-section-title { margin: var(--space-4, 16px) 0 var(--space-2, 8px); font: 600 13px/1.2 var(--font-sans, 'DM Sans', sans-serif); color: var(--text2, #8e8e93); text-transform: uppercase; letter-spacing: .04em; }
.merge-conf { display: inline-block; margin-bottom: var(--space-2, 8px); padding: 2px 8px; border-radius: var(--radius-full, 9999px); font: 600 11px/1.4 var(--font-sans, 'DM Sans', sans-serif); }
.conf-very_likely { background: var(--green-tint, #E8F5E9); color: var(--green, #34C759); }
.conf-possible { background: var(--orange-tint, #FFF3E0); color: var(--orange, #FF9500); }
.conf-unlikely { background: var(--tint, #f0f0f5); color: var(--text2, #8e8e93); }
.merge-why { margin-bottom: var(--space-2, 8px); font: 400 12px/1.4 var(--font-sans, 'DM Sans', sans-serif); color: var(--text2, #8e8e93); }
.mp-phone-match { font-weight: 600; color: var(--green, #34C759); }
.merge-lowconf-toggle { margin-top: var(--space-3, 12px); }
.merge-lowconf[hidden] { display: none; }