/* Amma — flat, calm, dark-capable. Tokens ported from docs/design.md §1. */
:root {
  --blue:#8CC2E6; --blue-strong:#3E8DC0; --blue-tint:#E7F2FB;
  --pink:#F2B2C0; --pink-strong:#D98AA0; --pink-tint:#FBECEF;
  --ink:#33424D; --ink-muted:#73828C; --on-blue:#16242E;
  --surface:#FFFFFF; --line:#E4EAEF;
  --success:#74B49A; --overdue:#E0996F; --danger:#CF6B6B;
  --scrim:rgba(28,38,48,.32);
  --app-bg:#EAF3FA;
  --panel-shadow:0 8px 30px rgba(58,74,85,.14);
  --r-card:12px; --r-ctl:10px; --r-icon:10px; --r-chip:8px; --r-pop:14px; --r-bar:4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blue:#5E9DC6; --blue-strong:#7FBDE2; --blue-tint:#2A3744;
    --pink:#C98A99; --pink-strong:#D99CAA; --pink-tint:#2C2329;
    --ink:#E8EEF2; --ink-muted:#9DB0BC; --on-blue:#0E1A22;
    --surface:#26333F; --line:#36444F;
    --success:#74B49A; --overdue:#D89A70; --danger:#E08A8A;
    --scrim:rgba(8,12,16,.55);
    --app-bg:#1C2630;
    --panel-shadow:0 8px 30px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--app-bg); color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.ic { width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; display:block; }
.ic.sm { width:20px; height:20px; }
.tnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------- app frame ---------- */
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative;
  display: flex; flex-direction: column; background: var(--app-bg); overflow: hidden; }

.appheader { display:flex; align-items:center; justify-content:space-between;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 10px; border-bottom:1px solid var(--line); }
.iconbtn { width:36px; height:36px; border-radius:var(--r-icon); border:1px solid var(--line);
  background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--ink); }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; }
.brand .ic { color: var(--pink-strong); }

.appbody { flex:1; overflow:auto; padding: 8px 20px 0; display:flex; flex-direction:column; }
.seclabel { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-muted); margin: 16px 0 4px; }
.big { font-size:46px; font-weight:600; line-height:1.05; }
.muted { color:var(--ink-muted); font-size:14px; }
.progress { height:7px; border-radius:var(--r-bar); background:var(--blue-tint); margin:16px 0 6px; overflow:hidden; }
.progress > i { display:block; height:100%; width:0%; border-radius:var(--r-bar);
  background:var(--blue-strong); transition: width .6s ease; }
.progress.overdue > i { background: var(--overdue); }

.cta-wrap { margin-top:auto; padding: 22px 0 8px; display:flex; justify-content:center; }
.cta { border:0; cursor:pointer; color:var(--on-blue); font-size:21px; font-weight:700;
  background:var(--blue); border-radius:var(--r-card); padding:17px 30px; min-height:58px;
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .12s, filter .12s; }
.cta:active { transform:scale(.985); filter:brightness(.97); }
.cta.flash { animation: flash .6s ease; }
@keyframes flash { 0% { box-shadow:0 0 0 0 var(--success); } 100% { box-shadow:0 0 0 16px transparent; } }

.reminderrow { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--pink-tint); border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:10px 12px; margin-top:8px; }
.reminderrow .lab { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }

.stepper { display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:var(--r-ctl); overflow:hidden; background:var(--surface); }
.stepper button { border:0; background:var(--blue-tint); color:var(--ink); width:42px; height:42px;
  cursor:pointer; display:grid; place-items:center; }
.stepper .val { padding:0 14px; font-weight:600; min-width:74px; text-align:center; }

.togglecard { display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-ctl); padding:12px 16px; cursor:pointer;
  user-select:none; margin-top:10px; width:100%; }
.togglecard .box { width:26px; height:26px; border-radius:6px; border:2px solid var(--ink-muted);
  flex:none; display:grid; place-items:center; color:transparent; transition:.18s; }
.togglecard.on { background:var(--blue-tint); border-color:var(--blue-strong); }
.togglecard.on .box { background:var(--blue-strong); border-color:var(--blue-strong); color:#fff; }
.togglecard .t-txt b { display:flex; align-items:center; gap:8px; font-size:15px; }
.togglecard .t-txt b .ic { color: var(--blue-strong); }
.togglecard .t-txt span { font-size:12.5px; color:var(--ink-muted); }

.appfooter { padding: 10px 0 calc(env(safe-area-inset-bottom) + 14px); text-align:center;
  color:var(--ink-muted); font-size:11px; border-top:1px solid var(--line); margin-top:14px; }

/* ---------- sidebars / scrim / popup / toast ---------- */
.scrim { position:absolute; inset:0; background:var(--scrim); opacity:0; pointer-events:none;
  transition:opacity .22s; z-index:5; }
.app.show-menu .scrim, .app.show-hist .scrim, .app.show-pop .scrim { opacity:1; pointer-events:auto; }

.sidebar { position:absolute; top:0; bottom:0; width:86%; max-width:380px; background:var(--surface);
  z-index:6; box-shadow:var(--panel-shadow); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding:18px; overflow:auto; }
.sidebar.left { left:0; transform:translateX(-104%); border-right:1px solid var(--line); }
.sidebar.right { right:0; transform:translateX(104%); border-left:1px solid var(--line); }
.app.show-menu .sidebar.left { transform:translateX(0); }
.app.show-hist .sidebar.right { transform:translateX(0); }
.sb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
  padding-top: env(safe-area-inset-top); }
