/* Shared extra room keeps the finance table, calendar and notes bottom-aligned. */
#app .dev-root .desk .finance-detail {
  overflow: hidden;
  padding: 12px 14px;
}
#app .dev-root .desk .finance-detail h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 5px;
  font-size: .84rem;
  line-height: 1.4;
}
#app .dev-root .desk .finance-detail p { margin-top: 4px; }
#app .dev-root .desk .finance-chart-title { margin-top: 8px; }
/* The chart gives up spare height before the action can be clipped. */
#app .dev-root .desk .finance-months {
  flex: 1 1 82px;
  height: auto;
  min-height: 20px;
  max-height: 100px;
  margin-top: 6px;
}
#app .dev-root .desk .finance-selected-total { margin-top: auto; padding-top: 8px; }
#app .dev-root .desk .finance-project-link {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 8px;
  margin-top: 8px;
  box-sizing: border-box;
}
@media (min-width: 761px) {
  #app .dev-root .desk :is(.desk-left, .finance-cockpit, .todo-panel) {
    height: calc(var(--overview-panel-height) + 24px);
  }
}

#app .dev-root .desk :is(.metric, .completion-card, .contribution-panel, .urgency-panel.has-contribution-rhythm, .finance-cockpit, .todo-panel) {
  position: relative;
  transform-origin: center;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
  --tile-accent: 103, 191, 238;
}
#app .dev-root .desk :is(.metric-spending, .completed, .contribution-panel, .urgency-panel.has-contribution-rhythm) { --tile-accent: 101, 216, 212; }
#app .dev-root .desk :is(.metric-online, .unfinished) { --tile-accent: 145, 166, 240; }
#app .dev-root .desk :is(.metric-label, .completion-card > span, .desk-kicker) {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Noto Sans SC", monospace;
}
@media (hover: hover) and (pointer: fine) {
  #app .dev-root .desk:has(.finance-cockpit:hover)
  :is(.metric, .completion-card, .contribution-panel, .urgency-panel.has-contribution-rhythm, .finance-cockpit, .todo-panel):not(:hover) {
    opacity: .45;
    transform: scale(.96);
  }
  #app .dev-root .desk :is(.metric, .completion-card, .contribution-panel, .urgency-panel.has-contribution-rhythm, .finance-cockpit, .todo-panel):hover {
    z-index: 5;
    opacity: 1;
    transform: scale(1.04);
    border-color: rgba(var(--tile-accent), .68);
    background-color: rgba(var(--tile-accent), .17);
    box-shadow: inset 0 0 90px rgba(var(--tile-accent), .16), inset 0 1px rgba(221, 245, 255, .2), 0 18px 42px rgba(0, 0, 0, .4), 0 0 24px rgba(var(--tile-accent), .12);
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .dev-root .desk :is(.metric, .completion-card, .contribution-panel, .urgency-panel.has-contribution-rhythm, .finance-cockpit, .todo-panel) { transition: none; }
}