/* Presentation-only refinements for the isolated Studio chart previews. */
/* The native canvas reads palette tokens from the root element. */
html.foxy-design[data-foxy-design=studio] { --fx-chart-neutral:#7a8798; }
html.foxy-design[data-foxy-design=studio][data-theme=dark] { --fx-chart-neutral:#8795a8; }

/* The imported mobile stylesheet uses !important for these native cards. */
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-card {
  display:flex;
  flex-direction:column!important;
  align-items:stretch;
  justify-content:flex-start;
  min-width:0;
  gap:8px;
  padding:24px!important;
  text-align:left;
  overflow-wrap:anywhere;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-card-label {
  font-size:14px!important;
  line-height:1.45;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-card-value {
  margin:4px 0;
  font-size:36px!important;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-card-sub {
  margin:0 0 8px;
  line-height:1.45;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root button.fx-full-card-details {
  align-self:flex-start;
  margin-top:auto;
  min-height:40px;
  max-width:100%;
  padding:9px 12px;
  line-height:1.4;
  white-space:normal;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) button.fx-chart-expand {
  min-height:40px;
  padding:9px 12px;
  border-radius:10px;
  line-height:1.4;
}

/* Both section-chart actions share a real grid row, including when expanded. */
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-auto-rows:min-content;
  align-content:start;
  column-gap:12px;
  row-gap:12px;
  padding:24px!important;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart>:not(.fx-section-details,.fx-chart-expand,.fx-chart-close) {
  grid-column:1/-1;
  min-width:0;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart>:is(.fxa-chart-head,.fx-section-series,.fxa-chart-note) {
  margin:0;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart>button:is(.fx-section-details,.fx-chart-expand) {
  position:static;
  align-self:end;
  min-width:0;
  width:auto;
  max-width:100%;
  height:auto;
  min-height:40px;
  margin:4px 0 0;
  padding:9px 12px;
  border:1px solid var(--fx-line);
  border-radius:10px;
  background:var(--fx-subtle);
  color:var(--fx-accent-ink);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space:normal;
  overflow-wrap:anywhere;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart>.fx-section-details {
  grid-column:1;
  justify-self:start;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart>.fx-chart-expand {
  grid-column:2;
  justify-self:end;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-chart-expanded {
  display:grid!important;
  align-items:stretch;
  align-content:stretch;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-section-timeline.fx-chart-expanded {
  grid-template-rows:auto auto minmax(180px,1fr) auto auto;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-section-ring-card {
  grid-template-rows:auto minmax(min-content,1fr) auto auto;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-chart-expanded>.fxa-distribution-content {
  justify-self:center;
  align-self:center;
  margin:0;
}

/* The timeline SVG is inside the scroll region, not a direct article child. */
html[data-foxy-design=studio] .foxy-ui :is(.fx-chart-scroll,.fxa-heatmap-scroll) {
  container:foxy-chart-labels / inline-size;
}
/* The summary has only three date labels and fits a slightly narrower plot. */
html[data-foxy-design=studio] .foxy-ui .fxa-timeline>.fx-chart-scroll>svg {
  min-width:440px;
}
@container foxy-chart-labels (max-width:720px) {
  html[data-foxy-design=studio] .foxy-ui :is(.fx-chart-scroll,.fxa-heatmap-scroll) .fxa-axis-text {
    font-size:clamp(12px,calc(24px - 1.6667cqi),16px);
  }
}
html[data-foxy-design=studio] .foxy-ui .fx-section-timeline>.fx-chart-scroll {
  min-width:0;
  min-height:0;
  align-self:stretch;
}
html[data-foxy-design=studio] .foxy-ui .fx-section-timeline>.fx-chart-scroll>svg {
  display:block;
  width:100%;
  height:auto;
  max-height:280px;
}
html[data-foxy-design=studio] .foxy-ui .fx-section-timeline.fx-chart-expanded>.fx-chart-scroll>svg {
  height:100%;
  max-height:none;
}
html[data-foxy-design=studio] .foxy-ui .fx-section-series {
  flex-wrap:wrap;
  gap:8px 16px;
  line-height:1.45;
}
html[data-foxy-design=studio] .foxy-ui .fx-section-series>span {
  min-width:0;
  overflow-wrap:anywhere;
}
html[data-foxy-design=studio] .foxy-ui .fx-section-series i { flex:none; }

/* Detail dialogs share one header and close-control geometry. */
html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) {
  padding:24px;
  max-height:calc(100dvh - 32px);
  overflow:auto;
}
html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) :is(.fx-full-heading,.fxa-details-head,.fxo-dialog-head) {
  align-items:flex-start;
  gap:16px;
  margin:0 0 20px;
}
html[data-foxy-design=studio] .foxy-ui .fxa-details-dialog .fxa-details-head {
  margin-bottom:0;
}
html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) :is(.fx-full-heading,.fxa-details-head,.fxo-dialog-head)>div {
  min-width:0;
}
html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) :is(.fx-full-heading,.fxa-details-head,.fxo-dialog-head) h2 {
  margin:0 0 8px;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.5px;
  overflow-wrap:anywhere;
}
html[data-foxy-design=studio] .foxy-ui .fx-full-data-dialog .fx-full-heading>button,
html[data-foxy-design=studio] .foxy-ui .fxa-details-dialog .fxa-details-close,
html[data-foxy-design=studio] .foxy-ui .fxo-person-dialog .fxo-dialog-close,
html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) button.fx-chart-close {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:10px;
  background:var(--fx-subtle);
  color:var(--fx-text);
  line-height:1;
}
html[data-foxy-design=studio] .foxy-ui .fx-chart-expanded>:is(p,.admin-overview-chart-title,.fxa-chart-head) {
  padding-inline-end:56px;
}

@container full-analytics (max-width:850px) {
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@container full-analytics (max-width:420px) {
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
}
@media(max-width:650px) {
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-card {
    padding:16px!important;
  }
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics #root .admin-overview-card-value {
    font-size:32px!important;
  }
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart {
    grid-template-columns:minmax(0,1fr);
    padding:16px!important;
  }
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fxa-chart>button:is(.fx-section-details,.fx-chart-expand) {
    grid-column:1;
    justify-self:stretch;
    width:100%;
    margin:0;
  }
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-section-timeline.fx-chart-expanded {
    grid-template-rows:auto auto minmax(180px,1fr) auto auto auto;
  }
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-section-ring-card {
    grid-template-rows:auto minmax(min-content,1fr) auto auto auto;
  }
  /* In a vertical distribution, a horizontal flex basis becomes unwanted height. */
  html[data-foxy-design=studio] .foxy-ui .fx-full-analytics :is(#root,.fx-section-analytics) .fx-section-chart-grid>.fx-chart-expanded .fxa-type-list {
    flex:none;
    width:100%;
    min-width:0;
  }
  html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) {
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    padding:16px;
  }
  html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) :is(.fx-full-heading,.fxa-details-head,.fxo-dialog-head) {
    gap:12px;
    margin-bottom:16px;
  }
  html[data-foxy-design=studio] .foxy-ui .fxa-details-dialog .fxa-details-head {
    margin-bottom:0;
  }
  html[data-foxy-design=studio] .foxy-ui :is(.fx-full-data-dialog,.fxa-details-dialog,.fxo-person-dialog) :is(.fx-full-heading,.fxa-details-head,.fxo-dialog-head) h2 {
    font-size:22px;
  }
}