/* ==========================================================================
   Life Management App — design tokens + components
   Tokens taken verbatim from design_handoff_life_management_app/README.md
   ========================================================================== */

:root{
  --accent:        oklch(0.68 0.21 350);
  --accent-text:   oklch(0.45 0.21 350);
  --accent-deep:   oklch(0.50 0.21 350);
  --accent-12:     oklch(0.68 0.21 350 / .12);
  --accent-15:     oklch(0.68 0.21 350 / .15);
  --accent-20:     oklch(0.68 0.21 350 / .20);
  --page:          oklch(0.985 0.006 10);
  --frame:         #f0eee9;
  --surface:       #fff;
  --border:        #f1e6ea;
  --hairline:      #f2e8ec;
  --text:          #1a1a1a;
  --text-2:        #5a5a5a;
  --muted:         #8a8a8a;
  --faint:         #c2c2c2;
  --icon-off:      #c9c2c6;
  --icon-fill:     #e9e4e6;
  --danger:        #c0554f;
  --danger-border: #f1dcda;
  --dashed:        #d8cfd3;
  /* A second hue purely to tell birthdays apart from events on the calendar.
     Two pink dots at 4px are indistinguishable; amber reads instantly and
     doesn't fight the accent. */
  --bday:          #e0932f;
  --bday-text:     #9a5f10;
  --bday-tint:     #fbead2;
  /* Third calendar signal, for anything with a due date. A cool tone so all
     three dots stay separable at 4px — pink, amber and teal don't blur into
     one another the way three warm hues would. */
  --due:           #2f9c8f;
  --due-text:      #17655b;
  --due-tint:      #daf0ec;
  --shadow-card:   0 8px 24px rgba(0,0,0,.12);
  --shadow-fab:    0 6px 16px oklch(0.68 0.21 350 / .4);
  --head:          'Nunito Sans', system-ui, sans-serif;
  --body:          'Montserrat', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  font-family:var(--body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;

  /* --- native-app feel once installed to the Home Screen --------------- */
  -webkit-tap-highlight-color:transparent;   /* no grey flash on tap */
  overscroll-behavior-y:contain;             /* no pull-to-refresh / rubber band */
  -webkit-text-size-adjust:100%;
}
/* Chrome/Safari treat a standalone window as a real app surface; painting the
   accent behind the status bar stops a white strip showing above the header. */
html{background:var(--page)}

/* Text in an app shell shouldn't be selectable by a long-press, but anything
   the user actually types must stay selectable. */
body{user-select:none;-webkit-user-select:none}
input,textarea,select,[contenteditable]{user-select:text;-webkit-user-select:text}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}

/* ---------- App shell ------------------------------------------------- */

#app{min-height:100vh;display:flex;flex-direction:column}
#view{flex:1;min-height:0;display:flex;flex-direction:column}

.topnav{display:none}
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:center;
  border-top:1px solid #f0e6ea;background:var(--surface);
  /* extra bottom padding clears the iPhone home indicator when installed */
  padding:10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
