:root{
  --gold:#C8A96E;
  --gold-dark:#A07840;
  --gold-light:#D4B896;
  --ink:#1A1208;
  --ink-3:#8B6B3D;
  --smoke:#B8A07A;
  --paper:#FAF7F2;
  --paper-2:#F0E8D8;
  --paper-3:#E8DCC8;
  --live:#7A9E6E;
  --amber:#C99A3A;
  --danger:#8B4A3D;
  --danger-border:#C7A093;
  --danger-tint:rgba(139,74,61,0.1);
  --font-d:'Cormorant Garamond',Georgia,serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;}
html{background:var(--paper-2);}
body{
  margin:0;
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--font-b);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3{
  font-family:var(--font-d);
  margin:0 0 6px 0;
  font-weight:600;
  color:var(--ink);
}
.wordmark{
  font-family:var(--font-d);
  font-size:1.9rem;
  font-weight:400;
  color:var(--ink);
  letter-spacing:0.01em;
  line-height:1;
  margin:0;
}
.wordmark b{font-weight:700;color:var(--gold-dark);}
.wordmark-sub{
  display:block;
  font-family:var(--font-b);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:6px;
}
#app{
  max-width:760px;
  margin:0 auto;
  padding:24px 16px 80px;
}
header.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:28px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--paper-3);
  padding-bottom:20px;
}
header.top .title p{
  color:var(--ink-3);
  margin:4px 0 0;
  font-size:0.95rem;
  font-weight:300;
}
.user-bar{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.85rem;
  color:var(--ink-3);
}
section{margin-bottom:32px;}
.section-head{margin-bottom:12px;}
.section-head p.sub{color:var(--ink-3);font-size:0.9rem;margin:2px 0 0;font-weight:300;}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--paper-3);margin-bottom:28px;}
.tab{
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  padding:10px 4px;
  margin-right:20px;
  font-family:var(--font-b);
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  cursor:pointer;
}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--gold-dark);border-bottom-color:var(--gold-dark);}
.page{display:none;}
.page.active{display:block;}

/* Reach out today */
#reachOutSection{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:0;
  padding:20px;
}
.reach-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  margin-top:14px;
}
.reach-card{
  background:var(--paper-2);
  border:1px solid var(--paper-3);
  border-radius:0;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.reach-card .name{font-weight:700;font-size:1.05rem;color:var(--ink);}
.reach-card .rel{
  font-size:0.72rem;
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:500;
}
.reach-card .ago{font-size:0.92rem;color:var(--ink-3);}
.btn{
  border:1px solid var(--gold-dark);
  border-radius:0;
  background:transparent;
  padding:9px 18px;
  font-family:var(--font-b);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:transparent;border-color:var(--gold-dark);color:var(--gold-dark);}
.btn-primary:hover{background:var(--gold-dark);color:var(--paper);}
.btn-outline{background:transparent;border:1px solid var(--paper-3);color:var(--ink);}
.btn-outline:hover{border-color:var(--gold-dark);color:var(--gold-dark);}
.btn-text{background:transparent;border:none;color:var(--ink-3);font-size:0.85rem;font-weight:400;letter-spacing:normal;text-transform:none;cursor:pointer;padding:4px 6px;}
.btn-text:hover{color:var(--gold-dark);}
.btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:var(--paper);}
.reach-card .btn{margin-top:6px;align-self:flex-start;}
.warm-message{
  margin-top:14px;
  padding:16px;
  background:var(--paper-2);
  border:1px dashed var(--paper-3);
  border-radius:0;
  color:var(--ink-3);
  font-weight:300;
}

/* Calendar (birthdays) */
#calendarSection{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:0;
  padding:18px 20px;
}
.cal-month{margin-bottom:18px;}
.cal-month:last-child{margin-bottom:0;}
.cal-month h3{
  font-size:1rem;
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:500;
  margin-bottom:6px;
}
.cal-list{list-style:none;margin:0;padding:0;}
.cal-list li{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--paper-3);
  font-size:0.95rem;
}
.cal-list li:last-child{border-bottom:none;}
.cal-list .days-away{color:var(--gold-dark);font-weight:600;white-space:nowrap;margin-left:12px;}
.cal-list li{align-items:baseline;gap:8px;}
.cal-date{color:var(--ink-3);font-weight:300;}
.cal-soon{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--paper-3);}
.cal-soon-label{font-size:9px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:14px;}
.cal-soon-days{color:var(--gold-dark);font-weight:600;}

