/* Work overview: cards, metrics and page layout. */

#home-section :is(.shortcuts, .dashboard-notices) {
  padding: 24px;
  border-radius: 12px;
}

#home-section .metric-value strong {
  font-size: 40px;
}

#home-section .baseline-count strong {
  font-size: 18px;
}

#home-section :is(.home-secondary, #edit-shortcuts, #all-dashboard-notices) {
  font-size: 14px;
}

#home-section .dashboard-heading {
  margin: 0 0 24px;
  gap: 24px;
}

#home-section .dashboard-heading h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}

#home-section .dashboard-eyebrow {
  margin: 0 0 8px;
  line-height: 16px;
  letter-spacing: 0;
}

#home-section .dashboard-description {
  margin: 8px 0 0;
  line-height: 20px;
}

#home-section #dashboard-year-form {
  color: var(--ui-on-surface-variant);
}

#home-section .dashboard-scope-bar {
  padding: 16px 24px;
  margin: 0 0 24px;
  gap: 24px;
}

#home-section .dashboard-metrics {
  gap: 16px;
  margin: 0 0 24px;
  align-items: stretch;
}

#home-section .metric {
  padding: 24px;
  gap: 12px;
}

#home-section .metric-label,
#home-section .metric-description,
#home-section .metric-link {
  line-height: 20px;
}

#home-section .section-heading {
  min-height: 56px;
  margin: 0 0 16px;
  gap: 16px;
}

#home-section .panel-description {
  margin: 4px 0 0;
}

#home-section .shortcut-grid {
  gap: 12px;
}

#home-section .shortcut,
#home-section .dashboard-notice {
  min-height: 80px;
  padding: 16px;
  border-radius: 8px;
}

#home-section .shortcut > .ui-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 8px;
  flex: none;
}

#home-section .dashboard-notice {
  align-items: center;
  gap: 16px;
}

#home-section .dashboard-notice > div {
  min-width: 0;
}

#home-section .dashboard-notice p {
  margin: 4px 0 0;
}

#home-section .dashboard-notice .text-button {
  flex: none;
}

#home-section .dashboard-bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#home-section .metric-link-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

#home-section .shortcut > .shortcut-arrow {
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border-radius: 0;
}

#home-section .baseline-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
}

#home-section .baseline-summary strong {
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}

#home-section #dashboard-baseline {
  min-height: 32px;
  padding: 4px 0;
  margin: 0 0 0 4px;
}

#home-section .metric-value {
  align-items: baseline;
}

#home-section .metric-value small {
  font-size: 14px;
  line-height: 20px;
}

#home-section .metric-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

#home-section > * {
  flex-shrink: 0;
}

#home-section .dashboard-footer {
  margin: auto 0 0;
  padding: 24px 0 0;
  border: 0;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

#home-section #dashboard-baseline,
#home-section .dashboard-notice .text-button,
#notices-dialog .dashboard-notice .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}

#home-section .dashboard-link-arrow,
#notices-dialog .dashboard-link-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#home-section .metric[data-metric="missing"] {
  --metric-tint: var(--ui-warning-container);
  --metric-color: var(--ui-warning);
}

#home-section .metric[data-metric="pending"] {
  --metric-tint: var(--ui-review-container);
  --metric-color: var(--ui-review);
}

#home-section .metric[data-metric="ready"] {
  --metric-tint: var(--ui-primary-container);
  --metric-color: var(--ui-primary);
}

#home-section .metric[data-metric="stored"] {
  --metric-tint: var(--ui-success-container);
  --metric-color: var(--ui-success);
}

#home-section .metric-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

#home-section .metric-status-icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 8px;
  background: var(--metric-tint);
  color: var(--metric-color);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#home-section .metric-label {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
}

#home-section .metric-label,
#home-section .section-heading h2,
#home-section .dashboard-notice strong,
#home-section .shortcut > span:not(.shortcut-arrow) {
  font-size: 16px;
  line-height: 24px;
}

