/* Additive styling for the founder-only live website analytics block. */
.analytics-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 12px 0 14px;
  padding: 18px 20px;
  border: 1px solid rgba(227, 175, 62, .25);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(227, 175, 62, .10), rgba(15, 42, 61, .72));
}

.analytics-heading .eyebrow { margin-bottom: 6px; }
.analytics-heading p:last-child { max-width: 570px; margin: 0; color: #c5d3db; font-size: 13px; }
.analytics-status {
  flex: none;
  border: 1px solid rgba(190, 215, 230, .24);
  border-radius: 999px;
  padding: 7px 10px;
  color: #cdd9df;
  font-size: 12px;
  font-weight: 700;
}
.analytics-status[data-state="live"] { border-color: rgba(169, 231, 189, .45); color: var(--success); }
.analytics-status[data-state="setup"] { border-color: rgba(227, 175, 62, .4); color: #f2ca6c; }
#website-analytics-metrics .empty-block { grid-column: 1 / -1; }

.founder-chart-card { margin: 16px 0; }
.chart-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(190, 215, 230, .16);
}
.chart-heading h3 { margin: 0; }
.chart-heading p { margin: 6px 0 0; color: #b7c8d1; font-size: 13px; }
.chart-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.chart-controls button {
  appearance: none;
  border: 1px solid rgba(190, 215, 230, .24);
  border-radius: 999px;
  background: transparent;
  color: #d8e3e8;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 11px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.chart-controls button:hover { border-color: rgba(227, 175, 62, .68); color: #fff7e5; transform: translateY(-1px); }
.chart-controls button[aria-pressed="true"] { background: #e3af3e; border-color: #e3af3e; color: #081929; }
.chart-controls button:focus-visible { outline: 3px solid rgba(242, 202, 108, .5); outline-offset: 3px; }
.founder-activity-chart { min-height: 250px; padding-top: 16px; }
.activity-chart-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.activity-chart-summary strong { color: #fff7e5; font-size: 24px; }
.activity-chart-summary span { color: #b7c8d1; font-size: 13px; }
.activity-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.activity-chart-svg .chart-grid { stroke: rgba(190, 215, 230, .14); stroke-width: 1; }
.activity-chart-svg .chart-axis-label { fill: #9fb4bf; font: 11px Arial, sans-serif; }
.activity-chart-svg .chart-area { fill: url(#zoe-activity-gradient); }
.activity-chart-svg .chart-line { fill: none; stroke: #e3af3e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.activity-chart-svg .chart-last-point { fill: #fff7e5; stroke: #e3af3e; stroke-width: 3; }
.founder-activity-chart .empty-block { min-height: 170px; display: grid; place-content: center; text-align: center; }

@media (max-width: 700px) {
  .analytics-heading { align-items: flex-start; flex-direction: column; padding: 17px; }
  .analytics-status { width: 100%; text-align: center; }
  .chart-heading { align-items: flex-start; flex-direction: column; }
  .chart-controls { justify-content: flex-start; width: 100%; }
  .chart-controls button { flex: 1 1 calc(50% - 7px); }
  .founder-activity-chart { min-height: 220px; }
}