/* ==========================================================================
   Home account section (design_handoff_account_section): the signed-in
   close of Home, one of three variants by plan (Free / Pro / Pro + Creator).
   Signed-out readers keep home-plans.css. Every colour is a TL token or the
   ink rgb at the spec's alpha, so dark mode follows the same mapping.
   ========================================================================== */
.home-acct {
  --ha-glass: rgba(250, 250, 251, 0.82);
  --ha-glass-pill: rgba(250, 250, 251, 0.8);
  --ha-glass-shine: rgba(255, 255, 255, 0.9);
  --ha-tile: #fff;
  --ha-row-hover: rgba(255, 255, 255, 0.7);
  --ha-strip: rgba(255, 255, 255, 0.45);
  position: relative; overflow: hidden; padding: 88px 40px 96px;
  border-top: 1px solid rgba(var(--tl-ink-rgb), 0.07); color: var(--tl-ink);
  scroll-margin-top: var(--tl-topbar-h);
}
html:not(.si-light) .home-acct {
  --ha-glass: rgba(255, 255, 255, 0.05);
  --ha-glass-pill: rgba(255, 255, 255, 0.06);
  --ha-glass-shine: rgba(255, 255, 255, 0.04);
  --ha-tile: var(--tl-card);
  --ha-row-hover: rgba(255, 255, 255, 0.04);
  --ha-strip: rgba(255, 255, 255, 0.02);
}
.home-acct > canvas.ha-field { position: absolute; left: 0; top: 0; opacity: 0.1; pointer-events: none; }
.home-acct a { color: inherit; text-decoration: none; }
.home-acct img { background: transparent; }
.ha-inner { position: relative; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

/* ---- Atoms ---- */
.ha-mono { font-family: var(--tl-mono); }
.ha-eyebrow {
  font-family: var(--tl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(var(--tl-ink-rgb), 0.45);
}
.ha-eyebrow.is-sm { font-size: 9.5px; letter-spacing: 1.1px; }
.ha-eyebrow.has-dot { display: flex; align-items: center; gap: 7px; }
.ha-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--tl-live); }
.ha-dot.is-idle { background: rgba(var(--tl-ink-rgb), 0.3); }
.ha-badge {
  font-family: var(--tl-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.9px; line-height: 1.35;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.ha-badge.is-pro { color: var(--tl-pro); background: rgba(0, 168, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(0, 168, 255, 0.45); }
.ha-badge.is-creator { color: var(--tl-ink); background: rgba(var(--tl-ink-rgb), 0.04); box-shadow: inset 0 0 0 1px rgba(var(--tl-ink-rgb), 0.22); }
.ha-badge.is-free { color: rgba(var(--tl-ink-rgb), 0.6); background: rgba(var(--tl-ink-rgb), 0.04); box-shadow: inset 0 0 0 1px rgba(var(--tl-ink-rgb), 0.14); }
.ha-badge.is-xs { font-size: 8.5px; padding: 1px 5px; border-radius: 3px; background: transparent; }

.ha-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent;
  font: 650 13px var(--tl-font); white-space: nowrap; cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.ha-btn.is-sm { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; }
.ha-btn.is-dark { background: var(--tl-ink); border-color: var(--tl-ink); color: var(--tl-on-ink); }
.home-acct .ha-btn.is-dark:hover { background: var(--tl-ink-hover); border-color: var(--tl-ink-hover); color: var(--tl-on-ink); }
.ha-btn.is-light { background: var(--ha-tile); border-color: rgba(var(--tl-ink-rgb), 0.12); color: var(--tl-ink); }
.home-acct .ha-btn.is-light:hover { border-color: rgba(var(--tl-ink-rgb), 0.22); color: var(--tl-ink); }
button.ha-btn { margin: 0; width: auto; }
.ha-btns { display: flex; gap: 8px; }
.ha-btns.is-fill > .ha-btn { flex: 1; }

.ha-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; min-width: 0; }
.ha-stat + .ha-stat { padding-left: 16px; border-left: 1px solid rgba(var(--tl-ink-rgb), 0.07); }
.ha-stat-val { font-family: var(--tl-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.ha-delta { font-family: var(--tl-mono); font-size: 11px; font-weight: 600; color: var(--tl-up); }
.ha-delta.is-down { color: var(--tl-down); }

/* ---- Glass card ---- */
.ha-card {
  position: relative; overflow: hidden; min-width: 0;
  border-radius: 16px; border: 1px solid rgba(var(--tl-ink-rgb), 0.08);
  background: var(--ha-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--ha-glass-shine), 0 1px 2px rgba(16, 20, 24, 0.04);
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms;
}
.ha-card::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tl-ink-rgb), 0.22), transparent);
}
.ha-card.is-lift:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--ha-glass-shine), 0 14px 30px -16px rgba(16, 20, 24, 0.22);
}
html:not(.si-light) .ha-card.is-lift:hover { box-shadow: var(--tl-card-shadow-hover); }
.ha-card.is-pad { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.ha-card.is-pad.is-g16 { gap: 16px; }

/* ---- Title block ---- */
.ha-title { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-bottom: 26px; }
.ha-pill {
  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 6px; border-radius: 14px; white-space: nowrap;
  border: 1px solid rgba(var(--tl-ink-rgb), 0.09); background: var(--ha-glass-pill);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 1.2px; color: rgba(var(--tl-ink-rgb), 0.6);
}
.ha-avatar {
  width: 18px; height: 18px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--tl-ink); color: var(--tl-on-ink); font: 700 9px var(--tl-font); letter-spacing: 0;
}
.ha-avatar img, .ha-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-acct h2 { margin: 0; font-size: 64px; font-weight: 750; letter-spacing: -2.6px; line-height: 1; color: var(--tl-ink); }
.ha-sub { max-width: 580px; margin: 0; font-size: 16.5px; line-height: 1.55; color: rgba(var(--tl-ink-rgb), 0.6); text-wrap: pretty; }

