@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  color-scheme: light;
  --ink:#1C2B39;        /* constant dark surface: sidebar, buttons, mobile bar */
  --text:#1C2B39;        /* body text — flips in dark mode */
  --wash:#EFF3EE;        /* page background — flips */
  --card:#ffffff;        /* card/input background — flips */
  --soft:#f5f7f3;        /* soft pill / copyfield background — flips */
  --line:#dde3da;        /* borders — flips */
  --muted:#6b756c;       /* secondary text — flips */
  --strike:#9aa39a;      /* struck-through text — flips */
  --outline:#1C2B39;     /* secondary-button border — flips */
  --lemon:#E8B93F;       /* accent fills — constant */
  --sea:#2F6F8F;         /* accent fills — constant */
  --terracotta:#C1694A;  /* accent fills — constant */
  --olive:#6B7A4F;       /* accent fills — constant */
  --sea-text:#2F6F8F;    /* accent used AS text-on-page — flips for contrast */
  --terracotta-text:#C1694A;
  --olive-text:#6B7A4F;
  --radius:12px;
}
[data-theme="dark"]{
  color-scheme: dark;
  --text:#EAEDE9;
  --wash:#11161b;
  --card:#1c252c;
  --soft:#242e36;
  --line:#33414a;
  --muted:#93a098;
  --strike:#5b6a63;
  --outline:#4a5860;
  --sea-text:#79c1e8;
  --terracotta-text:#f0a47f;
  --olive-text:#a8c98a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Work Sans', sans-serif;
  background:var(--wash);
  background-image:
    radial-gradient(circle at 12% 6%, rgba(47,111,143,0.07), transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(232,185,63,0.10), transparent 45%);
  color:var(--text);
  min-height:100vh;
  transition:background-color .15s ease, color .15s ease;
}

a{color:var(--sea-text);}

h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; margin:0 0 8px;}
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--sea-text);
  font-weight:700;
  text-transform:uppercase;
}
.mono{font-family:'Space Mono', monospace;}

/* ---------- layout ---------- */
.app{display:flex; min-height:100vh;}

.sidebar{
  width:230px;
  flex-shrink:0;
  background:var(--ink);
  color:var(--wash);
  padding:22px 14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{
  font-family:'Fraunces', serif;
  font-size:21px;
  font-weight:700;
  margin-bottom:2px;
  color:var(--lemon);
}
.brand-sub{
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  color:#9fb0a3;
  letter-spacing:.08em;
  margin-bottom:22px;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border-radius:8px;
  color:#cfd8d2;
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
  margin-bottom:2px;
}
.nav-link:hover{background:rgba(255,255,255,.06);}
.nav-link.active{background:var(--lemon); color:#1C2B39; font-weight:600;}
.nav-link svg{flex-shrink:0;}
.nav-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lemon); margin-left:auto; flex-shrink:0;
}
.nav-link.active .nav-dot{background:#1C2B39;}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px;}
.table-scroll table{min-width:480px;}

.person-grid{
  display:flex; flex-wrap:wrap; gap:6px;
  max-height:48vh; overflow-y:auto; padding:2px 2px 4px;
}
button.tag-choice{
  font-family:'Work Sans', sans-serif; border:1.5px solid var(--line);
  background:var(--card); color:var(--text);
}
.map-embed{
  margin-top:12px; border-radius:9px; overflow:hidden;
  border:1.5px solid var(--line); aspect-ratio:16/9;
}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}

.sidebar-foot{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}
.whoami{font-size:12.5px; color:#cfd8d2; margin-bottom:12px;}
.whoami strong{color:var(--lemon);}

.switcher-row{display:flex; gap:6px; margin-bottom:10px;}
.switch-btn{
  flex:1;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#cfd8d2;
  padding:7px 8px;
  border-radius:8px;
  font-size:12.5px;
  cursor:pointer;
  font-family:'Work Sans', sans-serif;
}
.switch-btn:hover{background:rgba(255,255,255,.08);}
.switch-btn.on{background:var(--lemon); color:#1C2B39; border-color:var(--lemon); font-weight:600;}

.btn-ghost{
  width:100%;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#cfd8d2;
  padding:8px 10px;
  border-radius:8px;
  font-size:12.5px;
  cursor:pointer;
  font-family:'Work Sans', sans-serif;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);}

.main{flex:1; padding:34px 30px 80px; max-width:840px;}

.mobile-topbar{display:none;}

@media (max-width: 820px){
  .sidebar{
    position:fixed; left:0; top:0; height:100vh; z-index:50;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:20px 0 40px rgba(0,0,0,.2);
  }
  .sidebar.open{transform:translateX(0);}
  .main{padding:80px 16px 60px;}
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0; height:56px;
    background:var(--ink); color:var(--lemon); padding:0 14px; z-index:40;
  }
  .mobile-topbar .brand{margin:0; font-size:17px;}
  .hamburger{background:none; border:none; color:var(--lemon); cursor:pointer;}
  .scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:45;}
  .scrim.show{display:block;}

  input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=password], select, textarea{
    font-size:16px;
  }
  .btn{padding:13px 16px;}
  .checkbox{width:26px; height:26px;}
  .tag-choice{padding:8px 13px;}
  .icon-btn{padding:8px;}
  .table-scroll table{min-width:420px;}
  .reminder-card{padding:18px;}
}

