/* ============================================================
   Screen layout. Anything reusable lives in components.css —
   this file only arranges.
   ============================================================ */

.card-stack { display: flex; flex-direction: column; gap: var(--s-3); }

.head-row { display: flex; align-items: center; gap: var(--s-3); }
.head-row h1 { flex: 1 1 auto; min-width: 0; }
.head-action {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--blur-control);
  backdrop-filter: var(--blur-control);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--lift-1), inset 0 1px 0 var(--glass-sheen);
  color: var(--text-1);
  transition: transform var(--dur-micro) var(--snap), background-color var(--dur-micro) linear;
}
.head-action:active { transform: scale(0.92); background: var(--glass-tint-2); }

/* ---------- Today ----------------------------------------------------
   A command centre, not a poster: the shape of the day sits beside the
   date so the commitments themselves start above the fold.
   --------------------------------------------------------------------- */
/* The date sets the context; the word Today is the title under it. */
.today-head { padding-top: var(--s-5); }
.today-date {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.today-goals { margin-top: var(--s-6); }

/* ---------- Goal detail ---------------------------------------------- */
.gd-title-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
/* Goal Detail is the deeper version of the card, so the symbol is the same
   symbol, larger — not a different treatment. */
.gd-title-row .gc-icon {
  width: 76px; height: 76px;
  border-radius: 22px;
}
.gd-title-row .gc-icon svg { width: 42px; height: 42px; }
.gd-title-row h1 { flex: 1 1 auto; min-width: 0; }

.gd-hero { text-align: center; padding: var(--s-5) 0 var(--s-2); }
.gd-arc {
  position: relative;
  width: min(50vw, 178px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid; place-items: center;
}
.gd-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gd-arc .a-track { fill: none; stroke: var(--track); stroke-linecap: round; }
.gd-arc .a-fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--dur-progress) var(--settle); }

.gd-value { position: relative; display: flex; flex-direction: column; align-items: center; }
.gd-value .amount {
  font-size: clamp(38px, 11.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gd-value .amount .unit {
  font-size: 0.34em; font-weight: 600; color: var(--text-2);
  letter-spacing: -0.02em; margin-left: 3px;
}
.gd-value .target { margin-top: 8px; font-size: var(--t-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }

.gd-pace {
  margin-top: var(--s-5);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: var(--tt-body);
  min-height: 24px;
  color: var(--text-2);
}
.gd-pace.is-ahead    { color: var(--positive); }
.gd-pace.is-behind   { color: var(--caution); }
.gd-pace.is-at-risk  { color: var(--critical); }
.gd-pace.is-complete { color: var(--positive); }
.gd-pace.is-overdue  { color: var(--critical); }

.gd-actions { margin-top: var(--s-6); }
.gd-primary { margin-top: var(--s-3); }
.gd-secondary { margin-top: var(--s-3); display: flex; gap: var(--s-2); }
.gd-secondary .btn {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  padding: 0 var(--s-3);
  font-size: var(--t-secondary);
  white-space: nowrap;
}

/* ---------- the commitment block -------------------------------------- */
.commit {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 0.5px solid var(--border);
}
.commit-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}
.commit-bar i {
  display: block; height: 100%;
  border-radius: 4px;
  background: var(--g-progress, var(--g1));
  transition: width var(--dur-progress) var(--settle);
}
.commit-headline {
  margin-top: var(--s-3);
  font-size: var(--t-body);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tt-body);
}
.commit-headline b { color: var(--text-1); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.commit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 0.5px solid var(--hairline);
}
.commit-cell span { display: block; font-size: var(--t-meta); color: var(--text-3); }
.commit-cell b {
  display: block; margin-top: 3px;
  font-size: var(--t-body); font-weight: 600;
  letter-spacing: var(--tt-body);
  font-variant-numeric: tabular-nums;
}
.commit-note {
  margin-top: var(--s-4);
  font-size: var(--t-meta);
  color: var(--text-3);
  line-height: 1.5;
}
.commit-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-body);
  color: var(--text-2);
}
.commit-row + .commit-row { border-top: 0.5px solid var(--hairline); }
.commit-row b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Mind ------------------------------------------------------ */
.mind-hero { padding: var(--s-4) 0 var(--s-2); }
.mind-cta { margin-top: var(--s-5); }
.mind-recent { margin-top: var(--s-8); }