/* ---- Grids ---- */
.ha-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px; }
.ha-grid.is-three { grid-template-columns: repeat(3, minmax(0, 4fr)); }

/* ---- Plan card ---- */
.ha-plan-row { display: flex; align-items: center; gap: 6px; }
.ha-plan-row .ha-eyebrow { margin-right: 2px; }
.ha-plan-name { display: flex; flex-direction: column; gap: 6px; }
.ha-plan-name > b { font-size: 30px; font-weight: 750; letter-spacing: -1px; line-height: 1.05; }
.ha-meta { font-family: var(--tl-mono); font-size: 11px; letter-spacing: 0.6px; color: rgba(var(--tl-ink-rgb), 0.5); text-transform: uppercase; }
.ha-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(var(--tl-ink-rgb), 0.07); border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.07); }
.ha-teams { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ha-tiles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ha-tile {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  border: 1px solid rgba(var(--tl-ink-rgb), 0.08); background: var(--ha-tile);
  display: flex; align-items: center; justify-content: center;
}
.ha-tile img { width: 24px; height: 24px; object-fit: contain; }
.ha-tile.is-add {
  border: 1px dashed rgba(var(--tl-ink-rgb), 0.22); background: transparent;
  font-size: 18px; color: rgba(var(--tl-ink-rgb), 0.45); transition: all 150ms;
}
.home-acct .ha-tile.is-add:hover { border-color: rgba(var(--tl-ink-rgb), 0.4); color: var(--tl-ink); }
.ha-tile.is-locked { border: 1px dashed rgba(var(--tl-ink-rgb), 0.16); background: transparent; color: rgba(var(--tl-ink-rgb), 0.35); }
.home-acct a.ha-tile.is-locked:hover { border-color: rgba(var(--tl-ink-rgb), 0.3); }

/* ---- Creator page card ---- */
.ha-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ha-head-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ha-head-title { font-size: 22px; font-weight: 700; letter-spacing: -0.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(var(--tl-ink-rgb), 0.05); flex: none; }
.ha-seg button {
  margin: 0; width: auto; padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  font: 600 10.5px var(--tl-mono); letter-spacing: 0.6px; color: rgba(var(--tl-ink-rgb), 0.5);
}
.ha-seg button[aria-checked="true"] { background: var(--ha-tile); color: var(--tl-ink); box-shadow: var(--tl-seg-on-shadow); }
.ha-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(var(--tl-ink-rgb), 0.07); border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.07); }
.ha-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 16px 0; min-width: 0; }
.ha-kpi + .ha-kpi { padding-left: 16px; border-left: 1px solid rgba(var(--tl-ink-rgb), 0.07); }
.ha-kpi-val { display: flex; align-items: baseline; gap: 8px; }
.ha-kpi-val > b { font-family: var(--tl-mono); font-size: 26px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; }
.ha-chart { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ha-chart-head { display: flex; align-items: center; justify-content: space-between; }
.ha-bars { height: 110px; display: flex; align-items: flex-end; gap: 3px; }
.ha-bar {
  flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: rgba(var(--tl-ink-rgb), 0.16);
  transition: height 420ms cubic-bezier(.2, .7, .2, 1), background 120ms;
}
.ha-bar.is-today, .ha-bar:hover { background: var(--tl-ink); }
.ha-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; flex-wrap: wrap; }
.ha-foot-note { font-size: 12.5px; color: rgba(var(--tl-ink-rgb), 0.55); min-width: 0; }
.ha-foot-note b { font-weight: 650; color: var(--tl-ink); }