/* Interaction history (inside the edit-person modal) */
.history-list{list-style:none;margin:10px 0 16px;padding:0;max-height:180px;overflow-y:auto;}
.history-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--paper-3);
  font-size:0.85rem;
  color:var(--ink-3);
  font-weight:300;
}
.history-list li:last-child{border-bottom:none;}
.history-list li.empty{color:var(--ink-3);font-style:italic;}
.hist-actions{flex:0 0 auto;white-space:nowrap;}

/* Other important dates (inside the edit-person modal) */
.dates-list{list-style:none;margin:10px 0 16px;padding:0;max-height:180px;overflow-y:auto;}
.dates-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--paper-3);
  font-size:0.85rem;
  color:var(--ink-3);
  font-weight:300;
}
.dates-list li:last-child{border-bottom:none;}
.dates-list li.empty{color:var(--ink-3);font-style:italic;}

.snooze-tag{color:var(--ink-3);font-style:italic;}

/* Conversation starter preview on reach-out cards */
.reach-card .starter{
  font-size:0.85rem;
  color:var(--ink-3);
  font-style:italic;
  font-weight:300;
  border-top:1px dashed var(--paper-3);
  padding-top:6px;
  margin-top:2px;
}

/* tel:/sms:/mailto: quick actions — reach-out cards and Everyone rows */
.contact-actions{display:flex;gap:14px;margin-top:4px;}
.contact-actions a{text-decoration:none;}
.reach-card .contact-actions{margin-top:0;}

/* Smart cadence suggestion, under the frequency dropdown */
.cadence-hint{
  margin:8px 0 0;
  font-size:0.8rem;
  color:var(--gold-dark);
  font-weight:300;
}
.cadence-hint button{
  background:none;border:none;padding:0;margin-left:4px;
  color:var(--gold-dark);text-decoration:underline;cursor:pointer;
  font-family:var(--font-b);font-size:0.8rem;font-weight:500;
}

/* Journal */
.journal-entry{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:0;
  padding:14px 16px;
  margin-bottom:10px;
}
.journal-entry .je-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.journal-entry .je-date{font-size:0.8rem;color:var(--ink-3);font-weight:300;white-space:nowrap;}
.journal-entry .je-people{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.journal-entry .je-note{font-size:0.92rem;color:var(--ink);margin-top:4px;}

/* Checkbox list of people, used by the journal "who was there" picker */
.person-picker{
  max-height:180px;
  overflow-y:auto;
  border:1px solid var(--paper-3);
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.person-picker label{
  display:flex;align-items:center;gap:8px;
  font-size:0.9rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink);
  margin:0;cursor:pointer;
}
.person-picker input[type="checkbox"]{width:16px;height:16px;flex:0 0 auto;}
.person-picker .empty{color:var(--ink-3);font-style:italic;font-size:0.85rem;}

/* Push-reminders opt-in banner */
.push-banner{
  max-width:760px;margin:0 auto 16px;padding:12px 16px;
  background:var(--paper);border:1px dashed var(--gold-dark);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:0.88rem;color:var(--ink-3);font-weight:300;
}
.push-banner button{flex:0 0 auto;}
/* .push-banner's own display:flex above has equal specificity to the
   browser's default [hidden]{display:none} and, as an author style, wins
   the tie — without this override the banner shows up empty on every
   device, not just the iOS-without-Home-Screen case it's meant for. */
.push-banner[hidden]{display:none;}
#pushToggleBtn.on{color:var(--live);}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.toolbar input[type="text"], .toolbar select{
  padding:8px 12px;
  border-radius:0;
  border:1px solid var(--paper-3);
  background:var(--paper);
  font-family:var(--font-b);
  font-size:0.9rem;
  color:var(--ink);
}
.toolbar input[type="text"]:focus, .toolbar select:focus{outline:none;border-color:var(--gold-dark);}
.toolbar input[type="text"]{flex:1;min-width:140px;}
.toolbar .spacer{flex:1 0 0;}

