/* Thermii — live project panel styling
   ------------------------------------------------------------------
   Presentation only. Pairs with js/thermii-progress.js.
   Load after journey.css:  <link rel="stylesheet" href="css/thermii-progress.css">

   The panel is additive: with no rows to show, .thermii-project-card looks
   exactly as it does today. */

@media screen {
  body .thermii-project-stats:empty { display: none; }

  body .thermii-project-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 14px 0 12px;
    padding: 2px 0 0;
    border-top: 1px solid var(--thermii-border);
  }

  body .thermii-pstat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(228, 231, 239, .7);
  }

  body .thermii-pstat:last-child { border-bottom: 0; }

  body .thermii-pstat > span {
    flex: 0 1 auto;
    color: var(--journey-muted, #596584);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body .thermii-pstat > strong {
    min-width: 0;
    color: var(--thermii-navy);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The total is the point of the whole journey — let it carry weight. */
  body .thermii-pstat.is-total {
    margin-top: 4px;
    padding: 11px 12px;
    border: 0;
    border-radius: var(--thermii-radius-sm, 10px);
    background: linear-gradient(135deg, rgba(20, 157, 232, .09), rgba(113, 56, 237, .09) 55%, rgba(212, 20, 196, .08));
  }

  body .thermii-pstat.is-total > span { color: #4b3a86; font-weight: 600; }

  body .thermii-pstat.is-total > strong {
    font-family: var(--thermii-font-display);
    font-size: 19px;
    font-weight: var(--thermii-font-weight-display, 800);
    letter-spacing: -.025em;
    color: var(--thermii-purple);
  }

  /* Each new row eases in rather than snapping, so the panel reads as filling
     up as the project grows. */
  body .thermii-pstat {
    animation: thermii-pstat-in 320ms cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes thermii-pstat-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* In the compact sidebar the project card sits in a row beside the heading, so
   the stats stack under it at full width. */
@media screen and (max-width: 900px) {
  body .thermii-project-stats { margin: 10px 0 8px; }
  body .thermii-pstat { padding: 6px 0; }
  body .thermii-pstat.is-total { padding: 9px 10px; }
  body .thermii-pstat.is-total > strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  body .thermii-pstat { animation: none; }
}

@media print {
  body .thermii-project-stats { display: none !important; }
}