/* /home dashboard — page-specific styles.
 *
 * Mirrors the iOS Home tab idiom (warm cream surface, deep-teal
 * accents, soft shadows, rounded corners). Tokens come from main.css;
 * nothing here introduces a new palette.
 */

/* ─── Page shell ─────────────────────────────────────────────── */

.home-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 96px 0 80px;
  overflow: hidden;
}
.home-page::before,
.home-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.34;
  z-index: -1;
  pointer-events: none;
}
.home-page::before {
  width: 520px; height: 520px; top: -180px; left: -200px;
  background: radial-gradient(circle, rgba(116, 199, 186, 0.55), transparent 70%);
}
.home-page::after {
  width: 600px; height: 600px; top: 60px; right: -260px;
  background: radial-gradient(circle, rgba(14, 132, 121, 0.30), transparent 70%);
}

.home-shell {
  width: min(960px, calc(100% - 2.5rem));
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

/* ─── Greeting ──────────────────────────────────────────────── */

.home-greeting {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.home-eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-700);
  font-weight: 600;
}
.home-title {
  margin: 0;
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  font-weight: 700;
}
.home-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.home-meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.home-meta-value {
  font-size: 0.92rem;
  color: var(--ink-2);
  font-weight: 500;
}

/* ─── Generic section + card primitives ─────────────────────── */

.home-section {
  display: grid;
  gap: 14px;
}
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.home-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.home-section-sub {
  font-size: 0.86rem;
  color: var(--ink-4);
}
.home-section-link {
  font-size: 0.88rem;
  color: var(--teal-700);
  font-weight: 600;
}
.home-section-link:hover { color: var(--teal-800); }
.home-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--shadow-sm);
}

/* ─── Hero ──────────────────────────────────────────────────── */

.home-hero {
  display: grid;
  gap: 24px;
  align-items: center;
  background: linear-gradient(140deg, #FFFFFF 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3.4vw, 32px);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) {
  .home-hero { grid-template-columns: auto 1fr; gap: 32px; }
}
.home-hero-ring {
  position: relative;
  width: clamp(170px, 26vw, 220px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.home-ring-svg {
  width: 100%;
  height: 100%;
}
.home-hero-ring-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: 0;
}
.home-hero-ring-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.home-hero-ring-value {
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--teal-700);
  line-height: 1;
  margin-top: 4px;
}
.home-hero-ring-unit {
  font-size: 0.78rem;
  color: var(--ink-4);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.home-hero-copy {
  display: grid;
  gap: 10px;
}
.home-hero-headline {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.18;
}
.home-hero-sub {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.96rem;
  line-height: 1.5;
}
.home-hero-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.home-hero-stat {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.home-hero-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 600;
}
.home-hero-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.home-gap-better .home-hero-stat-value,
.home-gap-better #hero-gap-arrow { color: var(--teal-700); }
.home-gap-worse  .home-hero-stat-value,
.home-gap-worse  #hero-gap-arrow { color: var(--crimson-500); }
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ─── Today's tiles ─────────────────────────────────────────── */

.home-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 8px;
  align-content: start;
}
.home-tile-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: rgba(14, 132, 121, 0.10);
  color: var(--teal-700);
  display: grid;
  place-items: center;
}
.home-tile-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-3);
}
.home-tile-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-tile-num {
  font-size: clamp(1.55rem, 3.2vw, 2rem);
  line-height: 1;
}
.home-tile-unit {
  font-size: 0.82rem;
  color: var(--ink-4);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home-tile-delta {
  font-size: 0.82rem;
  color: var(--ink-4);
}
.home-tile-delta.home-delta-up    { color: var(--teal-700); font-weight: 600; }
.home-tile-delta.home-delta-down  { color: var(--crimson-500); font-weight: 600; }

/* ─── Daily protocol ────────────────────────────────────────── */

.home-protocol-card {
  display: grid;
  gap: 16px;
}
.home-protocol-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-protocol-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.home-protocol-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-700));
  border-radius: 999px;
  width: 0%;
  transition: width 220ms ease;
}
.home-protocol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.home-protocol-item {
  margin: 0;
}
.home-protocol-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.home-protocol-btn:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
}
.home-protocol-btn:active { transform: scale(0.99); }
.home-protocol-btn:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}
.home-protocol-tick {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg-2);
  color: transparent;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.home-protocol-item.is-done .home-protocol-tick {
  background: var(--teal-700);
  color: #fff;
  border-color: var(--teal-700);
}
.home-protocol-item.is-done .home-protocol-btn {
  background: rgba(14, 132, 121, 0.06);
  border-color: rgba(14, 132, 121, 0.22);
}
.home-protocol-item.is-done .home-protocol-title {
  text-decoration: line-through;
  color: var(--ink-4);
}
.home-protocol-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: rgba(14, 132, 121, 0.10);
  flex-shrink: 0;
  position: relative;
}
.home-protocol-icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--teal-700);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.home-protocol-icon-sun  { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='5'/><g stroke='black' stroke-width='2' stroke-linecap='round'><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></g></svg>"); }
.home-protocol-icon-drop { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.5C12 2.5 5 11 5 15a7 7 0 0 0 14 0C19 11 12 2.5 12 2.5z'/></svg>"); }
.home-protocol-icon-walk { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='13' cy='4' r='2'/><path d='M9 22l3-9 4 3 3-3-1-7-3 1-3 4-2-1-3 4 2 8z'/></svg>"); }
.home-protocol-icon-pill { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='8' width='18' height='8' rx='4'/></svg>"); }
.home-protocol-icon-moon { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>"); }
.home-protocol-icon-brain{ --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a4 4 0 0 0-4 4v1a3 3 0 0 0-3 3v3a3 3 0 0 0 1 2.24V18a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4v-2.76A3 3 0 0 0 19 13v-3a3 3 0 0 0-3-3V6a4 4 0 0 0-4-4z'/></svg>"); }
.home-protocol-text {
  flex: 1;
  display: grid;
  gap: 2px;
}
.home-protocol-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.home-protocol-sub {
  font-size: 0.82rem;
  color: var(--ink-4);
}

/* ─── Insights deck (horizontal scroll) ─────────────────────── */

.home-deck-host {
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--teal-200) transparent;
}
.home-deck-host::-webkit-scrollbar { height: 8px; }
.home-deck-host::-webkit-scrollbar-thumb { background: var(--teal-200); border-radius: 999px; }
.home-deck-host::-webkit-scrollbar-track { background: transparent; }

.home-deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: 12px;
  padding-bottom: 6px;
}
.home-deck-card {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.home-deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
}
.home-deck-card-teal::before {
  background: linear-gradient(140deg, rgba(116, 199, 186, 0.20) 0%, rgba(255, 255, 255, 0) 60%);
}
.home-deck-card-amber::before {
  background: linear-gradient(140deg, rgba(242, 169, 59, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
}
.home-deck-card-lavender::before {
  background: linear-gradient(140deg, rgba(142, 115, 222, 0.16) 0%, rgba(255, 255, 255, 0) 60%);
}
.home-deck-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-700);
}
.home-deck-card-amber .home-deck-eyebrow { color: var(--amber-500); }
.home-deck-card-lavender .home-deck-eyebrow { color: var(--lavender-500); }
.home-deck-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.25;
}
.home-deck-body {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.42;
}
.home-deck-cta {
  margin-top: 4px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--teal-700);
}
.home-deck-card-amber .home-deck-cta { color: var(--amber-500); }
.home-deck-cta:hover { color: var(--teal-800); }

/* ─── Trajectory ────────────────────────────────────────────── */

.home-traj-card {
  padding: 14px 16px 4px;
}
.home-traj-host {
  position: relative;
  width: 100%;
  height: 180px;
}
.home-traj-svg {
  width: 100%;
  height: 100%;
}
.home-traj-axis {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--ink-4);
}
.home-traj-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-4);
  font-size: 0.92rem;
  padding: 0 16px;
}

