/* CloseRate by Jarzabek Strategies — black & white, same system as the agency site */

:root{
  --ink:#0F0F0F; --paper:#FFFFFF; --paper-2:#F4F4F4;
  --slate:#1A1A1A; --slate-2:#333333; --steel:#6B6B6B; --line:#E4E4E4;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --shadow-card:0 18px 50px rgba(15,15,15,.10);
  --shadow-card-lg:0 30px 70px rgba(15,15,15,.16);
  --shadow-sheet:0 -20px 60px rgba(15,15,15,.25);
  --tabbar-h:64px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--paper-2);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

button{ font-family:var(--font-body); }

.wrap{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 18px;
}

/* ============ MODES ============ */
body.booting .app-only,
body.auth-mode .app-only{ display:none !important; }
body:not(.demo) .demo-only{ display:none !important; }

.boot-note{
  padding:80px 0;
  text-align:center;
  color:var(--steel);
  font-size:.95rem;
}

/* ============ AUTH ============ */
.wrap-auth{ max-width:520px; padding-top:36px; }

.auth-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:34px 28px 30px;
  box-shadow:var(--shadow-card);
}

.auth-card .view-title{ font-size:clamp(1.5rem, 4.5vw, 2rem); margin-bottom:20px; }

.auth-note{ font-size:.85rem; color:var(--steel); margin-top:14px; }

.auth-demo{ border-top:1px solid var(--paper-2); padding-top:16px; margin-top:22px; }

.auth-error{
  margin-top:16px;
  font-size:.9rem;
  font-weight:600;
  color:#8a2b18;
}

.field-row-1{ grid-template-columns:1fr !important; }

/* ============ TOP BAR ============ */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ink);
  color:#fff;
  /* installed PWA draws under the iOS status bar — keep the header clear of it */
  padding-top:env(safe-area-inset-top);
}

.topbar-inner{
  max-width:1140px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{ text-decoration:none; color:#fff; display:flex; flex-direction:column; line-height:1.1; }

.brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.12rem;
  letter-spacing:.06em;
}

.brand-thin{ color:rgba(255,255,255,.55); font-weight:700; }

.brand-by{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-top:2px;
}

.demo-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.25);
  border-radius:100px;
  padding:5px 6px 5px 12px;
}

.demo-pill button{
  border:none;
  cursor:pointer;
  background:#fff;
  color:var(--ink);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:100px;
  padding:3px 9px;
}

.brand-select{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  padding:8px 10px;
  max-width:180px;
}

.brand-select option{ color:var(--ink); }

.topnav{ display:none; align-items:center; gap:22px; }

.topnav-link{
  position:relative;
  background:none;
  border:none;
  cursor:pointer;
  color:rgba(255,255,255,.75);
  font-size:.9rem;
  font-weight:500;
  padding:4px 0;
}

.topnav-link:hover{ color:#fff; }

.topnav-link.active{
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 0 #fff;
}

.btn-topnav{
  background:#fff;
  color:var(--ink);
  font-size:.86rem;
  padding:10px 16px;
}

.btn-topnav:hover{ background:var(--paper-2); }

/* ============ BUTTONS / CHIPS ============ */
.btn{
  display:inline-block;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  border:none;
  cursor:pointer;
  border-radius:6px;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
  white-space:nowrap;
}

.btn-primary{
  background:var(--ink);
  color:#fff;
  font-size:1rem;
  padding:15px 28px;
  min-height:48px;
  box-shadow:0 10px 26px rgba(15,15,15,.18);
}

.btn-primary:hover{ background:var(--slate-2); transform:translateY(-1px); }

.btn-block{ display:block; width:100%; margin-top:22px; }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--slate-2); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}

.btn-ghost:hover{ border-color:var(--steel); }

.btn-danger{ color:#8a2b18; }

.btn-sm{ font-size:.85rem; padding:10px 16px; min-height:40px; }

.chip{
  font-weight:500;
  font-size:.95rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 18px;
  min-height:46px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}

.chip:hover{ border-color:var(--steel); }

.chip.selected{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.chip-sm{ font-size:.85rem; padding:8px 14px; min-height:38px; border-radius:100px; }

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.chip-row-inner{ display:flex; flex-wrap:wrap; gap:10px; }

.chip-input{
  font-family:var(--font-body);
  color:var(--steel);
  max-width:160px;
}

.chip-label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel);
  margin:4px 0 8px;
}

