/* Atlas Money: new Goals screen styles (owner's atlas-goals-update, 2026-10-17).
   The page background (#F6FEE4 + atlas-bg.jpg) is painted on body[data-tab="goals"]
   in index.html so the rubber-band edges match; .goals-page carries the type. */

.goals-page {
  min-height: 100vh;
  padding-top: 0; /* owner 2026-10-23: the shared header carries its own 4px under the safe area */
  font-family: "Inter Tight", system-ui, sans-serif;
  color: #1C1C1E;
  font-variant-numeric: tabular-nums;
}

/* Header (his image): small "October" over a big "Goals", the dark "+ Add" pill on the right */
/* owner 2026-10-23: under the shared header (screen-header.css; the plus circle is the old Add): the month, then the
   real standing ("2 of 3 on track") in place of the page name */
.gp-head { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 24px; }
.gp-month { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #1C1C1E; opacity: .62; line-height: 1; }
.gp-head h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: #000000; line-height: 1.05; }

/* Goal editor sheet (portaled to body so it rides above the tab bar) */
.gs-ov { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, 0.35); display: flex; align-items: flex-end; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: gsFade 0.2s ease; }
html.gs-lock, html.gs-lock body { overflow: hidden; }
@keyframes gsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.gs-sheet {
  width: 100%; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-sizing: border-box;
  animation: gsUp 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
  background: #FFFFFF; border-radius: 26px 26px 0 0; padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  font-family: "Inter Tight", system-ui, sans-serif; color: #1C1C1E; font-variant-numeric: tabular-nums;
  box-shadow: 0 -12px 40px rgba(19, 36, 27, 0.18);
}
.gs-grab { width: 40px; height: 5px; border-radius: 3px; background: #D1D1D6; margin: 0 auto 14px; }
.gs-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; padding-right: 48px; }
.gs-sheet { position: relative; }
.gs-x { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: none; border-radius: 20px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; padding: 0; z-index: 2; }
.gs-x:active { transform: scale(0.94); }
.gs-form { display: grid; gap: 10px; }
.gs-lab { font-size: 12px; font-weight: 500; color: #6E6E73; margin-bottom: 4px; }
.gs-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #1C1C1E; background: #F2F2F7; border: 1px solid #D1D1D6; border-radius: 12px; padding: 10px 12px; outline: none; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-chip { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 999px; border: none; background: #F2F2F7; color: #1C1C1E; }
.gs-chip.on { background: #000000; color: #FFFFFF; }
.gs-row { display: flex; gap: 10px; }
.gs-row > div { flex: 1; }
.gs-live { font-size: 14px; min-height: 20px; color: #1C1C1E; }
.gs-btns { display: flex; align-items: center; gap: 10px; }
.gs-save { margin-left: auto; font: inherit; font-size: 15px; font-weight: 600; background: #000000; color: #FFFFFF; border: none; border-radius: 12px; padding: 11px 18px; }
.gs-save:disabled { opacity: 0.4; }
.gs-cancel { font: inherit; font-size: 15px; background: #F2F2F7; color: #1C1C1E; border: none; border-radius: 12px; padding: 11px 14px; }
.gs-del { font: inherit; font-size: 13px; color: #E5383B; background: transparent; border: none; padding: 11px 4px; }

/* Money goals card */
.mg-card {
  position: relative;
  height: 360px; /* owner 2026-10-17: the + circle left, dots up 20px, card 20px shorter */
  background: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 0 0 5px rgba(215, 243, 171, 0.55), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(22, 88, 0, 0.08);
  overflow: hidden;
}
.mg-title {
  position: absolute; left: 0; right: 0; top: 22px; height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.mg-title h2 {
  margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; color: #1C1C1E; line-height: 1;
}
.mg-stage {
  position: absolute; left: 0; right: 0; top: 60px; bottom: 0;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.mg-ring {
  position: absolute; left: calc(50% - 76px); top: 24px;
  width: 152px; height: 152px; padding: 0; margin: 0;
  border: none; background: transparent; border-radius: 76px;
  font-family: inherit; color: #1C1C1E;
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}
.mg-ring svg { position: absolute; inset: 0; }
.mg-ring svg circle { transition: all 0.5s ease; }
.mg-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mg-amt { font-size: 23.5px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #1C1C1E; margin-bottom: 6px; }
.mg-amt-side { font-size: 20px; margin-bottom: 3px; }
.mg-sub { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: #6E6E73; line-height: 1.2; }
.mg-sub-side { font-size: 16px; }
.mg-total { font-weight: 500; color: #6E6E73; line-height: 1.2; transition: opacity 0.3s ease; }
.mg-dots { position: absolute; left: 0; right: 0; top: 262px; display: flex; justify-content: center; gap: 6px; }
.mg-dots i { width: 6px; height: 6px; border-radius: 3px; background: #D1D1D6; transition: width 0.3s ease, background 0.3s ease; }
.mg-dots i.on { width: 18px; background: #000000; }

/* Milestones */
.ms-card {
  background: #FFFFFF; border: none;
  border-radius: 24px; padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(22, 88, 0, 0.08);
  display: flex; flex-direction: column; gap: 16px;
}
.ms-head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } /* owner 2026-10-23: the goal line sits on its own row under the title (beside it, a long goal name wrapped to a lone 'go') */
.ms-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.ms-h2 { display: inline-flex; align-items: center; gap: 6px; }
.ms-chev { flex: none; }
.ms-card:active { background: #F7F7F7; }
.tile[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile[role="button"]:active { transform: scale(0.98); }
.ms-sub { font-size: 13px; font-weight: 500; color: #6E6E73; line-height: 1.45; margin-top: 6px; }
.ms-row[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ms-row[role="button"]:active { background: #F2F2F7; }
.ms-later { color: #6E6E73; }
.ms-sheet { display: flex; flex-direction: column; gap: 12px; }
.ms-p { margin: 0; font-size: 15px; line-height: 1.45; color: #1C1C1E; }
.ms-dim { color: #6E6E73; font-size: 13px; }
.ms-togo { font-size: 13px; font-weight: 600; color: #6E6E73; }
.ms-list { display: flex; flex-direction: column; gap: 4px; }
.ms-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; }
.ms-next { background: rgba(235, 220, 164, 0.45); }
.ms-row-top { display: flex; justify-content: space-between; align-items: baseline; }
.ms-left { display: flex; align-items: baseline; gap: 8px; }
.ms-amount { font-size: 15px; font-weight: 700; }
.ms-tag { font-size: 12px; font-weight: 700; color: #259200; }
.ms-done { color: #6E6E73; }
.ms-mark { font-size: 13px; font-weight: 700; color: #6E6E73; }
.ms-track { height: 6px; border-radius: 3px; background: #F2F2F7; overflow: hidden; }
.ms-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.ms-empty { font-size: 13px; font-weight: 500; color: #6E6E73; }

/* Streak + health tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  background: #FFFFFF; border-radius: 24px; padding: 22px 12px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(22, 88, 0, 0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 168px; box-sizing: border-box;
}
.tile-bottom { justify-content: flex-end; gap: 0; }
.tile-big { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.tile-num { font-size: 32px; font-weight: 700; color: #1C1C1E; letter-spacing: -0.02em; }
.tile-unit { font-size: 32px; font-weight: 500; color: #6E6E73; letter-spacing: -0.02em; }
.tile-label { font-size: 15px; font-weight: 500; color: #6E6E73; }
.gauge { position: relative; width: 136px; height: 80px; }
.gauge svg { position: absolute; inset: 0; }
.gauge-num {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 28px; font-weight: 700; color: #1C1C1E; letter-spacing: -0.02em; line-height: 1;
}
.tile-caps { margin-top: 6px; font-size: 13px; font-weight: 500; color: #6E6E73; letter-spacing: 0.04em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .mg-ring, .mg-ring svg circle, .ms-fill, .mg-total { transition: none !important; }
}