/* ===== ElevateEdu — Soft Warm Theme ===== */
:root {
  --cream: #f5e6ca;
  --beige: #dcc7aa;
  --coffee: #6f4e37;
  --espresso: #4b3832;

  /* Soft, calm surfaces (no stark white) */
  --bg: #f3e7d0;
  --tile: #fbf4e6;
  --tile-accent: #efe3cc;
  --greet-1: #ead9b8;
  --greet-2: #e3d0ae;

  --shadow: 0 10px 30px rgba(75, 56, 50, 0.08);
  --shadow-soft: 0 4px 14px rgba(75, 56, 50, 0.05);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 300;
  background: linear-gradient(160deg, #efe4d0 0%, #e6d8bf 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--espresso);
}

/* Phone frame */
.phone {
  width: 390px;
  max-width: 100%;
  height: 780px;
  background: var(--bg);
  border-radius: 40px;
  box-shadow: var(--shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Title bar */
.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 42px 18px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--beige);
  color: var(--coffee);
}

.brand-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--espresso);
}

/* Screen scroll area */
.screen {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 20px;
}
.screen::-webkit-scrollbar {
  display: none;
}

/* Greeting card — distinct warm gradient */
.greeting-card {
  background: linear-gradient(135deg, var(--greet-1) 0%, var(--greet-2) 100%);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}

.greeting-eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coffee);
  opacity: 0.7;
  font-weight: 500;
  margin-bottom: 10px;
}

.greeting-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--espresso);
  margin-bottom: 6px;
}

.greeting-sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--coffee);
  line-height: 1.4;
}

/* Systems */
.section-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--espresso);
  margin: 2px 4px 12px;
}

/* Uniform vertical stack of banner cards */
.grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tile {
  background: var(--tile);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Grouped list card: stack tiles into one panel with hairline dividers */
/* Home "Your Systems" is a 2x2 board of app tiles: icon on the ceiling,
   name and metric on the floor, so all four read as equal-weight apps. */
.grid:has(> .tile) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid > .tile {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  aspect-ratio: 1 / 1;
  padding: 16px 12px;
  border-radius: 28px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(111, 78, 55, 0.07), 0 6px 16px -8px rgba(111, 78, 55, 0.28);
  -webkit-tap-highlight-color: transparent;
}
.grid > .tile:hover {
  box-shadow: inset 0 0 0 1px rgba(111, 78, 55, 0.09), 0 10px 20px -8px rgba(111, 78, 55, 0.32);
}
.grid > .tile .tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(111, 78, 55, 0.06), 0 3px 8px -5px rgba(111, 78, 55, 0.35);
}
.grid > .tile .tile-icon svg {
  width: 27px;
  height: 27px;
}
.grid > .tile .tile-name {
  margin-top: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
}
.grid > .tile .tile-metric {
  margin: 7px 0 0;
  font-size: 11px;
  padding: 3.5px 10px;
  border-radius: 999px;
}
.grid > .tile:active {
  transform: scale(0.975);
  box-shadow: inset 0 0 0 1px rgba(111, 78, 55, 0.09), 0 3px 10px -8px rgba(111, 78, 55, 0.3);
}

.tile-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--tile-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tile-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--espresso);
}

/* pushes the metric to the far right */
.tile-metric {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--coffee);
  background: var(--tile-accent);
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Bottom nav */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--tile);
  padding: 12px 8px 20px;
  border-top: 1px solid rgba(220, 199, 170, 0.4);
}

.nav-item {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--beige);
  transition: all 0.2s ease;
}

.nav-label {
  font-size: 11px;
  font-weight: 400;
}

.nav-item.active {
  background: var(--tile-accent);
  color: var(--coffee);
}
.nav-item.active .nav-label {
  font-weight: 500;
}

/* ===== Icons (Lucide SVG) ===== */
.brand-mark i,
.tile-icon i,
.nav-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.tile-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--coffee);
  stroke-width: 1.8;
}
.nav-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

/* ===== Date chip (top right) ===== */
.date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 7px 0;
  background: var(--tile);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  line-height: 1;
}
.date-day {
  font-size: 18px;
  font-weight: 600;
  color: var(--espresso);
}
.date-month {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coffee);
  opacity: 0.65;
  margin-top: 2px;
}