.scan-status{
  background:var(--paper-2);
  border:1px dashed var(--paper-3);
  padding:10px 14px;
  margin-bottom:14px;
  font-size:0.85rem;
  font-weight:300;
  color:var(--gold-dark);
}

/* People list */
.person-row{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:0;
  padding:14px 16px;
  margin-bottom:10px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.dot{width:11px;height:11px;border-radius:50%;margin-top:6px;flex:0 0 auto;}
.dot-green{background:var(--live);}
.dot-amber{background:var(--amber);}
.dot-red{background:var(--danger);}
.row-main{flex:1;min-width:0;}
.row-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.row-top .name{font-weight:700;font-size:1.02rem;color:var(--ink);}
.row-top .rel-pill{
  font-size:0.68rem;
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:500;
  border:1px solid var(--paper-3);
  border-radius:2px;
  padding:1px 8px;
}
.row-meta{font-size:0.88rem;color:var(--ink-3);margin-top:3px;font-weight:300;}
.row-meta .method{color:var(--ink-3);}
.row-note{
  font-size:0.87rem;
  color:var(--ink-3);
  font-style:italic;
  font-weight:300;
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.row-actions{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;}
.empty-state{text-align:center;color:var(--ink-3);padding:30px 10px;font-weight:300;}

/* Modal */
.overlay{
  position:fixed;inset:0;background:rgba(26,18,8,0.4);
  display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;
}
.overlay[hidden]{display:none;}
.modal{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:0;
  padding:24px;
  max-width:480px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 12px 40px rgba(26,18,8,0.14);
}
.modal h2{margin-bottom:4px;}
.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:9px;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--gold-dark);
}
.field input[type="text"], .field input[type="password"], .field input[type="date"],
.field select, .field textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--paper-3);
  border-radius:0;
  font-size:0.92rem;
  font-family:var(--font-b);
  color:var(--ink);
  background:var(--paper-2);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--gold-dark);}
.field textarea{resize:vertical;min-height:70px;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.confirm-modal p{color:var(--ink-3);font-weight:300;}

/* Mobile */
@media (max-width:640px){
  #app{padding:16px 12px calc(72px + env(safe-area-inset-bottom));}
  header.top{margin-bottom:20px;padding-bottom:16px;gap:10px;}
  .wordmark{font-size:1.55rem;}
  header.top .title p{font-size:0.85rem;}

  .tabs{gap:0;margin-bottom:20px;}
  .tab{padding:10px 2px;margin-right:16px;font-size:0.72rem;}

  #reachOutSection, #calendarSection{padding:16px 14px;}
  .reach-grid{grid-template-columns:1fr;}

  /* Toolbar: search/filter take the full row, action buttons form a
     touch-friendly two-column grid instead of wrapping unpredictably. */
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;}
  .toolbar input[type="text"], .toolbar select{grid-column:1 / -1;width:100%;font-size:16px;padding:11px 12px;}
  .toolbar .spacer{display:none;}
  .toolbar .btn{width:100%;min-height:44px;}
  .toolbar .btn-text{grid-column:1 / -1;min-height:44px;}

  .person-row{flex-wrap:wrap;padding:12px 14px;}
  .row-actions{flex-direction:row;width:100%;justify-content:flex-end;gap:14px;}
  .row-actions .btn-text{min-height:36px;padding:6px 8px;}

  /* A toolbar with a single button (Journal's "+ Log a moment") shouldn't
     be forced into the two-column grid meant for the Everyone toolbar. */
  #journalSection .toolbar{display:block;}
  #journalSection .toolbar .btn{width:100%;}

  .journal-entry{padding:12px 14px;}
  .push-banner{margin-left:12px;margin-right:12px;}

  /* Modals: full-bleed on small screens, primary action reachable near the
     thumb (column-reverse puts Save above Cancel), inputs at 16px so iOS
     Safari doesn't zoom the page in on focus. */
  .overlay{padding:0;align-items:flex-end;}
  .modal{max-width:100%;max-height:92vh;border-radius:0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));}
  .field-row{flex-direction:column;gap:0;}
  .field input[type="text"], .field input[type="password"], .field input[type="date"],
  .field select, .field textarea{font-size:16px;padding:11px 12px;}
  .modal-actions{flex-direction:column-reverse;gap:8px;}
  .modal-actions .btn{width:100%;min-height:46px;}
}