/* ─── Quick actions ─────────────────────────────────────────── */

.home-quick {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 540px) {
  .home-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .home-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.home-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: var(--shadow-xs);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  text-decoration: none;
}
.home-quick-chip:hover {
  transform: translateY(-1px);
  border-color: var(--teal-300);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.home-quick-chip:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}
.home-quick-chip:active { transform: translateY(0); }
.home-quick-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: rgba(14, 132, 121, 0.10);
  color: var(--teal-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ─── CTA ───────────────────────────────────────────────────── */

.home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}
.home-cta-text {
  display: grid;
  gap: 2px;
}
.home-cta-text strong {
  font-size: 0.98rem;
  color: var(--ink);
}
.home-cta-text span {
  font-size: 0.86rem;
  color: var(--ink-3);
  max-width: 56ch;
}

/* ─── Empty + error + skeleton ──────────────────────────────── */

.home-empty,
.home-error {
  display: grid;
  gap: 16px;
}
/* `hidden` HTML attr must always win — without these rules the
   display:grid/etc. above wins over the attribute, so home-error
   (and other state sections) render even when home.js explicitly
   hides them via [hidden]. Symptom: "Couldn't load your home"
   error card showing on every fresh load before init() finishes. */
.home-loading[hidden],
.home-empty[hidden],
.home-content[hidden],
.home-error[hidden] { display: none !important; }
.home-empty-card,
.home-error {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
}
.home-empty-card h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
}
.home-empty-card p {
  margin: 0 0 14px;
  color: var(--ink-3);
  line-height: 1.55;
}
.home-empty-actions,
.home-error-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.home-error {
  display: grid;
  gap: 6px;
  border-color: rgba(201, 52, 58, 0.22);
}
.home-error strong { color: var(--crimson-500); }
.home-error span { color: var(--ink-3); font-size: 0.92rem; }

@keyframes home-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.home-skel {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 400% 100%;
  animation: home-skel 1.4s linear infinite;
  border-radius: var(--r-lg);
}
.home-skel-hero { height: 220px; }
.home-skel-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}
@media (min-width: 720px) {
  .home-skel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home-skel-tile { height: 110px; }
.home-skel-protocol { height: 280px; margin-top: 16px; }

/* Dark-mode honoured by main.css already (light-mode-only marketing
   site). No dark overrides needed here. */