/* ==========================================================================
   TrackIt — iOS-flavoured stylesheet
   Tokens → base → nav → lists → cards → sheet → alarm → tab bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* System colours (iOS light) */
  --tint:        #007AFF;
  --green:       #34C759;
  --orange:      #FF9500;
  --red:         #FF3B30;
  --purple:      #AF52DE;
  --gray:        #8E8E93;

  --bg:          #F2F2F7;   /* grouped background */
  --surface:     #FFFFFF;   /* cards, rows */
  --surface-2:   #FFFFFF;
  --fill:        rgba(120,120,128,.16);
  --fill-2:      rgba(120,120,128,.10);

  --label:       #000000;
  --label-2:     rgba(60,60,67,.60);
  --label-3:     rgba(60,60,67,.30);
  --separator:   rgba(60,60,67,.22);

  --blur:        saturate(180%) blur(20px);
  --nav-bg:      rgba(249,249,249,.82);

  /* Type scale */
  --f-large:     34px;
  --f-title:     22px;
  --f-body:      17px;
  --f-callout:   16px;
  --f-foot:      13px;
  --f-cap:       12px;
  --leading:     1.45;

  /* 8px spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 80px;

  /* Radii */
  --r-row:  10px;
  --r-card: 12px;
  --r-sheet:16px;
  --r-pill: 999px;

  --tap: 44px;                       /* minimum touch target */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: calc(52px + var(--safe-b));
}

@media (prefers-color-scheme: dark) {
  :root {
    --tint:      #0A84FF;
    --green:     #30D158;
    --orange:    #FF9F0A;
    --red:       #FF453A;
    --purple:    #BF5AF2;

    --bg:        #000000;
    --surface:   #1C1C1E;
    --surface-2: #2C2C2E;
    --fill:      rgba(120,120,128,.32);
    --fill-2:    rgba(120,120,128,.18);

    --label:     #FFFFFF;
    --label-2:   rgba(235,235,245,.60);
    --label-3:   rgba(235,235,245,.30);
    --separator: rgba(84,84,88,.65);
    --nav-bg:    rgba(28,28,30,.80);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; cursor: pointer; }
input, textarea, select { background: none; border: 0; }
input:focus, textarea:focus, select:focus, button:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }

[hidden] { display: none !important; }

.ic { width: 24px; height: 24px; display: block; flex: none; }
.ic--14 { width: 14px; height: 14px; }
.ic--16 { width: 16px; height: 16px; }
.ic--18 { width: 18px; height: 18px; }
.ic--20 { width: 20px; height: 20px; }
.ic--22 { width: 22px; height: 22px; }
.ic--26 { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   3. Sign in
   -------------------------------------------------------------------------- */
.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s4) var(--s3) calc(var(--s4) + var(--safe-b));
}
.auth__inner { width: 100%; max-width: 420px; text-align: center; }
.auth__mark { display: flex; justify-content: center; margin-bottom: var(--s3); }
.auth__title {
  margin: 0;
  font-size: var(--f-large);
  font-weight: 700;
  letter-spacing: -.6px;
}
.auth__sub { margin: var(--s1) 0 var(--s4); color: var(--label-2); font-size: var(--f-callout); }
.auth__error {
  margin: var(--s3) 0 0;
  color: var(--red);
  font-size: var(--f-foot);
}
.card--form { text-align: left; }

/* --------------------------------------------------------------------------
   4. App shell + nav
   -------------------------------------------------------------------------- */
.app { padding-bottom: calc(var(--tabbar-h) + var(--s5)); }

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--safe-t);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: .5px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--separator); }

