:root{
  /* Palette nudged toward eminenceorganics.com's aesthetic — cleaner
     off-white grounds, sage promoted from a minor accent to the lead
     color, warmer/softer clay and gold, more "spa boutique" than
     "evergreen forest." Same variable names throughout, so nothing
     downstream had to change, just what these resolve to. */
  --sand:#F5EFE4; --sand-deep:#EBE1CE;
  --ink:#221F1A; --ink-soft:#6B6558;
  --evergreen:#4F6856; --evergreen-deep:#3A4E40;
  --clay:#B5734F; --sage:#9CB09F; --amber:#C99A3E;
  --card:#FFFEFB; --line:#E4DAC5;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--sand);color:var(--ink);font-family:'Figtree',sans-serif;padding:28px 16px 90px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
body.modal-open{overflow:hidden;}

button, input, select{font:inherit;}
button:focus-visible{
  outline:2px solid var(--evergreen); outline-offset:2px;
}
.wrap{max-width:480px;margin:0 auto;}
.masthead{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--evergreen);padding-bottom:14px;margin-bottom:6px;}
.logo-row{display:flex;align-items:center;gap:10px;}
.logo-mark{width:38px;height:38px;flex-shrink:0;border-radius:10px;}
.logo{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:var(--evergreen);letter-spacing:0;}
.logo span{color:var(--clay);}
.tagline{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.logout-link{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);text-decoration:underline;cursor:pointer;}

.tabs{display:flex;gap:2px;margin:18px 0 20px;background:var(--sand-deep);border-radius:8px;padding:4px;}
.tab-btn{flex:1;font-size:12px;font-weight:600;padding:12px 6px;min-height:44px;border:none;border-radius:6px;background:transparent;color:var(--ink-soft);cursor:pointer;font-family:'Figtree',sans-serif;transition:background .15s ease, color .15s ease;}
.tab-btn:hover:not(.active){background:rgba(31,61,46,.08);color:var(--ink);}
.tab-btn.active{background:var(--evergreen);color:var(--sand);}
.view{display:none;}
.view.active{display:block;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px;box-shadow:0 1px 3px rgba(34,31,26,.05);}
.call-badge{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--clay);margin-bottom:14px;}
.call-dot{width:7px;height:7px;border-radius:50%;background:var(--clay);animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

label.field-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:12px 0 6px;}
label.field-label:first-child{margin-top:0;}
/* "Who's calling" is the first-child of its own wrapper div right after
   the Type toggle, not the first thing in the card — the :first-child
   reset above was unintentionally zeroing its top margin, crowding it
   against the type-row chips. */
#call-client-fields > label.field-label:first-child,
#call-training-fields > label.field-label:first-child{margin-top:16px;}
/* font-size 16px, not smaller — below that, iOS Safari auto-zooms the
   whole page in when the input gets focus. */
input[type=text], input[type=number], input[type=date], input[type=tel], input[type=password], select{
  width:100%;font-family:'Figtree',sans-serif;font-size:16px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--sand);color:var(--ink);outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{border-color:var(--evergreen);box-shadow:0 0 0 3px rgba(31,61,46,.12);}
input[type=date]{min-width:0;max-width:100%;box-sizing:border-box;text-align:center;}
/* iOS Safari's native date-input rendering overflows its own box on the
   right edge regardless of available width — a known WebKit quirk, not a
   sizing bug on our end (desktop and Android both render it fine at
   width:100%). Scoped to touchscreens only via pointer:coarse so desktop
   keeps its normal native look. Stripping the native appearance forces it
   to respect the box like a regular input; a hand-drawn calendar icon
   replaces the one that comes with it. */
@media (hover:none) and (pointer:coarse){
  input[type=date]{
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
    padding-right:34px;padding-top:13px;padding-bottom:13px;min-height:44px;
  }
}
input::placeholder{color:var(--ink-soft);opacity:.6;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.client-search{position:relative;}
.suggest-list{margin-top:6px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card);box-shadow:0 4px 12px rgba(34,31,26,.08);}
.suggest-item{padding:10px 14px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line);}
.suggest-item:last-child{border-bottom:none;}
.suggest-item:hover{background:var(--sand);}
.suggest-item small{display:block;color:var(--ink-soft);font-size:11px;margin-top:1px;}

