/* ---------- Profile tab: subroutes, header trio, Stats page ---------- */

.profile-view { display: none; }
.profile-view.active { display: block; }

.profile-trio {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 6px;
  margin: 6px 2px 12px;
}

.trio-item {
  flex: 1 1 0;
  text-align: center;
}

.trio-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}

.trio-cap {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.profile-row .chevron {
  color: var(--text-faint);
  font-size: 15px;
}

.profile-version {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  padding: 18px 4px 8px;
}

/* ---------- Stats subroute ---------- */

.stats-back-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 4px 12px;
  cursor: pointer;
}

.stats-back-row svg { flex: 0 0 auto; }

.stats-hero {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  padding: 4px 4px 16px;
}

.stats-hero p { margin: 0; }
.stats-hero strong { color: var(--accent); }

.heatmap-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0 2px 16px;
}

.heatmap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.heatmap-inner {
  display: inline-block;
  min-width: 100%;
}

.heatmap-months {
  display: grid;
  gap: 3px;
  margin-left: 30px;
  margin-bottom: 3px;
}

.heat-month-label {
  font-size: 9px;
  color: var(--text-faint);
  white-space: nowrap;
}

.heatmap-body {
  display: flex;
  gap: 4px;
}

.heatmap-weekday-labels {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
  width: 26px;
  flex: 0 0 auto;
}

.heat-wd-label {
  font-size: 9px;
  color: var(--text-faint);
  line-height: 11px;
}

.heatmap-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
}

.heat-cell {
  width: 11px;
  height: 11px;
  border-radius: 2.5px;
  background: transparent;
  border: 1px solid var(--border);
}

.heat-cell.l1 { background: rgba(208, 158, 82, 0.28); border-color: transparent; }
.heat-cell.l2 { background: rgba(208, 158, 82, 0.5); border-color: transparent; }
.heat-cell.l3 { background: rgba(208, 158, 82, 0.75); border-color: transparent; }
.heat-cell.l4 { background: var(--accent); border-color: transparent; }
.heat-cell.future { opacity: 0.35; }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  justify-content: flex-end;
}

.legend-label {
  font-size: 9px;
  color: var(--text-faint);
}

.heat-cell.legend-swatch {
  width: 10px;
  height: 10px;
  margin: 0 1px;
}

/* ---------- Stats breakdown ---------- */

.stats-breakdown {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 12px;
  margin: 0 2px;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.stat-row:last-child { border-bottom: none; }

.stat-label { color: var(--text-dim); }
.stat-value { color: var(--text); font-weight: 600; }

.stats-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.stats-empty {
  padding: 10px 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* chevron for the frozen shell rows (integrator addition) */
.profile-chevron { margin-left: auto; color: var(--text-faint); font-size: 16px; padding-left: 8px; }
.profile-row { display: flex; align-items: center; }

/* ---------- Item 2 / item 5: two-line label rows (New categories, Face ID) ---------- */
/* One clean flex row: label+subline stacked left, badge/chevron right. */

.profile-row-label-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.new-cats-title {
  color: var(--text);
  font-size: 14px;
}

/* .new-cats-split already styled by styles.css (frozen) as a block-level
   dim subline — reused here for the Face ID row's on/off caption too. */

.profile-row-badge {
  flex: 0 0 auto;
  color: var(--sage);
  font-size: 12px;
  margin-left: 10px;
  white-space: nowrap;
}

/* ---------- Item 4: logout two-tap confirm ---------- */

.logout-label {
  color: var(--text);
  transition: color 150ms ease;
}

#logout-link.logout-confirming {
  background: rgba(192, 106, 62, 0.12);
}

#logout-link.logout-confirming .logout-label {
  color: var(--danger);
  font-weight: 600;
}

/* ---------- Item 5: Face ID bio-gate (runtime elements on #gate) ---------- */
/* profile.css is the only stylesheet this stream may touch, so the
   runtime bio-gate button/link that core.js inserts into the (frozen)
   #gate card is styled here. #gate-bio-btn inherits the plain
   ".gate-card button" look from styles.css; only the extra states below
   are new. */

.gate-card #gate-bio-btn,
.gate-card .gate-bio-fallback {
  display: none;
}

.gate-card.bio-active #token-input,
.gate-card.bio-active #token-submit {
  display: none;
}

.gate-card.bio-active #gate-bio-btn,
.gate-card.bio-active .gate-bio-fallback {
  display: block;
}

.gate-card.bio-active.bio-fallback #gate-bio-btn,
.gate-card.bio-active.bio-fallback .gate-bio-fallback {
  display: none;
}

.gate-card.bio-active.bio-fallback #token-input,
.gate-card.bio-active.bio-fallback #token-submit {
  display: block;
}

#gate-bio-btn {
  margin-bottom: 8px;
}

.gate-card .gate-bio-fallback {
  width: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 400;
  padding: 4px 0 0;
  text-decoration: underline;
  cursor: pointer;
}