.nav__bar {
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s3);
}
.nav__compact {
  font-size: var(--f-body);
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.nav.is-stuck .nav__compact { opacity: 1; transform: none; }
.nav__action {
  width: var(--tap); height: var(--tap);
  margin-right: -12px;
  display: grid; place-items: center;
  color: var(--tint);
}
.nav__large { padding: 0 var(--s3) var(--s2); }
.nav__title {
  margin: 0;
  font-size: var(--f-large);
  font-weight: 700;
  letter-spacing: -.6px;
}
.nav__caption { margin: 2px 0 0; color: var(--label-2); font-size: var(--f-foot); }
.nav.is-stuck .nav__large { display: none; }

.searchbar { display: flex; gap: var(--s2); align-items: center; padding: 0 var(--s3) var(--s2); }
.searchbar__field {
  flex: 1;
  display: flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s2);
  background: var(--fill); border-radius: var(--r-row);
  color: var(--label-2);
}
.searchbar__field input { flex: 1; min-width: 0; color: var(--label); font-size: var(--f-callout); }
.searchbar__cancel { color: var(--tint); font-size: var(--f-callout); min-height: var(--tap); }

.view { padding: var(--s2) 0 var(--s4); }

/* --------------------------------------------------------------------------
   5. Cards & rows (inset grouped)
   -------------------------------------------------------------------------- */
.card {
  margin: var(--s2) var(--s3) var(--s4);
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}
.group-title {
  margin: var(--s4) var(--s3) var(--s2);
  padding-left: var(--s1);
  font-size: var(--f-foot);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--label-2);
}
.fineprint {
  margin: var(--s4) var(--s3);
  text-align: center;
  font-size: var(--f-cap);
  color: var(--label-3);
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
}
.row::after {
  content: "";
  position: absolute; left: var(--s3); right: 0; bottom: 0;
  height: .5px; background: var(--separator);
}
.row--last::after, .row:last-child::after { display: none; }
.row__label { flex: 1; min-width: 0; }
.row__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 7px; color: #fff;
}
.row__icon--blue   { background: var(--tint); }
.row__icon--red    { background: var(--red); }
.row__icon--green  { background: var(--green); }
.row__icon--orange { background: var(--orange); }
.row__icon--gray   { background: var(--gray); }
.row__control {
  max-width: 58%;
  text-align: right;
  color: var(--label-2);
  font-size: var(--f-callout);
}
.row__trail {
  display: flex; align-items: center; gap: 6px;
  color: var(--tint); font-size: var(--f-callout);
  min-height: var(--tap);
}
.row__trail--danger { color: var(--red); }

.row--input { align-items: center; }
.row--input input, .row--input textarea {
  flex: 1; min-width: 0; width: 100%;
  font-size: var(--f-body);
  resize: none;
}
.row--input .row__label { flex: none; width: 82px; color: var(--label-2); font-size: var(--f-callout); }
.input-lead { font-size: 18px !important; font-weight: 600; }
::placeholder { color: var(--label-3); }

.row--quick {
  gap: var(--s2);
  overflow-x: auto;
  padding-top: 0;
  scrollbar-width: none;
}
.row--quick::-webkit-scrollbar { display: none; }
.row--quick button {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--fill);
  font-size: var(--f-foot);
  color: var(--tint);
}

/* --------------------------------------------------------------------------
   6. Task rows
   -------------------------------------------------------------------------- */
.task {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 11px var(--s3) 11px 12px;
  background: var(--surface);
}
.task::after {
  content: "";
  position: absolute; left: 52px; right: 0; bottom: 0;
  height: .5px; background: var(--separator);
}
.task:last-child::after { display: none; }

