/* ============================================================
   LifeOS — Design System
   Matte black · pure white · ocean blue · whisper of gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Surfaces (matte black, subtly cool) ---- */
  --bg:        #08080A;
  --bg-1:      #0D0D10;   /* base panel */
  --surface:   #131318;   /* card */
  --surface-2: #191921;   /* raised card / hover */
  --surface-3: #20212A;   /* control / chip */

  /* ---- Hairlines ---- */
  --line:      rgba(255,255,255,0.07);
  --line-2:    rgba(255,255,255,0.11);
  --line-3:    rgba(255,255,255,0.16);

  /* ---- Text ---- */
  --ink:       #F7F8FB;
  --ink-2:     rgba(247,248,251,0.62);
  --ink-3:     rgba(247,248,251,0.40);
  --ink-4:     rgba(247,248,251,0.26);

  /* ---- Ocean blue accent ---- */
  --blue:      #00C8E8;
  --blue-2:    #4DE5FF;
  --blue-deep: #0094B8;
  --blue-glow: rgba(0,200,232,0.16);
  --blue-soft: rgba(0,200,232,0.10);

  /* ---- Gold (used sparingly) ---- */
  --gold:      #D4AF37;
  --gold-soft: rgba(212,175,55,0.12);

  /* ---- Semantic ---- */
  --good:      #38E0A6;
  --warn:      #F5B544;
  --bad:       #FF6B6B;
  --good-soft: rgba(56,224,166,0.12);
  --bad-soft:  rgba(255,107,107,0.12);

  /* ---- Macro hues (calm, distinct) ---- */
  --protein:   #00C8E8;
  --carbs:     #B98BFF;
  --fat:       #F5B544;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* ---- Shadows / glows ---- */
  --shadow:    0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px -22px rgba(0,0,0,0.9);
  --glow-blue: 0 0 0 1px rgba(0,200,232,0.30), 0 8px 30px -8px rgba(0,200,232,0.35);

  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', monospace;

  /* gold dial: 0 = none, 1 = full (driven by tweaks) */
  --gold-amt: 1;
  /* density */
  --gap: 18px;
  --pad: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01','cv01';
}

