/* Phase 21M.3 — Pocket Tackle Recent Activity Timeline */

.dvh21m3-activity{
  margin-top:12px;
  padding:13px;
  border:1px solid rgba(16,43,39,.09);
  border-radius:16px;
  background:#fff;
}

.dvh21m3-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
}

.dvh21m3-head strong{
  display:block;
  margin-top:3px;
  color:#102b27;
  font-size:.94rem;
}

.dvh21m3-head small{
  color:#74807c;
  font-size:.64rem;
  text-align:right;
}

.dvh21m3-list{
  display:grid;
  gap:6px;
}

.dvh21m3-item{
  display:grid;
  grid-template-columns:12px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:8px 10px;
  border:1px solid rgba(16,43,39,.08);
  border-radius:11px;
  background:#fafbf8;
  color:#102b27;
  text-decoration:none;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}

a.dvh21m3-item:hover{
  background:#fff;
  border-color:rgba(16,63,55,.20);
  transform:translateX(2px);
}

.dvh21m3-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#8a9892;
  box-shadow:0 0 0 3px rgba(138,152,146,.10);
}

.dvh21m3-message .dvh21m3-dot{background:#d99520;box-shadow:0 0 0 3px rgba(217,149,32,.13)}
.dvh21m3-request .dvh21m3-dot,
.dvh21m3-order .dvh21m3-dot{background:#1f7566;box-shadow:0 0 0 3px rgba(31,117,102,.12)}
.dvh21m3-quote .dvh21m3-dot{background:#8b6b2d;box-shadow:0 0 0 3px rgba(139,107,45,.12)}
.dvh21m3-invoice .dvh21m3-dot{background:#426d87;box-shadow:0 0 0 3px rgba(66,109,135,.12)}

.dvh21m3-copy{
  min-width:0;
}

.dvh21m3-copy strong{
  display:block;
  overflow:hidden;
  color:#102b27;
  font-size:.75rem;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dvh21m3-copy small{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:#74807c;
  font-size:.65rem;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dvh21m3-item time{
  color:#89938f;
  font-size:.59rem;
  white-space:nowrap;
}

@media(max-width:700px){
  .dvh21m3-head{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .dvh21m3-head small{
    text-align:left;
  }

  .dvh21m3-item{
    grid-template-columns:12px minmax(0,1fr);
  }

  .dvh21m3-item time{
    grid-column:2;
    margin-top:-2px;
  }

  .dvh21m3-copy strong,
  .dvh21m3-copy small{
    white-space:normal;
  }
}