.chip-label-inline{ margin:12px 12px 8px 0; }

.linklike{
  background:none;
  border:none;
  cursor:pointer;
  font-size:inherit;
  font-weight:600;
  color:var(--ink);
  text-decoration:underline;
  padding:0;
}

/* ============ VIEWS ============ */
.app{ padding:26px 0 calc(var(--tabbar-h) + 40px); }

.view-head{ margin-bottom:20px; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:10px;
}

.eyebrow-dash{ width:24px; height:2px; background:var(--ink); flex:none; }

.view-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.7rem, 5vw, 2.4rem);
  letter-spacing:-.015em;
  line-height:1.05;
}

.list-block{ margin-top:30px; }

.list-heading{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:12px;
}

.list-subnote{
  font-size:.85rem;
  color:var(--steel);
  margin:-6px 0 14px;
}

.empty-note{
  font-size:.92rem;
  color:var(--steel);
  background:#fff;
  border:1px dashed var(--line);
  border-radius:8px;
  padding:20px;
}

/* ============ ALERT BAND (needs result) ============ */
.alert-band{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--ink);
  color:#fff;
  border-radius:10px;
  padding:16px 20px;
  margin-bottom:12px;
  box-shadow:var(--shadow-card);
}

.alert-count{
  font-family:var(--font-display);
  font-weight:800;
  font-size:2rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.alert-copy{ display:flex; flex-direction:column; font-size:.92rem; }

.alert-copy strong{ font-weight:700; }

.alert-copy span{ color:rgba(255,255,255,.7); font-size:.84rem; }

/* ============ APPOINTMENT CARDS ============ */
.card-list{ display:grid; gap:10px; }

.appt-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.appt-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-1px); }

.appt-card.overdue{ border-left:3px solid var(--ink); }

.appt-time{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:56px;
}

.appt-time b{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

.appt-time span{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel);
}

.appt-main{ flex:1; min-width:0; }

.appt-name{
  font-weight:600;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.appt-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

.tag{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--steel);
  background:var(--paper-2);
  border-radius:4px;
  padding:2px 8px;
}

.tag-job{ color:#fff; background:var(--slate); }

.appt-cta{
  flex:none;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ink);
  border-radius:6px;
  padding:9px 14px;
}

.appt-cta.ghosted{
  color:var(--steel);
  background:var(--paper-2);
}

/* follow-up card extras */
.fu-amount{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  font-variant-numeric:tabular-nums;
  flex:none;
}

.fu-age{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:4px;
  padding:2px 8px;
  background:var(--paper-2);
  color:var(--steel);
}

.fu-age.hot{ background:var(--ink); color:#fff; }

.fu-card{ flex-wrap:wrap; cursor:default; }

.fu-card .appt-main{ flex:1 1 55%; }

.fu-actions{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:8px;
  flex:1 1 100%;
}

@media (min-width: 900px){
  .fu-card .fu-actions{ flex:0 0 auto; display:flex; }
}

.fu-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:6px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:9px 12px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.fu-btn:hover{ border-color:var(--steel); }

.fu-btn.sold{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Older imports (archived, unresulted) */
.archive-toggle{
  width:100%;
  text-align:left;
  background:none;
  border:1px dashed var(--line);
  border-radius:8px;
  padding:14px 16px;
  cursor:pointer;
  font-size:.88rem;
  font-weight:600;
  color:var(--steel);
  margin-bottom:10px;
  transition:border-color .15s ease, color .15s ease;
}

.archive-toggle:hover{ border-color:var(--steel); color:var(--ink); }

/* Seats (read-only) */
.seat-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--paper-2);
}

.seat-row .s-name{ font-weight:600; font-size:.95rem; }

.seat-email{ flex:1; font-size:.82rem; color:var(--steel); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.seat-role{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper-2);
  border-radius:100px;
  padding:5px 12px;
}