.selected-client{display:none;align-items:center;justify-content:space-between;background:var(--evergreen);color:var(--sand);border-radius:9px;padding:10px 14px;margin-top:10px;font-size:13.5px;}
.selected-client.show{display:flex;}
.selected-client small{display:block;color:#CFE0D3;font-size:11px;}
.selected-client button{background:rgba(255,255,255,.12);border:none;border-radius:6px;color:var(--sand);font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;cursor:pointer;padding:7px 10px;transition:background .12s ease;}
.selected-client button:hover{background:rgba(255,255,255,.2);}

/* Groups the day-mode toggle + whichever field it reveals into one
   visible step, instead of them just blending into the flat stack of
   labels above and below. */
.when-card{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:14px 14px 16px;margin-top:8px;overflow:hidden;}
.when-card .field-label:first-child{margin-top:0;}
.fade-in{animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}}

/* Grid, not flex-wrap — 7 chips is a fixed, known count, and flex-wrap
   left one orphaned on its own line on narrow screens instead of an even
   split. A 7-column grid always lays out evenly regardless of width. */
.day-row{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px;}
.day-chip{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;padding:10px 2px;text-align:center;border-radius:20px;border:1.5px solid var(--line);background:var(--sand);color:var(--ink-soft);cursor:pointer;transition:background .12s ease, border-color .12s ease, color .12s ease;}
.day-chip:hover:not(.on){border-color:var(--ink-soft);color:var(--ink);}
.day-chip.on{background:var(--amber);border-color:var(--amber);color:#3A2405;}

.btn{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;background:var(--evergreen);color:var(--sand);border:none;padding:11px 16px;border-radius:8px;cursor:pointer;width:100%;margin-top:14px;transition:background .15s ease, transform .08s ease;}
.btn:hover{background:var(--evergreen-deep);}
.btn:active{transform:scale(.985);}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);}
.btn.ghost:hover{background:var(--sand-deep);color:var(--ink);}

.results-label{display:flex;justify-content:space-between;align-items:center;margin:16px 0 10px;}
.results-label h3{margin:0;font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--evergreen-deep);}
.results-label span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-soft);}

.slot-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sand);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .12s ease, transform .12s ease;}
.slot-row:hover{border-color:var(--amber);transform:translateX(2px);}
.slot-row.best{border-color:var(--amber);background:#FBF3E4;}
.slot-main .date{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);}
.slot-main .time{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:19px;color:var(--ink);margin-top:1px;}
.slot-note{font-size:11px;color:var(--evergreen-deep);margin-top:3px;}
.slot-note.best{color:var(--clay);font-weight:600;}
.slot-cta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;background:var(--evergreen);color:var(--sand);padding:7px 12px;border-radius:6px;white-space:nowrap;}
.empty-note{font-size:12.5px;color:var(--ink-soft);padding:10px 2px;}
#results .empty-note{text-align:center;padding:24px 16px;border:1.5px dashed var(--line);border-radius:10px;background:var(--sand);}

.confirm-toast{display:none;margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--evergreen);color:var(--sand);font-size:13px;}
.confirm-toast.show{display:block;}
.confirm-toast b{font-family:'Cormorant Garamond',serif;font-weight:600;display:block;font-size:18px;margin-bottom:2px;}

.secondary-action{text-align:center;margin-top:14px;padding:10px;font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;color:var(--evergreen-deep);text-decoration:none;cursor:pointer;border-radius:8px;transition:background .12s ease;}
.secondary-action:hover{background:var(--sand-deep);}

/* route view */
.route{position:relative;padding-left:30px;}
.route::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 6px,transparent 6px 11px);}
.stop{position:relative;margin-bottom:6px;}
.stop::before{content:"";position:absolute;left:-30px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--evergreen);border:2px solid var(--card);box-shadow:0 0 0 2px var(--evergreen);}
.stop.training::before{background:var(--sage);box-shadow:0 0 0 2px var(--sage);}
.stop-card{background:var(--sand);border:1px solid var(--line);border-radius:8px;padding:10px 14px;}
.stop-time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);}
.stop-name{font-weight:600;font-size:13px;margin-top:2px;}
.drive-label{position:relative;left:-30px;padding-left:30px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);padding-top:6px;padding-bottom:6px;}
.day-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.day-header .stat{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);text-align:right;}
.day-header .stat b{color:var(--evergreen-deep);font-size:16px;font-weight:600;display:block;font-family:'Cormorant Garamond',serif;}

/* map */
.map-legend{display:flex;gap:14px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);margin-bottom:10px;}
.map-legend span{display:flex;align-items:center;gap:5px;}
.map-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--card);}
.map-dot.home{background:var(--evergreen);}
.map-dot.partner{background:var(--amber);}
.map-dot.client{background:var(--sage);}
#map-container{height:360px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--sand);}
.leaflet-popup-content-wrapper{font-family:'Figtree',sans-serif;font-size:13px;border-radius:8px;}
.leaflet-popup-content b{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;}