/* ---- Your teams this week ---- */
.ha-chip { font-family: var(--tl-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; padding: 6px 10px; border-radius: 7px; white-space: nowrap; background: rgba(var(--tl-ink-rgb), 0.05); flex: none; }
.ha-games { display: flex; flex-direction: column; border-top: 1px solid rgba(var(--tl-ink-rgb), 0.07); }
.ha-game {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 92px minmax(0, 1fr) 128px; align-items: center; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.06);
}
.ha-match { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ha-match img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.ha-vs { font-family: var(--tl-mono); font-size: 11px; color: rgba(var(--tl-ink-rgb), 0.4); }
.ha-match b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-when { display: flex; flex-direction: column; gap: 2px; }
.ha-when b { font-family: var(--tl-mono); font-size: 12px; font-weight: 700; }
.ha-when span { font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.8px; color: rgba(var(--tl-ink-rgb), 0.45); text-transform: uppercase; }
.ha-when b.is-live { color: var(--tl-live-strong, var(--tl-up)); }
.ha-prob { display: flex; flex-direction: column; gap: 5px; }
.ha-prob-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.8px; color: rgba(var(--tl-ink-rgb), 0.45); }
.ha-prob-top b { display: flex; align-items: center; gap: 4px; color: var(--tl-ink); font-weight: 700; font-size: 11px; letter-spacing: 0; }
.ha-prob-top img { width: 13px; height: 13px; object-fit: contain; }
.ha-track { height: 4px; border-radius: 2px; background: rgba(var(--tl-ink-rgb), 0.08); overflow: hidden; }
.ha-track i { display: block; height: 100%; border-radius: 2px; background: var(--tl-ink); }
.ha-pick {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px;
  font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 150ms;
}
.ha-pick.is-picked { background: var(--ha-tile); border: 1px solid rgba(var(--tl-ink-rgb), 0.1); color: var(--tl-ink); }
.ha-pick.is-open { background: var(--tl-ink); border: 1px solid var(--tl-ink); color: var(--tl-on-ink); }
.home-acct .ha-pick.is-open:hover { color: var(--tl-on-ink); background: var(--tl-ink-hover); }
.home-acct .ha-pick.is-picked:hover { border-color: rgba(var(--tl-ink-rgb), 0.3); }
.ha-pick.is-final { background: transparent; border: 1px solid rgba(var(--tl-ink-rgb), 0.08); color: rgba(var(--tl-ink-rgb), 0.55); }
.ha-empty { padding: 22px 0; font-size: 13.5px; color: rgba(var(--tl-ink-rgb), 0.6); border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.06); }

/* ---- Tools grid ---- */
.ha-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.07); }
.ha-tools-head b { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.ha-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ha-tool {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px; min-width: 0;
  border-right: 1px solid rgba(var(--tl-ink-rgb), 0.06); border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.06);
  transition: background 150ms;
}
.home-acct .ha-tool:hover { background: var(--ha-row-hover); }
.ha-tools > .ha-tool:nth-child(3n) { border-right: 0; }
.ha-tools > .ha-tool:nth-last-child(-n+3):nth-child(3n+1),
.ha-tools > .ha-tool:nth-last-child(-n+3):nth-child(3n+1) ~ .ha-tool { border-bottom: 0; }
.ha-tool-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ha-tool-name { display: flex; align-items: center; gap: 8px; }
.ha-tool-name b { font-size: 14px; font-weight: 700; }
.ha-tool-status {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(var(--tl-ink-rgb), 0.55);
}
.ha-tool-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-tool-status .ha-dot { width: 5px; height: 5px; }
.ha-tool-cta { font-size: 12px; font-weight: 600; color: rgba(var(--tl-ink-rgb), 0.55); white-space: nowrap; }
.home-acct .ha-tool:hover .ha-tool-cta { color: var(--tl-ink); }

