/**
 * Dayly — view-level component styles.
 * Consumes tokens.css; extends the primitives in base.css.
 */

/* ---------------------------------------------------------------------------
 * Auth gate
 * ------------------------------------------------------------------------- */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--bg);
  overflow: auto;
}

/* Soft aurora behind the content — gives the screen depth without imagery.
 * Two offset radial gradients, heavily blurred, at low opacity. */
.auth-gate__glow {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(34% 38% at 78% 68%, color-mix(in srgb, var(--metric-protein) 22%, transparent), transparent 70%);
  filter: blur(70px);
  opacity: 0.5;
}

.auth-gate__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  width: 100%;
  max-width: 980px;
  align-items: center;
}

@media (min-width: 900px) {
  .auth-gate__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

/* --- Wordmark --- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.wordmark__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.wordmark__text {
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

/* --- Pitch --- */
.auth-gate__headline {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.auth-gate__sub {
  color: var(--text-secondary);
  font-size: var(--text-body);
  max-width: 44ch;
  margin-bottom: var(--space-8);
}

.auth-gate__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-gate__points li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.auth-gate__point-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Sign-in panel --- */
.auth-gate__panel {
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  /* Inset so labels and inputs never sit against the panel edge. The form
   * width is derived from this padding — do NOT clamp #clerkMount to a value
   * below Clerk's own card minimum, or the card overflows the panel. */
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-popover);
  justify-self: center;
  width: 100%;
  max-width: 424px;
  /* Safety net: nothing can escape the rounded corners. */
  overflow: hidden;
}

#clerkMount {
  width: 100%;
  /* One knob for control width. The email input, Continue button and the
   * social-button row all use it, so they stay the same length as each other. */
  --control-w: 86%;
}

#clerkMount [class*='cl-formFieldInput'],
#clerkMount [class*='cl-formButtonPrimary'],
#clerkMount [class*='cl-socialButtons'] {
  width: var(--control-w) !important;
  margin-inline: auto !important;
  display: flex !important;
}

#clerkMount [class*='cl-formFieldInput'] {
  display: block !important;
}

/* Indent the field label so it lines up with the left edge of the shortened
 * input below it, rather than sitting out at the card edge. */
#clerkMount [class*='cl-formFieldLabel'] {
  margin-inline-start: calc((100% - var(--control-w)) / 2) !important;
}

/* Clerk serves the Apple mark as a solid black SVG image, which disappears on
 * a dark surface. Invert it to white. Google's mark is multicolour and is
 * deliberately left untouched. */
#clerkMount [class*='cl-socialButtonsBlockButton__apple'] img {
  filter: invert(1);
}

/* Clerk ships a fixed 25rem card width in its own stylesheet, which beats the
 * `appearance` API and overflows our panel. Override the layout here; colours
 * and typography still come from `appearance` in main.js. */
#clerkMount .cl-rootBox,
#clerkMount .cl-card,
#clerkMount [class*='cl-rootBox'],
#clerkMount [class*='cl-card'] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.auth-gate__msg:empty { display: none; }

.auth-gate__msg {
  color: var(--text-secondary);
  font-size: var(--text-small);
  text-align: center;
  padding: var(--space-4) 0;
}

/* ---------------------------------------------------------------------------
 * Today header
 * ------------------------------------------------------------------------- */