/* ===== Back button (system pages) ===== */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--beige);
  color: var(--coffee);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.back-btn:hover {
  transform: translateX(-2px);
}
.back-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* ===== Mini app cards (system pages) ===== */
.app-card {
  background: var(--tile);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.app-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Grouped list card: stack mini-app rows into one panel */
.grid:has(> .app-card) {
  gap: 0;
  background: var(--tile);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.grid > .app-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px;
  gap: 14px;
}
.grid > .app-card + .app-card {
  border-top: 1px solid rgba(111, 78, 55, 0.1);
}
.grid > .app-card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(111, 78, 55, 0.04);
}

.app-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--tile-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--coffee);
  stroke-width: 1.8;
}

.app-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.app-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--espresso);
}
.app-desc {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--coffee);
  opacity: 0.85;
  line-height: 1.35;
}

.app-arrow {
  flex-shrink: 0;
  color: var(--beige);
}
.app-arrow svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* ===== Responsive: iPad & laptop ===== */
@media (min-width: 820px) {
  body {
    padding: 40px;
    align-items: center;
  }
  .phone {
    width: 460px;
    height: 88vh;
    max-height: 920px;
    border-radius: 34px;
  }
}
@media (min-width: 1200px) {
  .phone {
    width: 520px;
    height: 90vh;
    max-height: 1000px;
  }
}

/* ===== Reset zone (bottom of home) ===== */
.reset-zone {
  text-align: center;
  padding: 30px 20px 12px;
}
.reset-btn {
  background: transparent;
  border: 1px solid var(--beige);
  color: var(--coffee);
  opacity: 0.55;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.reset-btn:hover {
  opacity: 1;
}
.reset-btn.confirm {
  opacity: 1;
  border-color: var(--coffee);
  background: var(--coffee);
  color: var(--cream);
}
.reset-note {
  font-size: 11px;
  color: var(--coffee);
  opacity: 0.45;
  margin-top: 8px;
}

/* ===== Premium upgrade button ===== */
.premium-zone {
  text-align: center;
  padding: 20px 20px 0;
}
.premium-btn {
  background: var(--coffee);
  color: var(--cream);
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s, box-shadow 0.15s;
}
.premium-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.premium-note {
  font-size: 12px;
  color: var(--coffee);
  opacity: 0.6;
  margin-top: 8px;
}
.premium-zone.is-premium .premium-btn {
  background: var(--beige);
  color: var(--espresso);
  cursor: default;
}
.premium-zone.is-premium .premium-btn:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}