::selection { background: var(--blue-glow); color: #fff; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Type scale ---------- */
.t-display { font-size: 52px; line-height: 1.0; font-weight: 700; letter-spacing: -0.03em; }
.t-h1 { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.t-h2 { font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.t-h3 { font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; }
.t-body { font-size: 14px; line-height: 1.5; font-weight: 400; }
.t-sm { font-size: 13px; line-height: 1.45; }
.t-xs { font-size: 11.5px; line-height: 1.4; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ---------- Card primitive ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  position: relative;
  box-shadow: var(--shadow);
}
.card.tight { padding: 16px; }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { display: flex; align-items: center; gap: 10px; }

/* ---------- Buttons / chips ---------- */
.btn {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 9px 14px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: all .16s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: #02232b; border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(0,200,232,0.6);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn.ghost:hover { color: var(--ink); background: var(--surface); }
.btn.icon { padding: 9px; }

.chip {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.chip.blue { background: var(--blue-soft); border-color: rgba(0,200,232,0.25); color: var(--blue-2); }
.chip.gold { background: var(--gold-soft); border-color: rgba(212,175,55,0.28); color: var(--gold); }
.chip.good { background: var(--good-soft); border-color: rgba(56,224,166,0.25); color: var(--good); }
.chip.bad  { background: var(--bad-soft);  border-color: rgba(255,107,107,0.25); color: var(--bad); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ---------- Progress bar ---------- */
.bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- Utility ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-auto { margin-top: auto; } .ml-auto { margin-left: auto; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.center { align-items: center; } .between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.gold-em { color: color-mix(in oklab, var(--gold) calc(var(--gold-amt) * 100%), var(--ink) ); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* gentle entrance — transform only, so paused/backgrounded frames never hide content */
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.rise { animation: rise .45s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Inputs ---------- */
.lc-input {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 11px; padding: 10px 13px; outline: none; transition: border-color .15s;
}
.lc-input::placeholder { color: var(--ink-4); }
.lc-input:focus { border-color: rgba(0,200,232,0.5); box-shadow: 0 0 0 3px var(--blue-soft); }

/* ---------- Hover rows ---------- */
.lc-taskrow { transition: background .14s; }
.lc-taskrow:hover { background: var(--surface-2); }
.lc-check:active { transform: scale(.9); }
.lc-habit:hover { border-color: var(--line-3) !important; }

/* ---------- Editor modal ---------- */
.lc-iconbtn:hover { background: var(--surface-2) !important; border-color: var(--line-3) !important; color: var(--ink) !important; }
.lc-modal-backdrop {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: rgba(4,4,6,0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .18s ease;
}
.lc-modal {
  width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85);
}
.lc-modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.lc-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.lc-modal-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
select.lc-input { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
input[type=date].lc-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
/* row hover reveals edit affordances */
.lc-editrow .lc-rowtools { opacity: 0; transition: opacity .14s; }
.lc-editrow:hover .lc-rowtools { opacity: 1; }
@media (hover: none) { .lc-editrow .lc-rowtools { opacity: 1; } }

/* ---------- Passcode lock ---------- */
.lock-screen {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(0,200,232,0.08), transparent 55%), var(--bg);
  animation: fade .25s ease;
}
.lock-card { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 320px;
  padding-bottom: env(safe-area-inset-bottom); }
.lock-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--blue-2), var(--blue-deep));
  box-shadow: 0 10px 30px -8px var(--blue-glow); margin-bottom: 16px; }
.lock-brand { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.lock-t1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 22px; }
.lock-t2 { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.lock-dots { display: flex; gap: 18px; margin: 26px 0 30px; }
.lock-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-3); transition: all .15s; }
.lock-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px; }
.lock-key { width: 72px; height: 72px; border-radius: 50%; font-size: 26px; font-weight: 500; font-family: var(--sans);
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  display: grid; place-items: center; transition: all .12s; -webkit-tap-highlight-color: transparent; user-select: none; }
.lock-key:hover { background: var(--surface-2); border-color: var(--line-3); }
.lock-key:active { transform: scale(.94); background: var(--blue-soft); border-color: rgba(0,200,232,0.4); }
.lock-key-fn { background: transparent; border-color: transparent; color: var(--ink-3); }
.lock-key-fn:hover { background: var(--surface); }
.lock-forgot { margin-top: 26px; background: none; border: none; color: var(--ink-3); font-size: 13px; font-family: var(--sans);
  cursor: pointer; padding: 8px; }
.lock-forgot:hover { color: var(--ink); }
.lock-hint { margin-top: 24px; font-size: 12px; color: var(--ink-4); text-align: center; max-width: 230px; }
.lock-reset-confirm { margin-top: 22px; text-align: center; max-width: 260px; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.shake { animation: shake .42s ease; }

/* ---------- Login (multi-profile) ---------- */
.login-card { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px;
  padding-bottom: env(safe-area-inset-bottom); }
.login-sub { font-size: 14px; color: var(--ink-3); margin-top: 18px; text-align: center; }
.login-profiles { display: flex; gap: 12px; margin: 22px 0 6px; }
.login-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent; }
.login-profile:hover { background: var(--surface-2); border-color: var(--line-3); transform: translateY(-2px); }
.login-profile.on { border-color: var(--p); box-shadow: 0 0 0 1px var(--p), 0 10px 30px -12px var(--p); }
.login-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: #fff; }
.login-pname { font-size: 12.5px; font-weight: 600; }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.login-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: 13px; color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
.login-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); color: var(--blue); }
.login-input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-family: var(--sans);
  font-size: 14.5px; padding: 13px 0; }
.login-input::placeholder { color: var(--ink-4); }
.login-btn { justify-content: center; padding: 13px; font-size: 14px; margin-top: 4px; }
.login-err { color: var(--bad); font-size: 12.5px; text-align: center; padding: 2px; }
.login-hint { margin-top: 22px; font-size: 12px; color: var(--ink-4); text-align: center; max-width: 260px; }

/* ============================================================
   Dashboard grids
   ============================================================ */
/* Variant A — Bento */
.dash-bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "focus focus focus focus nutr    nutr    nutr    nutr    sched sched sched sched"
    "focus focus focus focus nutr    nutr    nutr    nutr    sched sched sched sched"
    "score score score score fit     fit     fit     fit     sched sched sched sched"
    "body  body  body  body  insight insight insight insight goals goals goals goals"
    "fin   fin   fin   fin   resp    resp    resp    resp    goals goals goals goals"
    "ideas ideas ideas ideas habits  habits  habits  habits  events events events events";
}
.dash-bento > div { min-width: 0; }
.dash-bento > div > .card { height: 100%; }