/* Armed (two-tap) destructive buttons */
.armed{ color:#8a2b18 !important; border-color:#8a2b18 !important; font-weight:700; }

/* ============ PILE BOARD (follow-ups header) ============ */
.pile-board{
  background:var(--ink);
  color:#fff;
  border-radius:10px;
  padding:24px 24px 22px;
  margin-bottom:18px;
  box-shadow:var(--shadow-card-lg);
}

.pile-label{
  display:block;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

.pile-num{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.2rem, 8vw, 3rem);
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.pile-sub{ font-size:.86rem; color:rgba(255,255,255,.65); }

/* ============ SCOREBOARD ============ */
.period-row{ margin-bottom:18px; }

.board{
  background:#fff;
  border-radius:10px;
  padding:24px 24px 20px;
  box-shadow:var(--shadow-card-lg);
}

.board-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}

.board-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
}

.board-meta{ font-size:.78rem; color:var(--steel); }

.board-main{ padding:16px 0 6px; }

.board-num{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.2rem, 7vw, 3rem);
  line-height:1.08;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.board-delta{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  background:var(--paper-2);
  border-radius:4px;
  padding:3px 9px;
  margin-top:8px;
}

.board-chart{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:96px;
  padding:16px 0 4px;
}

.board-chart .bar{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  height:100%;
}

.board-chart .bar i{
  display:block;
  width:100%;
  height:var(--h);
  min-height:2px;
  background:#DEDEDE;
  border-radius:3px 3px 0 0;
}

.board-chart .bar-hot i{ background:var(--ink); }

.board-chart .bar b{ font-size:.64rem; font-weight:600; color:var(--steel); }

.board-rows{
  border-top:1px solid var(--line);
  padding-top:12px;
  display:grid;
  gap:9px;
}

.board-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.9rem;
  color:var(--steel);
}

.board-row-num{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Source table */
.source-table{ display:grid; gap:10px; }

.source-row{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
}

.source-row-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}

.source-name{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; }

.source-roi{
  font-family:var(--font-display);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.source-roi.bad{ color:#8a2b18; }

.source-row-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}

.source-stat{ display:flex; flex-direction:column; }

.source-stat b{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
}

.source-stat span{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--steel);
}

/* Insights */
.insight-list{ display:grid; gap:10px; }

.insight{
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--ink);
  border-radius:8px;
  padding:16px 18px;
  font-size:.94rem;
  line-height:1.6;
}

.insight b{ font-weight:700; }

.insight .in-num{
  font-family:var(--font-display);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ============ SETUP ============ */
.setup-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 20px;
  margin-bottom:14px;
}

.setup-heading{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:6px;
}

.setup-heading .opt{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
  margin-left:8px;
}

.setup-note{ font-size:.88rem; color:var(--steel); margin-bottom:16px; max-width:56ch; }

.setup-note code{
  background:var(--paper-2);
  padding:1px 6px;
  border-radius:3px;
  font-size:.82rem;
}

.source-setup-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--paper-2);
}

.source-setup-row .s-name{ flex:1; font-weight:600; font-size:.95rem; }

.spend-input{
  width:120px;
  font-family:var(--font-body);
  font-size:.92rem;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 10px;
}

.spend-input:focus{ outline:none; border-color:var(--ink); }

.row-x{
  border:none;
  background:none;
  cursor:pointer;
  color:var(--steel);
  font-size:1rem;
  padding:4px 6px;
}

.row-x:hover{ color:#8a2b18; }

.source-add{ display:flex; gap:10px; margin-top:14px; }

.source-add input{
  flex:1;
  font-family:var(--font-body);
  font-size:.95rem;
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 12px;
}

.source-add input:focus{ outline:none; border-color:var(--ink); }

.rep-chips{ display:flex; flex-wrap:wrap; gap:8px; }

.rep-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper-2);
  border-radius:100px;
  padding:8px 8px 8px 16px;
  font-size:.9rem;
  font-weight:600;
}

.ghl-status{
  display:inline-block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
  border:1px solid var(--line);
  border-radius:100px;
  padding:7px 14px;
}

.data-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ============ TAB BAR (mobile) ============ */
.tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  display:flex;
  align-items:stretch;
  background:var(--ink);
  padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