/* Add Creator strip (Pro) */
.ha-addc { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-top: 1px solid rgba(var(--tl-ink-rgb), 0.07); background: var(--ha-strip); }
.ha-addc-copy { flex: none; width: 300px; display: flex; flex-direction: column; gap: 5px; }
.ha-addc-copy > span:first-child { display: flex; align-items: center; gap: 8px; }
.ha-addc-copy b { font-size: 14px; font-weight: 700; }
.ha-addc-copy p { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(var(--tl-ink-rgb), 0.58); text-wrap: pretty; }
.ha-addc-locks { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ha-lock { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(var(--tl-ink-rgb), 0.16); }
.ha-lock b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.ha-lock span { font-size: 11.5px; line-height: 1.4; color: rgba(var(--tl-ink-rgb), 0.55); }

/* ---- Offer cards (Free) ---- */
.ha-offer-name { display: flex; flex-direction: column; gap: 6px; }
.ha-offer-name b { font-size: 24px; font-weight: 750; letter-spacing: -0.8px; line-height: 1.1; }
.ha-offer-name p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(var(--tl-ink-rgb), 0.58); text-wrap: pretty; }
.ha-price { font-family: var(--tl-mono); font-size: 11px; letter-spacing: 0.6px; color: rgba(var(--tl-ink-rgb), 0.5); text-transform: uppercase; }
.ha-list { display: flex; flex-direction: column; border-top: 1px solid rgba(var(--tl-ink-rgb), 0.07); margin: 0; padding: 0; list-style: none; }
.ha-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; margin: 0; border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.05); font-size: 13px; font-weight: 600; list-style: none; }
.ha-list li::before { content: "+"; font-family: var(--tl-mono); font-size: 11px; font-weight: 700; color: var(--tl-ink); }
.ha-list li.is-incl { font-weight: 450; color: rgba(var(--tl-ink-rgb), 0.6); }
.ha-list li.is-incl::before { content: "✓"; color: rgba(var(--tl-ink-rgb), 0.4); }
.ha-offer-cta { margin-top: auto; display: flex; }
.ha-offer-cta .ha-btn { flex: 1; }

/* ---- iOS strip ---- */
.ha-ios { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.ha-ios img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.ha-ios-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ha-ios-copy b { font-size: 14.5px; font-weight: 700; }
.ha-ios-copy span { font-size: 12.5px; color: rgba(var(--tl-ink-rgb), 0.58); }

/* ---- Loading skeleton ---- */
.ha-skel { display: inline-block; border-radius: 4px; background: rgba(var(--tl-ink-rgb), 0.06); color: transparent !important; }
.ha-skel-block { border-radius: 16px; background: rgba(var(--tl-ink-rgb), 0.04); border: 1px solid rgba(var(--tl-ink-rgb), 0.06); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .ha-grid { grid-template-columns: minmax(0, 1fr); }
  .ha-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ha-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-tools > .ha-tool, .ha-tools > .ha-tool:nth-child(3n) { border-right: 1px solid rgba(var(--tl-ink-rgb), 0.06); border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.06); }
  .ha-tools > .ha-tool:nth-child(2n) { border-right: 0; }
  .ha-tools > .ha-tool:nth-last-child(-n+3):nth-child(3n+1),
  .ha-tools > .ha-tool:nth-last-child(-n+3):nth-child(3n+1) ~ .ha-tool { border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.06); }
  .ha-tools > .ha-tool:nth-last-child(-n+2):nth-child(2n+1),
  .ha-tools > .ha-tool:nth-last-child(-n+2):nth-child(2n+1) ~ .ha-tool { border-bottom: 0; }
  .ha-addc { flex-wrap: wrap; }
  .ha-addc-copy { width: 100%; }
}
@media (max-width: 900px) {
  .ha-grid.is-three { grid-template-columns: minmax(0, 1fr); }
  .ha-game { grid-template-columns: minmax(0, 1fr) 80px 112px; }
  .ha-game .ha-prob { display: none; }
}
@media (max-width: 720px) {
  .home-acct { padding: 64px 16px 72px; }
  .home-acct h2 { font-size: 44px; letter-spacing: -1.6px; }
  .ha-tools { grid-template-columns: minmax(0, 1fr); }
  .ha-tools > .ha-tool, .ha-tools > .ha-tool:nth-child(2n), .ha-tools > .ha-tool:nth-child(3n) { border-right: 0; border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.06) !important; }
  .ha-tools > .ha-tool:last-child { border-bottom: 0 !important; }
  .ha-addc { flex-direction: column; align-items: stretch; }
  .ha-addc-locks { grid-template-columns: minmax(0, 1fr); }
  .ha-head { flex-direction: column; }
  .ha-kpi-val > b { font-size: 20px; }
  .ha-game { grid-template-columns: minmax(0, 1fr) 112px; }
  .ha-game .ha-when { display: none; }
  .ha-ios { flex-wrap: wrap; }
  .ha-ios .ha-btn { width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ha-card, .ha-card.is-lift:hover { transition: none; transform: none; }
  .ha-bar { transition: none; }
}