#home-section .metric-description,
#home-section .panel-description,
#home-section .dashboard-notice p {
  font-size: 12px;
  line-height: 20px;
}

#home-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--ui-text);
  font-weight: 400;
}

#home-section .metric-description,
#home-section .panel-description,
#home-section .dashboard-notice p,
#home-section .dashboard-footer {
  color: var(--ui-muted);
  font-weight: 400;
}

#home-section .dashboard-heading h1,
#home-section .metric-label,
#home-section .metric-value strong,
#home-section .section-heading h2,
#home-section .shortcut > span:not(.shortcut-arrow),
#home-section .dashboard-notice strong,
#home-section .baseline-summary strong {
  font-weight: 600;
}

#home-section a,
#home-section #dashboard-baseline,
#home-section .metric-link,
#home-section #all-dashboard-notices,
#home-section .dashboard-notice .text-button {
  color: var(--ui-primary);
  font-weight: 400;
}

#home-section a:hover,
#home-section #dashboard-baseline:hover,
#home-section .metric:hover .metric-link,
#home-section #all-dashboard-notices:hover,
#home-section .dashboard-notice .text-button:hover {
  color: var(--ui-primary-hover);
}

#home-section .metric-dot {
  display: inline-block;
  flex: none;
  background: var(--metric-color);
}

#home-section .section-heading h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

#home-section .shortcut > span:not(.shortcut-arrow),
#home-section .dashboard-notice strong,
#notices-dialog .dashboard-notice strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

#home-section .dashboard-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#home-section #background-toggle {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

#home-section #background-toggle[aria-pressed="true"] {
  background: var(--ui-primary-container);
  border-color: var(--ui-outline);
}

#home-section #background-toggle:hover {
  background: var(--ui-primary-container-hover);
}

#home-section #background-toggle .ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#home-section .shortcut > .ui-icon:not(.shortcut-arrow) {
  background: var(--ui-shortcut-icon-container);
}

#home-section .shortcut:hover > .ui-icon:not(.shortcut-arrow),
#home-section .shortcut:focus-visible > .ui-icon:not(.shortcut-arrow) {
  background: var(--ui-shortcut-icon-container-hover);
}

#home-section #background-toggle,
#home-section #dashboard-refresh {
  background: var(--ui-surface);
  color: var(--ui-on-primary-container);
}

#home-section :is(.metric, .shortcuts, .dashboard-notices, .dashboard-scope-bar) {
  border: 1px solid var(--ui-card-outline) !important;
  background: var(--ui-surface);
}

#home-section .shortcut,
#home-section #edit-shortcuts {
  color: var(--ui-on-primary-container);
  background: var(--ui-shortcut-surface);
  border: 1px solid var(--ui-shortcut-outline) !important;
}

#home-section .shortcut:hover,
#home-section #edit-shortcuts:hover {
  background: var(--ui-primary-container);
  border-color: var(--ui-field-outline-hover) !important;
}

#home-section .dashboard-notice,
#notices-dialog .dashboard-notice {
  background: var(--ui-notice-surface);
  border: 1px solid var(--ui-notice-outline) !important;
}

#home-section .dashboard-notices {
  height: 294px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#home-section .dashboard-notices .section-heading {
  flex-shrink: 0;
}

#home-section #dashboard-notices {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#home-section #dashboard-notices:has(.no-tasks) {
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-section #dashboard-notices .no-tasks {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 630px;
  max-width: 100%;
  height: 172px;
  flex-shrink: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--ui-shortcut-outline);
  border-radius: 8px;
  background: var(--ui-shortcut-surface);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ui-muted);
}

/* Dashboard card shadow overrides the shared flat-surface reset. */
#home-section :is(.dashboard-scope-bar,.dashboard-metrics > .metric,.dashboard-bottom > .shortcuts,.dashboard-bottom > .dashboard-notices) {
  box-shadow:5px 7px 14px rgba(28,52,83,.09)!important;
}
#home-section :is(#background-toggle,#dashboard-refresh) {
  box-shadow:5px 7px 14px rgba(28,52,83,.09)!important;
}