.tab{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:none;
  border:none;
  cursor:pointer;
  color:rgba(255,255,255,.55);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tab-ico{ font-size:1.05rem; line-height:1; }

.tab.active{ color:#fff; }

.tab-add{
  flex:0 0 76px;
}

.tab-add span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:1.7rem;
  font-weight:600;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .15s ease;
}

.tab-add:active span{ transform:scale(.92); }

.nav-badge{
  position:absolute;
  top:8px;
  right:calc(50% - 26px);
  min-width:17px;
  height:17px;
  border-radius:100px;
  background:#fff;
  color:var(--ink);
  font-size:.62rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}

.topnav-link .nav-badge{
  position:static;
  display:inline-flex;
  margin-left:6px;
  background:#fff;
}

/* ============ SHEETS ============ */
.sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(15,15,15,.5);
  opacity:0;
  transition:opacity .25s ease;
}

.sheet-backdrop.open{ opacity:1; }

.sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:210;
  background:#fff;
  border-radius:16px 16px 0 0;
  box-shadow:var(--shadow-sheet);
  padding:10px 20px calc(28px + env(safe-area-inset-bottom));
  max-height:88vh;
  overflow-y:auto;
  transform:translateY(103%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}

.sheet.open{ transform:translateY(0); }

.sheet-grab{
  width:44px;
  height:4px;
  border-radius:2px;
  background:var(--line);
  margin:6px auto 16px;
}

.sheet-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.35rem;
  margin-bottom:18px;
}

.field-row{ display:grid; gap:10px; margin-bottom:18px; }

.field-row input{
  font-family:var(--font-body);
  font-size:1rem;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  min-height:48px;
}

.field-row input:focus{ outline:none; border-color:var(--ink); }

.field-row input.error{ border-color:#8a2b18; }

/* Result sheet */
.result-who{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:8px;
}

.result-who .r-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.35rem;
}

.result-who .r-meta{ font-size:.8rem; color:var(--steel); }

.result-crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:24px;
  margin-bottom:14px;
}

.crumb{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--paper-2);
  border-radius:4px;
  padding:3px 9px;
  border:none;
  cursor:pointer;
  color:var(--ink);
}

.result-step{ min-height:180px; }

.result-q{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.12rem;
  margin-bottom:14px;
}

.result-chips{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.result-chips .chip{ text-align:center; padding:16px 10px; font-weight:600; }

.result-chips .chip-wide{ grid-column:1 / -1; }

.chip-hero{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  font-weight:700;
}

.chip-hero:hover{ background:var(--slate-2); }

.amount-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 16px;
  margin-bottom:14px;
}

.amount-wrap:focus-within{ border-color:var(--ink); }

.amount-wrap .cur{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.6rem;
  color:var(--steel);
}

.amount-input{
  flex:1;
  border:none;
  outline:none;
  font-family:var(--font-display);
  font-weight:800;
  font-size:2rem;
  font-variant-numeric:tabular-nums;
  min-width:0;
  width:100%;
}

.sheet-delete{
  display:block;
  margin:22px auto 0;
  font-size:.8rem;
  font-weight:500;
  color:var(--steel);
}

/* ============ CLOSE RATE ============ */
.week-list{ display:flex; flex-direction:column; }

.week-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--paper-2);
  cursor:pointer;
}

.week-list .week-row:first-child{ border-top:none; }

.week-day{
  flex:none;
  width:44px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--steel);
}

.week-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.week-name{
  font-weight:600;
  font-size:.95rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.week-meta{ font-size:.78rem; color:var(--steel); }

.week-state{
  flex:none;
  font-size:.78rem;
  font-weight:600;
  color:var(--steel);
  font-variant-numeric:tabular-nums;
}

.week-state.won{
  color:#fff;
  background:var(--ink);
  border-radius:6px;
  padding:4px 9px;
  font-weight:700;
}

.week-acts{ flex:none; display:flex; gap:8px; }

.week-acts .fu-btn, .week-log{ padding:8px 13px; font-size:.78rem; }

/* phones: buttons drop to their own line so names never truncate */
@media (max-width: 899px){
  .week-row{ flex-wrap:wrap; }
  .week-acts{ flex:1 1 100%; margin-left:56px; }
  .week-acts .fu-btn{ flex:1; }
  .week-log{ flex:1 1 100%; margin-left:56px; }
}

/* previous appointments — collapsed by default */
.prev-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:17px 18px;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s ease, box-shadow .2s ease;
}