.mind-step { padding-top: var(--s-2); }
.mind-step h3 {
  font-size: var(--t-section);
  font-weight: 600;
  letter-spacing: var(--tt-section);
  text-align: center;
}
.mind-step .sub { margin-top: 6px; text-align: center; font-size: var(--t-secondary); color: var(--text-2); }
.mind-progress { display: flex; gap: 5px; justify-content: center; padding: var(--s-2) 0 var(--s-4); }
.mind-progress i {
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--track); display: block;
  transition: background-color var(--dur-fast) var(--settle);
}
.mind-progress i.on { background: var(--text-2); }

.intensity-row { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.intensity {
  flex: 1 1 0;
  min-height: 56px;
  border-radius: var(--r-md);
  background: var(--mat-control);
  border: 0.5px solid var(--border);
  color: var(--text-2);
  font-size: var(--t-secondary);
  font-weight: 500;
  transition: transform var(--dur-micro) var(--snap),
              background-color var(--dur-fast) var(--settle),
              color var(--dur-fast) var(--settle);
}
.intensity:active { transform: scale(0.96); }
.intensity[aria-pressed="true"] {
  background: var(--mood);
  color: var(--mood-ink, #fff);
  font-weight: 600;
  border-color: transparent;
}

/* ---------- Profile --------------------------------------------------- */
.profile-head { padding: var(--s-4) 0 var(--s-6); }
.profile-groups { display: flex; flex-direction: column; gap: var(--s-6); }
.about-foot {
  margin-top: var(--s-8);
  text-align: center;
  font-size: var(--t-meta);
  color: var(--text-3);
  line-height: 1.6;
}

/* ---------- Editor ---------------------------------------------------- */
.editor-section + .editor-section { margin-top: var(--s-8); }
.editor-summary {
  font-size: var(--t-secondary);
  color: var(--accent);
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
}
.goal-card.is-preview { margin-bottom: var(--s-6); pointer-events: none; }

.suggest-row {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--s-4) * -1);
  padding: 0 var(--s-4) var(--s-1);
}
.suggest-row::-webkit-scrollbar { display: none; }
.suggest {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--mat-control);
  border: 0.5px solid var(--border);
  font-size: var(--t-secondary);
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--snap);
}
.suggest:active { transform: scale(0.95); }
/* The presets are suggestions, not commitments — none of them is yours
   yet, so none of them carries a colour. A row of nine different accents
   was the loudest thing on a screen whose job is to ask one question. */
.suggest svg { width: 17px; height: 17px; color: var(--text-2); }

/* ---------- the plan readout: the moment it becomes real -------------- */
.plan-readout { margin-top: var(--s-6); }
.plan-card {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 110% at 8% -10%,
      color-mix(in srgb, var(--g1, var(--accent)) 26%, transparent), transparent 62%),
    linear-gradient(158deg,
      color-mix(in srgb, var(--g1, var(--accent)) 16%, var(--surface)),
      color-mix(in srgb, var(--g2, var(--accent)) 12%, var(--bg-raised)));
  border: 0.5px solid color-mix(in srgb, var(--g1, var(--accent)) 24%, transparent);
}
.plan-card.is-invalid {
  background: var(--surface);
  border-color: var(--border);
}
.plan-figure { display: flex; align-items: baseline; gap: 8px; }
.plan-amount {
  font-size: 40px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.plan-unit { font-size: var(--t-secondary); font-weight: 600; color: var(--text-2); }
.plan-detail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: var(--s-3);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.plan-detail i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); display: block; }
.plan-line { font-size: var(--t-secondary); color: var(--text-2); line-height: 1.5; }
.plan-line b { color: var(--text-1); font-weight: 700; }
.plan-note {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 0.5px solid var(--hairline);
  font-size: var(--t-meta);
  color: var(--text-3);
  line-height: 1.5;
}