/* setup */
.list-item{display:flex;justify-content:space-between;align-items:center;background:var(--sand);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:6px;font-size:13px;gap:8px;transition:border-color .12s ease;}
.list-item:hover{border-color:var(--ink-soft);}
.list-item small{display:block;color:var(--ink-soft);font-size:11px;}
.list-item .actions{display:flex;gap:4px;flex-shrink:0;}
.list-item button{background:none;border:none;color:var(--clay);font-size:11px;cursor:pointer;font-family:'IBM Plex Mono',monospace;white-space:nowrap;padding:10px 6px;margin:-10px -6px;}
.list-item button:hover{text-decoration:underline;}
.list-item button.login-action{color:var(--evergreen);}
.subhead{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--evergreen-deep);margin:0 0 10px;}
.type-row{display:flex;gap:6px;margin-top:8px;}
.type-chip{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:12px 8px;min-height:44px;border-radius:8px;border:1.5px solid var(--line);background:var(--sand);color:var(--ink-soft);cursor:pointer;transition:background .12s ease, border-color .12s ease, color .12s ease;}
.type-chip:hover:not(.on){border-color:var(--ink-soft);color:var(--ink);}
.type-chip.on{background:var(--sage);border-color:var(--sage);color:var(--evergreen-deep);}
.loading{font-size:12px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}

/* rep profile + program partner + due visits */
.check-row{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;}
.check-row input[type=checkbox]{width:19px;height:19px;accent-color:var(--evergreen);}
.cadence-fields{display:none;margin-top:10px;}
.cadence-fields.show{display:grid;}
.badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:20px;margin-left:6px;letter-spacing:.02em;line-height:1.4;white-space:nowrap;}
.badge.ok{background:var(--sage);color:var(--evergreen-deep);}
.badge.soon{background:var(--amber);color:#3A2405;}
.badge.overdue{background:var(--clay);color:#FBF3E4;}
.due-row{display:flex;justify-content:space-between;align-items:center;background:var(--sand);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.due-row.overdue{border-color:var(--clay);}
.due-row.soon{border-color:var(--amber);}
.due-main .name{font-weight:600;font-size:13.5px;}
.due-main .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:2px;}

/* booking details modal */
.modal-overlay{
  display:flex;position:fixed;inset:0;background:rgba(26,26,23,.55);z-index:50;
  align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.modal-overlay.show{visibility:visible;opacity:1;pointer-events:auto;}
.modal-sheet{
  background:var(--card);width:100%;max-width:440px;border-radius:16px;padding:20px;
  max-height:85vh;overflow-y:auto;margin:auto;
  transform:scale(.97);transition:transform .18s ease;
}
.modal-overlay.show .modal-sheet{transform:scale(1);}
.modal-sheet h3{margin:0 0 2px;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--evergreen-deep);}
.modal-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin-bottom:16px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;background:var(--sand);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;}
.toggle-row span{font-size:13px;}
.toggle-row input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:var(--evergreen);}
.modal-actions{display:flex;gap:8px;margin-top:18px;}
.modal-actions .btn{margin-top:0;}

/* email outbox */
.email-row{display:flex;justify-content:space-between;align-items:center;background:var(--sand);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:6px;font-size:12.5px;transition:border-color .12s ease;}
.email-row:hover{border-color:var(--ink-soft);}
.email-row small{display:block;color:var(--ink-soft);font-size:10.5px;margin-top:1px;}
.email-status{font-family:'IBM Plex Mono',monospace;font-size:9.5px;padding:2px 7px;border-radius:20px;background:var(--sage);color:var(--evergreen-deep);white-space:nowrap;}
.email-status.scheduled{background:var(--amber);color:#3A2405;}
.email-status.sent{background:var(--evergreen);color:var(--sand);}
.email-status.failed{background:var(--clay);color:#FBF3E4;}
.email-row .actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.email-row .actions button{background:none;border:none;color:var(--clay);font-size:11px;cursor:pointer;font-family:'IBM Plex Mono',monospace;white-space:nowrap;padding:10px 6px;margin:-10px -6px;}
.email-row .actions button:hover{text-decoration:underline;}

/* login gate */
.login-wrap{max-width:360px;margin:15vh auto 0;}
.login-error{color:var(--clay);font-size:12.5px;margin-top:10px;display:none;}
.login-error.show{display:block;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}