/* ===== Auth Screen (magic link) ===== */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--greet-1) 0%, var(--greet-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.auth-box {
  background: var(--cream);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  max-width: 340px;
  text-align: center;
}
.auth-logo {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--coffee);
}
.auth-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--espresso);
  margin: 0 0 8px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--coffee);
  opacity: 0.7;
  margin: 0 0 24px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-msg {
  animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* ===== Full-screen fit on phones & when installed as an app ===== */
@media (max-width: 480px), (display-mode: standalone) {
  body {
    padding: 0;
    display: block;
    background: var(--bg);
  }
  .phone {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .titlebar {
    padding-top: calc(42px + env(safe-area-inset-top));
  }
}


/* ===== Mobile app polish: no zoom, locked layout, nav pinned ===== */
html, body {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-y;
}
/* Inputs at >=16px so iOS never auto-zooms on focus */
input, select, textarea, button {
  font-size: 16px !important;
}
/* Only the middle screen area scrolls; smooth momentum, no bounce past edges */
.screen {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Nav stays at the very bottom, clear of the home indicator */
.bottom-nav {
  flex-shrink: 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
@media (max-width: 480px), (display-mode: standalone) {
  html, body { height: 100vh; height: 100dvh; }
  .phone {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* === Uniform full-height layout so the bottom nav always sits at the very bottom === */
@media (max-width: 900px), (display-mode: standalone) {
  html, body {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }
  body {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  .phone {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .bottom-nav {
    flex-shrink: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}


/* ---- Menu bar sits on the bottom edge of the screen ----
   On a phone the app frame does not always reach the very bottom, which left a
   pale strip of page under the bar, and nudging the bar down by hand only made
   the frame clip it. Taking the bar out of the frame with fixed positioning
   parks it on the bottom edge of the screen no matter what the frame is doing,
   and it covers any strip that is left over. */
@media (max-width: 480px), (display-mode: standalone),
       (hover: none) and (pointer: coarse) {
  .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Beats the by-hand nudge that used to shift and outline the bar. */
    transform: none !important;
    box-shadow: none !important;
    /* The safe-area allowance was being piled on top of the bar's own 20px, which
       floated the icons well clear of the bottom edge. Take whichever of the two
       is larger rather than adding them, minus a touch, so the icons sit low
       without straying onto the home indicator. */
    padding-bottom: max(6px, calc(env(safe-area-inset-bottom) - 22px)) !important;
    /* Give the top the exact same gap as the bottom, so the icons are centred
       in the strip rather than being shoved upward by a bigger gap below. */
    padding-top: max(6px, calc(env(safe-area-inset-bottom) - 22px)) !important;
    /* Sits under the tool sheets. Every add/edit sheet in the app uses a
       backdrop at z-index 40 or above, so a bar at 50 painted straight over
       their Save row and there was no way to finish an entry. */
    z-index: 35;
  }
  /* The bar no longer takes up room in the layout, so hold that room open or
     the last card on every page hides behind it. */
  .screen {
    padding-bottom: max(70px, calc(env(safe-area-inset-bottom) + 42px)) !important;
  }

  /* The icons looked high because the bar itself was a tall panel, not because
     of the gap under them. Tighten the row into a slim strip instead, close to
     the height a phone's own tab bar uses, so the icons end up near the edge. */
  .nav-item {
    padding: 3px 10px !important;
    gap: 3px !important;
    border-radius: 12px !important;
  }
  .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .nav-label {
    font-size: 10px !important;
  }
  /* Anything showing behind the frame now matches the bar instead of glaring. */
  html, body {
    background: var(--tile) !important;
  }
  /* Placing itself correctly means the by-hand control is just clutter. */
  #eeSetNav {
    display: none !important;
  }
}

/* Sheet close button. This markup exists on Progress, Meal Planner and
   Workout too, but those pages never load balance.css, so it was rendering
   as a bare grey browser button with an outset border. */
.bl-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(111, 78, 55, 0.1);
  color: #6f4e37;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bl-icon-btn i {
  width: 18px;
  height: 18px;
}

/* ---------- first-run landing + post sign-in install guide ---------- */
.ee-land-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("./icon-192.png");
  background-repeat: no-repeat;
  background-position: center 16%;
  background-size: 290px 290px;
  opacity: 0.07;
}
.auth-overlay .auth-box {
  position: relative;
  z-index: 1;
}
.auth-overlay .auth-logo {
  display: none;
}
.ee-land-icon {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(75, 56, 50, 0.22);
}
.ee-land-tag {
  margin: 2px 0 16px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--coffee);
  opacity: 0.72;
}
.ee-ig-back {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(40, 28, 24, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ee-ig-card {
  width: 100%;
  max-width: 330px;
  max-height: 100%;
  overflow: auto;
  padding: 20px 18px 16px;
  border-radius: 22px;
  background: #fffaf3;
  box-shadow: 0 18px 50px rgba(40, 28, 24, 0.32);
  text-align: left;
}
.ee-ig-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #4b3832;
  text-align: center;
}
.ee-ig-sub {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #6f4e37;
  opacity: 0.75;
  text-align: center;
}
.ee-ig-step {
  display: flex;
  gap: 11px;
  margin-bottom: 13px;
}
.ee-ig-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: #6f4e37;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ee-ig-txt {
  flex: 1 1 auto;
}
.ee-ig-h {
  font-size: 12.5px;
  font-weight: 600;
  color: #4b3832;
  margin-bottom: 2px;
}
.ee-ig-p {
  font-size: 11.5px;
  line-height: 1.6;
  color: #6f4e37;
  opacity: 0.85;
}
.ee-ig-p svg {
  vertical-align: -4px;
  margin: 0 2px;
}
.ee-ig-ok {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: #6f4e37;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ee-ig-skip {
  display: block;
  width: 100%;
  margin-top: 9px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11.5px;
  color: #6f4e37;
  opacity: 0.6;
  cursor: pointer;
}

/* Quiet doorway to the page that explains every tool. Kept deliberately
   plain so it never competes with the four system tiles above it. */
.home-help {
  text-align: center;
  margin: 2px 0 10px;
}
.home-help a {
  font-size: 12.5px;
  color: var(--coffee, #4b3832);
  opacity: 0.65;
  text-decoration: none;
  border-bottom: 1px solid rgba(75, 56, 50, 0.22);
  padding-bottom: 1px;
}
.home-help a:active {
  opacity: 0.9;
}