/* ---------- shared components ---------- */
.page-header{border-bottom:2px solid var(--text); padding-bottom:16px; margin-bottom:22px;}
.page-title{font-size:34px; line-height:1.05;}
.page-sub{font-size:13.5px; color:var(--muted);}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:14px;
}

.row{display:flex; gap:8px; align-items:center;}
.grow{flex:1;}

input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=password], select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:9px;
  border:1.5px solid var(--line);
  font-family:'Work Sans', sans-serif;
  font-size:14.5px;
  outline:none;
  background:var(--soft);
  color:var(--text);
}
input[type=text]::placeholder, input[type=number]::placeholder, input[type=date]::placeholder, input[type=datetime-local]::placeholder, input[type=password]::placeholder, textarea::placeholder{
  color:var(--muted);
  opacity:1;
}
textarea{resize:vertical; min-height:70px;}

.btn{
  padding:11px 16px;
  border-radius:9px;
  border:none;
  background:var(--ink);
  color:var(--lemon);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  font-family:'Work Sans', sans-serif;
  white-space:nowrap;
}
.btn:hover{opacity:.92;}
.btn.secondary{background:var(--card); color:var(--text); border:1.5px solid var(--outline);}
.btn.danger{background:#8a2f2f; color:#fce9e9;}
.btn.small{padding:7px 11px; font-size:12.5px;}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--muted); padding:4px; display:flex;}
.icon-btn:hover{color:var(--terracotta-text);}

.pill{
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.soft-pill{
  background:var(--soft); color:var(--text); border:1px solid var(--line);
  font-size:12.5px; padding:8px 12px; border-radius:999px;
}

.empty{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--olive-text);
  font-size:16px;
  padding:24px 4px;
}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{
  text-align:left; font-family:'Space Mono', monospace; font-size:10.5px;
  letter-spacing:.05em; color:var(--muted); text-transform:uppercase;
  padding:8px 10px; border-bottom:2px solid var(--text);
}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top;}

.tag-choice{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:999px; border:1.5px solid var(--line);
  font-size:13px; cursor:pointer; background:var(--card); color:var(--text); margin:3px 4px 3px 0;
}
.tag-choice.on{background:var(--olive); border-color:var(--olive); color:#fff;}

.copyfield{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--soft); border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; font-family:'Space Mono', monospace; font-size:13.5px;
  color:var(--text);
}
.hint{font-size:12px; color:var(--muted); margin-top:4px;}
.hint a{color:var(--sea-text);}

.section{display:none;}
.section.active{display:block;}

.day-block{margin-bottom:22px;}
.day-label{
  font-family:'Space Mono', monospace; font-size:12px; font-weight:700;
  color:var(--terracotta-text); text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:8px;
}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
.stat .n{font-family:'Fraunces', serif; font-size:26px; font-weight:600; line-height:1; color:var(--text);}
.stat .l{font-size:11px; color:var(--muted); margin-top:4px;}

.reminder-overlay{
  position:fixed; inset:0; background:rgba(10,14,17,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:100; padding:16px;
}
.reminder-card{
  background:var(--card); border-radius:var(--radius);
  padding:20px 22px; max-width:360px; width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  color:var(--text);
}

.checkbox{
  width:22px; height:22px; border-radius:6px; border:2px solid var(--muted);
  background:transparent; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; padding:0;
}
.checkbox.on{background:var(--olive); border-color:var(--olive);}

.chat-msg{
  background:var(--soft); border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; margin-bottom:8px;
}
.chat-meta{display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:3px; color:var(--text);}
.chat-text{font-size:14.5px; line-height:1.4; white-space:pre-wrap; word-break:break-word; color:var(--text);}