.task__check {
  width: 40px; height: 40px;
  margin: -6px 0 -6px -6px;
  display: grid; place-items: center;
  color: var(--label-3);
  flex: none;
}
.task__check .ic { width: 25px; height: 25px; }
.task__check--high { color: var(--red); }
.task.is-done .task__check { color: var(--green); }
.task__check svg { transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.task__check:active svg { transform: scale(.86); }

.task__main { flex: 1; min-width: 0; padding-top: 2px; }
.task__title {
  margin: 0;
  font-size: var(--f-body);
  overflow-wrap: anywhere;
}
.task.is-done .task__title { color: var(--label-3); text-decoration: line-through; }
.task__notes {
  margin: 2px 0 0;
  font-size: var(--f-foot);
  color: var(--label-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.task__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 5px;
  font-size: var(--f-cap);
  color: var(--label-2);
}
.task__meta b { font-weight: 400; }
.task__meta .ic { width: 13px; height: 13px; }
.meta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--fill-2);
}
.meta--late { background: rgba(255,59,48,.14); color: var(--red); }
.meta--soon { background: rgba(255,149,10,.16); color: var(--orange); }
.meta--list { font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.task__edit {
  width: var(--tap); height: var(--tap);
  margin: -4px -10px -4px 0;
  display: grid; place-items: center;
  color: var(--label-3);
  flex: none;
}

/* completion animation */
@keyframes pop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.task__check.just-done svg { animation: pop .3s ease-out; }

/* --------------------------------------------------------------------------
   7. Progress card (the signature element)
   -------------------------------------------------------------------------- */
.progress {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) var(--s3) var(--s4);
  padding: var(--s3);
  background: var(--surface);
  border-radius: var(--r-card);
}
.progress__ring { position: relative; display: grid; place-items: center; flex: none; }
.progress__ring svg { display: block; }
#ringArc { transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1); }
.progress__pct {
  position: absolute;
  font-size: 19px; font-weight: 700; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.progress__meta { min-width: 0; }
.progress__head { margin: 0; font-size: var(--f-callout); font-weight: 600; }
.progress__sub  { margin: 2px 0 0; font-size: var(--f-foot); color: var(--label-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  font-size: var(--f-cap);
  color: var(--label-2);
}
.chip b { color: var(--label); font-weight: 600; }
.chip--flame { color: var(--orange); }
.chip--warn  { background: rgba(255,59,48,.14); color: var(--red); }
.chip--warn b { color: var(--red); }

/* --------------------------------------------------------------------------
   8. Track view
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
  margin: var(--s2) var(--s3) 0;
}
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s3);
  background: var(--surface);
  border-radius: var(--r-card);
}
.stat__num {
  font-size: 28px; font-weight: 700; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}
.stat__cap { font-size: var(--f-foot); color: var(--label-2); }

.card--chart { padding: var(--s3); }
.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: var(--s2);
  height: 132px;
}
.bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar__col {
  width: 100%;
  max-width: 26px;
  border-radius: 6px;
  background: var(--tint);
  transition: height .5s cubic-bezier(.22,1,.36,1);
  min-height: 4px;
}
.bar--empty .bar__col { background: var(--fill); }
.bar--today .bar__col { background: var(--green); }
.bar__cap { font-size: var(--f-cap); color: var(--label-2); }
.bar__val { font-size: var(--f-cap); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: block;
  width: calc(100% - var(--s3) * 2);
  margin: var(--s2) var(--s3);
  min-height: var(--tap);
  padding: 12px var(--s3);
  border-radius: var(--r-card);
  font-size: var(--f-body);
  font-weight: 600;
  text-align: center;
  transition: opacity .15s ease, transform .1s ease;
}
.btn:active { opacity: .7; transform: scale(.985); }
.btn--primary { background: var(--tint); color: #fff; }
.btn--tinted  { background: var(--fill); color: var(--tint); }
.btn--plain   { color: var(--tint); font-weight: 400; }
.btn--danger  { background: var(--surface); color: var(--red); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.seg {
  display: inline-flex;
  padding: 2px;
  background: var(--fill);
  border-radius: 9px;
}
.seg button {
  padding: 6px 10px;
  border-radius: 7px;
  font-size: var(--f-foot);
  color: var(--label);
  min-height: 32px;
}
.seg button.is-on {
  background: var(--surface-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  font-weight: 600;
}
.seg--sm { flex: none; margin-left: auto; }
.seg--sm button { padding: 5px 9px; font-size: var(--f-cap); min-height: 30px; }

.fab {
  position: fixed;
  right: var(--s3);
  bottom: calc(var(--tabbar-h) + var(--s3));
  z-index: 45;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,122,255,.38);
  transition: transform .15s ease;
}
.fab:active { transform: scale(.92); }

/* --------------------------------------------------------------------------
   10. Tab bar
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--safe-b);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-top: .5px solid var(--separator);
}
.tab {
  position: relative;
  min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--label-2);
  font-size: 10px;
  transition: color .15s ease;
}
.tab.is-active { color: var(--tint); }
.tab__dot {
  position: absolute; top: 6px; right: 50%; margin-right: -20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
}

/* --------------------------------------------------------------------------
   11. Sheet
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .3s ease;
}
.scrim.is-on { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.22);
}
.sheet.is-open { transform: none; }
.sheet__grabber {
  width: 36px; height: 5px;
  margin: var(--s2) auto 0;
  border-radius: var(--r-pill);
  background: var(--label-3);
}
.sheet__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--s2) var(--s3);
}
.sheet__title { margin: 0; font-size: var(--f-body); font-weight: 600; text-align: center; }
.sheet__btn {
  min-height: var(--tap);
  color: var(--tint);
  font-size: var(--f-body);
  text-align: left;
}
.sheet__btn--bold { font-weight: 600; text-align: right; }
.sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--s4) + var(--safe-b));
}
.sheet__body .card { margin-bottom: var(--s3); }

/* --------------------------------------------------------------------------
   12. Alarm banner
   -------------------------------------------------------------------------- */
.alarm {
  position: fixed;
  top: calc(var(--safe-t) + var(--s2));
  left: var(--s2); right: var(--s2);
  z-index: 90;
  transform: translateY(-140%);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
}
.alarm.is-on { transform: none; }
.alarm__card {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: 12px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
}
.alarm__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--red); color: #fff;
  animation: ring 1s ease-in-out infinite;
}
@keyframes ring {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-11deg); }
  75% { transform: rotate(11deg); }
}
.alarm__text { flex: 1; min-width: 0; }
.alarm__kicker { margin: 0; font-size: var(--f-cap); color: var(--label-2); text-transform: uppercase; letter-spacing: .4px; }
.alarm__title  { margin: 1px 0 0; font-size: var(--f-callout); font-weight: 600; overflow-wrap: anywhere; }
.alarm__meta   { margin: 1px 0 0; font-size: var(--f-foot); color: var(--label-2); }
.alarm__close  { width: 32px; height: 32px; display: grid; place-items: center; color: var(--label-2); flex: none; }
.alarm__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5px;
  background: var(--separator);
  border-radius: 0 0 var(--r-sheet) var(--r-sheet);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
}
.alarm__actions button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap);
  background: var(--surface);
  color: var(--tint);
  font-size: var(--f-callout);
}
.alarm__actions .is-primary { color: var(--green); font-weight: 600; }