.today-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.today-completion {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ring { display: block; }

.today-completion__pct {
  position: absolute;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Metric rows
 * ------------------------------------------------------------------------- */

.metric-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.metric-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.metric-row__value {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Nutrition / water headlines
 * ------------------------------------------------------------------------- */

.nutrition-headline,
.water-headline,
.habits-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.water-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.water-actions .btn { flex: 1; }
.water-actions .btn--quiet { flex: 0 0 44px; }

/* Nutrition's "log food" sits apart from the metrics it affects. */
.card .btn--block { margin-top: var(--space-5); }

/* ---------------------------------------------------------------------------
 * Habits
 * ------------------------------------------------------------------------- */

.habit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.habit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}

.habit-row__name {
  font-size: var(--text-small);
}

.habit-row__controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.habit-check {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  color: transparent;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.habit-check__part { color: var(--text-tertiary); }

.habit-check.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.habit-check.is-on .habit-check__part { color: var(--accent-text); }

/* A small, non-flashy confirmation on completion (§34). */
.habit-check.is-on { animation: check-pop var(--duration-base) var(--ease-out); }

@keyframes check-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------------
 * Body rows
 * ------------------------------------------------------------------------- */

.body-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.body-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}

.body-row__value { margin-inline-start: auto; }

.body-row__empty {
  margin-inline-start: auto;
  color: var(--text-tertiary);
  font-size: var(--text-small);
}

/* ---------------------------------------------------------------------------
 * Still left today
 * ------------------------------------------------------------------------- */

.left-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.left-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.left-item__amount {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.left-item__label {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* Met items are quiet and green — done, not celebrated. */
.left-item.is-met { background: var(--success-soft); }
.left-item.is-met .left-item__amount { color: var(--success); }

/* ---------------------------------------------------------------------------
 * Today hero
 * ------------------------------------------------------------------------- */

.today-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}

.today-hero__date {
  color: var(--text-secondary);
  font-size: var(--text-body);
  margin-top: var(--space-1);
}

.today-hero__ring {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.today-hero__ring-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.today-hero__pct {
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.today-hero__pct-sign { font-size: 1rem; font-weight: var(--weight-medium); }

.today-hero__pct-word {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Stat row
 * ------------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-tile {
  background: var(--surface-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-tile__value {
  font-size: var(--text-metric);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.stat-tile__unit {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.stat-tile__label {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
 * Cards — feature treatment
 * ------------------------------------------------------------------------- */

/* A subtle top highlight gives the primary card presence without a border. */
.card--feature {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 140px),
    var(--surface-1);
}

.card__hint {
  font-size: var(--text-small);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon { flex-shrink: 0; vertical-align: -2px; }

/* ---------------------------------------------------------------------------
 * Nutrition
 * ------------------------------------------------------------------------- */

.nutrition-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

@media (min-width: 720px) {
  .nutrition-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.nutrition-hero__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.nutrition-hero__left {
  font-size: var(--text-small);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}

.bar--thick { height: 10px; }

.macro-rings {
  display: flex;
  gap: var(--space-5);
  justify-content: space-between;
}

.mini-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.mini-ring__center {
  position: absolute;
  top: 34px;
  transform: translateY(-50%);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.mini-ring__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mini-ring__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.mini-ring__target {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

/* --- Logged meals --- */
.meal-list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.meal-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-small);
}

.meal-list__macros { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.meal-list__more { font-size: var(--text-caption); color: var(--text-tertiary); }

/* ---------------------------------------------------------------------------
 * Water
 * ------------------------------------------------------------------------- */

.water-hero {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.water-hero__pct {
  margin-inline-start: auto;
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Discrete pips read as "glasses" and make partial progress countable
 * without relying on bar length alone. */
.water-pips {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.water-pip {
  flex: 1;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--track);
  transition: background var(--duration-base) var(--ease-out);
}

.water-pip.is-filled { background: var(--metric-water); }

/* ---------------------------------------------------------------------------
 * Habits
 * ------------------------------------------------------------------------- */

.habits-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.habits-hero__bar { flex: 1; }

/* ---------------------------------------------------------------------------
 * Body
 * ------------------------------------------------------------------------- */

.body-block + .body-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.body-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.body-block__head .metric__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.body-block__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.body-block__trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.sparkline { display: block; }

.body-block__delta {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.body-block__delta.is-down { color: var(--success); }
.body-block__delta.is-up { color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
 * Sheets
 * ------------------------------------------------------------------------- */

.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.sheet__title {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
}

.sheet__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out);
}

.sheet__close:hover { background: var(--surface-2); color: var(--text); }

.sheet__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.sheet__actions .btn { flex: 1; }
.sheet__actions--stack { flex-direction: column; }

.sheet__meta {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  text-align: center;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.input-with-unit { position: relative; }

.input-with-unit__unit {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: var(--text-small);
  pointer-events: none;
}

/* Estimate provenance. Colour is paired with a symbol in the text, so
 * confidence is never signalled by colour alone. */
.estimate-note {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.estimate-note[data-confidence='exact'] { color: var(--success); }
.estimate-note[data-confidence='unsure'] { color: var(--warning); }

/* ---------------------------------------------------------------------------
 * Saved foods picker
 * ------------------------------------------------------------------------- */

.saved-foods {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-1);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  max-height: 190px;
  overflow-y: auto;
}

.saved-food {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  min-height: 44px;
  transition: background var(--duration-fast) var(--ease-out);
}

.saved-food:hover { background: var(--surface-3); }

.saved-food__name { font-size: var(--text-small); }

.saved-food__macros {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}

/* ---------------------------------------------------------------------------
 * Onboarding — Build your Dayly Plan
 * ------------------------------------------------------------------------- */

.onb {
  max-width: 620px;
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-12);
}

.onb__bar {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.onb__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-out);
}

.onb__head { margin-bottom: var(--space-6); }

.onb__step {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.onb__title {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.onb__sub {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-small);
  max-width: 52ch;
}

.onb__notice {
  background: var(--warning-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

/* --- Option cards --- */
.opts {
  display: grid;
  grid-template-columns: repeat(var(--opt-cols, 1), minmax(0, 1fr));
  gap: var(--space-3);
}

.opt {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  min-height: 60px;
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.opt:hover { background: var(--surface-2); }
.opt:active { transform: scale(0.99); }

/* Selection is marked by border AND background, never colour alone. */
.opt.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.opt__label { font-size: var(--text-body); font-weight: var(--weight-medium); }
.opt__hint { font-size: var(--text-small); color: var(--text-secondary); }

.onb-form { display: grid; gap: var(--space-2); }

.field__hint {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

.onb__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.onb__actions .btn--primary { margin-inline-start: auto; min-width: 150px; }

/* --- Results --- */
.onb--results .card + .card { margin-top: var(--space-4); }
.plan-card { padding: var(--space-5); }

.plan-goal {
  font-size: var(--text-metric);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-2);
}

.plan-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }

.plan-row + .plan-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.plan-row__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.plan-row__label { font-size: var(--text-body); }

.plan-row__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.plan-input {
  width: 92px;
  text-align: right;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: var(--space-2);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.plan-input:focus { outline: none; border-color: var(--accent); }

.plan-row__unit { color: var(--text-secondary); font-weight: var(--weight-regular); }

.plan-why {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--accent);
}

.plan-rationale {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.plan-habits {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-habits li {
  font-size: var(--text-small);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

/* --- Review-your-plan banner (§32) --- */
.review-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-size: var(--text-small);
}

.review-banner__text { flex: 1; }
.review-banner__dismiss { color: var(--text-secondary); padding: var(--space-2); }