.navbtn{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--icon-off);
}
.navbtn.active{background:var(--accent);color:#fff}
.navbtn svg{width:18px;height:18px}

/* ---------- Page scaffolding ------------------------------------------ */

.page{
  flex:1;min-height:0;
  /* top inset clears the status bar in standalone mode; bottom clears the
     fixed nav plus the home indicator */
  padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(96px + env(safe-area-inset-bottom,0px));
  max-width:520px;margin:0 auto;width:100%;
}
.page.full{max-width:none}
/* A floating button sits over the end of a long list and hides whatever is
   under it. Pages that have one get enough clearance to scroll past it. */
.page:has(.fab){padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
/* keeps the default bottom padding so long forms clear the mobile nav bar */
.page.sheet-page{background:var(--surface)}

.h1{font-family:var(--head);font-size:22px;font-weight:700;margin:0}
.h2{font-family:var(--head);font-size:20px;font-weight:700;margin:0}
.h3{font-family:var(--head);font-size:15px;font-weight:700;margin:0}
.eyebrow{
  font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
.eyebrow.accent{color:var(--accent-text)}
.sub{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.03em;margin-top:4px}
.stack{display:flex;flex-direction:column;gap:10px}
.stack.tight{gap:8px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.spacer{flex:1}
.mt{margin-top:16px}
.mt-sm{margin-top:10px}
.mt-lg{margin-top:22px}
.muted{color:var(--muted)}
.center{text-align:center}

/* form-screen header: Cancel / Title / Save */
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sheet-head .link{font-size:13px;font-weight:600;color:var(--muted)}
.sheet-head .link.save{color:var(--accent-text);font-weight:700}

/* back chevron used on detail screens */
.back{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.back svg{width:13px;height:13px}

/* ---------- Cards ------------------------------------------------------ */

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:16px;text-align:left;width:100%;display:block;
}
.card.pad-sm{padding:14px;border-radius:14px}
/* .card sets display:block, so cards that are also rows must re-assert flex */
.card.row{display:flex;align-items:center;gap:10px}
.card.row.between{justify-content:space-between}
.card.accent{background:var(--accent);border-color:transparent;color:#fff}
.card.tint{background:var(--accent-12);border-color:var(--border)}
.card-title{font-family:var(--head);font-size:15px;font-weight:700}
.card-meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.card-due{font-size:11px;color:var(--accent-text);font-weight:700;margin-top:8px}
.card.accent .card-meta,.card.accent .card-due{color:rgba(255,255,255,.85)}

.banner{
  background:var(--accent);border-radius:16px;padding:14px 16px;color:#fff;
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
}
.banner .kicker{font-size:10px;opacity:.85;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.banner .title{font-family:var(--head);font-size:15px;font-weight:700;margin-top:2px}
.thumb{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.2);flex-shrink:0}

.list-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--hairline);width:100%;text-align:left;
}
.list-row:last-child{border-bottom:none}
.list-row .k{font-size:11.5px;color:var(--muted);font-weight:600}
.list-row .v{font-size:13px;color:var(--text);text-align:right}

.empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:48px 30px;text-align:center;
}
.empty .glyph{
  width:56px;height:56px;border-radius:16px;background:var(--accent-12);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--accent-deep);font-weight:300;
}
.empty .msg{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- Controls --------------------------------------------------- */

.seg{display:flex;gap:6px}
.seg-btn{
  flex:1;text-align:center;padding:8px 6px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);
  font-size:12px;color:var(--muted);font-weight:700;
}
.seg-btn.active{background:var(--accent);border-color:transparent;color:#fff}
.seg-btn.dashed{background:transparent;border:1.5px dashed var(--dashed);color:var(--muted)}
.seg-btn.dashed.active{background:var(--accent);border:1.5px solid transparent;color:#fff}
.seg.scroll{overflow-x:auto;padding-bottom:2px}
.seg.scroll .seg-btn{flex:0 0 auto;padding:7px 12px;font-size:11px;border-radius:10px}

.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  background:var(--border);color:var(--text-2);
}
.tag.active{background:var(--accent);color:#fff}
.tag.dashed{background:transparent;border:1.5px dashed var(--dashed);color:var(--muted)}
.tag.ghost{background:rgba(255,255,255,.25);color:#fff}

.btn{
  display:block;width:100%;border-radius:14px;padding:14px;text-align:center;
  font-size:14.5px;font-weight:700;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-fab)}
.btn-outline{background:var(--surface);border:1px solid var(--border);color:var(--accent-text);font-size:13px}
.btn-dashed{border:1.5px dashed var(--dashed);color:var(--muted);font-size:13px;font-weight:600;padding:12px}
.btn-danger{border:1px solid var(--danger-border);color:var(--danger);font-size:13px;padding:12px}
.btn-sm{padding:10px;font-size:13px;border-radius:12px}

.fab{
  position:fixed;right:18px;bottom:78px;z-index:30;
  width:52px;height:52px;border-radius:50%;background:var(--accent);
  box-shadow:var(--shadow-fab);color:#fff;font-size:26px;font-weight:400;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

.field{margin-top:14px}
.label{
  font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:8px;
}
.input{
  width:100%;border:1px solid var(--border);outline:none;border-radius:10px;
  padding:10px 12px;background:var(--page);font-size:14px;color:var(--text);
}
.input:focus{border-color:var(--accent)}
.input.title{
  border:none;border-bottom:1px solid var(--border);border-radius:0;background:transparent;
  font-family:var(--head);font-size:19px;font-weight:700;padding:0 0 12px;
}
.input.title:focus{border-bottom-color:var(--accent)}
textarea.input{min-height:64px;resize:vertical;font-size:13.5px;line-height:1.5}
.input-pair{display:flex;gap:10px}
.input-pair .input{flex:1;min-width:0}

/* circular task checkbox */
.check{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--accent);background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:9px;font-weight:700;line-height:1;
}
.check.on{background:var(--accent);border-color:var(--accent)}
.task-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.task-row:last-child{border-bottom:none}
.task-name{flex:1;font-size:14px;font-weight:600;text-align:left}
.task-row.done .task-name{color:var(--faint);text-decoration:line-through;font-weight:400}

/* progress ring on project detail */
.ring{
  width:88px;height:88px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ring .hole{
  width:68px;height:68px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;
}

.avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--border);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:84px;height:84px;font-size:28px;background:var(--accent-20);color:var(--accent-text)}
.avatar.on-accent{background:rgba(255,255,255,.22);color:#fff}

/* closet grids + swatches */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{
  position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:flex-end;padding:6px;
}
.tile.sel{border:2px solid var(--accent)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .swatch-fill{position:absolute;inset:0}
.tile .name{
  position:relative;font-size:9.5px;font-weight:700;line-height:1.2;
  background:rgba(255,255,255,.86);border-radius:5px;padding:2px 4px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tile .pick{
  position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.strip .tile{flex:0 0 auto;width:64px;height:64px;aspect-ratio:auto}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent}
.swatch.on{border-color:var(--text)}
.swatch.add{
  border:1.5px dashed var(--dashed);color:var(--icon-off);
  font-size:14px;font-weight:300;display:flex;align-items:center;justify-content:center;
}

.photo-well{
  width:160px;height:160px;border-radius:16px;margin:0 auto;
  background:var(--accent-12);border:1px solid var(--border);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--accent-text);font-weight:700;text-align:center;padding:12px;
}
.photo-well img{width:100%;height:100%;object-fit:cover}

.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:flex;gap:10px;padding:14px 18px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #f0e6ea;background:var(--surface);
}
.actionbar .btn{flex:1;padding:12px;font-size:13px;border-radius:12px;box-shadow:none}

/* calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:9.5px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase}
.cal-day{
  aspect-ratio:1;border-radius:10px;background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:12px;font-weight:600;
}
.cal-day.out{background:transparent;border-color:transparent;color:var(--faint)}
.cal-day.today{border:2px solid var(--accent);color:var(--accent-text);font-weight:700}
.cal-day.sel{background:var(--accent);border-color:transparent;color:#fff}
.cal-dots{display:flex;gap:3px;align-items:center;justify-content:center;height:4px}
.cal-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.cal-dot.bday{background:var(--bday)}
.cal-dot.due{background:var(--due)}
/* On the selected (filled) day every dot goes white, so they stay visible. */
.cal-day.sel .cal-dot,
.cal-day.sel .cal-dot.bday,
.cal-day.sel .cal-dot.due{background:#fff}

.tag.bday{background:var(--bday-tint);color:var(--bday-text)}
.tag.due{background:var(--due-tint);color:var(--due-text)}

/* Three dot colours need naming, or the grid is a guessing game. */
.cal-legend{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;
  font-size:10.5px;font-weight:600;color:var(--muted);
}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
.cal-legend i.bday{background:var(--bday)}
.cal-legend i.due{background:var(--due)}

/* Top-right action on a page header. Same at every width — the header row is
   already flex, so it lands in the corner on mobile and desktop alike. */
.head-action{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:7px 12px;border-radius:100px;
  background:var(--surface);border:1px solid var(--border);
  font-size:12px;font-weight:700;color:var(--accent-text);
}
.head-action.on{background:var(--accent);border-color:transparent;color:#fff}
.head-action:active{transform:scale(0.96)}
.head-action .check-mini{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.head-action.on .check-mini{background:rgba(255,255,255,.3)}
.head-action .count{
  background:var(--accent-15);color:var(--accent-text);
  border-radius:100px;padding:1px 6px;font-size:10.5px;
}

/* Persistent sync indicator — hidden entirely when everything is synced. */
.sync-badge{
  position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:45;
  font-size:11px;font-weight:700;padding:6px 12px;border-radius:100px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.sync-badge.error{background:var(--danger);border-color:transparent;color:#fff}
.sync-badge.syncing{color:var(--accent-text);border-color:var(--accent-15)}
@media (min-width:900px){ .sync-badge{bottom:20px;left:20px} }

.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:80;
  background:var(--text);color:#fff;font-size:12.5px;font-weight:600;
  padding:10px 16px;border-radius:100px;box-shadow:var(--shadow-card);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.toast.show{opacity:1}

/* ---------- Desktop --------------------------------------------------- */

@media (min-width:900px){
  body{background:var(--frame)}
  #app{background:var(--page);max-width:1180px;margin:0 auto;min-height:100vh;
       box-shadow:0 0 0 1px rgba(0,0,0,.04)}

  .bottomnav{display:none}

  .topnav{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    height:56px;flex:0 0 auto;padding:0 24px;
    background:var(--surface);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:40;
  }
  .topnav .greet{font-family:var(--head);font-size:15px;font-weight:700}
  .tabs{display:flex;gap:24px}
  .tab{font-size:13px;color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent}
  .tab.active{color:var(--accent-text);font-weight:700;border-bottom-color:var(--accent)}
  .topnav .me{width:32px;height:32px;border-radius:50%;background:var(--accent-20)}

  .page{max-width:1180px;padding:24px 24px 40px}
  /* forms stay a centered card on desktop (designs 9b / 15d / 19d) */
  .page.sheet-page{
    max-width:640px;margin:24px auto 40px;background:var(--surface);
    border:1px solid var(--border);border-radius:16px;padding:24px;
  }
  .fab{right:calc(50vw - 566px);bottom:32px}
  .actionbar{
    position:sticky;bottom:0;border-radius:0 0 16px 16px;
    max-width:1180px;margin:24px auto 0;
  }
  .dt-cols{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
  .dt-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
  .dt-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .tile-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .grid-3{grid-template-columns:repeat(6,1fr)}
  .input-pair.dt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

@media (max-width:899px){
  .dt-cols,.dt-3,.dt-4{display:flex;flex-direction:column;gap:10px}
}