/* --------------------------------------------------------------------------
   13. Empty state + toast
   -------------------------------------------------------------------------- */
.empty {
  margin: var(--s6) var(--s3);
  text-align: center;
  color: var(--label-2);
}
.empty__mark {
  width: 56px; height: 56px;
  margin: 0 auto var(--s2);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fill-2);
  color: var(--label-3);
}
.empty h3 { margin: 0 0 var(--s1); font-size: var(--f-body); font-weight: 600; color: var(--label); }
.empty p  { margin: 0; font-size: var(--f-foot); }

.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--tabbar-h) + var(--s4));
  z-index: 95;
  transform: translate(-50%, 14px);
  max-width: calc(100% - var(--s5));
  padding: 10px var(--s3);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.84);
  color: #fff;
  font-size: var(--f-foot);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   14. Larger screens — keep the phone column centred
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .app, .alarm, .sheet, .tabbar { max-width: 520px; margin-inline: auto; }
  .tabbar, .sheet { left: 50%; right: auto; transform: translateX(-50%); width: 100%; }
  .sheet { transform: translate(-50%, 100%); }
  .sheet.is-open { transform: translate(-50%, 0); }
  .alarm { left: 50%; right: auto; width: min(520px, 100% - var(--s3)); transform: translate(-50%, -140%); }
  .alarm.is-on { transform: translate(-50%, 0); }
  .fab { right: max(var(--s3), calc(50vw - 260px + var(--s3))); }
}

/* --------------------------------------------------------------------------
   15. Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}