@media (max-width: 1180px) {
  .dash-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "focus  focus  focus  score  score  score"
      "nutr   nutr   nutr   sched  sched  sched"
      "fit    fit    fit    body   body   body"
      "insight insight insight insight insight insight"
      "goals  goals  goals  fin    fin    fin"
      "resp   resp   resp   ideas  ideas  ideas"
      "habits habits habits events events events";
  }
}
@media (max-width: 760px) {
  .dash-bento { grid-template-columns: 1fr; grid-template-areas:
    "focus" "score" "nutr" "sched" "fit" "body" "insight" "goals" "fin" "resp" "ideas" "habits" "events"; }
}

/* Variant B — Focus (2 col: main + rail) */
.dash-focus { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); align-items: start; }
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 980px) { .dash-focus { grid-template-columns: 1fr; } .dash-2col { grid-template-columns: 1fr; } }

/* Variant C — Columns */
.dash-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1180px) { .dash-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .dash-cols { grid-template-columns: 1fr; } }

/* ============================================================
   App shell
   ============================================================ */
.app { display: grid; grid-template-columns: 252px 1fr; height: 100vh; overflow: hidden; }
.sidebar {
  background: var(--bg-1); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 4px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--blue-2), var(--blue-deep));
  display: grid; place-items: center; box-shadow: 0 6px 18px -6px var(--blue-glow);
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all .14s; position: relative;
}
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.active { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.nav-item.active::before {
  content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:3px; background: linear-gradient(var(--blue-2),var(--blue));
}
.nav-label { font-family: var(--mono); font-size: 9.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-4); padding: 14px 12px 6px; font-weight: 600; }

.main { overflow-y: auto; position: relative; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px 30px; background: rgba(8,8,10,0.72); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.content { padding: 30px; }
.searchbox {
  display: flex; align-items: center; gap: 10px; flex: 1; max-width: 440px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px;
  color: var(--ink-3); font-size: 13px; cursor: text;
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* avatar */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #03242c; flex-shrink:0;
  background: linear-gradient(145deg, var(--blue-2), var(--blue)); }

/* segmented control */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: transparent;
  border: none; border-radius: 8px; padding: 6px 13px; cursor: pointer; transition: all .14s; white-space: nowrap; }
.seg button:hover { color: var(--ink-2); }
.seg button.on { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; }

/* generic grid helpers for sections */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
@media (max-width: 1100px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 720px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.stat-card { display:flex; flex-direction:column; gap:8px; }
.stat-card .v { font-size: 26px; font-weight: 800; letter-spacing:-0.02em; }

/* mobile device companion */
.device-stage { display:flex; align-items:center; justify-content:center; gap:60px; flex-wrap:wrap; padding:20px; }

/* Inside the phone frame the viewport is still wide, so media queries won't fire.
   Force every multi-column grid to a single column within the mobile scope. */
.mobile-scope .dash-bento,
.mobile-scope .dash-focus,
.mobile-scope .dash-2col,
.mobile-scope .dash-cols,
.mobile-scope .grid-2,
.mobile-scope .grid-3,
.mobile-scope .grid-4 {
  grid-template-columns: 1fr !important;
  grid-template-areas: none !important;
}
.mobile-scope .card { padding: 16px; border-radius: 18px; }
.mobile-scope .t-h1 { font-size: 24px; }
.mobile-scope .seg { flex-wrap: wrap; }