/* Compact mobile cards use content flow so labels and controls stay together. */
@media (max-width: 600px) {
  .view.home .metric {
    min-height: 0;
    gap: 10px;
    padding-top: 25px;
    padding-bottom: 17px;
  }
  .view .metric h3 { min-height: 2.8em; }
  .view.home .metric > .micro { margin-top: 4px; }

  .view .contact-card, .view .contact-card:last-child {
    display: flex;
    flex-direction: column;
    align-items: start;
    min-height: 0;
    padding-bottom: 12px;
  }
  .view .contact-card .link-arrow {
    position: static;
    align-self: end;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 5px;
  }

  /* The date and its six-segment indicator share the right-hand column. */
  .view .project-row {
    grid-template-columns: 24px minmax(0,1fr) 44px 16px;
    gap: 5px 9px;
  }
  .view .project-row > strong { grid-column: 1; grid-row: 1; }
  .view .project-row > .row-name { grid-column: 2; grid-row: 1; }
  .view .project-row > .code { grid-column: 2; grid-row: 2; }
  .view .project-row > .sector { display: none; }
  .view .project-row > .state { grid-column: 2 / 5; grid-row: 3; }
  .view .project-row > span:last-child { grid-column: 4; grid-row: 1; }
  .view .project-row > .year { grid-column: 3; grid-row: 1; align-self: end; }
  .view .project-row > .bars {
    display: flex;
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    gap: 2px;
    width: 44px;
    height: 4px;
  }
  .view .project-row .bars i {
    flex: 1 1 0;
    width: auto;
    height: 4px;
  }

  .view .deliverables { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view .deliverable {
    display: grid;
    min-height: 0;
    padding: 17px 12px 10px;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 7px 8px;
  }
  .view .deliverable > .micro { margin-top: 0; }
  .view .deliverable > span {
    position: static;
    grid-column: 2;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 24px;
    height: 20px;
  }

  .view .experiment-card {
    min-height: 0;
    padding-bottom: 14px;
  }
  .view .experiment-card > .micro {
    margin-top: 12px;
    padding-right: 0;
  }
  .view .experiment-card .open-piece {
    position: static;
    align-self: end;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-top: 5px;
  }
}