/* Five comparable charts, a responsive share row, then one full-width floor chart. */
#dashboard.workspace { padding-top: 8px; }
.page-header { justify-content: flex-end; margin-bottom: 8px; }
#activity-panel { padding-top: 12px; }
#activity-panel > .section-top { gap: 12px; margin-bottom: 8px; }
#activity-panel > .section-top .activity-count-row { flex: 1 1 auto; min-width: 0; margin: 0; }
#activity-panel > .section-top .activity-summary-actions { flex: 0 0 auto; }
.activity-charts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.activity-charts > section:not(.all-floor-panel) { display: flex; flex-direction: column; }
/* Override the older #ascension-overview top alignment: all five plots sit on the same bottom edge. */
#activity-panel .activity-charts > section:not(.all-floor-panel) > .chart-scroll { margin-top: auto; }
.activity-charts .activity-share-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.activity-share-grid section { min-width: 0; }
.activity-chart-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 4px; }
.activity-chart-heading h3 { margin: 0; }
.activity-summary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; }
.activity-mode { display: flex; gap: 4px; }
.activity-mode button { min-width: 58px; padding: 5px 9px; border-color: #b9c8bd; background: #f6f9f5; font-size: 11px; font-weight: 700; }
.activity-mode button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.activity-language { flex-wrap: wrap; padding-left: 10px; border-left: 1px solid var(--line); }
@media screen and (max-width: 700px), screen and (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  #activity-language { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; border-left: none; }
}
.activity-range { display: flex; flex-wrap: wrap; gap: 4px; }
.activity-range button { min-width: 45px; padding: 4px 7px; font-size: 11px; }
.activity-range button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 750; }
#daily-activity .chart-point.is-today .chart-dot { fill: #ed8424; stroke: #ed8424; }
#daily-play-time .chart-point.is-today .chart-bar { fill: #ed8424; }
.activity-charts .all-floor-panel { grid-column: 1 / -1; }
.activity-charts .all-floor-panel h3 { margin-bottom: 8px; }
.end-floor-chart { min-width: 0; width: 100%; }
.end-floor-chart .count-chart { min-width: 0; width: 100%; }
/* A height cap shrinks the SVG drawing inside a wide viewport, leaving side gutters. */
.end-floor-chart .count-chart svg { width: 100%; height: auto; max-height: none; }
.end-floor-chart .chart-axis { font-size: 11px; }
.end-floor-chart .chart-value { font-size: 12px; }
.end-floor-chart .chart-axis-vertical { writing-mode: vertical-rl; text-orientation: upright; font-size: 12px; }
/* Landmark labels keep their palette; all bars use the same outcome colors. */
.end-floor-chart .chart-treasure { --landmark-text: #94700a; }
.end-floor-chart .chart-rest { --landmark-text: #b33333; }
.end-floor-chart .chart-ancient { --landmark-text: #78449b; }
.end-floor-chart .chart-boss { --landmark-text: #8a5129; }
.end-floor-chart .chart-architect { --landmark-text: #287b49; }
.end-floor-chart .chart-landmark .chart-value { fill: var(--landmark-text); }
.end-floor-chart .chart-axis.chart-landmark { fill: var(--landmark-text); font-weight: 750; }
.end-floor-chart .chart-readout { position: static; width: auto; max-width: 100%; min-height: 0; margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
/* Per-ascension charts use the overview renderer, including its full-width layout. */
#floor-progress-chart .count-chart { min-width: 0; max-width: none; }
.floor-count-chart .chart-bar-wins { fill: var(--outcome-win); }
.floor-count-chart .chart-bar-losses { fill: var(--outcome-loss); }
.floor-count-chart .chart-bar-abandoned { fill: var(--outcome-abandoned); }
/* Focus frames the whole stack only, never its internal joins. */
.count-chart-stacked .chart-point:focus .chart-bar { stroke: none; }
.count-chart-stacked .chart-point:focus .chart-stack-outline { stroke: var(--ink); stroke-width: 2; }
.floor-outcome-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.floor-outcome-legend span { display: inline-flex; align-items: center; gap: 5px; }
.floor-outcome-legend span::before { content: ''; width: 10px; height: 10px; }
.floor-outcome-legend .floor-outcome-wins::before { background: var(--outcome-win); }
.floor-outcome-legend .floor-outcome-losses::before { background: var(--outcome-loss); }
.floor-outcome-legend .floor-outcome-abandoned::before { background: var(--outcome-abandoned); }
@media (max-width: 1280px) {
  .activity-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-charts .activity-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .activity-charts { grid-template-columns: minmax(0, 1fr); }
  .activity-charts .activity-share-grid { grid-template-columns: minmax(0, 1fr); }
  #activity-panel > .section-top { flex-direction: column; align-items: stretch; }
  #activity-panel > .section-top .activity-summary-actions { flex: 1 1 auto; }
  .activity-summary-actions { width: 100%; justify-content: flex-start; }
}