/* Cards and what sits inside them: stats, session steps, drawings, check-in summary, nudges, labs, plan, login. */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.card__title-group { display: flex; flex-direction: column; gap: 6px; }

/* counters */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--surface); border-radius: var(--radius-card); padding: 10px 12px; min-width: 0; }
.stat b { display: block; font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.stat span { font-size: .78rem; color: var(--muted); }
.stat__goal { color: var(--muted); font-size: .8rem; }
.stat--highlight b { color: var(--warm); }
.waist-summary {
  font-size: .86rem;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--gap-page);
}

/* session */
.badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: .8rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.badge--rest { background: var(--surface-2); color: var(--muted); }
.badge--long { background: var(--warm-soft); color: var(--warm); }
.duration { font-size: .9rem; color: var(--muted); white-space: nowrap; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__name { font-weight: 500; min-width: 0; }
.step__dose { font-family: var(--font-number); font-size: .88rem; color: var(--accent); white-space: nowrap; text-align: right; }
.step__tip { grid-column: 1 / -1; font-size: .84rem; color: var(--muted); }
.step__demo-toggle { grid-column: 1 / -1; }

.demos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding-top: 4px; }
.demo { margin: 0; background: var(--bg); border-radius: var(--radius-control); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.demo__caption { display: flex; justify-content: space-between; gap: 6px; font-size: .78rem; flex-wrap: wrap; }
.demo__caption a { font-weight: 600; text-decoration: none; white-space: nowrap; }

.figure { width: 100%; height: auto; display: block; }
.figure__floor { stroke: var(--line); stroke-width: 2; }
.figure__prop { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.figure__far, .figure__near { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.figure__far { stroke: var(--muted); opacity: .55; }
.figure__near { stroke: var(--accent); }
.figure__head { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }

.note-box { font-size: .86rem; background: var(--surface-2); border-radius: var(--radius-control); padding: 10px 12px; }
.notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--warm-soft);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  font-size: .88rem;
}

/* nudges */
.hint {
  border-left: 3px solid var(--warm);
  background: var(--surface);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* saved check-in */
.checkin-summary { display: flex; gap: 14px; align-items: center; }
.checkin-summary__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: var(--accent);
  color: var(--accent-ink);
}
.checkin-summary__icon--partial { background: var(--accent-soft); color: var(--accent); }
.checkin-summary__icon--rest { background: var(--surface-2); color: var(--muted); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }

/* blood tests */
.warning { font-size: .86rem; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-control); padding: 8px 12px; font-weight: 500; }
.labs { list-style: none; margin: 0; padding: 0; }
.lab { display: grid; grid-template-columns: 1fr auto auto; gap: 0 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.lab:first-child { border-top: 0; }
.lab__date { font-size: .88rem; }
.lab__value { font-size: 1.05rem; }
.lab__details { grid-column: 1 / -1; }
.lab-form { display: flex; flex-direction: column; gap: 8px; background: var(--bg); border-radius: var(--radius-control); padding: 12px; }

/* account */
.sync-status { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.sync-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.sync-dot--synced { background: var(--accent); }
.sync-dot--syncing { background: var(--warm); }
.sync-dot--failed, .sync-dot--offline { background: var(--danger); }

/* plan */
.week-schedule { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: .72rem; }
.week-schedule div { background: var(--surface-2); border-radius: 8px; padding: 6px 2px; line-height: 1.3; }
.week-schedule b { display: block; font-weight: 600; font-size: .78rem; }
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.phase { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.phase:first-child { border-top: 0; }
.phase__weeks { font-size: .82rem; color: var(--muted); padding-top: 2px; }
.phase--current .phase__weeks { color: var(--warm); font-weight: 600; }
.phase--current h3 { color: var(--accent); }
.safety { font-size: .84rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.safety__stop { color: var(--danger); }

/* login */
.login { align-items: center; text-align: center; padding: 40px 22px; margin-top: 8vh; gap: 16px; }
.login__mark { width: 72px; height: 72px; border-radius: 20px; background: var(--accent) url("../icons/icon.svg") center / cover; }
/* color-scheme: light keeps Google's button iframe transparent; with the page's dark scheme it paints a white box */
.login__button { min-height: 44px; display: flex; justify-content: center; color-scheme: light; }
.login__busy { color: var(--muted); }