*,*::before,*::after{box-sizing:border-box}
    :root{
      --bg:#0b0d10;--panel:#11161c;--muted:#8b98a5;--border:#202830;
      --accent:#4f9cff;--accent2:#7c5cff;--accent3:#22c55e
    }
    body{background:var(--bg);color:#e6edf6;-webkit-font-smoothing:antialiased}
    @media (prefers-color-scheme:light){body{background:#fafafa;color:#0b1220}}
    .glass{border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border-radius:18px;padding:16px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px rgba(0,0,0,.25)}
/* Slight red-gray tint for critical task cards */
.critical-card {
  background: linear-gradient(
    180deg,
    rgba(60, 20, 20, 0.20),
    rgba(40, 15, 15, 0.15)
  ) !important;
  border-color: #3a1a1a !important;
}
    @media (prefers-color-scheme:light){.glass{background:#fff;border-color:#e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.04)}}
    .btn{border:1px solid var(--border);border-radius:12px;padding:8px 12px;white-space:nowrap}
    .btn-toolbar{padding:6px 8px;font-size:11px}
    .btn-task{padding:6px 8px;font-size:11px}
    .btn-ghost{background:transparent}
    .btn-primary{background:linear-gradient(180deg, #0f4d4d, #0a2f2f);color:#fff;border:none}
    .btn-accent{background:linear-gradient(180deg,var(--accent2),#5a3fe0);color:#fff;border:none}
    .btn-success{background:linear-gradient(180deg,#0f4d4d,#0a2f2f);color:#fff;border:none}
    .btn-teal {background: linear-gradient(180deg, #0f4d4d, #0a2f2f);color: #fff;border: none;}
    .btn-plum {background: linear-gradient(180deg, #2F2B78, #1B1947);color: #fff;border: none;}
 .btn-warn {
  background: #eaa74a;   /* muted creamsicle / dirty pastel orange */
  color: #fff;
  border: none;
  border-radius: 12px;
}
    .btn-deny{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border:none}

.btn-work {
  background: rgba(147, 197, 253, 0.35); /* light powder blue */
  border: 1px solid rgba(147, 197, 253, 0.8);
  color: #dbeafe; /* soft blue text */
}

.btn-work:hover {
  background: rgba(147, 197, 253, 0.55);
}


    /* Today's points breakdown bar */
    .today-breakdown-bar{
      width:100%;
      height:12px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(15,23,42,0.95);
      border:1px solid rgba(15,23,42,0.95);
    }
    .todayBreakdown-seg{
      height:100%;
    }

    /* Sleep - plum */
    .todayBreakdown-sleep{
      background:linear-gradient(90deg, #2F2B78, #1B1947);
    }

    /* Tasks - teal */
    .todayBreakdown-tasks{
      background:linear-gradient(90deg, #0f4d4d, #0a2f2f);
    }

    /* Habits - creamsicle orange */
    .todayBreakdown-habits{
      background:#fb923c;
    }

    /* Vices - oxblood */
    .todayBreakdown-vices{
      background:#4a0b0b;
    }

    /* Flux - aqua */
    .todayBreakdown-flex{
      background:#22c5c5;
    }

/* Calories - forest green */
.todayBreakdown-calories{
  background: linear-gradient(90deg, #14532d, #166534);
}



    /* New delete style: darker oxblood red */
    .btn-delete{
      background:#3b0b0f;
      color:#fff;
      border:none;
    }
    .btn-delete:hover{
      background:#521018;
    }

    /* Bigger, easier-to-tap checkmark button */
    .btn-check{
      padding:8px 13px;
      font-size:13px;
    }

    .input,select,textarea{border:1px solid var(--border);background:#0f1419;color:#e6edf6;border-radius:12px;padding:10px 12px;width:100%}
    @media (prefers-color-scheme:light){.input,select,textarea{background:#fff;color:#0b1220}}
/* Fix mobile Safari making the date input stick out of the card */
@media (max-width:640px){
  #dueDateInput{
    display:block;
    width: calc(100% - 12px);  /* shrink it more */
    margin: 0 6px;             /* add 6px gap left & right */
  }
}

    .tag{border-radius:999px;padding:2px 8px;font-size:12px}
    .muted{color:var(--muted)}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.title-wrap{flex:1 1 auto;min-width:0}

/* Mobile bottom nav: equal-width buttons + thin dividers */
.mobile-bottom-nav a{
  flex: 1;
  text-align: center;
}

.mobile-bottom-nav a + a{
  border-left: 1px solid rgba(15,23,42,0.7);
}

/* Light mode tweak so dividers aren’t too harsh */
@media (prefers-color-scheme: light){
  .mobile-bottom-nav a + a{
    border-color: rgba(148,163,184,0.7);
  }
}


/* Default (desktop + general) */
.task-title{word-break:break-word;overflow-wrap:anywhere}

/* On small screens, don't break between every character */
@media (max-width:640px){
  .task-title{
    word-break:normal;
    overflow-wrap:break-word; /* only break at normal points */
  }
}

.sectionDivider{margin:18px 0 8px;border-top:1px dashed var(--border);padding-top:8px;font-weight:700;opacity:.9}
    .habitRow{
      display:flex;
      align-items:center;
      gap:.5rem; /* we will handle right alignment with .habitControls */
    }

    /* LEFT SIDE: name + points + streak */
    .habitLeft{
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap:wrap;
      min-width:0;
    }

    /* MIDDLE: Edit / Delete / ▲ / ▼ (pushed to the right) */
    .habitControls{
      display:flex;
      align-items:center;
      gap:.35rem;
      margin-left:auto; /* pushes controls + bubbles toward the right on desktop */
    }

.habitDaysRow{
  display:flex;
  gap:.35rem;
  flex-wrap:nowrap;
}

.chip-high {
  background: rgba(180, 83, 9, 0.18) !important;
  border: 1px solid #f97316 !important;
  color: #f97316 !important; /* matches archive behavior */
}
.current-period-row {
  color: #f97316 !important;
}

.leaderboard-current {
  color: #f97316 !important;
}


/* DESKTOP DAY BUBBLES */
.habitDay{
  width:48px;        /* ← add width */
  height:40px;       /* ← taller click target */
  border-radius:10px;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  font-size:14px;
  cursor:pointer;
}

.habitDay.on {background:#3D1C0B;border-color:#fb923c;}
.habitDay.off{background:transparent}

/* Vices: incomplete / failed days – match "critical" task tint */
.viceDay.off{
  background: transparent;
}

.viceDay.off.past{
  background: linear-gradient(
    180deg,
    rgba(60, 20, 20, 0.20),
    rgba(40, 15, 15, 0.15)
  );
  border-color: #3a1a1a;
  color: #ffffff;
}




/* DESKTOP WEEKDAY LABEL CELLS (align with habit/vices bubbles) */
.habitLabelDay{
  width:48px;
  height:24px;
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--muted);
  border:none;
  cursor:default;
}

/* Habits & Vices: make points, streak, Edit, Delete orange */
.habitRow .flex.items-center.gap-2.flex-wrap.text-xs .tag,
.habitRow .flex.items-center.gap-2.flex-wrap.text-xs button[data-act="habit-edit"],
.habitRow .flex.items-center.gap-2.flex-wrap.text-xs button[data-act="habit-delete"]{
  color:#fb923c;
}

    .habitName{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


    /* Points badge on left of each task bubble */
    .taskPoints{
      min-width:52px;
      text-align:center;
    }
    .taskPointsNumber{
      font-size:1.4rem;
      font-weight:800;
      line-height:1;
    }
    .taskPointsLabel{
      font-size:.65rem;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    /* Tighten vertical padding just for task bubbles, not all glass panels */
    #taskList .glass,
    #archiveList .glass{
      padding:10px 14px;
    }

/* Flex Actions: give each row its own bubble */
#flexList .glass{
  padding:10px 12px;
}

@media (max-width:640px){
  header .row{display:block}
  .toolbar{justify-content:flex-start;margin-top:.5rem;overflow-x:auto}

  /* MOBILE HABIT LAYOUT:
     - name + controls stack vertically
     - day boxes on a row below
  */
  .habitRow{
    flex-direction:column;
    align-items:flex-start;
    gap:0.35rem;
    margin-bottom:1rem; /* ← ADD THIS */
  }

  /* On mobile, keep controls left-aligned (don't push them right) */
  .habitControls{
    margin-left:0;
  }


  .habitDaysRow{
    width:100%;
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr)); /* 7 equal columns */
    gap:4px;
    padding-bottom:4px;
  }

  /* Make each bubble/label fill its grid cell */
  .habitDaysRow .habitDay,
  .habitDaysRow .habitLabelDay{
    width:100%;
  }

  /* Let the habit name wrap fully (no ellipsis) */
  .habitName{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  /* Mobile: second row = pts/streak/Edit/Delete on left, arrows on right */
  .habitRow .flex.items-center.gap-2.flex-wrap.text-xs{
    width:100%;              /* let that second row span full width */
  }

  .habitRow .flex.items-center.gap-2.flex-wrap.text-xs button[data-act="habit-up"]{
    margin-left:auto;        /* pushes ▲ (and then ▼) to the far right */
  }

  /* BUT keep weekday labels horizontal */
  #habitWeekLabels .habitRow,
  #viceWeekLabels .habitRow{
    flex-direction:row;
    align-items:center;
  }

  /* MOBILE ONLY: compact Edit/Delete/Up/Down buttons */
  .habitControls .btn,
  .habitControls button{
    padding: 2px 6px !important;
    height: 26px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* MOBILE ONLY: compact day bubbles */
  .habitDaysRow .habitDay{
    height: 30px !important;        /* reduce height */
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* Keep bubble alignment tight inside the grid */
  .habitDaysRow{
    margin-top: -4px;               /* optional: pulls row up slightly */
  }

  /* Mobile: show the 4 recent sleep cards in one tidy row */
  #sleepHistory{
    display:grid;                         /* override the flex class */
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:0.5rem;                           /* tweak if you want tighter: 0.4rem, 0.3rem, etc. */
  }

  /* Mobile: make task cards more compact */
  #taskList .glass,
  #archiveList .glass{
    padding:8px 10px;              /* less vertical padding */
  }

  /* shrink the internal flex gap + align to top so things don't look so tall */
  #taskList .glass > .flex,
  #archiveList .glass > .flex{
    gap:0.5rem;
    align-items:flex-start;
  }

  /* slightly smaller points badge */
  #taskList .taskPoints,
  #archiveList .taskPoints{
    min-width:44px;
  }
  #taskList .taskPointsNumber,
  #archiveList .taskPointsNumber{
    font-size:1.2rem;
  }
  #taskList .taskPointsLabel,
  #archiveList .taskPointsLabel{
    font-size:0.6rem;
  }

  /* smaller buttons inside each task */
  #taskList .btn-task,
  #archiveList .btn-task{
    padding:4px 8px;
    font-size:10px;
  }

}  /* ← IMPORTANT: this closes the mobile styles */


/* Align weekday labels with the day bubbles on DESKTOP */
@media (min-width: 640px){
  #habitWeekLabels,
  #viceWeekLabels{
    display:flex;
    justify-content:flex-end;  /* push the labels block to the right edge */
    margin-left:0;             /* make sure no leftover margin */
  }
}



    @media (min-width:641px){
      header .row{display:flex;align-items:center;justify-content:space-between}
    }

    footer{font-size:11px;color:var(--muted)}

    /* --- Points toast --- */
    .points-toast-container{
      position:fixed;
      bottom:18px;
      left:50%;
      transform:translateX(-50%);
      z-index:1000;
      pointer-events:none;
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:center;
    }
    .points-toast{
      padding:6px 14px;
      border-radius:999px;
      font-size:13px;
      font-weight:600;
      color:#f9fafb;
      background: linear-gradient(180deg, #0f4d4d, #0a2f2f);color: #fff;border: none;
      box-shadow:0 10px 30px rgba(0,0,0,.45);
      opacity:0;
      transform:translateY(10px) scale(.95);
      animation:pointsToastInOut 3s ease-out forwards;
    }
    @keyframes pointsToastInOut{
      0%{
        opacity:0;
        transform:translateY(12px) scale(.92);
      }
      12%{
        opacity:1;
        transform:translateY(0) scale(1);
      }
      80%{
        opacity:1;
        transform:translateY(0) scale(1);
      }
      100%{
        opacity:0;
        transform:translateY(8px) scale(.97);
      }
    }

.sleep-chip{
  background: linear-gradient(180deg, #2F2B78, #1B1947);
  color:#fff;
  border:none !important;

  /* make them all the same size */
  width: 75px;
  height: 75px;

  /* center content vertically + horizontally */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
  border-radius:12px; /* or 999px if you want very pill-like */
}

/* date line inside chip */
.sleep-chip-date{
  font-size:11px;
  opacity:0.85;
  margin-bottom:4px;
}

/* score line inside chip */
.sleep-chip-score{
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.sleep-today-card{
  background: linear-gradient(180deg, #2F2B78, #1B1947);
  border-radius:16px;
  padding:16px;
  color:#fff;
}

.calories-today-card {
  background: linear-gradient(180deg, #0f4d4d, #0a2f2f);
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  border: 1px solid rgba(15, 77, 77, 0.5);
}

.work-today-card {
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.5), rgba(59, 130, 246, 0.35));
  border-radius: 16px;
  padding: 16px;
  color: #e3f2ff;
  border: 1px solid rgba(147, 197, 253, 0.5);
}

.cal-chip{
  background: linear-gradient(180deg, #0f4d4d, #0a2f2f); /* same as your teal buttons */
  color:#fff;
  border:none !important;

  width:75px;
  height:75px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:12px;
}

.cal-chip-date{
  font-size:11px;
  opacity:0.85;
  margin-bottom:4px;
}

.cal-chip-value{
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.sleep-chip-pts,
.cal-chip-pts {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

.work-chip {
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.5), rgba(59, 130, 246, 0.35));
  border: 1px solid rgba(147, 197, 253, 0.5);
  border-radius: 0.6rem;
  padding: 0.4rem 0.55rem;
  text-align: center;
  min-width: 64px;
}

.work-chip-date {
  font-size: 11px;
  color: #e3f2ff;
}

.work-chip-value {
  font-size: 18px;
  font-weight: 700;
  color: #f8fbff;
}

.work-chip-pts {
  font-size: 11px;
  color: #e3f2ff;
}


/* Make Add-a-Task card more compact */
#addTaskCard{
  padding-bottom:10px !important;
  padding-top:14px !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

/* ============================================
   MOBILE-ONLY: tighten task card layout
   ============================================ */
@media (max-width: 640px) {

  /* Task content block (title + badges + buttons) */
  .task-card-content {
    margin-left: 3.75rem; /* tune this number for exact spacing */
  }

  /* Points block (big number + PTS) */
  .task-card-points {
    width: 3.5rem; /* slightly narrower than default */
  }
}