.prev-toggle:hover{ border-color:var(--steel); box-shadow:var(--shadow-card); }

.pt-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
}

.pt-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  font-weight:600;
  color:var(--steel);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.pt-chev{
  font-size:.72rem;
  line-height:1;
  color:var(--ink);
  transform:rotate(-90deg);
  transition:transform .2s ease;
}

.prev-toggle.open .pt-chev{ transform:rotate(0deg); }

.week-group{ margin-top:16px; }

.week-group-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:0 4px 8px;
}

.wg-label{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
}

.wg-rate{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.week-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:2px 16px;
}

/* smaller deposit input under the SOLD contract amount */
.amount-sub{ margin-top:-4px; }

.amount-sub .cur{ font-size:1.15rem; }

.amount-sub .amount-input{ font-size:1.3rem; }

/* ============ SNACKBAR ============ */
.snackbar{
  position:fixed;
  left:50%;
  bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:300;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--ink);
  color:#fff;
  border-radius:8px;
  padding:13px 18px;
  font-size:.9rem;
  box-shadow:var(--shadow-card-lg);
  white-space:nowrap;
}

.snack-undo{
  background:none;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:underline;
}

/* ============ DESKTOP ============ */
@media (min-width: 900px){
  :root{ --tabbar-h:0px; }
  .tabbar{ display:none; }
  .topnav{ display:flex; }
  .app{ padding:38px 0 80px; }
  .wrap{ padding:0 24px; }
  .card-list{ gap:12px; }
  .appt-card{ padding:16px 20px; }
  .result-chips{ grid-template-columns:repeat(2, 1fr); }
  .sheet{
    left:50%;
    right:auto;
    bottom:auto;
    top:50%;
    width:min(560px, 92vw);
    border-radius:14px;
    transform:translate(-50%,-46%);
    opacity:0;
    transition:opacity .2s ease, transform .25s ease;
    padding:10px 30px 30px;
  }
  .sheet.open{ transform:translate(-50%,-50%); opacity:1; }
  .sheet-grab{ visibility:hidden; }
  .snackbar{ bottom:28px; }
  .field-row{ grid-template-columns:1fr 1fr; }
  .source-row-stats{ grid-template-columns:repeat(6, 1fr); }
}

/* ============ WELCOME / ONBOARDING LINK ============ */
.auth-sub{
  color:var(--steel);
  font-size:.95rem;
  line-height:1.5;
  margin:12px 0 20px;
}
.input-locked{
  background:var(--paper-2);
  color:var(--slate-2);
  cursor:default;
}

/* ============ FIRST-RUN TUTORIAL ============ */
body.tour-open{ overflow:hidden; }

.tour-scrim{
  position:fixed;
  inset:0;
  z-index:400;
  background:rgba(15,15,15,.62);
}

.tour-ring{
  position:fixed;
  z-index:401;
  border-radius:14px;
  box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(255,255,255,.28);
  pointer-events:none;
  transition:top .28s cubic-bezier(.2,.7,.3,1), left .28s cubic-bezier(.2,.7,.3,1),
             width .28s cubic-bezier(.2,.7,.3,1), height .28s cubic-bezier(.2,.7,.3,1);
}

.tour-card{
  position:fixed;
  z-index:402;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(400px, calc(100vw - 40px));
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-card-lg);
  padding:24px 24px 20px;
}

.tour-dots{
  display:flex;
  gap:7px;
  margin-bottom:16px;
}
.tour-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--line);
  transition:background .2s ease, width .2s ease;
}
.tour-dot.on{ width:22px; border-radius:4px; background:var(--ink); }

.tour-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.42rem;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:10px;
}
.tour-body{
  color:var(--slate-2);
  font-size:.98rem;
  line-height:1.55;
  margin-bottom:22px;
}

.tour-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tour-skip{
  color:var(--steel);
  font-size:.9rem;
}
.tour-nav{ display:flex; gap:10px; }

/* on phones the card sits above the tab bar so a highlighted tab stays in view */
@media (max-width: 899px){
  .tour-card{
    top:auto;
    bottom:calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
    transform:translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .sheet, .sheet-backdrop, .appt-card, .btn{ transition:none; }
  .tour-ring, .tour-dot{ transition:none; }
}