.sb-head h3 { margin:0; font-size:18px; }
.closex { cursor:pointer; color:var(--ink-muted); border:1px solid var(--line); background:var(--surface);
  border-radius:9px; width:32px; height:32px; display:grid; place-items:center; }

.setting { padding:14px 0; border-bottom:1px solid var(--line); }
.setting:last-child { border-bottom:0; }
.setting .k { font-size:12px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.segment { display:inline-flex; background:var(--blue-tint); border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:3px; gap:3px; flex-wrap:wrap; }
.segment button { border:0; background:transparent; color:var(--ink-muted); font-weight:600;
  font-size:14px; padding:9px 14px; border-radius:7px; cursor:pointer; transition:.15s; }
.segment button.sel { background:var(--blue); color:var(--on-blue); }

.chip-people { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--blue-tint); border:1px solid var(--line);
  color:var(--ink); border-radius:var(--r-chip); padding:6px 11px; font-size:13px; font-weight:600; }
.chip .x { cursor:pointer; color:var(--ink-muted); display:inline-flex; }
.btn-ghost { border:1px solid var(--line); cursor:pointer; background:var(--surface); color:var(--ink);
  font-weight:600; font-size:14px; border-radius:var(--r-ctl); padding:9px 13px;
  display:inline-flex; align-items:center; gap:8px; }
.inviteform { display:flex; gap:8px; margin-top:10px; }
.inviteform input { flex:1; min-width:0; }
.danger { color:var(--danger); font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:0; font-size:15px; }

.histitem { display:flex; justify-content:space-between; align-items:center; padding:14px 2px; border-bottom:1px solid var(--line); }
.histitem b { font-weight:600; }
.histitem span { color:var(--ink-muted); font-size:13px; }
.note { font-size:13px; color:var(--ink-muted); margin-top:10px; }

.popup { position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96);
  width:84%; max-width:340px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pop);
  box-shadow:var(--panel-shadow); z-index:7; padding:22px 20px; opacity:0; pointer-events:none;
  transition:.2s; text-align:center; }
.app.show-pop .popup { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.popup .warn { width:38px; height:38px; margin:0 auto 8px; color:var(--overdue); }
.popup h4 { margin:2px 0 6px; font-size:18px; }
.popup p { margin:0 0 18px; color:var(--ink-muted); font-size:14px; }
.popup .row { display:flex; gap:10px; justify-content:center; }
.btn-accept { border:0; cursor:pointer; background:var(--blue); color:var(--on-blue);
  font-weight:700; font-size:16px; border-radius:var(--r-ctl); padding:12px 20px; }
.btn-accept.danger-fill { background: var(--danger); color:#fff; }
.btn-deny { border:0; cursor:pointer; background:transparent; color:var(--ink-muted);
  font-weight:600; font-size:16px; border-radius:var(--r-ctl); padding:12px 16px; }

.toast { position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(18px);
  background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:var(--r-ctl); font-size:13px;
  opacity:0; transition:.24s; z-index:8; max-width:90%; display:flex; align-items:center; gap:8px;
  pointer-events:none; }
.toast.show { opacity:.97; transform:translateX(-50%) translateY(0); }
[data-theme] .toast { color: #fff; }

/* ---------- login / loading ---------- */
.center-screen { min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:32px 24px; text-align:center; gap:16px; max-width:480px; margin:0 auto; }
.center-screen .brand { font-size:22px; margin-bottom:4px; }
.center-screen .brand .ic { width:30px; height:30px; }
.center-screen p { color:var(--ink-muted); font-size:16px; margin:0; max-width:300px; }
.center-screen form { display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px; margin-top:8px; }
input[type=email], input[type=text] { font-size:16px; padding:13px 14px; border-radius:var(--r-ctl);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); }
input:focus { outline:2px solid var(--blue-strong); outline-offset:0; }
.cta.compact { font-size:17px; min-height:50px; padding:13px 22px; }

.spin { fill:none; stroke:var(--pink-strong); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; animation:draw 1.7s ease-in-out infinite; }
@keyframes draw { 0%{stroke-dashoffset:100} 45%,55%{stroke-dashoffset:0} 100%{stroke-dashoffset:-100} }